chore(frontend): Add testing library to the EE E2E tests

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/8498
GitOrigin-RevId: 3168d103907b48514e6044179e81c8602e293b0c
This commit is contained in:
Stefano Magni 2023-03-30 12:41:03 +02:00 committed by hasura-bot
parent ed813655f6
commit 0d078f2aca
12 changed files with 36 additions and 34 deletions

View File

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

View File

@ -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
// `<a href="/settings">...</a>`
// is being covered by another element:
// `<div class="font-semibold text-base w-full" style="color: rgb(54, 156, 199);">Telemetry</div>`
// 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');
});
});

View File

@ -4,38 +4,38 @@ describe('Console EE', () => {
// The main goal of this E2E test is to make sure we dont 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');
});
});

View File

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

View File

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

View File

@ -370,7 +370,7 @@ class Main extends React.Component {
</div>
</Link>
</div>
<ul className="flex gap-2">
<ul className="flex gap-2" data-testid="Nav bar">
<HeaderNavItem
title="API"
icon={<FaFlask aria-hidden="true" />}

View File

@ -44,7 +44,7 @@ class Landing extends React.Component {
<div className="ml-md">
<Button
icon={<FaEdit />}
data-test="data-create-actions"
data-testid="data-create-actions"
mode="primary"
onClick={handleClick}
>

View File

@ -58,7 +58,11 @@ const DataPageContainer = ({
: ''
}
>
<Link className={styles.linkBorder} to={`/data/manage`}>
<Link
data-testid="Data Manager"
className={styles.linkBorder}
to={`/data/manage`}
>
Data Manager
</Link>

View File

@ -54,7 +54,7 @@ insert_user(objects: [{name: "testuser"}] ){
return (
<Button
data-test="data-create-trigger"
data-testid="data-create-trigger"
mode="primary"
type="submit"
className="ml-md"

View File

@ -25,7 +25,7 @@ class RemoteSchema extends React.Component {
return (
<div className="ml-sm">
<Button
data-test="data-create-remote-schemas"
data-testid="data-create-remote-schemas"
mode="primary"
onClick={handleClick}
>

View File

@ -59,7 +59,7 @@ class ExportMetadata extends Component {
return (
<div className="inline-block">
<Button
data-test="data-export-metadata"
data-testid="data-export-metadata"
className="mr-md"
size="sm"
isLoading={isExporting}

View File

@ -563,7 +563,7 @@ class Main extends React.Component {
</div>
</Link>
</div>
<ul className="flex gap-2">
<ul className="flex gap-2" data-testid="Nav bar">
<HeaderNavItem
title="API"
icon={<FaFlask aria-hidden="true" />}