added cypress tests and GitHub action config

This commit is contained in:
Dinushi Herath 2022-05-13 10:08:17 +10:00
parent 4bb8fcb06d
commit 5e96a23710
17 changed files with 33133 additions and 5783 deletions

22
.github/workflows/main.yml vendored Normal file
View File

@ -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@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 }}

5
cypress.json Normal file
View File

@ -0,0 +1,5 @@
{
"baseUrl": "http://localhost:3000",
"viewportHeight": 1000,
"viewportWidth": 1280
}

26526
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

View File

@ -11,9 +11,12 @@
"dev": "turbo run dev",
"start": "turbo run start",
"types": "turbo run types",
"prettier-fix": "prettier --write ."
"prettier-fix": "prettier --write .",
"cypress:open": "cypress open",
"cypress:run": "cypress run"
},
"devDependencies": {
"cypress": "^9.6.0",
"husky": "^7.0.4",
"prettier": "^2.5.1",
"turbo": "^1.1.2"

View File

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

View File

@ -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>

View File

@ -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">

View File

@ -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>
)
}

View File

@ -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"
}

View File

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

View File

@ -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")
})
})
})

View File

@ -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")
})
})

View File

@ -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
}

View File

@ -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)
})

View File

@ -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')

View File

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

12212
yarn.lock

File diff suppressed because it is too large Load Diff