added cypress tests and GitHub action config

.github/workflows/main.yml

@@ -0,0 +1,23 @@
+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
+        with:
+          project: ./site
+          browser: chrome
+          build: yarn build
+          start: yarn start
+          wait-on: 'http://localhost:3000'
+        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.config.js

@@ -0,0 +1,13 @@
+//import axios from 'axios'
+const axios = require('axios')
+
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:3000',
+    specPattern: 'cypress/tests/**/*.spec.{js,jsx,ts,tsx}',
+    viewportHeight: 1000,
+    viewportWidth: 1280,
+  },
+})

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/support/commands.js

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

cypress/support/e2e.js

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

cypress/tests/UI/auth.spec.js

@@ -0,0 +1,66 @@
+describe('User Sign-up and Login', function () {
+  beforeEach(function () {
+    cy.intercept('POST', '/api/2022-07/graphql.json').as('signup')
+  })
+
+  it('should allow a visitor to sign-up,login and logout', function () {
+    const userInfo = {
+      firstName: 'Ashar',
+      lastName: 'Ali',
+      email: 'Ashar' + Math.random() + '@gmail.com',
+      password: 's3cret',
+    }
+
+    // Sign-up User
+    cy.visit('/')
+
+    cy.getBySel('avatarButton').should('be.visible').click()
+    cy.getBySel('loginModal').should('be.visible').and('contain', 'Sign Up')
+    cy.getBySel('signup').click()
+    cy.getBySel('signupModal').should('be.visible').and('contain', 'Log In')
+    cy.getBySel('signupModal').within(($form) => {
+      cy.getBySel('signup-first-name')
+        .click()
+        .type(userInfo.firstName)
+        .should('have.value', userInfo.firstName)
+      cy.getBySel('signup-last-name')
+        .click()
+        .type(userInfo.lastName)
+        .should('have.value', userInfo.lastName)
+      cy.getBySel('signup-email')
+        .click()
+        .type(userInfo.email)
+        .should('have.value', userInfo.email)
+      cy.getBySel('signup-password')
+        .type(userInfo.password)
+        .should('have.value', userInfo.password)
+      cy.getBySel('signup-submit').click()
+      cy.wait('@signup')
+    })
+    cy.getBySel('signupModal').should('not.exist')
+
+    // Login User
+    cy.getBySel('avatarButton').click()
+    cy.getBySel('signupModal').should('be.visible').and('contain', 'Log In')
+    cy.getBySel('LogIn').click()
+    cy.getBySel('loginModal')
+      .should('be.visible')
+      .and('contain', 'Sign Up')
+      .within(($form) => {
+        cy.getBySel('signin-email')
+          .click()
+          .type(userInfo.email)
+          .should('have.value', userInfo.email)
+        cy.getBySel('signin-password')
+          .type(userInfo.password)
+          .should('have.value', userInfo.password)
+        cy.getBySel('signin-submit').click()
+        cy.wait('@signup')
+      })
+
+    // logout user
+    cy.getBySel('avatarButton').click()
+    cy.getBySel('logoutButton').should('be.visible').click()
+    cy.getBySel('logoutButton').should('not.exist')
+  })
+})

cypress/tests/UI/search-products.spec.js

@@ -0,0 +1,18 @@
+describe('Header', () => {
+  beforeEach(() => {
+    cy.visit('/')
+  })
+
+  it.only('the search bar returns the correct search results', () => {
+    cy.getBySel('search-input').eq(0).type('navy{enter}')
+    cy.get('.animated.fadeIn').contains('Showing 2 results for "navy"')
+
+    // search by Price: Low to high
+    cy.visit('/search?q=navy&sort=price-asc')
+    cy.getBySel('productPrice').eq(0).contains('2,500.00')
+
+    // search by Price: High to low
+    cy.visit('/search?q=navy&sort=price-desc')
+    cy.getBySel('productPrice').eq(0).contains('7,000.00')
+  })
+})

cypress/tests/UI/shopping-cart.spec.js

@@ -0,0 +1,30 @@
+describe('Shopping Cart', () => {
+  beforeEach(function () {
+    cy.intercept('GET', '/_next/data/development/en-US/product/*').as('product')
+  })
+
+  it('users can add and remove products to the cart', () => {
+    cy.visit('/')
+    cy.getBySel('product-tag').eq(0).click()
+    cy.getBySel('addToCart').should('be.visible').click()
+    cy.getBySel('cartItems').should('be.visible').and('contain', '1')
+    cy.getBySel('closeSidebar').should('be.visible').click()
+
+    //Add another product from related products
+    cy.getBySel('relatedProducts').eq(1).click()
+    cy.wait(2000)
+    cy.getBySel('product-tag').within(() => {
+      cy.getBySel('product-name').should('be.visible')
+      cy.getBySel('product-price').should('be.visible')
+    })
+    cy.getBySel('nextProductImage').should('be.visible').click()
+    cy.getBySel('previousProductImage').should('be.visible').click()
+    cy.getBySel('addToCart').should('be.visible').click()
+    cy.getBySel('cartItems').should('be.visible').and('contain', '2')
+
+    //View cart and remove item
+    cy.getBySel('goToCart').click()
+    cy.get('[data-test="removeItem"]:nth-child(1) button').first().click()
+    cy.getBySel('cartItems').should('be.visible').and('contain', '1')
+  })
+})