added cypress tests and GitHub action config

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/cypress.json

@@ -0,0 +1,5 @@
+{
+  "baseUrl": "http://localhost:3000",
+  "viewportHeight": 1000,
+  "viewportWidth": 1280
+}

site/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"
+}

site/cypress/integration/header.spec.js

@@ -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.only('the search bar returns the correct search results', () => {
+    cy.getBySel('search-input').eq(0).type('star{enter}')
+
+    cy.get('[data-test="product-tag"]').within(() => {
+      cy.get('[data-test="product-name"]').should('contain', 'Star Wars')
+      cy.get('[data-test="product-price"]').should('contain', '$25.00 USD')
+    })
+  })
+})

site/cypress/integration/home.spec.js

@@ -0,0 +1,25 @@
+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', 'Star Wars')
+        cy.get('[data-test="product-price"]').should('contain', '$25.00 USD')
+      })
+
+    cy.get('[data-test="product-tag"]')
+      .eq(1)
+      .within(() => {
+        cy.get('[data-test="product-name"]').should('contain', 'SQL')
+        cy.get('[data-test="product-price"]').should('contain', '$25.00 USD')
+      })
+
+    cy.get('[data-test="product-tag"]')
+      .eq(2)
+      .within(() => {
+        cy.get('[data-test="product-name"]').should('contain', 'Code')
+        cy.get('[data-test="product-price"]').should('contain', '$25.00 USD')
+      })
+  })
+})

site/cypress/integration/shopping-cart.spec.js

@@ -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')
+  })
+})

site/cypress/plugins/index.js

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

site/cypress/support/commands.js

@@ -0,0 +1,3 @@
+Cypress.Commands.add('getBySel', (selector, ...args) => {
+  return cy.get(`[data-test=${selector}]`, ...args)
+})

site/cypress/support/index.js

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

site/package.json

@@ -9,7 +9,9 @@
     "analyze": "BUNDLE_ANALYZE=both next build",
     "lint": "next lint",
     "prettier-fix": "prettier --write .",
-    "find:unused": "npx next-unused"
+    "find:unused": "npx next-unused",
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run"
   },
   "sideEffects": false,
   "dependencies": {
@@ -29,6 +31,7 @@
     "autoprefixer": "^10.4.2",
     "body-scroll-lock": "^4.0.0-beta.0",
     "clsx": "^1.1.1",
+    "cypress": "^9.6.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/shopify/src"],
-      "@framework/*": ["../packages/local/src/*"]
+      "@framework/*": ["../packages/shopify/src/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.d.ts", "**/*.ts", "**/*.tsx", "**/*.js"],