From 75d45bd14c932d5cbe061362e6c9a2e1424d9881 Mon Sep 17 00:00:00 2001 From: Mian Muhammad Date: Thu, 21 Apr 2022 11:59:13 +0500 Subject: [PATCH] created GitHub Actions Workflow Config --- .github/workflows/main.yml | 22 + .prettierrc | 2 +- cypress/integration/header.spec.js | 31 +- cypress/integration/home.spec.js | 27 +- cypress/integration/shopping-cart.spec.js | 7 + cypress/plugins/index.js | 2 +- cypress/support/commands.js | 4 +- cypress/support/index.js | 2 +- package-lock.json | 13 + package.json | 5 +- site/commerce.config.json | 6 +- .../components/common/Searchbar/Searchbar.tsx | 3 +- .../CustomerMenuContent.tsx | 2 +- .../product/ProductSidebar/ProductSidebar.tsx | 1 + site/tsconfig.json | 4 +- yarn.lock | 11673 ++++++++-------- 16 files changed, 5883 insertions(+), 5921 deletions(-) create mode 100644 .github/workflows/main.yml create mode 100644 cypress/integration/shopping-cart.spec.js diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml new file mode 100644 index 000000000..5bab7d7ef --- /dev/null +++ b/.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 }} diff --git a/.prettierrc b/.prettierrc index e1076edfa..17a99e4b1 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,5 +1,5 @@ { - "semi": false, + "semi": true, "singleQuote": true, "tabWidth": 2, "useTabs": false diff --git a/cypress/integration/header.spec.js b/cypress/integration/header.spec.js index 9cd7fd8d3..328ea96b7 100644 --- a/cypress/integration/header.spec.js +++ b/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'); + }); + }); +}); diff --git a/cypress/integration/home.spec.js b/cypress/integration/home.spec.js index 439942fe2..515969297 100644 --- a/cypress/integration/home.spec.js +++ b/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'); + }); + }); +}); diff --git a/cypress/integration/shopping-cart.spec.js b/cypress/integration/shopping-cart.spec.js new file mode 100644 index 000000000..fc5aa960a --- /dev/null +++ b/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(); + }); +}); diff --git a/cypress/plugins/index.js b/cypress/plugins/index.js index 59b2bab6e..8229063ad 100644 --- a/cypress/plugins/index.js +++ b/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 -} +}; diff --git a/cypress/support/commands.js b/cypress/support/commands.js index 890d885cb..22f1a3557 100644 --- a/cypress/support/commands.js +++ b/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); +}); diff --git a/cypress/support/index.js b/cypress/support/index.js index d68db96df..37a498fb5 100644 --- a/cypress/support/index.js +++ b/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') diff --git a/package-lock.json b/package-lock.json index a2f3a95c8..76f464336 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 850cf804a..4e6920979 100644 --- a/package.json +++ b/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" + } } diff --git a/site/commerce.config.json b/site/commerce.config.json index ad72b58de..6fb526aaf 100644 --- a/site/commerce.config.json +++ b/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 } } diff --git a/site/components/common/Searchbar/Searchbar.tsx b/site/components/common/Searchbar/Searchbar.tsx index 661283406..d118a5c98 100644 --- a/site/components/common/Searchbar/Searchbar.tsx +++ b/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 = ({ className, id = 'search' }) => { placeholder="Search for products..." defaultValue={router.query.q} onKeyUp={handleKeyUp} + data-test="search-input" />
diff --git a/site/components/common/UserNav/CustomerMenuContent/CustomerMenuContent.tsx b/site/components/common/UserNav/CustomerMenuContent/CustomerMenuContent.tsx index 9a3b7a4c9..e2057676e 100644 --- a/site/components/common/UserNav/CustomerMenuContent/CustomerMenuContent.tsx +++ b/site/components/common/UserNav/CustomerMenuContent/CustomerMenuContent.tsx @@ -58,7 +58,7 @@ export default function CustomerMenuContent() { { - setTheme(theme === 'dark' ? 'light' : 'dark'); + setTheme(theme === 'dark' ? 'light' : 'light'); }} >
diff --git a/site/components/product/ProductSidebar/ProductSidebar.tsx b/site/components/product/ProductSidebar/ProductSidebar.tsx index bf3c0c6c9..3d4a3d4cc 100644 --- a/site/components/product/ProductSidebar/ProductSidebar.tsx +++ b/site/components/product/ProductSidebar/ProductSidebar.tsx @@ -59,6 +59,7 @@ const ProductSidebar: FC = ({ product, className }) => { {process.env.COMMERCE_CART_ENABLED && (