added cypress tests and github action config

.github/ISSUE_TEMPLATE/workflows/main.yml

@@ -0,0 +1,23 @@
+name: E2E on Chrome
+
+on: [push]
+
+jobs:
+  install:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Cypress run
+        uses: cypress-io/github-action@v3
+        with:
+          project: ./cypress
+          browser: firefox
+          build: yarn build
+          start: yarn start
+          wait-on: 'http://localhost:3000'
+        env:
+          COMMERCE_PROVIDER: ${{ secrets.COMMERCE_PROVIDER }}
+          NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN: ${{ secrets.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN }}
+          NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN: ${{ secrets.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN }}

cypress.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  projectId: 'mjja77',
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+    baseUrl: 'http://localhost:3000',
+    viewportHeight: 1000,
+    viewportWidth: 1280,
+  },
+})

cypress/e2e/header.cy.ts

@@ -0,0 +1,25 @@
+describe('Header', () => {
+  beforeEach(() => {
+    cy.visit('/')
+  })
+
+  it('links to the correct pages', () => {
+    cy.getBySel('logo').click()
+    cy.location('pathname').should('eq', '/')
+
+    cy.getBySel('nav-link-search').click()
+    cy.location('pathname').should('eq', '/search')
+
+    cy.getBySel('nav-link-home-page').click()
+    cy.location('pathname').should('eq', '/search/frontpage')
+  })
+
+  it('the search bar returns the correct search results', () => {
+    cy.getBySel('search-input').eq(0).type('poke{enter}')
+
+    cy.get('[data-test="product-tag"]').within(() => {
+      cy.get('[data-test="product-name"]').should('contain', 'Poke Ball')
+      cy.get('[data-test="product-price"]').should('contain', '$9.99 USD')
+    })
+  })
+})

cypress/e2e/home.cy.ts

@@ -0,0 +1,76 @@
+describe('Home Page', () => {
+  it('displays all 3 products on the home page', () => {
+    cy.visit('http://localhost:3000')
+    cy.get('[data-test="product-tag"]')
+      .eq(0)
+      .within(() => {
+        cy.get('[data-test="product-name"]').should('contain', 'Poke Ball')
+        cy.get('[data-test="product-price"]').should('contain', '$9.99 USD')
+      })
+
+    cy.get('[data-test="product-tag"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="product-name"]').should('contain', 'Great Ball')
+        cy.get('[data-test="product-price"]').should('contain', '$99.99 USD')
+      })
+
+    cy.get('[data-test="product-tag"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="product-name"]').should('contain', 'Ultra Ball')
+        cy.get('[data-test="product-price"]').should('contain', '$999.99 USD')
+      })
+    cy.get('[data-test="product-tag"]')
+      .eq(3)
+      .within(() => {
+        cy.get('[data-test="product-name"]').should('contain', 'Master Ball')
+        cy.get('[data-test="product-price"]').should(
+          'contain',
+          '$999999999.99 USD'
+        )
+      })
+    cy.get('[data-test="product-tag"]')
+      .eq(4)
+      .within(() => {
+        cy.get('[data-test="product-name"]').should('contain', 'Potion')
+        cy.get('[data-test="product-price"]').should('contain', '$9.99 USD')
+      })
+    cy.get('[data-test="product-tag"]')
+      .eq(4)
+      .within(() => {
+        cy.get('[data-test="product-name"]').should('contain', 'Super Potion')
+        cy.get('[data-test="product-price"]').should('contain', '$99.99 USD')
+      })
+    cy.get('[data-test="product-tag"]')
+      .eq(5)
+      .within(() => {
+        cy.get('[data-test="product-name"]').should('contain', 'Hyper Potion')
+        cy.get('[data-test="product-price"]').should('contain', '$999.99 USD')
+      })
+    cy.get('[data-test="product-tag"]')
+      .eq(6)
+      .within(() => {
+        cy.get('[data-test="product-name"]').should('contain', 'Max Potion')
+        cy.get('[data-test="product-price"]').should('contain', '$9999.99 USD')
+      })
+    cy.get('[data-test="product-tag"]')
+      .eq(7)
+      .within(() => {
+        cy.get('[data-test="product-name"]').should('contain', 'Fire Stone')
+        cy.get('[data-test="product-price"]').should('contain', '$999.99 USD')
+      })
+    cy.get('[data-test="product-tag"]')
+      .eq(8)
+      .within(() => {
+        cy.get('[data-test="product-name"]').should('contain', 'Water Stone')
+        cy.get('[data-test="product-price"]').should('contain', '$999.99 USD')
+      })
+    cy.get('[data-test="product-tag"]')
+      .eq(9)
+      .within(() => {
+        cy.get('[data-test="product-name"]').should('contain', 'Thunder Stone')
+        cy.get('[data-test="product-price"]').should('contain', '$999.99 USD')
+      })
+  })
+})

cypress/e2e/shopping-cart.cy.ts

@@ -0,0 +1,8 @@
+describe('Shopping Cart', () => {
+  it('users can add products to the cart', () => {
+    cy.visit('/')
+    cy.getBySel('product-tag').eq(0).click()
+    cy.get('[aria-label="Add to Cart"]').click()
+    cy.get('[aria-label="Cart items: 1"]').contains('1')
+  })
+})

cypress/fixtures/example.json

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

cypress/integration/home.spec.js

@@ -0,0 +1,6 @@
+describe('Home Page', () => {
+  it('displays all 3 products on the home page', () => {
+    cy.visit('http://localhost:3001')
+    cy.get('[data-test="product-tag"]')
+  })
+})

cypress/support/commands.ts

@@ -0,0 +1,41 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts 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) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }
+
+Cypress.Commands.add('getBySel', (selector, ...args) => {
+  return cy.get(`[data-test=${selector}]`, ...args)
+})

cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts 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')

package.json

@@ -7,16 +7,20 @@
     "packages/*"
   ],
   "scripts": {
-    "build": "turbo run build --filter=next-commerce...",
+    "build": "turbo run build",
     "dev": "turbo run dev",
     "start": "turbo run start",
     "types": "turbo run types",
-    "prettier-fix": "prettier --write ."
+    "prettier-fix": "prettier --write .",
+    "find:unused": "npx next-unused",
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run"
   },
   "devDependencies": {
     "husky": "^7.0.4",
     "prettier": "^2.5.1",
-    "turbo": "^1.2.16"
+    "turbo": "^1.2.16",
+    "typescript": "^4.7.4"
   },
   "husky": {
     "hooks": {

site/components/common/Navbar/Navbar.tsx

@@ -20,17 +20,21 @@ const Navbar: FC<NavbarProps> = ({ links }) => (
       <div className={s.nav}>
         <div className="flex items-center flex-1">
           <Link href="/">
-            <a className={s.logo} aria-label="Logo">
+            <a className={s.logo} aria-label="Logo" data-test="logo">
               <Logo />
             </a>
           </Link>
           <nav className={s.navMenu}>
             <Link href="/search">
-              <a className={s.link}>All</a>
+              <a className={s.link} data-test="nav-link-search">
+                All
+              </a>
             </Link>
             {links?.map((l) => (
               <Link href={l.href} key={l.href}>
-                <a className={s.link}>{l.label}</a>
+                <a className={s.link} data-test="nav-link-home-page">
+                  {l.label}
+                </a>
               </Link>
             ))}
           </nav>

site/components/common/Searchbar/Searchbar.tsx

@@ -43,6 +43,7 @@ const Searchbar: FC<Props> = ({ className, id = 'search' }) => {
         placeholder="Search for products..."
         defaultValue={router.query.q}
         onKeyUp={handleKeyUp}
+        data-test="search-input"
       />
       <div className={s.iconContainer}>
         <svg className={s.icon} fill="currentColor" viewBox="0 0 20 20">

site/components/product/ProductTag/ProductTag.tsx

@@ -16,7 +16,7 @@ const ProductTag: React.FC<ProductTagProps> = ({
   fontSize = 32,
 }) => {
   return (
-    <div className={cn(s.root, className)}>
+    <div className={cn(s.root, className)} data-test="product-tag">
       <h3 className={s.name}>
         <span
           className={cn({ [s.fontsizing]: fontSize < 32 })}
@@ -24,11 +24,14 @@ const ProductTag: React.FC<ProductTagProps> = ({
             fontSize: `${fontSize}px`,
             lineHeight: `${fontSize}px`,
           }}
+          data-test="product-name"
         >
           {name}
         </span>
       </h3>
-      <div className={s.price}>{price}</div>
+      <div className={s.price} data-test="product-price">
+        {price}
+      </div>
     </div>
   )
 }

site/package.json

@@ -29,6 +29,7 @@
     "autoprefixer": "^10.4.2",
     "body-scroll-lock": "^4.0.0-beta.0",
     "clsx": "^1.1.1",
+    "cypress": "^10.4.0",
     "email-validator": "^2.0.4",
     "js-cookie": "^3.0.1",
     "keen-slider": "^6.6.3",

site/tsconfig.json

@@ -23,8 +23,8 @@
       "@components/*": ["components/*"],
       "@commerce": ["../packages/commerce/src"],
       "@commerce/*": ["../packages/commerce/src/*"],
-      "@framework": ["../packages/local/src"],
-      "@framework/*": ["../packages/local/src/*"]
+      "@framework": ["../packages/shopify/src"],
+      "@framework/*": ["../packages/shopify/src/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],

tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress", "node"]
+  },
+  "include": ["**/*.ts"]
+}