forked from dfinity/nns-dapp
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add e2e test for canisters (dfinity#4549)
# Motivation This is prompted by the change to read transactions from the index canister so we want to make sure we still render transaction such as "Create Canister" and "Top-up Canister" correctly. But we did not yet have any end-to-end test for canisters so I added more than just the minimum to check transactions. # Changes 1. Add an end-to-end test which creates a canister, renames a canister and tops-up a canister. 2. Add missing test IDs. 3. Fix one typo in an existing test ID. 4. Add necessary page objects. 5. Factor out a function to navigate to the NNS main account and reuse it. 6. Change `typeText` on the Playwright page object to use `fill()` instead of `type()`. Fill replaces existing text, which we need because when renaming the canister, the input field is prefilled with the existing name. Since nothing broke, I assume we never relied on `typeText()` leaving the existing text there. # Tests added # Todos - [ ] Add entry to changelog (if necessary). not necessary
- Loading branch information
Showing
19 changed files
with
374 additions
and
60 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| import { AppPo } from "$tests/page-objects/App.page-object"; | ||
| import { PlaywrightPageObjectElement } from "$tests/page-objects/playwright.page-object"; | ||
| import { signInWithNewUser, step } from "$tests/utils/e2e.test-utils"; | ||
| import { expect, test } from "@playwright/test"; | ||
|
|
||
| test("Test canisters", async ({ page, context }) => { | ||
| await page.goto("/"); | ||
| await expect(page).toHaveTitle("My Tokens / NNS Dapp"); | ||
| await signInWithNewUser({ page, context }); | ||
|
|
||
| const pageElement = PlaywrightPageObjectElement.fromPage(page); | ||
| const appPo = new AppPo(pageElement); | ||
|
|
||
| step("Get some ICP"); | ||
| await appPo.getIcpTokens(10); | ||
|
|
||
| step("Create a canister"); | ||
| const canisterName = "MyCanister"; | ||
| await appPo.goToCanisters(); | ||
| const canistersPo = appPo.getCanistersPo(); | ||
| await canistersPo.createCanister({ | ||
| name: canisterName, | ||
| icpAmount: "1", | ||
| }); | ||
|
|
||
| step("Rename canister"); | ||
| const canisterCards = await canistersPo.getCanisterCardPos(); | ||
| expect(canisterCards).toHaveLength(1); | ||
| const canisterCard = canisterCards[0]; | ||
| expect(await canisterCard.getCanisterName()).toBe(canisterName); | ||
| await canisterCard.click(); | ||
|
|
||
| const newCanisterName = "MyCanister2"; | ||
| const canisterDetail = appPo.getCanisterDetailPo(); | ||
| await canisterDetail.clickRename(); | ||
| await canisterDetail.renameCanister(newCanisterName); | ||
|
|
||
| step("Top up canister"); | ||
| await canisterDetail.addCycles({ icpAmount: "2" }); | ||
|
|
||
| step("Verify name"); | ||
| await appPo.goBack(); | ||
| expect(await canisterCard.getCanisterName()).toBe(newCanisterName); | ||
|
|
||
| step("Check transaction descriptions"); | ||
| await appPo.goToNnsMainAccountWallet(); | ||
| const transactionList = appPo | ||
| .getWalletPo() | ||
| .getNnsWalletPo() | ||
| .getTransactionListPo(); | ||
| await transactionList.waitForLoaded(); | ||
| const transactions = await transactionList.getTransactionCardPos(); | ||
| expect(await Promise.all(transactions.map((tx) => tx.getHeadline()))).toEqual( | ||
| ["Top-up Canister", "Create Canister", "Received"] | ||
| ); | ||
| expect(await Promise.all(transactions.map((tx) => tx.getAmount()))).toEqual([ | ||
| "-2.0001", | ||
| "-1.0001", | ||
| "+10.00", | ||
| ]); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
38 changes: 38 additions & 0 deletions
38
frontend/src/tests/page-objects/AddCyclesModal.page-object.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import { ConfirmCyclesCanisterPo } from "$tests/page-objects/ConfirmCyclesCanister.page-object"; | ||
| import { ModalPo } from "$tests/page-objects/Modal.page-object"; | ||
| import { SelectCyclesCanisterPo } from "$tests/page-objects/SelectCyclesCanister.page-object"; | ||
| import type { PageObjectElement } from "$tests/types/page-object.types"; | ||
|
|
||
| export class AddCyclesModalPo extends ModalPo { | ||
| private static readonly TID = "add-cycles-modal-component"; | ||
|
|
||
| static under(element: PageObjectElement): AddCyclesModalPo { | ||
| return new AddCyclesModalPo(element.byTestId(AddCyclesModalPo.TID)); | ||
| } | ||
|
|
||
| getSelectCyclesCanisterPo(): SelectCyclesCanisterPo { | ||
| return SelectCyclesCanisterPo.under(this.root); | ||
| } | ||
|
|
||
| getConfirmCyclesCanisterPo(): ConfirmCyclesCanisterPo { | ||
| return ConfirmCyclesCanisterPo.under(this.root); | ||
| } | ||
|
|
||
| enterIcpAmount(amount: string): Promise<void> { | ||
| return this.getSelectCyclesCanisterPo().enterIcpAmount(amount); | ||
| } | ||
|
|
||
| clickReview(): Promise<void> { | ||
| return this.getSelectCyclesCanisterPo().clickSubmit(); | ||
| } | ||
|
|
||
| clickConfirm(): Promise<void> { | ||
| return this.getConfirmCyclesCanisterPo().clickConfirm(); | ||
| } | ||
|
|
||
| async addCycles({ icpAmount }: { icpAmount: string }): Promise<void> { | ||
| await this.enterIcpAmount(icpAmount); | ||
| await this.clickReview(); | ||
| await this.clickConfirm(); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
20 changes: 20 additions & 0 deletions
20
frontend/src/tests/page-objects/CanisterCard.page-object.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import { CardPo } from "$tests/page-objects/Card.page-object"; | ||
| import type { PageObjectElement } from "$tests/types/page-object.types"; | ||
|
|
||
| export class CanisterCardPo extends CardPo { | ||
| private static readonly TID = "canister-card"; | ||
|
|
||
| static async allUnder(element: PageObjectElement): Promise<CanisterCardPo[]> { | ||
| return Array.from(await element.allByTestId(CanisterCardPo.TID)).map( | ||
| (el) => new CanisterCardPo(el) | ||
| ); | ||
| } | ||
|
|
||
| static under(element: PageObjectElement): CanisterCardPo { | ||
| return new CanisterCardPo(element.byTestId(CanisterCardPo.TID)); | ||
| } | ||
|
|
||
| async getCanisterName(): Promise<string> { | ||
| return (await this.getText("canister-card-title-component")).trim(); | ||
| } | ||
| } |
Oops, something went wrong.