Add testes

.github/workflows/workflow.yml

@@ -0,0 +1,33 @@
+name: CI Pipeline
+
+on: pull_request
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Setup repo
+        uses: actions/checkout@v4
+
+      - name: Setup Deno
+        uses: denoland/setup-deno@61fe2df320078202e33d7d5ad347e7dcfa0e8f31 # v1.1.2
+        with:
+          deno-version: v2.x
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: "18"
+
+      - name: Install Cypress Binary
+        run: npm install -g cypress
+
+      - name: Install Deno dependencies
+        run: deno install
+
+      - name: Add global npm bin to PATH
+        run: echo "/opt/hostedtoolcache/node/18.20.5/x64/bin" >> $GITHUB_PATH # Adiciona o caminho ao PATH
+
+      - name: Run tests
+        run: deno task start & deno task test-terminal

components/minicart/Minicart.tsx

@@ -135,6 +135,7 @@ export default function Cart(
 
         {/* This contains the STOREFRONT cart. */}
         <input
+          data-test-name="cart-json"
           type="hidden"
           name="storefront-cart"
           value={encodeURIComponent(

components/product/AddToCartButton.tsx

@@ -120,6 +120,7 @@ function AddToCartButton(props: Props) {
 
       <button
         disabled
+        data-test-name="add-to-cart"
         class={clx("flex-grow peer-checked:hidden", _class?.toString())}
         hx-on:click={useScript(onClick)}
       >

cypress.config.js

@@ -0,0 +1,7 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:8000',
+  },
+})

cypress/e2e/buy-product.cy.js

@@ -0,0 +1,16 @@
+describe("My First Test", () => {
+  it('finds the content "type"', () => {
+    cy.visit("http://localhost:8000/");
+
+    const SIX_SECONDS = 6000;
+    cy.wait(SIX_SECONDS);
+
+    cy.get('button[data-test-name="add-to-cart"]').first().click();
+
+    cy.get('input[data-test-name="cart-json"]').invoke("val").should(
+      "not.be.empty",
+    );
+
+    cy.visit("http://localhost:8000/checkout");
+  });
+});

cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "[email protected]",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

cypress/support/e2e.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "./commands";
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

deno.json

@@ -1,6 +1,8 @@
 {
   "imports": {
-    "$fresh/": "https://deno.land/x/[email protected]/",
+    "$fresh/": "https://deno.land/x/[email protected]/",
+    "cypress": "npm:[email protected]",
+    "deno-cypress-runner": "npm:deno-cypress-runner@^1.0.0",
     "preact": "npm:[email protected]",
     "preact-render-to-string": "npm:[email protected]",
     "@cliffy/prompt": "jsr:@cliffy/prompt@^1.0.0-rc.5",
@@ -29,15 +31,15 @@
     "@zaubrik/djwt": "jsr:@zaubrik/djwt@^3.0.2",
     "fast-json-patch": "npm:fast-json-patch@^3.1.1",
     "https://esm.sh/*[email protected]": "npm:[email protected]",
-    "@deco/deco": "jsr:@deco/deco@1.102.3",
+    "@deco/deco": "jsr:@deco/deco@1.107.0",
     "simple-git": "npm:simple-git@^3.25.0",
     "std/": "https://deno.land/[email protected]/",
-    "deco/": "https://cdn.jsdelivr.net/gh/deco-cx/deco@1.102.3/",
-    "apps/": "https://cdn.jsdelivr.net/gh/deco-cx/apps@0.59.16/",
+    "deco/": "https://cdn.jsdelivr.net/gh/deco-cx/deco@1.107.1/",
+    "apps/": "https://cdn.jsdelivr.net/gh/deco-cx/apps@0.64.2/",
     "@preact/signals": "https://esm.sh/*@preact/[email protected]",
     "@preact/signals-core": "https://esm.sh/*@preact/[email protected]",
     "daisyui": "npm:[email protected]",
-    "@deco/dev": "jsr:@deco/dev@1.102.0"
+    "@deco/dev": "jsr:@deco/dev@1.107.0"
   },
   "tasks": {
     "start": "deno run -A --unstable-http --env https://deco.cx/run -- deno task dev",
@@ -54,8 +56,10 @@
     "build": "deno run -A dev.ts build",
     "preview": "deno run -A main.ts",
     "generate-icons": "deno run -A --unstable static/generate-icons.ts",
-    "dev": "deno run -A --env --unstable --unstable-hmr dev.ts",
-    "reload": "deno cache -r https://deco.cx/run"
+    "dev": "deno run -A --env --unstable-kv --unstable-hmr dev.ts",
+    "reload": "deno cache -r https://deco.cx/run",
+    "test": "cypress open",
+    "test-terminal": "cypress run"
   },
   "githooks": {
     "pre-commit": "check"
@@ -66,20 +70,17 @@
     "README.md",
     "_fresh",
     "**/_fresh/*",
-    ".deco"
+    ".deco",
+    "cypress",
+    "cypress.config.js"
   ],
   "lint": {
     "rules": {
-      "exclude": [
-        "no-window"
-      ],
-      "tags": [
-        "fresh",
-        "recommended"
-      ]
+      "exclude": ["no-window"],
+      "tags": ["fresh", "recommended"]
     }
   },
-  "nodeModulesDir": false,
+  "nodeModulesDir": true,
   "compilerOptions": {
     "jsx": "react-jsx",
     "jsxImportSource": "preact",

fresh.gen.ts

@@ -4,7 +4,7 @@
 
 import * as $_app from "./routes/_app.tsx";
 
-import { type Manifest } from "$fresh/server.ts";
+import type { Manifest } from "$fresh/server.ts";
 
 const manifest = {
   routes: {

tailwind.css

@@ -3,15 +3,14 @@
 @tailwind utilities;
 
 @layer base {
-
   /* Allow changing font family via CMS */
   html {
     font-family: var(--font-family);
   }
 
   /** Remove default styles from input[type=number] */
-  input[type=number]::-webkit-inner-spin-button,
-  input[type=number]::-webkit-outer-spin-button {
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"]::-webkit-outer-spin-button {
     -webkit-appearance: none;
     margin: 0;
   }
@@ -25,15 +24,15 @@
 }
 
 .group:disabled .group-disabled\:animate-progress {
-  animation: progress-frame ease normal
+  animation: progress-frame ease normal;
 }
 
 @keyframes progress-frame {
   0% {
-    --dot-progress: 0%
+    --dot-progress: 0%;
   }
 
   to {
-    --dot-progress: 100%
+    --dot-progress: 100%;
   }
-}
+}