added cypress tests and GitHub action config

app/pageHomePage.cy.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+import HomePage from './page'
+
+describe('<HomePage />', () => {
+  it('renders', () => {
+    // see: https://on.cypress.io/mounting-react
+    cy.mount(<HomePage />)
+  })
+})

components/common/Navbar/Navbar.tsx

@@ -0,0 +1,64 @@
+import { Searchbar, UserNav } from "@components/common";
+import { Container, Logo } from "@components/ui";
+import Link from "next/link";
+import { FC } from "react";
+import s from "./Navbar.module.css";
+import NavbarRoot from "./NavbarRoot";
+
+interface Link {
+  href: string;
+  label: string;
+}
+
+interface NavbarProps {
+  links?: Link[];
+}
+
+const Navbar: FC<NavbarProps> = ({ links }) => (
+  <NavbarRoot>
+    <Container clean className="mx-auto max-w-8xl px-6">
+      <div className={s.nav}>
+        <div className="flex items-center flex-1">
+          <Link href="/">
+            <a className={s.logo} aria-label="Logo" data-test="logo">
+              <Logo />
+            </a>
+          </Link>
+          <nav
+            role="navigation"
+            aria-label="Main Navigation"
+            className={s.navMenu}
+          >
+            <Link href="/search">
+              <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} data-test="nav-link-home-page">
+                  {l.label}
+                </a>
+              </Link>
+            ))}
+          </nav>
+        </div>
+        {process.env.COMMERCE_SEARCH_ENABLED && (
+          <div className="justify-center flex-1 hidden lg:flex">
+            <Searchbar />
+          </div>
+        )}
+        <div className="flex items-center justify-end flex-1 space-x-8">
+          <UserNav />
+        </div>
+      </div>
+      {process.env.COMMERCE_SEARCH_ENABLED && (
+        <div className="flex pb-4 lg:px-6 lg:hidden">
+          <Searchbar id="mobile-search" />
+        </div>
+      )}
+    </Container>
+  </NavbarRoot>
+);
+
+export default Navbar;

cypress.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+    },
+  },
+
+  component: {
+    devServer: {
+      framework: "next",
+      bundler: "webpack",
+    },
+  },
+});

cypress/e2e/spec.cy.ts

@@ -0,0 +1,5 @@
+describe('template spec', () => {
+  it('passes', () => {
+    cy.visit('https://example.cypress.io')
+  })
+})

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,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")
+      })
+  })
+})

cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <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/support/component-index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+    <!-- Used by Next.js to inject CSS. -->
+    <div id="__next_css__DO_NOT_USE__"></div>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

cypress/support/component.ts

@@ -0,0 +1,39 @@
+// ***********************************************************
+// This example support/component.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'
+
+import { mount } from 'cypress/react'
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount
+    }
+  }
+}
+
+Cypress.Commands.add("getBySel", (selector, ...args) => {
+  return cy.get(`[data-test=${selector}]`, ...args)
+})
+
+
+// Example use:
+// cy.mount(<MyComponent />)

cypress/support/e2e.ts

@@ -0,0 +1,17 @@
+// ***********************************************************
+// 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'

next.config.ts

@@ -1,10 +1,9 @@
 export default {
   experimental: {
-    ppr: true,
-    inlineCss: true,
-    useCache: true,
-    reactOwnerStack: true,
-    newDevOverlay: true
+    ppr: true, // Partial Prerendering
+    inlineCss: true, // Inline CSS for faster page loads
+    useCache: true, // Experimental caching
+    newDevOverlay: true, // New development overlay
   },
   images: {
     formats: ['image/avif', 'image/webp'],
@@ -12,8 +11,8 @@ export default {
       {
         protocol: 'https',
         hostname: 'cdn.shopify.com',
-        pathname: '/s/files/**'
-      }
-    ]
-  }
+        pathname: '/s/files/**',
+      },
+    ],
+  },
 };

package.json

@@ -1,11 +1,18 @@
 {
-  "private": true,
+  "name": "commerce",
+  "version": "1.0.0",
   "scripts": {
-    "dev": "next dev --turbopack",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
+    "analyze": "BUNDLE_ANALYZE=both next build",
+    "lint": "next lint",
     "prettier": "prettier --write --ignore-unknown .",
     "prettier:check": "prettier --check --ignore-unknown .",
+    "prettier-fix": "prettier --write .",
+    "find:unused": "npx next-unused",
+    "cypress:open": "cypress open",
+    "cypress:run": "cypress run",
     "test": "pnpm prettier:check"
   },
   "dependencies": {