used wain-ion-timeout at 120 seconds

.github/workflows/main.yml

@@ -13,8 +13,10 @@ jobs:
         uses: cypress-io/github-action@v3.0.4
         with:
           browser: chrome
+          build: yarn build
           start: yarn dev
           wait-on: 'http://localhost:3000'
+          wait-on-timeout: 120
         env:
           COMMERCE_PROVIDER: ${{ secrets.COMMERCE_PROVIDER }}
           NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN: ${{ secrets.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN }}

package.json

@@ -17,6 +17,7 @@
   },
   "devDependencies": {
     "cypress": "^9.6.0",
+    "dotenv": "^16.0.0",
     "husky": "^7.0.4",
     "prettier": "^2.5.1",
     "turbo": "^1.1.2"

site/comments.md

@@ -284,6 +284,26 @@ it.only('the search bar returns the correct search results', () => {
 
 But even then, the search feature does not filter results. If you can make this work in the latest app template, then please let me know. If it is not possible for the app to filter products, we should remove this section from the instructions.
 
+It is painful to work with environment variables in Vercel. In fact. Some troubleshooting reveals not all the env vars defined in the `.env.local` file are undefined. This out this console.log in `Navbar.tsx` file.
+
+```js
+console.log('COMMERCE_PROVIDER: ', process.env.COMMERCE_PROVIDER)
+console.log(
+  'NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN: ',
+  process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN
+)
+console.log(
+  'NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN: ',
+  process.env.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN
+)
+console.log(
+  'NEXT_PUBLIC_COMMERCE_SEARCH_ENABLED: ',
+  process.env.NEXT_PUBLIC_COMMERCE_SEARCH_ENABLED
+)
+```
+
+
+
 ________
 
 ## [Part 4 Running Our Tests with GitHub Actions](https://learn.cypress.io/tutorials/running-our-tests-with-github-actions)
@@ -345,4 +365,45 @@ When did we create a `header.spec.js` file? It is possible that one might miss t
     └── index.js
 ```
 
-#
+___
+
+The new Vercel repo advises yarn to be used as opposed to npm.
+
+At the time of writing, there is a hard-blocker with CI. 
+
+https://github.com/muratkeremozcan/nextjs-cypress/runs/6289885177?check_suite_focus=true
+
+Here is an attempt to make it work:
+
+```yml
+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.0.4
+        with:
+          browser: chrome
+          build: yarn build
+          start: yarn dev
+          wait-on: 'http://localhost:3000'
+          wait-on-timeout: 120
+        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 }}
+          NEXT_PUBLIC_COMMERCE_SEARCH_ENABLED: true
+
+```
+
+
+
+
+

site/components/common/Navbar/Navbar.tsx

@@ -14,6 +14,20 @@ interface NavbarProps {
   links?: Link[]
 }
 
+console.log('COMMERCE_PROVIDER: ', process.env.COMMERCE_PROVIDER)
+console.log(
+  'NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN: ',
+  process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN
+)
+console.log(
+  'NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN: ',
+  process.env.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN
+)
+console.log(
+  'NEXT_PUBLIC_COMMERCE_SEARCH_ENABLED: ',
+  process.env.NEXT_PUBLIC_COMMERCE_SEARCH_ENABLED
+)
+
 const Navbar: FC<NavbarProps> = ({ links }) => (
   <NavbarRoot>
     <Container clean className="mx-auto max-w-8xl px-6">
@@ -42,7 +56,7 @@ const Navbar: FC<NavbarProps> = ({ links }) => (
             ))}
           </nav>
         </div>
-        {process.env.NEXT_PUBLIC_COMMERCE_SEARCH_ENABLED && (
+        {true && (
           <div className="justify-center flex-1 hidden lg:flex">
             <Searchbar />
           </div>
@@ -51,7 +65,7 @@ const Navbar: FC<NavbarProps> = ({ links }) => (
           <UserNav />
         </div>
       </div>
-      {process.env.NEXT_PUBLIC_COMMERCE_SEARCH_ENABLED && (
+      {true && (
         <div className="flex pb-4 lg:px-6 lg:hidden">
           <Searchbar id="mobile-search" />
         </div>