From 21dd61eeb281b561348cc036165cd41aba2490ca Mon Sep 17 00:00:00 2001 From: Yosevu Kilonzo Date: Fri, 21 Oct 2022 09:52:20 +0900 Subject: [PATCH] test: add basic Home spec --- .gitignore | 1 + cypress.config.ts | 4 +- cypress/e2e/Home.cy.ts | 19 +++++++ cypress/e2e/basicTests.cy.ts | 96 ----------------------------------- package.json | 5 +- src/components/SiteHeader.tsx | 2 +- yarn.lock | 2 +- 7 files changed, 27 insertions(+), 102 deletions(-) create mode 100644 cypress/e2e/Home.cy.ts delete mode 100644 cypress/e2e/basicTests.cy.ts diff --git a/.gitignore b/.gitignore index 5baa3abe..58527000 100644 --- a/.gitignore +++ b/.gitignore @@ -27,3 +27,4 @@ dist-ssr .clj-kondo .calva .nrepl-port +cypress/videos diff --git a/cypress.config.ts b/cypress.config.ts index 91f0fd01..302a44f1 100644 --- a/cypress.config.ts +++ b/cypress.config.ts @@ -2,6 +2,6 @@ import { defineConfig } from "cypress"; export default defineConfig({ e2e: { - baseUrl: 'https://eats.seesparkbox.com/refresh' + baseUrl: 'http://127.0.0.1:5173/sparkeats/', }, -}); +}); \ No newline at end of file diff --git a/cypress/e2e/Home.cy.ts b/cypress/e2e/Home.cy.ts new file mode 100644 index 00000000..0b873579 --- /dev/null +++ b/cypress/e2e/Home.cy.ts @@ -0,0 +1,19 @@ +/// + +export {} + +const env = { + development: { + url: 'http://127.0.0.1:5173/sparkeats/', + } +}; + +context('Given a user is on a Home page', () => { + context('When the user accesses the Sparkeats Logo in the Site Header', () => { + specify('Then the link goes to the Home page', () => { + cy.visit('/') + cy.findByRole('link', { name: 'Return to the Sparkeats Home page.'}).click(); + cy.url().should('eq', env.development.url); + }); + }); +}); diff --git a/cypress/e2e/basicTests.cy.ts b/cypress/e2e/basicTests.cy.ts deleted file mode 100644 index b9a144f9..00000000 --- a/cypress/e2e/basicTests.cy.ts +++ /dev/null @@ -1,96 +0,0 @@ -/// - -//Admin empty export to make this spec file a module -export { } - -context('Given a user is in the homepage', () => { - - specify('The user can see the descriptive texts properly', () => { - - cy.visit('/') - - cy.log('**Verifying that the banner is present**') - cy.findByRole('heading', { name: 'Sparkeats' }).should('be.visible') - cy.findByRole('link', { name: 'Sparkeats logo' }).should('be.visible') - - cy.log('**Verifying the locaton picker region**') - cy.findByRole('button', { name: 'All Places' }).should('be.visible') - }) - - specify('The user can view the location selector combobox', () => { - cy.log('**Verifying the dropdown options**') - cy.findByRole('button', { name: 'All Places' }).click() - cy.findByRole('heading', { name: 'Pick a Location' }).parent().within(() => { - cy.findAllByRole('listitem').should($options => { - expect($options.length > 0).to.be.true - }) - }) - }) - - specify('The user should be able to view the list of restarurants in the section below the location selector', () => { - cy.log('**Verifying that the restaurant cards are shown up correctly**') - cy.findAllByRole('link', { name: /\d+ Review[\S]*/ }).should($options => { - expect($options.length > 0).to.be.true - }) - }) - - specify('The user is able to view the footer region as well', () => { - cy.log('**Verifying the footer region**') - cy.findByRole('contentinfo').should($el => { - - const textInFooterWithoutSpaces = $el.text().trim().replaceAll('\n', '').replaceAll(' ', '') - - expect(textInFooterWithoutSpaces).to.include('Food is an important part of Sparkbox culture. When traveling, we often wonder where to eat and drink. Enter Sparkeats, our way to review and find the best restaraunts in town—wherever that might be'.replaceAll(' ', '')) - - expect(textInFooterWithoutSpaces).to.include('Copy about the apprenticeship program can go here. This content needs to be written. Copy about the apprenticeship program can go here. This content needs to be written'.replaceAll(' ', '')) - - expect(textInFooterWithoutSpaces).to.include('Sparkbox leads the way toward a better web as we craft responsive websites and web applications—and empower you to do the same'.replaceAll(' ', '')) - }) - }) -}) - -context('Given a user is in the homepage', () => { - context('When the user selects a particular location from the combobox', () => { - specify('The user should see a filtered list of restaurants based on the selected location', () => { - - let randomLocation = '' - - cy.visit('/') - - cy.log('**Select a location randomly from the list**') - cy.findByRole('button', { name: 'All Places' }).click() - - cy.findByRole('heading', { name: 'Pick a Location' }).parent().within(() => { - cy.findAllByRole('listitem').as('options').then($options => { - let listOfLocations = $options.get().map(option => option.textContent!.trim()) - randomLocation = listOfLocations[Math.floor(Math.random() * listOfLocations.length)] - - cy.log(`The randomly chosen location is ${randomLocation}`) - cy.get('@options').contains(randomLocation).click() - }) - }) - - cy.log('**Verify that the filtered list is correct**') - cy.findAllByRole('list').within(() => { - cy.findAllByText(randomLocation.toUpperCase(), { exact: false }).each(($cityTextInCard, index) => { - debugger - expect($cityTextInCard.text()).to.include(randomLocation) - }) - }) - }) - - specify('The user can navigate to the restaurant details page for the after the user clicks on one of the restaurant card options', () => { - - cy.log('**Randomly click one of the restaurants from the filtered list**') - cy.findAllByRole('list').as('filteredList').then($restaurants => { - let listOfRestaurants = $restaurants.get().map(option => option.textContent!.trim()) - let randomIndex = Math.floor(Math.random() * listOfRestaurants.length) - - cy.get('@filteredList').within(() => { - cy.findAllByRole('heading', { level: 3 }).eq(randomIndex).click() - }) - }) - }) - }) -}) - diff --git a/package.json b/package.json index 318f10ff..22096ec1 100644 --- a/package.json +++ b/package.json @@ -12,7 +12,8 @@ "postinstall": "husky install", "lint:ts": "eslint src", "lint:scss": "stylelint src/**/*.scss", - "test": "cypress run" + "test:e2e": "yarn cypress open", + "test:e2e:ci": "yarn cypress run" }, "dependencies": { "react": "^18.2.0", @@ -31,7 +32,7 @@ "@vitejs/plugin-react": "^2.1.0", "eslint": "^8.25.0", "eslint-config-prettier": "^8.5.0", - "cypress": "^10.9.0", + "cypress": "^10.10.0", "husky": "^8.0.1", "mysql2": "^2.3.3", "nbb": "^0.7.135", diff --git a/src/components/SiteHeader.tsx b/src/components/SiteHeader.tsx index a48c7379..dfcccfff 100644 --- a/src/components/SiteHeader.tsx +++ b/src/components/SiteHeader.tsx @@ -2,7 +2,7 @@ export const SiteHeader = () => { return (

Sparkeats by Sparkbox

- +
); }; diff --git a/yarn.lock b/yarn.lock index 98100963..b12ae4f1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1320,7 +1320,7 @@ csstype@^3.0.2: resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9" integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw== -cypress@^10.9.0: +cypress@^10.10.0: version "10.10.0" resolved "https://registry.yarnpkg.com/cypress/-/cypress-10.10.0.tgz#fd671297b2ca3e64dfffd55fe3857c388cfbb695" integrity sha512-bU8r44x1NIYAUNNXt3CwJpLOVth7HUv2hUhYCxZmgZ1IugowDvuHNpevnoZRQx1KKOEisLvIJW+Xen5Pjn41pg==