frontend: Create a Cypress project for the EE Console

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/7825
GitOrigin-RevId: 74e6009ae4fd3915c3c705194c8221dada4e21a6

frontend/README.md

@@ -25,7 +25,9 @@ The Hasura Console is an admin dashboard to manage the connected database and to
 - [Development Tooling](https://main--614d7904644d03004addd43b.chromatic.com/?path=/story/dev-tooling--page)
 - [Design System's Storybook](https://main--614d7904644d03004addd43b.chromatic.com)
   - [How to create/document new Components](./libs/console/legacy-ce/src/lib/docs/dev/ComponentDoc.stories.mdx)
-- [Cypress Dashboard](https://dashboard.cypress.io/projects/5yiuic)
+- Cypress Dashboard
+  - [CE Console](https://dashboard.cypress.io/projects/5yiuic)
+  - [EE Console](https://dashboard.cypress.io/projects/672jmv)
 - [Cypress README](./cypress/README.md)
 
 ## How to

frontend/apps/console-ce-e2e/README.md

@@ -2,24 +2,5 @@
 
 ## Useful resources
 
-- [Cypress Dashboard for the Console project](https://dashboard.cypress.io/projects/5yiuic)
-
-## Writing Tests
-
-- Read ups
-
-  - If this is your first time with cypress, check out this getting started [guide](https://docs.cypress.io/guides/getting-started/writing-your-first-test.html)
-
-  - Read cypress [best practices](https://docs.cypress.io/guides/references/best-practices.html)
-
-- File Structure
-
-  The top-level directories in [console/cypress](../../console/cypress) are auto-generated by cypress except [helpers](../../console/cypress/helpers). To understand the use of each directory check out [Folder Structure](https://docs.cypress.io/guides/core-concepts/writing-and-organizing-tests.html#Folder-Structure)
-
-  [helpers](../../console/cypress/helpers) directory is used for sharing reusable functions/constants across tests. Before adding a resubale function in this directory, consider if it will be better as a custom cypress command, if so, then add it to [Support](../../console/cypress/support) directory following this [guide](https://docs.cypress.io/api/cypress-api/custom-commands.html), preferrably to [command.ts](../../console/cypress/support/commands.ts) file.
-
-- Adding a Test
-
-  Tests go to [integration](../../console/cypress/integration) directory, where there are folders corresponding to Components in [Services](../../console/src/components/Services) directory (The top-level routes on the console).
-
-  Each of these folders contains different test folders, named after the particular feature they are testing. For example [create-table](../../console/cypress/integration/data/create-table) folder tests the functionality of creating a table from the console UI.
+- [Cypress Dashboard for Console CE](https://dashboard.cypress.io/projects/5yiuic)
+- [Hasura's Testing Best Practices](../../libs/console/legacy-ce/src/lib/docs/dev/testing/3-testing-best-practices.stories.mdx)

frontend/apps/console-ce-e2e/cypress.config.ts

@@ -33,7 +33,7 @@ export default myDefineConfig({
     ...nxConfig,
 
     video: false,
-    baseUrl: 'http://localhost:4200',
+
     specPattern: [
       'src/e2e/**/*test.{js,jsx,ts,tsx}',
       'src/support/**/*unit.test.{js,ts}',

frontend/apps/console-ee-e2e/README.md

@@ -0,0 +1,6 @@
+# Console EE E2E tests
+
+## Useful resources
+
+- [Cypress Dashboard for Console EE](https://dashboard.cypress.io/projects/672jmv)
+- [Hasura's Testing Best Practices](../../libs/console/legacy-ce/src/lib/docs/dev/testing/3-testing-best-practices.stories.mdx)

frontend/apps/console-ee-e2e/cypress.config.ts

@@ -1,6 +1,24 @@
 import { defineConfig } from 'cypress';
 import { nxE2EPreset } from '@nrwl/cypress/plugins/cypress-preset';
 
+const nxConfig = nxE2EPreset(__dirname);
+
 export default defineConfig({
-  e2e: nxE2EPreset(__dirname),
+  viewportWidth: 1440,
+  viewportHeight: 900,
+
+  retries: {
+    openMode: 0,
+    // Allows for one automatic retry per test
+    // see: https://docs.cypress.io/guides/guides/test-retries#How-It-Works
+    runMode: 1,
+  },
+
+  projectId: '672jmv',
+
+  e2e: {
+    ...nxConfig,
+
+    video: false,
+  },
 });

frontend/apps/console-ee-e2e/project.json

@@ -13,6 +13,10 @@
       "configurations": {
         "production": {
           "devServerTarget": "console-ee:serve:production"
+        },
+        "ci": {
+          "parallel": true,
+          "record": true
         }
       }
     },

frontend/apps/console-ee-e2e/src/e2e/smokeTest.e2e.cy.ts

@@ -1,5 +1,5 @@
 // The main reason behind this e2e is to make sure we don’t have circular dependency that block loading the console at all
-describe('console-ee is loading', () => {
+describe('Console EE', () => {
   beforeEach(() => cy.visit('/'));
 
   // The main goal of this E2E test is to make sure we don’t have circular dependencies that block