Additional watched account tests #396

asnaith · 2023-10-11T02:40:17Z

related to #378

New tests for

Adding custom names to watched multisigs / watched pures
Checking the correct badge is displayed for pures / multisigs
Checking new transaction button does not appear for watched accounts
Checking the subscan link is present on the options menu

Also removed some unnecessary double quotes in the locators on the page objects

packages/ui/cypress/support/page-objects/components/accountDisplay.ts

packages/ui/cypress/tests/watched-accounts.cy.ts

asnaith · 2023-10-11T02:52:23Z

packages/ui/cypress/tests/watched-accounts.cy.ts

+    multisigPage.editNamesMenuOption().click()
+    editNamesModal.body().should('be.visible')
+    editNamesModal.inputEditPureName().type(`{selectall}{del}${`Edited Name Test`}`)
+    cy.wait(500)


This is another annoying situation where this 500ms wait is needed before clicking the save button, without it the test will fail because the name in the header never updates. With this slight wait, it works every time.

I understand we never want to never use waits but this is another instance where I couldn't go further without one. Open to suggestions.

Let's see what we can do here. It's weird that the input are so sensitive. Maybe we can wait until the text is visible in the input or something. I'll check.

Need to spend time on this, sorry that I didn't get to it today, will check asap and report back.

I learned something pretty 🤯 today with cy.clock and cy.tick. The reason you had to wait, is because of the way we handle the storage of names. We don't store names on press, we debounce it. Without de-bouncing this field, it appeared unresponsive (I remember adding this). There's a debounce of 300ms here

Multix/packages/ui/src/components/AccountEditName.tsx

Lines 30 to 31 in 2d4fa20

const debouncedNameChange = useMemo(() => debounce(onNameChange, 300), [onNameChange])

Now thanks to cy.clock and tick we can bend time.. and make things happen quicker 🤷
https://docs.cypress.io/api/commands/tick

@Lykhoyda I'll try to use this in the connect function instead of waitUntil. Because it is actually retrying stuff every 200ms, so it's not really elegant

I learned something pretty 🤯 today with cy.clock and cy.tick. The reason you had to wait, is because of the way we handle the storage of names. We don't store names on press, we debounce it. Without de-bouncing this field, it appeared unresponsive (I remember adding this).

@Tbaut This is great! The explanation totally makes sense. Thank you for working this out, this is something I would have never considered but now we can look out for it in other scenarios! 🙏

(cc @juans-chainsafe - there's some good info in the comment above, we can look out for this in other frontend projects when encountering those scenarios where we think we need a cy.wait).

asnaith · 2023-10-11T02:54:43Z

packages/ui/cypress/tests/watched-accounts.cy.ts

+    topMenuItems.homeButton().click()
+    multisigPage.optionsMenuButton().click()
+    multisigPage.subscanMenuOption().should('be.visible')
+  })


This is a very basic test atm, do we want to try and remove the target on the link so that the tab loads in the same window and then check that the subscan URL contains the correct address....or is that too much?

I imagine that you meant to write this for the subscan test. I agree that it'd be better to actually test that the link is for the right address at least. I didn't research it but I guess it's possible. Removing the target sounds like hack though 🤷

Updated: @Tbaut Juan has a nice solution for checking external links on another FE project. The same technique works well for us

yup that's great, I figured there must have been some ways to stub this but didn't check 👍

packages/ui/src/components/AccountEditName.tsx

packages/ui/src/components/Header/Header.tsx

asnaith · 2023-10-11T03:08:47Z

@Tbaut @Lykhoyda I left some comments on specific things here, wanted to seek opinions before going further with more tests.

packages/ui/cypress/tests/watched-accounts.cy.ts

Tbaut · 2023-10-11T07:19:31Z

packages/ui/cypress/tests/watched-accounts.cy.ts

+    multisigPage.editNamesMenuOption().click()
+    editNamesModal.body().should('be.visible')
+    editNamesModal.inputEditPureName().type(`{selectall}{del}${`Edited Name Test`}`)
+    cy.wait(500)


Let's see what we can do here. It's weird that the input are so sensitive. Maybe we can wait until the text is visible in the input or something. I'll check.

Tbaut · 2023-10-11T07:22:31Z

packages/ui/cypress/tests/watched-accounts.cy.ts

+    topMenuItems.homeButton().click()
+    multisigPage.optionsMenuButton().click()
+    multisigPage.subscanMenuOption().should('be.visible')
+  })


I imagine that you meant to write this for the subscan test. I agree that it'd be better to actually test that the link is for the right address at least. I didn't research it but I guess it's possible. Removing the target sounds like hack though 🤷

packages/ui/src/components/Header/Header.tsx

packages/ui/src/components/IdenticonBadge.tsx

Tbaut

Wow that's amazing, and that's already a lot covered!

Tbaut · 2023-10-18T11:57:41Z

@asnaith you didn't share with us the mnemonic of this accounts. Any way you can do it, or didn't you use a new account for this?

asnaith · 2023-10-18T18:14:14Z

@asnaith you didn't share with us the mnemonic of this accounts. Any way you can do it, or didn't you use a new account for this?

@Tbaut Yeah I had the signatories in this file
https://github.com/ChainSafe/Multix/blob/main/packages/ui/cypress/fixtures/watchAccounts/watchSignatories.ts

but your question made me check...and when I did I realized one of the mnemonics needed updating as it was incorrect, now all is correct in this pr: #409

asnaith added 9 commits October 6, 2023 15:29

add new test fixtures

2815ed8

add new watch account tests wip

be4a8b9

refactor account display elements into re-usable component

3692fa9

add more element test ids

419ad78

update tests wip

47a8097

test fixture changes

5f0bdd3

improve readability of fixtures

fdf38a8

add and update page elements

923d35c

add additional watched account tests

cc7aa58

asnaith requested a review from Tbaut October 11, 2023 02:40

asnaith changed the title ~~Asnaith/additional watched accounts tests~~ Additional watched account tests Oct 11, 2023

github-actions bot deployed to multix (Preview) October 11, 2023 02:41 View deployment

asnaith commented Oct 11, 2023

View reviewed changes

packages/ui/cypress/support/page-objects/components/accountDisplay.ts Show resolved Hide resolved

asnaith commented Oct 11, 2023

View reviewed changes

packages/ui/cypress/tests/watched-accounts.cy.ts Outdated Show resolved Hide resolved

asnaith commented Oct 11, 2023

View reviewed changes

Remove mistake comment

079eb95

github-actions bot deployed to multix (Preview) October 11, 2023 02:57 View deployment

asnaith commented Oct 11, 2023

View reviewed changes

packages/ui/src/components/AccountEditName.tsx Show resolved Hide resolved

asnaith commented Oct 11, 2023

View reviewed changes

packages/ui/src/components/Header/Header.tsx Show resolved Hide resolved

asnaith requested a review from Lykhoyda October 11, 2023 03:09

fix formatting

0a9fd97

github-actions bot deployed to multix (Preview) October 11, 2023 04:01 View deployment

Tbaut reviewed Oct 11, 2023

View reviewed changes

asnaith and others added 5 commits October 11, 2023 13:30

merge similar tests into one following pr feedback

fa06d73

add cy.clock and cy.tick

fd43632

with comments

2d4fa20

remove only

8836f5f

Update test tag attribute and locator

f154ce7

Merge branch 'main' into asnaith/additional-watched-accounts-tests

76f8de8

github-actions bot deployed to multix (Preview) October 12, 2023 18:47 View deployment

improve subscan test

387bb48

github-actions bot deployed to multix (Preview) October 12, 2023 20:21 View deployment

asnaith marked this pull request as ready for review October 12, 2023 20:42

asnaith requested a review from Tbaut October 12, 2023 20:42

Tbaut approved these changes Oct 12, 2023

View reviewed changes

asnaith merged commit 29908c9 into main Oct 12, 2023
4 checks passed

asnaith deleted the asnaith/additional-watched-accounts-tests branch October 12, 2023 21:45

asnaith restored the asnaith/additional-watched-accounts-tests branch October 20, 2023 00:03

Tbaut deleted the asnaith/additional-watched-accounts-tests branch September 23, 2024 08:20

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Additional watched account tests #396

Additional watched account tests #396

asnaith commented Oct 11, 2023 •

edited

Loading

asnaith Oct 11, 2023

Tbaut Oct 11, 2023

Tbaut Oct 11, 2023

Tbaut Oct 12, 2023

Tbaut Oct 12, 2023

asnaith Oct 12, 2023

asnaith Oct 11, 2023

Tbaut Oct 11, 2023

asnaith Oct 12, 2023

Tbaut Oct 12, 2023 •

edited

Loading

asnaith commented Oct 11, 2023

Tbaut Oct 11, 2023

Tbaut Oct 11, 2023

Tbaut left a comment

Tbaut commented Oct 18, 2023

asnaith commented Oct 18, 2023

	const debouncedNameChange = useMemo(() => debounce(onNameChange, 300), [onNameChange])

Additional watched account tests #396

Additional watched account tests #396

Conversation

asnaith commented Oct 11, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Tbaut Oct 12, 2023 • edited Loading

Choose a reason for hiding this comment

asnaith commented Oct 11, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Tbaut left a comment

Choose a reason for hiding this comment

Tbaut commented Oct 18, 2023

asnaith commented Oct 18, 2023

asnaith commented Oct 11, 2023 •

edited

Loading

Tbaut Oct 12, 2023 •

edited

Loading