Merge d48a1ebb3396347c635eb60e8629d10cb76a68c7 into f059d4e6c4211196500264d7419de17be27844fc

.github/workflows/main.yml

@@ -0,0 +1,31 @@
+name: E2E on Chrome
+on: [push]
+
+jobs:
+  install:
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        containers: [1, 2, 3]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Cypress run
+        uses: cypress-io/github-action@v3
+        with:
+          project: ./site
+          browser: chrome
+          build: yarn build
+          start: yarn start
+          wait-on: "http://localhost:3000"
+          record: true
+          parallel: true
+        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_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+            # pass GitHub token to allow accurately detecting a build vs a re-run build
+            GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package.json

@@ -14,6 +14,7 @@
     "prettier-fix": "prettier --write ."
   },
   "devDependencies": {
+    "cypress": "^9.6.0",
     "husky": "^7.0.4",
     "prettier": "^2.5.1",
     "turbo": "^1.1.2"

packages/shopify/src/commerce.config.json

@@ -1,7 +1,7 @@
 {
   "provider": "shopify",
   "features": {
-    "wishlist": false,
+    "wishlist": true,
     "customerAuth": true
   }
 }

site/components/common/Navbar/Navbar.tsx

@@ -17,20 +17,20 @@ interface NavbarProps {
 const Navbar: FC<NavbarProps> = ({ links }) => (
   <NavbarRoot>
     <Container clean className="mx-auto max-w-8xl px-6">
-      <div className={s.nav}>
+      <div className={s.nav} data-test="navbar">
         <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/ProductCard/ProductCard.tsx

@@ -71,11 +71,11 @@ const ProductCard: FC<Props> = ({
               />
             )}
             {!noNameTag && (
-              <div className={s.header}>
+              <div className={s.header} data-test="product-card">
                 <h3 className={s.name}>
-                  <span>{product.name}</span>
+                  <span data-test="product-name">{product.name}</span>
                 </h3>
-                <div className={s.price}>
+                <div className={s.price} data-test="product-price">
                   {`${price} ${product.price?.currencyCode}`}
                 </div>
               </div>

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,12 @@ 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,6 @@
+{
+    "baseUrl": "http://localhost:3000",
+    "viewportHeight": 1000,
+    "viewportWidth": 1280,
+    "projectId": "93f5w8"
+}

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,24 @@
+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("purple{enter}")
+        
+        cy.get('[data-test="product-card"]').within(() => {
+            cy.get('[data-test="product-name"]').should("contain", "Purple dress")
+            cy.get('[data-test="product-price"]').should("contain", "$95.00 AUD")
+        })
+    })
+})

site/cypress/integration/home.spec.js

@@ -0,0 +1,18 @@
+describe("Home Page", () => {
+    it("displays all 3 products on the home page", () =>{
+        cy.visit("/")
+        cy.get('[data-test="product-tag"]')
+            .eq(0)
+            .within(() => {
+                cy.get('[data-test="product-name"]').should("contain", "Pink Dress")
+                cy.get('[data-test="product-price"]').should("contain", "$100.00 AUD")
+        })
+
+        cy.get('[data-test="product-tag"]')
+        .eq(1)
+        .within(() => {
+            cy.get('[data-test="product-name"]').should("contain", "Purple dress")
+            cy.get('[data-test="product-price"]').should("contain", "$95.00 AUD")
+        })
+    })
+})

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,29 @@
+// ***********************************************
+// 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.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.1",
     "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"],