created GitHub Actions Workflow Config

.github/workflows/main.yml

@@ -0,0 +1,22 @@
+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@v2
+        with:
+          browser: chrome
+          build: npm run build
+          start: npm run start
+          wait-on: 'http://localhost:3000'
+        env:
+          COMMERCE_PROVIDER: ${{ secrets.COMMERCE_PROVIDER }}
+          NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN: ${{ secrets.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN }}
+          NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN: ${{ secrets.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN }}

.prettierrc

@@ -1,5 +1,5 @@
 {
-  "semi": false,
+  "semi": true,
   "singleQuote": true,
   "tabWidth": 2,
   "useTabs": false

cypress/integration/header.spec.js

@@ -1,18 +1,27 @@
 describe('Header', () => {
   beforeEach(() => {
-    cy.visit('/')
-  })
+    cy.visit('/');
+  });
 
   it('links to the correct pages', () => {
-    cy.getBySel('logo').click()
-    cy.location('pathname').should('eq', '/')
+    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-search').click();
+    cy.location('pathname').should('eq', '/search');
 
-    cy.getBySel('nav-link-home-page').click({ multiple: true })
-    cy.location('pathname').should('eq', '/search/featured')
-  })
+    cy.getBySel('nav-link-home-page').click({ multiple: true });
+    cy.location('pathname').should('eq', '/search/featured');
+  });
 
-  it('the search bar returns the correct search results', () => {})
-})
+  it.only('the search bar returns the correct search results', () => {
+    cy.getBySel('search-input').eq(0).type('Linux{Enter}');
+
+    cy.getBySel('product-tag')
+      .eq(2)
+      .within(() => {
+        cy.getBySel('product-name').should('contain', 'Linux Shirt');
+        cy.getBySel('product-price').should('contain', '$35.00 USD');
+      });
+  });
+});

cypress/integration/home.spec.js

@@ -1,29 +1,26 @@
 describe('Home Page', () => {
   it('displays all 3 products on the home page', () => {
-    cy.visit('/')
+    cy.visit('/');
 
     cy.getBySel('product-tag')
       .eq(0)
       .within(() => {
-        cy.getBySel('product-name').should(
-          'contain',
-          'New Short Sleeve T-Shirt'
-        )
-        cy.getBySel('product-price').should('contain', '$25.00 USD')
-      })
+        cy.getBySel('product-name').should('contain', 'Code Shirt');
+        cy.getBySel('product-price').should('contain', '$25.00 USD');
+      });
 
     cy.getBySel('product-tag')
       .eq(1)
       .within(() => {
-        cy.getBySel('product-name').should('contain', 'Lightweight Jacket')
-        cy.getBySel('product-price').should('contain', '$249.99 USD')
-      })
+        cy.getBySel('product-name').should('contain', 'Dev Sticker Pack');
+        cy.getBySel('product-price').should('contain', '$30.00 USD');
+      });
 
     cy.getBySel('product-tag')
       .eq(2)
       .within(() => {
-        cy.getBySel('product-name').should('contain', 'Shirt')
-        cy.getBySel('product-price').should('contain', '$25.00 USD')
-      })
-  })
-})
+        cy.getBySel('product-name').should('contain', 'Linux Shirt');
+        cy.getBySel('product-price').should('contain', '$35.00 USD');
+      });
+  });
+});

cypress/integration/shopping-cart.spec.js

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

cypress/plugins/index.js

@@ -19,4 +19,4 @@
 module.exports = (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
-}
+};

cypress/support/commands.js

@@ -25,5 +25,5 @@
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
 
 Cypress.Commands.add('getBySel', (selector, ...args) => {
-  return cy.get(`[data-test=${selector}]`, ...args)
-})
+  return cy.get(`[data-test=${selector}]`, ...args);
+});

cypress/support/index.js

@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import './commands';
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')

package-lock.json

@@ -10,6 +10,9 @@
         "site",
         "packages/*"
       ],
+      "dependencies": {
+        "classnames": "^2.3.1"
+      },
       "devDependencies": {
         "cypress": "^9.5.4",
         "husky": "^7.0.4",
@@ -4669,6 +4672,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
     "node_modules/clean-stack": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
@@ -18368,6 +18376,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
     "clean-stack": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",

package.json

@@ -26,5 +26,8 @@
       "pre-commit": "turbo run lint"
     }
   },
-  "packageManager": "yarn@1.22.17"
+  "packageManager": "yarn@1.22.17",
+  "dependencies": {
+    "classnames": "^2.3.1"
+  }
 }

site/commerce.config.json

@@ -2,8 +2,8 @@
   "features": {
     "cart": true,
     "search": true,
-    "wishlist": false,
-    "customerAuth": false,
-    "customCheckout": false
+    "wishlist": true,
+    "customerAuth": true,
+    "customCheckout": true
   }
 }

site/components/common/Searchbar/Searchbar.tsx

@@ -1,5 +1,5 @@
 import { FC, memo, useEffect } from 'react';
-import cn from 'clsx';
+import cn from 'classnames';
 import s from './Searchbar.module.css';
 import { useRouter } from 'next/router';
 
@@ -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/common/UserNav/CustomerMenuContent/CustomerMenuContent.tsx

@@ -58,7 +58,7 @@ export default function CustomerMenuContent() {
         <a
           className={cn(s.link, 'justify-between')}
           onClick={() => {
-            setTheme(theme === 'dark' ? 'light' : 'dark');
+            setTheme(theme === 'dark' ? 'light' : 'light');
           }}
         >
           <div>

site/components/product/ProductSidebar/ProductSidebar.tsx

@@ -59,6 +59,7 @@ const ProductSidebar: FC<ProductSidebarProps> = ({ product, className }) => {
         {process.env.COMMERCE_CART_ENABLED && (
           <Button
             aria-label="Add to Cart"
+            data-test="add-to-cart"
             type="button"
             className={s.button}
             onClick={addToCart}

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"],