From 0d078f2aca74611f3ba58da061b7cbf85cc8b7a4 Mon Sep 17 00:00:00 2001 From: Stefano Magni Date: Thu, 30 Mar 2023 12:41:03 +0200 Subject: [PATCH] chore(frontend): Add testing library to the EE E2E tests PR-URL: https://github.com/hasura/graphql-engine-mono/pull/8498 GitOrigin-RevId: 3168d103907b48514e6044179e81c8602e293b0c --- .../actionWithTransform.e2e.test.ts | 2 +- .../src/e2e/smokeTest.e2e.test.ts | 25 ++++++++----------- .../src/e2e/smokeTest.e2e.cy.ts | 22 ++++++++-------- .../console-ee-e2e/src/support/commands.ts | 1 + frontend/apps/console-ee-e2e/tsconfig.json | 2 +- .../legacy-ce/src/lib/components/Main/Main.js | 2 +- .../Services/Actions/Landing/Main.js | 2 +- .../Services/Data/DataPageContainer.js | 6 ++++- .../EventTriggers/Landing/EventTrigger.tsx | 2 +- .../RemoteSchema/Landing/RemoteSchema.js | 2 +- .../MetadataOptions/ExportMetadata.js | 2 +- .../legacy-ee/src/lib/components/Main/Main.js | 2 +- 12 files changed, 36 insertions(+), 34 deletions(-) diff --git a/frontend/apps/console-ce-e2e/src/e2e/actions/withTransform/actionWithTransform.e2e.test.ts b/frontend/apps/console-ce-e2e/src/e2e/actions/withTransform/actionWithTransform.e2e.test.ts index 75ddc6a67d2..25d86af6588 100644 --- a/frontend/apps/console-ce-e2e/src/e2e/actions/withTransform/actionWithTransform.e2e.test.ts +++ b/frontend/apps/console-ce-e2e/src/e2e/actions/withTransform/actionWithTransform.e2e.test.ts @@ -28,7 +28,7 @@ describe('Actions with Transform', () => { // -------------------- cy.log('**--- Click on the Create button of the Actions panel**'); - cy.get('[data-test=data-create-actions]').click(); + cy.get('[data-testid=data-create-actions]').click(); // Assign an alias to the most unclear selectors for future references cy.get('textarea').eq(0).as('actionDefinitionTextarea'); diff --git a/frontend/apps/console-ce-e2e/src/e2e/smokeTest.e2e.test.ts b/frontend/apps/console-ce-e2e/src/e2e/smokeTest.e2e.test.ts index 553f7d842ee..879b7af13d8 100644 --- a/frontend/apps/console-ce-e2e/src/e2e/smokeTest.e2e.test.ts +++ b/frontend/apps/console-ce-e2e/src/e2e/smokeTest.e2e.test.ts @@ -9,36 +9,33 @@ describe('Console CE', () => { cy.get('[data-test="graphiql-explorer-link"]').contains('GraphiQL'); // Go to data tab - cy.get('[data-test="data-tab-link"]').click(); + cy.findByTestId('Nav bar').findByText('Data').click(); // Data tab is loaded - cy.get('[data-test="sql-link"]').contains('SQL'); + cy.findByTestId('Data Manager').contains('Data Manager'); // Go to action tab - cy.get('[data-test="actions-tab-link"]').click(); + cy.findByTestId('Nav bar').findByText('Actions').click(); // Action tab is loaded - cy.get('[data-test="data-create-actions"]').contains('Create'); + cy.findByTestId('data-create-actions').contains('Create'); // Go to remote schema tab - cy.get('[data-test="remote schemas-tab-link"]').click(); + cy.findByTestId('Nav bar').findByText('Remote Schemas').click(); // Remote schema tab is loaded - cy.get('[data-test="data-create-remote-schemas"]').contains('Add'); + cy.findByTestId('data-create-remote-schemas').contains('Add'); // Go to the event tab - cy.get('[data-test="events-tab-link"]').click(); + cy.findByTestId('Nav bar').findByText('Events').click(); // Event tab is loaded - cy.get('[data-test="data-create-trigger"]').contains('Create'); + cy.findByTestId('data-create-trigger').contains('Create'); - // Temporary disable the settings check because - // `...` - // is being covered by another element: - // `
Telemetry
` // Go to the settings page - // cy.get('[href="/settings"]').click(); + cy.get('[href$="/settings"]').click(); + // Setting page is loaded - // cy.get('[data-test="data-export-metadata"]').contains('Export metadata'); + cy.findByTestId('data-export-metadata').contains('Export metadata'); }); }); diff --git a/frontend/apps/console-ee-e2e/src/e2e/smokeTest.e2e.cy.ts b/frontend/apps/console-ee-e2e/src/e2e/smokeTest.e2e.cy.ts index dd3b18eb201..b22970e99ca 100644 --- a/frontend/apps/console-ee-e2e/src/e2e/smokeTest.e2e.cy.ts +++ b/frontend/apps/console-ee-e2e/src/e2e/smokeTest.e2e.cy.ts @@ -4,38 +4,38 @@ describe('Console EE', () => { // The main goal of this E2E test is to make sure we don’t have circular dependencies that block // loading the console at all - it('should display welcome message', () => { + it('Should work', () => { // Graphiql tab loading properly cy.get('[data-test="graphiql-explorer-link"]').contains('GraphiQL'); // Go to data tab - cy.get('[data-test="data-tab-link"]').click(); + cy.findByTestId('Nav bar').findByText('Data').click(); // Data tab is loaded - cy.get('[data-test="sql-link"]').contains('SQL'); + cy.findByTestId('Data Manager').contains('Data Manager'); // Go to action tab - cy.get('[data-test="actions-tab-link"]').click(); + cy.findByTestId('Nav bar').findByText('Actions').click(); // Action tab is loaded - cy.get('[data-test="data-create-actions"]').contains('Create'); + cy.findByTestId('data-create-actions').contains('Create'); // Go to remote schema tab - cy.get('[data-test="remote schemas-tab-link"]').click(); + cy.findByTestId('Nav bar').findByText('Remote Schemas').click(); // Remote schema tab is loaded - cy.get('[data-test="data-create-remote-schemas"]').contains('Add'); + cy.findByTestId('data-create-remote-schemas').contains('Add'); // Go to the event tab - cy.get('[data-test="events-tab-link"]').click(); + cy.findByTestId('Nav bar').findByText('Events').click(); // Event tab is loaded - cy.get('[data-test="data-create-trigger"]').contains('Create'); + cy.findByTestId('data-create-trigger').contains('Create'); // Go to the settings page - cy.get('[href="/settings"]').click(); + cy.get('[href$="/settings"]').click(); // Setting page is loaded - cy.get('[data-test="data-export-metadata"]').contains('Export metadata'); + cy.findByTestId('data-export-metadata').contains('Export metadata'); }); }); diff --git a/frontend/apps/console-ee-e2e/src/support/commands.ts b/frontend/apps/console-ee-e2e/src/support/commands.ts index ed05c08d16e..5f433397f4d 100644 --- a/frontend/apps/console-ee-e2e/src/support/commands.ts +++ b/frontend/apps/console-ee-e2e/src/support/commands.ts @@ -8,6 +8,7 @@ // https://on.cypress.io/custom-commands // *********************************************** +import '@testing-library/cypress/add-commands'; import 'cypress-plugin-snapshots/commands'; // eslint-disable-next-line @typescript-eslint/no-namespace,@typescript-eslint/no-unused-vars declare namespace Cypress { diff --git a/frontend/apps/console-ee-e2e/tsconfig.json b/frontend/apps/console-ee-e2e/tsconfig.json index cc509a730e1..a159de92ffb 100644 --- a/frontend/apps/console-ee-e2e/tsconfig.json +++ b/frontend/apps/console-ee-e2e/tsconfig.json @@ -4,7 +4,7 @@ "sourceMap": false, "outDir": "../../dist/out-tsc", "allowJs": true, - "types": ["cypress", "node"] + "types": ["cypress", "node", "@testing-library/cypress"] }, "include": ["src/**/*.ts", "src/**/*.js", "cypress.config.ts"] } diff --git a/frontend/libs/console/legacy-ce/src/lib/components/Main/Main.js b/frontend/libs/console/legacy-ce/src/lib/components/Main/Main.js index 2c624fd82b5..bacc6fb3ad1 100644 --- a/frontend/libs/console/legacy-ce/src/lib/components/Main/Main.js +++ b/frontend/libs/console/legacy-ce/src/lib/components/Main/Main.js @@ -370,7 +370,7 @@ class Main extends React.Component { -