feat(ui): TE-2589 e2e setup and P0 tests (#1717)

* playwright setup

* alert list tests

* alert list done

* configuration

* feat(ui): TE-2589 e2e setup and P0 tests

* gh action

* remove hc

* fix action

* test run

* action file fix

* gh action fix

* env fix

* playwright command

* playwright command fix

* run server and wait for it to be up

* install pw browsers

* pw install

* fix tests and slack notification for action

* pwd fix in workflow

* gh action fix

* notification text update

* fix anomaly view test

* fixed flaky test

* update workflows npm ci issue

* E2E tests - Create alert (#1729)

* Create alert basic e2e test

* removed access token

* multi dimensional basic tests

* added comments

* Updated test cases

* undo'ed import

* fix(ui): Updated the test case

* fix(ui): Added Test cases for custom metric and advance options

* fix(ui): Added Test cases for Alert Details and anomaly

* fix(ui): Added Test cases for Onboarding page

* Test Check

* Anomaly test fix

* Anomaly View test fix

* Anomaly api test fix

* Anomaly test fix

* anomaly test updatded

* preventDefault added for Apply filter button

* Revert e2e yaml file change

* fix(ui): Added Test cases for Onboarding page when dataset is Empty

---------

Co-authored-by: harshilvelotio <[email protected]>

.github/workflows/fe-build-and-test.yaml

@@ -29,6 +29,6 @@ jobs:
       - name: Install dependencies, run test, and build
         run: |
           cd thirdeye-ui
-          npm ci
+          npm ci --legacy-peer-deps
           npm run test
           npm run build

.github/workflows/fe-e2e.yaml

@@ -0,0 +1,100 @@
+name: TE UI - E2E Tests
+on:
+  push:
+    branches:
+      - e2e-setup
+  workflow_dispatch:
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - name: Pull Repository
+        uses: actions/checkout@v4
+        with:
+          sparse-checkout: |
+            thirdeye-ui
+
+      - name: Install node and npm
+        uses: actions/setup-node@v3
+        with:
+          node-version: 14
+          cache: "npm"
+          cache-dependency-path: "./thirdeye-ui/package-lock.json"
+
+      - name: Install dependencies
+        run: |
+          cd thirdeye-ui
+          npm ci --legacy-peer-deps
+
+      - name: Install Playwright Browsers
+        run: |
+          cd thirdeye-ui
+          npx playwright install --with-deps
+
+      - name: Run local server
+        run: |
+          cd thirdeye-ui
+          npm run start &
+        env:
+          VERCEL_ACCESS_TOKEN: ${{ secrets.E2E_TOKEN }}
+          TE_DEV_PROXY_SERVER: ${{ secrets.E2E_PROXY }}
+
+      - name: Wait for server to be ready
+        run: |
+          until curl -s http://localhost:7004; do
+            echo "Waiting for server to be ready..."
+            sleep 5
+          done
+
+      - name: Run Playwright tests
+        run: |
+          cd thirdeye-ui
+          npx playwright test
+      - name: Extract Test Results
+        if: always()
+        id: test-results
+        run: |
+          # Extract all test results
+          cd thirdeye-ui
+          RESULTS=$(jq '[.suites[].specs[] | {name: .title, status: .ok}]' e2e-test-results.json)
+          # Failed and passed counts
+          FAILED_COUNT=$(echo "$RESULTS" | jq '[.[] | select(.status == false)] | length')
+          PASSED_COUNT=$(echo "$RESULTS" | jq '[.[] | select(.status == true)] | length')
+
+          # Extract titles of failed tests
+          FAILED_TITLES=$(echo "$RESULTS" | jq -r '[.[] | select(.status == false) | .name] | join(", ")')
+
+          # Export variables
+          echo "FAILED_COUNT=$FAILED_COUNT" >> $GITHUB_ENV
+          echo "PASSED_COUNT=$PASSED_COUNT" >> $GITHUB_ENV
+          echo "FAILED_TITLES=$FAILED_TITLES" >> $GITHUB_ENV
+      - name: Post status to ci-thirdeye slack channel
+        if: always()
+        run: |
+          # Set Slack message content
+          STATUS=${{ job.status }}
+          COLOR="good"
+          TITLE="✅ All E2E tests passed."
+          if [[ "$FAILED_COUNT" -gt 0 ]]; then
+            TITLE=" ❌ E2E tests failed. Please check the failing tests below."
+            COLOR="danger"
+          fi
+          MESSAGE="E2E Test Results:\\nPassed: ${{ env.PASSED_COUNT }}\\nFailed: ${{ env.FAILED_COUNT }}\\nFailed Tests: ${{ env.FAILED_TITLES }}"
+
+          # Post to Slack using curl
+          curl -X POST -H 'Content-type: application/json' \
+            --data "{
+              \"attachments\": [
+                {
+                  \"color\": \"$COLOR\",
+                  \"title\": \"$TITLE\",
+                  \"text\": \"$MESSAGE\",
+                }
+              ]
+            }" ${{ secrets.SLACK_WEBHOOK }}
+
+      - name: Stop local server
+        if: always()
+        run: |
+          kill $(lsof -t -i:7004);

.github/workflows/publish-frontend.yaml

@@ -44,7 +44,7 @@ jobs:
           then
             echo "Snapshot build detected. Generating dist with local build"
             export GH_SHA=$(git log -1 --format="%H")
-            npm ci
+            npm ci --legacy-peer-deps
             npm run test
             npm run build
             SNAPSHOT_VERSION_SUFFIX="-SNAPSHOT"

.github/workflows/release.yaml

@@ -29,7 +29,7 @@ jobs:
       - name: Release UI
         run: |
           cd thirdeye-ui
-          npm ci
+          npm ci --legacy-peer-deps
           npm run build
           export GH_SHA=$(git log -1 --format="%H")
           npm run release

thirdeye-ui/.eslintignore

@@ -36,6 +36,7 @@ src/test/e2e/downloads/
 src/test/e2e/screenshots/
 src/test/e2e/support/
 src/test/e2e/videos/
+e2e
 
 # Semantic Release (ESLint rules don't agree with how these configs are written)
 release.config.js

thirdeye-ui/.gitignore

@@ -32,3 +32,7 @@ Thumbs.db
 ._*
 .Spotlight-V100
 .Trashes
+/test-results
+/playwright-report/
+/blob-report/
+/playwright/.cache/

thirdeye-ui/cypress/fixtures/example.json

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

thirdeye-ui/cypress/support/commands.ts

@@ -0,0 +1,52 @@
+/*
+ * Copyright 2024 StarTree Inc
+ *
+ * Licensed under the StarTree Community License (the "License"); you may not use
+ * this file except in compliance with the License. You may obtain a copy of the
+ * License at http://www.startree.ai/legal/startree-community-license
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the
+ * License is distributed on an "AS IS" BASIS, WITHOUT * WARRANTIES OF ANY KIND,
+ * either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under
+ * the License.
+ */
+// / <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+// eslint-disable-next-line max-len
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

thirdeye-ui/cypress/support/e2e.ts

@@ -0,0 +1,34 @@
+/*
+ * Copyright 2024 StarTree Inc
+ *
+ * Licensed under the StarTree Community License (the "License"); you may not use
+ * this file except in compliance with the License. You may obtain a copy of the
+ * License at http://www.startree.ai/legal/startree-community-license
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the
+ * License is distributed on an "AS IS" BASIS, WITHOUT * WARRANTIES OF ANY KIND,
+ * either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under
+ * the License.
+ */
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "./commands";
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')