-
-
Notifications
You must be signed in to change notification settings - Fork 17
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #470 from openclimatefix/new-cypress-testing
[merge paused for India MVP] New cypress testing
- Loading branch information
Showing
20 changed files
with
5,039 additions
and
4,083 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,2 +1,5 @@ | ||
| node_modules | ||
| .turbo | ||
| build/** | ||
| dist/** | ||
| .next/** |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import { defineConfig } from "cypress"; | ||
| // Populate process.env with values from .env file | ||
| const dotenv = require("dotenv"); | ||
|
|
||
| dotenv.config({ path: ".env.local" }); | ||
| dotenv.config(); | ||
|
|
||
| export default defineConfig({ | ||
| env: { | ||
| auth0_username: process.env.NEXT_PUBLIC_AUTH0_USERNAME, | ||
| auth0_password: process.env.NEXT_PUBLIC_AUTH0_PASSWORD, | ||
| auth0_domain: process.env.NEXT_PUBLIC_AUTH0_DOMAIN, | ||
| auth0_audience: process.env.NEXT_PUBLIC_AUTH0_AUDIENCE, | ||
| auth0_scope: process.env.NEXT_PUBLIC_AUTH0_SCOPE, | ||
| auth0_client_id: process.env.NEXT_PUBLIC_AUTH0_CLIENTID, | ||
| auth0_client_secret: process.env.AUTH0_CLIENT_SECRET, | ||
| baseUrl: process.env.AUTH0_BASE_URL | ||
| }, | ||
|
|
||
| chromeWebSecurity: false, | ||
| // ...rest of the Cypress project config | ||
| projectId: process.env.CYPRESS_PROJECT_ID, | ||
|
|
||
| e2e: { | ||
| setupNodeEvents(on, config) { | ||
| // implement node event listeners here | ||
| } | ||
| } | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,108 @@ | ||
| describe("Load the page", () => { | ||
| beforeEach(function () { | ||
| // cy.visit("http://localhost:3002/"); | ||
| cy.loginToAuth0(Cypress.env("auth0_username"), Cypress.env("auth0_password")); | ||
| }); | ||
| it("successfully loads", () => { | ||
| // Should now already be logged in and have a session cookie. | ||
| cy.visit("http://localhost:3002/"); | ||
| // Ensure Auth0 has redirected us back to the local app. | ||
| cy.location("href").should("equal", "http://localhost:3002/"); | ||
| }); | ||
|
|
||
| //////////////////////////////// | ||
| // GENERAL | ||
| //////////////////////////////// | ||
| it("loads the main header elements", () => { | ||
| cy.visit("http://localhost:3002/"); | ||
| cy.location("href").should("equal", "http://localhost:3002/"); | ||
| // Header | ||
| cy.get("header").should("exist"); | ||
| cy.get("header").should("be.visible"); | ||
| // Nav | ||
| cy.get("header").should("contain", "PV Forecast"); | ||
| cy.get("header").should("contain", "Solar Sites"); | ||
| cy.get("header").should("contain", "Delta"); | ||
| // Active page is highlighted | ||
| cy.get("header").contains("PV Forecast").should("have.class", "text-ocf-yellow"); | ||
| cy.get("header").contains("Solar Sites").should("not.have.class", "text-ocf-yellow"); | ||
| // | ||
| cy.get("header a[href='https://quartz.solar/']").should("exist"); | ||
| cy.get("header a[href='https://quartz.solar/']").should("be.visible"); | ||
| cy.get("header").should("contain", "powered by"); | ||
| cy.get("header").contains("powered by").should("exist"); | ||
| cy.get("header").contains("powered by").should("be.visible"); | ||
| cy.get("header") | ||
| .contains("powered by") | ||
| .siblings("a") | ||
| .first() | ||
| .should("have.attr", "href", "https://www.openclimatefix.org/"); | ||
| // Profile dropdown menu | ||
| cy.get("header #headlessui-menu-item-6").should("not.exist"); | ||
| cy.get("header button").contains("Open user menu").should("exist"); | ||
| cy.get("header button").contains("Open user menu").parent().click(); | ||
| cy.get("header #headlessui-menu-item-6").should("exist"); | ||
| cy.get("header #headlessui-menu-item-6").should("be.visible"); | ||
| cy.get("header #headlessui-menu-item-6").should("contain", "4-hour forecast"); | ||
| cy.get("header #headlessui-menu-item-7").should("contain", "Dashboard mode"); | ||
| cy.get("header #headlessui-menu-item-8").should("contain", "Documentation"); | ||
| cy.get("header #headlessui-menu-item-9").should("contain", "Contact"); | ||
| cy.get("header #headlessui-menu-item-10").should("contain", "Give feedback"); | ||
| cy.get("header #headlessui-menu-item-11").should("contain", "Sign out"); | ||
| }); | ||
|
|
||
| //////////////////////////////// | ||
| // PV FORECAST | ||
| //////////////////////////////// | ||
| // TODO: work out how to actually test the map elements | ||
| it.skip("test the PV Forecast map elements", () => { | ||
| cy.visit("http://localhost:3002/"); | ||
| cy.location("href").should("equal", "http://localhost:3002/"); | ||
| // TODO: Add tests for the PV Forecast page elements, probably with mocked data. | ||
| // national chart header | ||
| cy.get('[data-test="national-chart-header"]').contains("National").should("exist"); | ||
| cy.get('[data-test="pv-ocf-forecast-headline-figure"]') | ||
| .contains("National") | ||
| .should("be.visible"); | ||
| cy.get('[data-test="forecast-headline-figures"]').siblings().first().should("exist").click(); | ||
| cy.get('[data-test="forecast-headline-figures"]').siblings().next().should("exist"); | ||
| cy.get('[data-test="forecast-headline-figures"]').siblings().first().trigger("mouseover"); | ||
| cy.get('[data-test="forecast-headline-figures"]') | ||
| .siblings() | ||
| .first() | ||
| .invoke("mouseover") | ||
| .should("contain", "PV Live / OCF Forecast"); | ||
| cy.get('[data-test="forecast-headline-figures"]') | ||
| .siblings() | ||
| .first() | ||
| .trigger("mouseout") | ||
| .should("not.contain", "PV Live / OCF Forecast"); | ||
| cy.get('[data-test="forecast-headline-figures"]') | ||
| .siblings() | ||
| .next() | ||
| .trigger("mouseover") | ||
| .contains("Next OCF Forecast"); | ||
| cy.get('[data-test="forecast-headline-figures"]') | ||
| .siblings() | ||
| .next() | ||
| .trigger("mouseout") | ||
| .should("not.contain", "Next OCF Forecast"); | ||
| // national chart play button | ||
| // play icon visible | ||
| // cy.get("data-test=national-chart-play-button").should("exist", "be.visible"); | ||
| // // pause icon not visible | ||
| // // play icon visible | ||
| // cy.get("data-test=national-chart-play-button").should("exist", "be.visible").click(); | ||
| // cy.get("data-test=national-chart-play-button").should("exist", "be.visible").click(); | ||
|
|
||
| // national chart | ||
| // gsp chart header | ||
| // gsp chart | ||
| // gsp chart close button | ||
| // national pv chart legend check that elements are there | ||
| // legend select and deselect lines and check that they disappear and reappear | ||
| // national map with date and time | ||
| // national map with color scale | ||
| // national map buttons for capacity and generation | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| { | ||
| "name": "Using fixtures to represent data", | ||
| "email": "[email protected]", | ||
| "body": "Fixtures are a great way to mock data for responses to routes" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,158 @@ | ||
| /// <reference types="cypress" /> | ||
|
|
||
| declare namespace Cypress { | ||
| import { authService } from "../src/machines/authMachine"; | ||
| import { createTransactionService } from "../src/machines/createTransactionMachine"; | ||
| import { publicTransactionService } from "../src/machines/publicTransactionsMachine"; | ||
| import { contactsTransactionService } from "../src/machines/contactsTransactionsMachine"; | ||
| import { personalTransactionService } from "../src/machines/personalTransactionsMachine"; | ||
| import { | ||
| User, | ||
| BankAccount, | ||
| Like, | ||
| Comment, | ||
| Transaction, | ||
| BankTransfer, | ||
| Contact | ||
| } from "../src/models"; | ||
|
|
||
| interface CustomWindow extends Window { | ||
| authService: typeof authService; | ||
| createTransactionService: typeof createTransactionService; | ||
| publicTransactionService: typeof publicTransactionService; | ||
| contactTransactionService: typeof contactsTransactionService; | ||
| personalTransactionService: typeof personalTransactionService; | ||
| } | ||
|
|
||
| type dbQueryArg = { | ||
| entity: string; | ||
| query: object | [object]; | ||
| }; | ||
|
|
||
| type LoginOptions = { | ||
| rememberUser: boolean; | ||
| }; | ||
|
|
||
| interface Chainable { | ||
| /** | ||
| * Window object with additional properties used during test. | ||
| */ | ||
| window(options?: Partial<Loggable & Timeoutable>): Chainable<CustomWindow>; | ||
|
|
||
| /** | ||
| * Custom command to make taking Percy snapshots with full name formed from the test title + suffix easier | ||
| */ | ||
| visualSnapshot(maybeName?): Chainable<any>; | ||
|
|
||
| getBySel(dataTestAttribute: string, args?: any): Chainable<JQuery<HTMLElement>>; | ||
| getBySelLike(dataTestPrefixAttribute: string, args?: any): Chainable<JQuery<HTMLElement>>; | ||
|
|
||
| /** | ||
| * Cypress task for directly querying to the database within tests | ||
| */ | ||
| task( | ||
| event: "filter:database", | ||
| arg: dbQueryArg, | ||
| options?: Partial<Loggable & Timeoutable> | ||
| ): Chainable<any[]>; | ||
|
|
||
| /** | ||
| * Cypress task for directly querying to the database within tests | ||
| */ | ||
| task( | ||
| event: "find:database", | ||
| arg?: any, | ||
| options?: Partial<Loggable & Timeoutable> | ||
| ): Chainable<any>; | ||
|
|
||
| /** | ||
| * Find a single entity via database query | ||
| */ | ||
| database(operation: "find", entity: string, query?: object, log?: boolean): Chainable<any>; | ||
|
|
||
| /** | ||
| * Filter for data entities via database query | ||
| */ | ||
| database(operation: "filter", entity: string, query?: object, log?: boolean): Chainable<any>; | ||
|
|
||
| /** | ||
| * Fetch React component instance associated with received element subject | ||
| */ | ||
| reactComponent(): Chainable<any>; | ||
|
|
||
| /** | ||
| * Select data range within date range picker component | ||
| */ | ||
| pickDateRange(startDate: Date, endDate: Date): Chainable<void>; | ||
|
|
||
| /** | ||
| * Select transaction amount range | ||
| */ | ||
| setTransactionAmountRange(min: number, max: number): Chainable<any>; | ||
|
|
||
| /** | ||
| * Paginate to the next page in transaction infinite-scroll pagination view | ||
| */ | ||
| nextTransactionFeedPage(service: string, page: number): Chainable<any>; | ||
|
|
||
| /** | ||
| * Logs-in user by using UI | ||
| */ | ||
| login(username: string, password: string, loginOptions?: LoginOptions): void; | ||
|
|
||
| /** | ||
| * Logs-in user by using API request | ||
| */ | ||
| loginByApi(username: string, password?: string): Chainable<Response>; | ||
|
|
||
| /** | ||
| * Logs-in user by using Google API request | ||
| */ | ||
| loginByGoogleApi(): Chainable<Response>; | ||
|
|
||
| /** | ||
| * Logs-in user by using Okta API request | ||
| */ | ||
| loginByOktaApi(username: string, password?: string): Chainable<Response>; | ||
|
|
||
| /** | ||
| * Logs-in user by navigating to Okta tenant with cy.origin() | ||
| */ | ||
| loginByOkta(username: string, password: string): Chainable<Response>; | ||
|
|
||
| /** | ||
| * Logs in bypassing UI by triggering XState login event | ||
| */ | ||
| loginByXstate(username: string, password?: string): Chainable<any>; | ||
|
|
||
| /** | ||
| * Logs out via bypassing UI by triggering XState logout event | ||
| */ | ||
| logoutByXstate(): Chainable<string>; | ||
|
|
||
| /** | ||
| * Logs in via Auth0 login page | ||
| */ | ||
| loginToAuth0(username: string, password: string): Chainable<any>; | ||
|
|
||
| /** | ||
| * Switch current user by logging out current user and logging as user with specified username | ||
| */ | ||
| switchUserByXstate(username: string): Chainable<any>; | ||
|
|
||
| /** | ||
| * Create Transaction via bypassing UI and using XState createTransactionService | ||
| */ | ||
| createTransaction(payload): Chainable<any>; | ||
|
|
||
| /** | ||
| * Logs in to AWS Cognito via Amplify Auth API bypassing UI using Cypress Task | ||
| */ | ||
| loginByCognitoApi(username: string, password: string): Chainable<any>; | ||
|
|
||
| /** | ||
| * Logs in to AWS Cognito Federated via cy.origin() | ||
| */ | ||
| loginByCognito(username: string, password: string): Chainable<any>; | ||
| } | ||
| } |
Oops, something went wrong.