Skip to content

Commit b93acb6

Browse files
waqaszulfiqarwaqaszulfiqar
authored
test(web): fixed e2e tests and enable ci/cd (#1833)
1 parent e59b64d commit b93acb6

File tree

12 files changed

+112
-90
lines changed

12 files changed

+112
-90
lines changed

‎.github/workflows/ci.yml‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -142,15 +142,14 @@ jobs:
142142
needs: build-server
143143
uses: ./.github/workflows/deploy_server_nightly.yml
144144
secrets: inherit
145-
#skipping these tests for now, as we are having issues with the user accounts
146-
# playwright-tests:
147-
# needs: deploy-web
148-
# uses: ./.github/workflows/playwright_ui_tests.yml
149-
# secrets: inherit
145+
playwright-tests:
146+
needs: deploy-web
147+
uses: ./.github/workflows/playwright_ui_tests.yml
148+
secrets: inherit
150149

151-
# playwright-tests-pr:
152-
# needs: deploy-web-pr
153-
# uses: ./.github/workflows/playwright_ui_tests.yml
154-
# with:
155-
# url: ${{ needs.deploy-web-pr.outputs.preview_url }}
156-
# secrets: inherit
150+
playwright-tests-pr:
151+
needs: deploy-web-pr
152+
uses: ./.github/workflows/playwright_ui_tests.yml
153+
with:
154+
url: ${{ needs.deploy-web-pr.outputs.preview_url }}
155+
secrets: inherit

‎e2e/pages/projectScreenPage.ts‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -49,10 +49,10 @@ export class ProjectScreenPage {
4949
professionalState: Locator = this.page.getByRole("menuitem", {
5050
name: "Professional"
5151
});
52-
basicGeometryState: Locator = this.page.getByRole("menuitem", {
53-
name: "Basic Geometry"
54-
});
55-
pointsState: Locator = this.page.getByText("Points");
52+
basicGeometryState: Locator = this.page.getByTestId(
53+
"preset-style-basic-geometry-item-3"
54+
);
55+
pointsState: Locator = this.page.getByTestId("preset-style-points-item-0");
5656
pointWithLabelState: Locator = this.page.getByText("Point with label");
5757
polylineState: Locator = this.page.getByText("Polyline");
5858
polygonState: Locator = this.page.getByText("Polygon");
@@ -133,15 +133,11 @@ export class ProjectScreenPage {
133133

134134
async addNewLayerStyle() {
135135
await this.addNewStyleButton.click();
136-
await expect(this.page.getByText("Empty")).toBeVisible();
136+
await expect(this.basicGeometryState).toBeVisible();
137137
await this.basicGeometryState.hover();
138138
await expect(this.pointsState.first()).toBeVisible();
139-
await expect(this.pointWithLabelState.first()).toBeVisible();
140-
await expect(this.polylineState.first()).toBeVisible();
141-
await this.page.waitForTimeout(1000);
142139
await this.pointsState.first().click();
143140
await this.assignNewStyleButton.click();
144-
// await this.page.waitForTimeout(50000);
145141
}
146142

147143
async addPointsOnMap(x: number, y: number) {

‎e2e/pages/projectsPage.ts‎

Lines changed: 34 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export class ProjectsPage {
3737
return this.page.getByTestId(`project-grid-item-title-${projectName}`);
3838
}
3939
gridProjectStarButton(projectName: string): Locator {
40-
return this.page.getByTestId(`project-grid-item-star-btn-${projectName}`);
40+
return this.page.getByTestId(`project-grid-item-star-btn-wrapper-${projectName}`).locator('button');
4141
}
4242
gridProjectMenuButton(projectName: string): Locator {
4343
return this.page.getByTestId(`project-grid-item-menu-btn-${projectName}`);
@@ -68,10 +68,12 @@ export class ProjectsPage {
6868
// Modal - Create New Project
6969
modalTitle: Locator = this.page.getByText("Create new project");
7070
projectNameLabel: Locator = this.page.getByText("Project Name *");
71-
projectNameInput: Locator = this.page.locator('input[placeholder="Text"]');
71+
projectNameInput: Locator = this.page.getByTestId("project-name-input");
72+
projectAliasLabel: Locator = this.page.getByText("Project Alias *");
73+
projectAliasInput: Locator = this.page.getByTestId("project-alias-input");
7274
descriptionLabel: Locator = this.page.getByText("Description");
73-
descriptionTextarea: Locator = this.page.locator(
74-
'textarea[placeholder="Write down your content"]'
75+
descriptionTextarea: Locator = this.page.getByTestId(
76+
"project-description-input"
7577
);
7678
cancelButton: Locator = this.page.getByRole("button", { name: "Cancel" });
7779
applyButton: Locator = this.page.getByRole("button", { name: "Apply" });
@@ -110,38 +112,33 @@ export class ProjectsPage {
110112

111113
constructor(private page: Page) {}
112114

113-
async createNewProject(projectName: string, description: string) {
115+
async createNewProject(
116+
projectName: string,
117+
projectAlias: string,
118+
description: string
119+
) {
114120
await this.projectNameInput.waitFor({ state: "visible" });
115121
await this.projectNameInput.fill("");
116122
await this.projectNameInput.fill(projectName);
123+
await this.projectAliasInput.fill("");
124+
await this.projectAliasInput.fill(projectAlias);
117125
await this.descriptionTextarea.fill(description);
118126
await this.applyButton.click();
119127
}
120128
async deleteProject(projectName: string) {
121-
const projectRow = this.page
122-
.locator(`.css-96bt7k`, {
123-
hasText: projectName
124-
})
125-
.first();
126-
const projectMenuButton = projectRow
127-
.locator('button[appearance="simple"]')
128-
.nth(1);
129+
const projectMenuButton = this.gridProjectMenuButton(projectName).first();
129130
await projectMenuButton.click();
130-
await this.moveToRecycleBinButton.waitFor({ state: "visible" });
131131
await this.moveToRecycleBinButton.click();
132-
await this.popUpRemoveButton.waitFor({ state: "visible" });
132+
await expect(this.popUpRemoveButton).toBeVisible();
133133
await this.popUpRemoveButton.click();
134-
await this.page.waitForTimeout(2000);
134+
await expect(this.gridProjectItem(projectName).first()).not.toBeVisible();
135135
}
136136

137137
async starredProject(projectName: string) {
138-
const projectRow = this.page.locator(`.css-96bt7k`, {
139-
hasText: projectName
140-
});
141-
const projectMenuButton = projectRow
142-
.locator('button[appearance="simple"]')
143-
.nth(0);
144-
await projectMenuButton.click();
138+
const projectItem = this.gridProjectItem(projectName).first();
139+
await projectItem.hover();
140+
const starButton = this.gridProjectStarButton(projectName).first();
141+
await starButton.click();
145142
}
146143

147144
async verifyImportProject(projectName: string) {
@@ -154,28 +151,26 @@ export class ProjectsPage {
154151
}
155152

156153
async verifyStarredProject(specialProjectName: string) {
157-
const projectRow = this.page.locator(
158-
`div:has-text("${specialProjectName}")`
159-
);
160-
const starIcon = projectRow.locator('svg[color="#f1c21b"]').first();
154+
const projectItem = this.gridProjectItem(specialProjectName).first();
155+
await projectItem.hover();
156+
const starButton = this.gridProjectStarButton(specialProjectName).first();
157+
const starIcon = starButton.getByTestId('icon-starFilled');
161158
await expect(starIcon).toBeVisible();
162159
}
163160

164161
async unStarredProject(projectName: string) {
165-
const projectRow = this.page.locator(`.css-96bt7k`, {
166-
hasText: projectName
167-
});
168-
const projectMenuButton = projectRow
169-
.locator('button[appearance="simple"]')
170-
.nth(0);
171-
await projectMenuButton.click();
162+
const projectItem = this.gridProjectItem(projectName).first();
163+
await projectItem.hover();
164+
const starButton = this.gridProjectStarButton(projectName).first();
165+
await starButton.click();
172166
}
167+
173168
async verifyUnStarredProject(specialProjectName: string) {
174-
const projectRow = this.page.locator(
175-
`div:has-text("${specialProjectName}")`
176-
);
177-
const unStarIcon = projectRow.locator('svg[color="#e0e0e0"]').first();
178-
await expect(unStarIcon).toBeVisible();
169+
const projectItem = this.gridProjectItem(specialProjectName).first();
170+
await projectItem.hover();
171+
const starButton = this.gridProjectStarButton(specialProjectName).first();
172+
const starIcon = starButton.getByTestId('icon-star');
173+
await expect(starIcon).toBeVisible();
179174
}
180175
starredProjectNameMenuBar(projectName: string): Locator {
181176
return this.page.locator(

‎e2e/playwright.config.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,9 @@ export default defineConfig({
3131
retries: process.env.CI ? 1 : 0,
3232
/* Opt out of parallel tests on CI. */
3333
// workers: process.env.CI ? 1 : undefined,
34-
workers: 2, // Set to 2 workers
34+
workers: 5,
3535
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
36-
reporter: [["html", { outputFolder: "./test-report" }]],
36+
reporter: [["html", { outputFolder: "./test-report", open: "never" }]],
3737
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
3838
use: {
3939
/* Base URL to use in actions like `await page.goto('/')`. */

‎e2e/tests/dashboard.spec.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,11 @@ if (!REEARTH_E2E_EMAIL || !REEARTH_E2E_PASSWORD || !REEARTH_WEB_E2E_BASEURL) {
1818
const projectName = faker.lorem.word(5);
1919
const projectDescription = faker.lorem.sentence();
2020
const specialProjectName = faker.lorem.word(5) + "!@#$%^&*()_+";
21+
const projectAlias = faker.lorem.word(15);
2122

2223
const fileName = "Test_Asset_migration.zip";
2324
const docPath = path.resolve(__dirname, "../test-data", fileName);
25+
test.describe.configure({ mode: "serial" });
2426

2527
test.describe("DASHBOARD - Test cases", () => {
2628
let context: BrowserContext;
@@ -86,7 +88,11 @@ test.describe("DASHBOARD - Test cases", () => {
8688
});
8789

8890
test("Create a new project and verify after its creation", async () => {
89-
await projectsPage.createNewProject(projectName, projectDescription);
91+
await projectsPage.createNewProject(
92+
projectName,
93+
projectAlias,
94+
projectDescription
95+
);
9096
await expect(projectsPage.noticeBanner).toBeVisible();
9197
await expect(page.getByText(projectName)).toBeVisible();
9298
});
@@ -130,6 +136,7 @@ test.describe("DASHBOARD - Test cases", () => {
130136
await projectsPage.newProjectButton.click();
131137
await projectsPage.createNewProject(
132138
specialProjectName,
139+
projectAlias,
133140
specialProjectDescription
134141
);
135142
await expect(projectsPage.noticeBanner).toBeVisible();

‎e2e/tests/login.spec.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ const REEARTH_WEB_E2E_BASEURL = process.env.REEARTH_WEB_E2E_BASEURL;
1111
if (!REEARTH_E2E_EMAIL || !REEARTH_E2E_PASSWORD || !REEARTH_WEB_E2E_BASEURL) {
1212
throw new Error("Missing required variables.");
1313
}
14+
test.describe.configure({ mode: "serial" });
1415

1516
test.describe("Login Page Tests", () => {
1617
let context: BrowserContext;

‎e2e/tests/projects.spec.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@ if (!REEARTH_E2E_EMAIL || !REEARTH_E2E_PASSWORD || !REEARTH_WEB_E2E_BASEURL) {
1515
const projectName = faker.lorem.word(5);
1616
const projectDescription = faker.lorem.sentence();
1717
const layerName = faker.lorem.word(5);
18+
const projectAlias = faker.lorem.word(5);
19+
test.describe.configure({ mode: "serial" });
20+
1821
test.describe("Project Management", () => {
1922
let context: BrowserContext;
2023
let page: Page;
@@ -74,7 +77,11 @@ test.describe("Project Management", () => {
7477
});
7578

7679
test("Create a new project and verify after its creation", async () => {
77-
await projectsPage.createNewProject(projectName, projectDescription);
80+
await projectsPage.createNewProject(
81+
projectName,
82+
projectAlias,
83+
projectDescription
84+
);
7885
await expect(projectsPage.noticeBanner).toBeVisible();
7986
await expect(page.getByText(projectName)).toBeVisible();
8087
});

‎web/src/app/features/Dashboard/ContentsContainer/Projects/ProjectCreatorModal.tsx‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -157,27 +157,26 @@ const ProjectCreatorModal: FC<ProjectCreatorModalProps> = ({
157157
/>
158158
</>
159159
}
160-
data-testid="project-creator-modal-panel"
161160
>
162-
<ContentWrapper data-testid="project-creator-content-wrapper">
163-
<Form data-testid="project-creator-form">
164-
<FormInputWrapper data-testid="project-creator-name-wrapper">
161+
<ContentWrapper>
162+
<Form>
163+
<FormInputWrapper>
165164
<InputField
166165
title={t("Project Name *")}
167166
value={formState.projectName}
168167
placeholder={t("Text")}
169168
onChange={(value) => handleFieldChange("projectName", value)}
170-
data-testid="project-creator-name-input"
169+
data-testid="project-name-input"
171170
/>
172171
</FormInputWrapper>
173-
<FormInputWrapper data-testid="project-creator-project-alias-wrapper">
172+
<FormInputWrapper>
174173
<InputField
175174
title={t("Project Alias *")}
176175
value={formState.projectAlias}
177176
placeholder={t("Text")}
178177
onChange={handleAliasChange}
179178
onChangeComplete={handleProjectAliasCheck}
180-
data-testid="project-creator-project-alias-input"
179+
data-testid="project-alias-input"
181180
description={
182181
aliasWarning ? (
183182
<Typography size="footnote" color={theme.dangerous.main}>
@@ -199,34 +198,34 @@ const ProjectCreatorModal: FC<ProjectCreatorModalProps> = ({
199198
options={projectVisibilityOptions}
200199
layout="vertical"
201200
onChange={(value) => handleFieldChange("visibility", value)}
202-
data-testid="project-creator-project-visibility-input"
201+
data-testid="project-visibility-input"
203202
description={t(
204203
"For Open & Public projects, anyone can view the project. For Private projects, only members of the workspace can see it."
205204
)}
206205
/>
207206
</FormInputWrapper>
208207
)}
209-
<FormInputWrapper data-testid="project-creator-description-wrapper">
208+
<FormInputWrapper>
210209
<TextAreaField
211210
title={t("Description")}
212211
value={formState.description}
213212
placeholder={t("Write down your content")}
213+
data-testid="project-description-input"
214214
rows={4}
215215
onChange={(value) => handleFieldChange("description", value)}
216-
data-testid="project-creator-description-input"
217216
description={t(
218217
"Provide a short summary (within 200 characters) describing the purpose or key features of this project."
219218
)}
220219
/>
221220
</FormInputWrapper>
222-
<FormInputWrapper data-testid="project-creator-project-alias-wrapper">
221+
<FormInputWrapper>
223222
<SelectField
224223
title={"Choose a license"}
225224
value={formState.license}
226225
onChange={(value) =>
227226
handleFieldChange("license", value as string)
228227
}
229-
data-testid="project-creator-project-license-input"
228+
data-testid="project-license-input"
230229
options={visualizerProjectLicensesOptions.map((license) => ({
231230
value: license.value,
232231
label: license.label

0 commit comments

Comments
 (0)