Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

E2E tests - Create alert #1729

Merged
merged 22 commits into from
Jan 2, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
f23e8b8
Create alert basic e2e test
harshilvelotio Dec 17, 2024
98d6f35
removed access token
harshilvelotio Dec 17, 2024
6f86b2e
multi dimensional basic tests
harshilvelotio Dec 17, 2024
d78fdd5
added comments
harshilvelotio Dec 17, 2024
ec3aee9
Updated test cases
harshilvelotio Dec 17, 2024
47387c2
undo'ed import
harshilvelotio Dec 17, 2024
9c2848c
fix(ui): Updated the test case
harshilvelotio Dec 17, 2024
9e9842f
fix(ui): Added Test cases for custom metric and advance options
harshilvelotio Dec 18, 2024
5372325
fix(ui): Added Test cases for Alert Details and anomaly
harshilvelotio Dec 19, 2024
bed3c35
fix(ui): Added Test cases for Onboarding page
harshilvelotio Dec 23, 2024
13ed8e2
Merge branch 'e2e-setup' into harshil/e2e-tests
harshilvelotio Dec 23, 2024
16ea7db
Test Check
harshilvelotio Dec 23, 2024
192ed5b
Anomaly test fix
harshilvelotio Dec 23, 2024
eb4f470
Anomaly View test fix
harshilvelotio Dec 23, 2024
b6cd1a5
Anomaly api test fix
harshilvelotio Dec 23, 2024
92947a3
Anomaly test fix
harshilvelotio Dec 23, 2024
a587169
anomaly test updatded
harshilvelotio Dec 23, 2024
393478c
Merge branch 'e2e-setup' into harshil/e2e-tests
harshilvelotio Dec 30, 2024
3b4927a
Merge branch 'e2e-setup' into harshil/e2e-tests
harshilvelotio Dec 30, 2024
891fc76
preventDefault added for Apply filter button
harshilvelotio Dec 30, 2024
faf1207
Revert e2e yaml file change
harshilvelotio Dec 30, 2024
f8c077c
fix(ui): Added Test cases for Onboarding page when dataset is Empty
harshilvelotio Dec 30, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions .github/workflows/fe-e2e.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ jobs:
with:
node-version: 14
cache: "npm"
cache-dependency-path: './thirdeye-ui/package-lock.json'
cache-dependency-path: "./thirdeye-ui/package-lock.json"

- name: Install dependencies
run: |
Expand Down Expand Up @@ -93,8 +93,8 @@ jobs:
}
]
}" ${{ secrets.SLACK_WEBHOOK }}

- name: Stop local server
if: always()
run: |
kill $(lsof -t -i:7004);
kill $(lsof -t -i:7004);
5 changes: 5 additions & 0 deletions thirdeye-ui/cypress/fixtures/example.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"name": "Using fixtures to represent data",
"email": "hello@cypress.io",
"body": "Fixtures are a great way to mock data for responses to routes"
}
52 changes: 52 additions & 0 deletions thirdeye-ui/cypress/support/commands.ts
Original file line number Diff line number Diff line change
@@ -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>
// }
// }
// }
34 changes: 34 additions & 0 deletions thirdeye-ui/cypress/support/e2e.ts
Original file line number Diff line number Diff line change
@@ -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')
280 changes: 280 additions & 0 deletions thirdeye-ui/e2e/pages/alert-detail.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,280 @@
/*
* 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.
*/
import { expect, Page } from "@playwright/test";
import { BasePage } from "./base";

export class AlertDetailsPage extends BasePage {
readonly page: Page;
alertsApiResponseData: any;
anomaliesApiResponseData: any;
anomalyApiResponseData: any;
evaluateResponseData: any;

constructor(page: Page) {
super(page);
this.page = page;
}

async resolveApis() {
const [alertsApiResponse] = await Promise.all([
this.page.waitForResponse(
(response) =>
response.url().includes("/api/alerts") &&
response.status() === 200
),
]);

this.alertsApiResponseData = await alertsApiResponse.json();
}

async resolveAnomaliesApis() {
const [anomaliesApiResponse] = await Promise.all([
this.page.waitForResponse(
(response) =>
response.url().includes("/api/anomalies") &&
response.status() === 200
),
]);

this.anomaliesApiResponseData = await anomaliesApiResponse.json();
}

async resolveAnomalyApis() {
const [anomalyApiResponse] = await Promise.all([
this.page.waitForResponse(
(response) =>
response
.url()
.includes(
`/api/anomalies/${this.anomaliesApiResponseData[0].id}`
) && response.status() === 200
),
]);

this.anomalyApiResponseData = await anomalyApiResponse.json();
}

async resolveInvestigateAnomalyPageApis() {
const [anomalyApiResponse] = await Promise.all([
this.page.waitForResponse(
(response) =>
response.url().includes(`/api/rca/metrics/heatmap`) &&
response.status() === 200
),
this.page.waitForResponse(
(response) =>
response.url().includes(`/api/rca/dim-analysis`) &&
response.status() === 200
),
this.page.waitForResponse(
(response) =>
response.url().includes(`/api/alerts/evaluate`) &&
response.status() === 200
),
]);
}

async goToAlertDetailsPage() {
await this.page.goto("http://localhost:7004/#access_token=''");
await this.page.waitForSelector("h4:has-text('StarTree ThirdEye')", {
timeout: 10000,
state: "visible",
});
await this.page.goto("http://localhost:7004/alerts/all");
}

async checkHeader() {
await expect(this.page.locator("h4")).toHaveText("Alerts");
}

async checkAlertHeader() {
await expect(this.page.locator("h4")).toHaveText(
this.alertsApiResponseData[this.alertsApiResponseData.length - 1]
?.name
);
}

async checkAlertIsActiveOrDeactive(isActive = true) {
await expect(this.page.locator("h6").nth(1)).toHaveText(
isActive ? "Alert is active" : "Alert is inactive"
);
}

async activeDeactiveAlert(activate = true) {
await this.page.getByRole("button", { name: "Options" }).click();
await this.page
.getByRole("menuitem", {
name: activate ? "Activate Alert" : "Deactivate Alert",
})
.click();
}

async openAnomalies() {
await this.page
.locator("span")
.filter({ hasText: "Anomalies" })
.first()
.click();
}

async checkAnomaliesCount() {
const node = this.page
.locator("span")
.filter({ hasText: "Anomalies" })
.first()
.isDisabled();
return node;
}
async openFirstAlert() {
await this.page
.locator("a")
.filter({
hasText:
this.alertsApiResponseData[
this.alertsApiResponseData.length - 1
]?.name,
})
.click();
}

async openAnomalieFromTable() {
await this.page
.locator("a")
.filter({
hasText:
this.anomaliesApiResponseData[
this.anomaliesApiResponseData.length - 1
]?.id,
})
.click();
}

async openInvestigateAnomalyPage() {
await this.page
.getByRole("button", { name: "Investigate Anomaly" })
.click();
}

async assertPageComponents() {
await expect(this.page.locator("h4").first()).toHaveText(
/^Anomaly #\d+(\s\w+)?$/
);
expect(
this.page.locator("li").filter({ hasText: "Anomalies" })
).toBeDefined();
expect(
this.page.locator("li").filter({
hasText:
this.alertsApiResponseData[
this.alertsApiResponseData.length - 1
]?.name,
})
).toBeDefined();
expect(
this.page.locator("li").filter({
hasText:
this.anomaliesApiResponseData[
this.anomaliesApiResponseData.length - 1
]?.id,
})
).toBeDefined();
await expect(this.page.locator("h4").nth(1)).toHaveText(
"Confirm anomaly"
);
expect(
this.page.locator("p").filter({ hasText: "Anomaly start" })
).toBeDefined();
expect(
this.page.locator("p").filter({ hasText: "Anomaly end" })
).toBeDefined();
expect(
this.page.locator("p").filter({ hasText: "Anomaly duration" })
).toBeDefined();
expect(
this.page.locator("p").filter({ hasText: "Seasonality" })
).toBeDefined();
expect(
this.page
.locator("p")
.filter({ hasText: "Deviation (Current / Predicted)" })
).toBeDefined();
}

async assertInvestigatePageComponents() {
await expect(this.page.locator("h4").first()).toHaveText(
"Investigation (not saved)"
);

expect(
this.page.locator("li").filter({
hasText:
this.anomaliesApiResponseData[
this.anomaliesApiResponseData.length - 1
]?.id,
})
).toBeDefined();
expect(
this.page.locator("p").filter({ hasText: "Anomaly start" })
).toBeDefined();
expect(
this.page.locator("p").filter({ hasText: "Anomaly end" })
).toBeDefined();
expect(
this.page.locator("p").filter({ hasText: "Anomaly duration" })
).toBeDefined();
expect(
this.page.locator("p").filter({ hasText: "Seasonality" })
).toBeDefined();
expect(
this.page
.locator("p")
.filter({ hasText: "Deviation (Current / Predicted)" })
).toBeDefined();
await expect(this.page.locator("h4").nth(1)).toHaveText(
"What went wrong and where?"
);
await expect(this.page.locator("h4").nth(2)).toHaveText(
"Investigation preview"
);
expect(
this.page
.locator("span")
.filter({ hasText: "What went wrong and where?" })
).toBeDefined();
expect(
this.page
.locator("span")
.filter({ hasText: "An event could have caused it?" })
).toBeDefined();
expect(
this.page
.locator("span")
.filter({ hasText: "Review investigation & share" })
).toBeDefined();
expect(
this.page.locator("h5").filter({ hasText: "Top Contributors" })
).toBeDefined();
expect(
this.page
.locator("h5")
.filter({ hasText: "Heatmap & Dimension Drills" })
).toBeDefined();
expect(
this.page
.locator("h5")
.filter({ hasText: "Heatmap & Dimension Drills" })
).toBeDefined();
}
}
Loading
Loading