Adding Selecting Chain Interaction And Flow Improvements #21

rabi-siddique · 2024-03-06T09:19:10Z

The PR does the following:

Add interaction in the importWallet flow to select chain.
Introduces some helper methods to add reliable test cases.
Address test cases giving different outputs based on connection speed.
Changes in the flow to get wallet address.

…llet rather than importing

… importing/creating wallet

…arge numbers containing commas

…ases to validate the behavior

tests/e2e/specs/keplr/keplr-spec.js

pages/keplr/notification-page.js

frazarshad · 2024-03-06T16:15:48Z

commands/keplr.js

+    const newTokensSelctorExists = await playwright.waitForAndCheckElementExistence(
+      homePageElements.newTokensFoundSelector,
+    );
+
+    if (newTokensSelctorExists) {
+      await module.exports.addNewTokensFound(false);
+    }


dont think we need to do this internally. in most cases this will not be needed
in cases when it is needed, a user will know that tokens are not currently present and can call it themselves explicitly

I don't think that is reliable. We should not assume that the user knows. A flow should be capable of handling all edge cases.

this is not an edge case, the writer of a test should know if the wallet address is present or not before writing the test.

There can be cases where user does not want to press the 'add new token' button until a later test. and since our code is forcing him to add new tokens, it might ruin their flow.

Plus all our interactions should have a single fuctionality/responsibility. here we are performing two different function together which a user can always perform separately

This is an edge case.

Scenario:
The user want's agoric wallet address. Goes to copy the address but the agoric chain isn't present there ==> Mainly because the user did not include new tokens ==> Output is the user never got the address when they should've gotten it.

Also, assumptions lead to incorrect behaviour and unreliable software.

As for SRP, I am all in for it. But then we should apply it consistently and where it's required.

commands/keplr.js

frazarshad · 2024-03-06T16:25:02Z

commands/keplr.js

+
+    if (switchScreens) {
+      await playwright.switchToCypressWindow();
+    }


i think we should always be switching screens regardless.
currently we're building our flows with the mindset that every interaction/command will switch to the keplr window, perform its interaction, and switch back to the cypress window.
if we start performing interactions that deviate from that, it could break the flow of subsequent interactions

I needed to reuse this implementation in a flow I was implementing without the screen-switching part. All the tests were passed and now flow was broken.

what flow was this? i dont see it being used anywhere
the should get the accurate values for the tokens in the wallet spec uses getTokenAmount twice in succession and it doesn't have any issues.

Please see the getWalletAddress function

commands/keplr.js

commands/playwright-keplr.js

frazarshad · 2024-03-07T17:26:50Z

tests/e2e/specs/keplr/keplr-spec.js

+
+    it(`should get wallet address while running addNewTokensFound flow`, () => {
+      cy.getWalletAddress('Agoric localhost').then(walletAddress => {
+        expect(walletAddress.length).to.be.equal(45);
+      });
+
+      cy.getWalletAddress('Cosmos Hub').then(walletAddress => {
+        expect(walletAddress.length).to.be.equal(45);
+      });
+    });


@rabi-siddique we have two sets of these test cases. both which don't technically run the addNewTokensFound flow. we should fix this in a later PR

@frazarshad The test cases you're referring to are working fine. addNewTokensFound flow is essential for reliable results.

* Remove leftover TODOs * Remove text based locators * Add `Known problems with MetaMask` section * Remove Promise wrap from `cy.setupMetamask()` (Synthetixio#927) * Fix localized Chrome's extension id (Synthetixio#928) * Fix localized Chrome's extension id * Improve id handling --------- Co-authored-by: Piotr Frankowski <[email protected]> * Lint * Feature/revoke permission to all (Synthetixio#932) * Fix typo in Permission word * Add permission revoking actions * Add tests for permission revoking actions * Regenerate synpress commands file * Add `switchNetwork` option to `acceptAccess` function * Add new release section to README * Use `goerli` for testing (Synthetixio#1082) * Use `goerli` for testing * Trigger tests * Add `shouldWaitForPopupClosure` option to approvals and txs (Synthetixio#1081) * feature: intial setup for integration of keplr * chore: use Error object for throwing an error related to invalid extension name * Adding Keplr Interaction for Importing Wallet using Private Key (#2) * feature: adding keplr interaction for creating an account using private key * feature: keplr interaction for importing an existing wallet and creating a new wallet * fix: fixed implementation of waitAndClickByText to perform exact matching --------- Co-authored-by: Fraz Arshad <[email protected]> * Disconnect Wallet Interaction (#7) * chore: removing call to acceptAccess function * feature: adding intereaction for disconnecting with wallet * remve the default arg * Added Interaction to handle rejection of wallet connection (#8) * feat: added code to handle reject wallet access * feat: added test case for reject wallet access + modified test structure * Include code for Offer up Dapp (#10) * feat(ci): Included ui/ and contract/ from offer-up-dapp (with changes) * refactor: moved ui/ and contract/ to tools/ folder * Updates to CI/CD to use Agoric chain and Offer up DApp (#4) * feat(ci): Included ui/ and contract/ from offer-up-dapp (with changes) * feat(ci): Updated CI to use agoric chain + offer up dapp * fix(ci): updated scripts in package.json * refactor(ci): Moved ui/ and contract/ to tools/ * refactor: moved json-server-db.json to tools folder * Single Screen Interaction, Approve Button Fix and Code Cleanup (#9) * chore: organize code in playwright.keplr.js and remove not used states * chore: resolve merge conflicts with dev branch * chore: using a consistent and more intention revealing name for a helper function * chore: adding a test case for validating the switchToExtensionWindow function * chore: change selector for Approve button on connecting with wallet UI * chore: addressing PR comments * Interaction for transaction rejection (#12) * feat: added logic for transaction rejection * feat: added test for transaction rejection * fix: typo in test name * chore:remove call to switchToKeplrWindow in metamask.js (#16) * Abstracting Calls to Switching Extension in Keplr Helper Methods (#13) * chore: abstracting calls to switching to keplr window in keplr helper functions * chore: removing unnecessary awaits with sync function * Enable setup of the keplr extension in the beforeAll hook for cypress (#14) * fix: added code to handle setup of keplr wallet beforehand * chore: lint fixes * Add command to switch to another wallet (#18) * feat: interaction to switch wallet * chore: fixes for await async * Getting Wallet Address (#17) * feat: initial working setup for retrieving wallet address * chore:code cleanup * feat: interaction to switch wallet * chore: simplifying switching screens in import wallet flow * chore format code with prettier * chore: moving get wallet address test case in the main context * chore: fixes for await async * chore: address PR comments --------- Co-authored-by: Fraz Arshad <[email protected]> * Added Interaction to get the value of a certain token (#19) * feat: added command to get tokens * chore: await/async fixes * Updates to CI/CD flow (#20) * ci: new docker ci file for keplr * ci: using docker workflow instead of debug workflow temporarily * ci: updated config to have not retires in ci * Adding Selecting Chain Interaction And Flow Improvements (#21) * chore: changing the flow of test cases; starting by creating a new wallet rather than importing * feature: adding behavior in import wallet flow to select a chain when importing/creating wallet * feature: adding helper methods to click elements in a reliable way * chore: using helper methods inside keplr.js * chore: handling edge case for grabbing token values when values are large numbers containing commas * chore: updating selector for getting wallet address and adding test cases to validate the behavior * chore: addressing PR comments * chore: addressing PR comments * chore: replacing Agoric local with Agoric localhost * feat: included settings to setup npm (#22) * refactor: changed args for setupWallet (#24) * Added automatic linting to the repository (#23) * style:changing settings for linting * style: fixes to lint + styling throughout repo * Enabled CI Pipeline for NPM deployment (#25) * feat: release workflow enabled * feat: added CI cache folders to .npmignore * chore: revert back to master after testing --------- Co-authored-by: duckception <[email protected]> Co-authored-by: Peter F <[email protected]> Co-authored-by: Piotr Frankowski <[email protected]> Co-authored-by: Rafał Majchrzak <[email protected]> Co-authored-by: rabi-siddique <[email protected]> Co-authored-by: Rabi Siddique <[email protected]>

* Remove leftover TODOs * Remove text based locators * Add `Known problems with MetaMask` section * Remove Promise wrap from `cy.setupMetamask()` (Synthetixio#927) * Fix localized Chrome's extension id (Synthetixio#928) * Fix localized Chrome's extension id * Improve id handling --------- Co-authored-by: Piotr Frankowski <[email protected]> * Lint * Feature/revoke permission to all (Synthetixio#932) * Fix typo in Permission word * Add permission revoking actions * Add tests for permission revoking actions * Regenerate synpress commands file * Add `switchNetwork` option to `acceptAccess` function * Add new release section to README * Use `goerli` for testing (Synthetixio#1082) * Use `goerli` for testing * Trigger tests * Add `shouldWaitForPopupClosure` option to approvals and txs (Synthetixio#1081) * feature: intial setup for integration of keplr * chore: use Error object for throwing an error related to invalid extension name * Adding Keplr Interaction for Importing Wallet using Private Key (#2) * feature: adding keplr interaction for creating an account using private key * feature: keplr interaction for importing an existing wallet and creating a new wallet * fix: fixed implementation of waitAndClickByText to perform exact matching --------- Co-authored-by: Fraz Arshad <[email protected]> * Disconnect Wallet Interaction (#7) * chore: removing call to acceptAccess function * feature: adding intereaction for disconnecting with wallet * remve the default arg * Added Interaction to handle rejection of wallet connection (#8) * feat: added code to handle reject wallet access * feat: added test case for reject wallet access + modified test structure * Include code for Offer up Dapp (#10) * feat(ci): Included ui/ and contract/ from offer-up-dapp (with changes) * refactor: moved ui/ and contract/ to tools/ folder * Updates to CI/CD to use Agoric chain and Offer up DApp (#4) * feat(ci): Included ui/ and contract/ from offer-up-dapp (with changes) * feat(ci): Updated CI to use agoric chain + offer up dapp * fix(ci): updated scripts in package.json * refactor(ci): Moved ui/ and contract/ to tools/ * refactor: moved json-server-db.json to tools folder * Single Screen Interaction, Approve Button Fix and Code Cleanup (#9) * chore: organize code in playwright.keplr.js and remove not used states * chore: resolve merge conflicts with dev branch * chore: using a consistent and more intention revealing name for a helper function * chore: adding a test case for validating the switchToExtensionWindow function * chore: change selector for Approve button on connecting with wallet UI * chore: addressing PR comments * Interaction for transaction rejection (#12) * feat: added logic for transaction rejection * feat: added test for transaction rejection * fix: typo in test name * chore:remove call to switchToKeplrWindow in metamask.js (#16) * Abstracting Calls to Switching Extension in Keplr Helper Methods (#13) * chore: abstracting calls to switching to keplr window in keplr helper functions * chore: removing unnecessary awaits with sync function * Enable setup of the keplr extension in the beforeAll hook for cypress (#14) * fix: added code to handle setup of keplr wallet beforehand * chore: lint fixes * Add command to switch to another wallet (#18) * feat: interaction to switch wallet * chore: fixes for await async * Getting Wallet Address (#17) * feat: initial working setup for retrieving wallet address * chore:code cleanup * feat: interaction to switch wallet * chore: simplifying switching screens in import wallet flow * chore format code with prettier * chore: moving get wallet address test case in the main context * chore: fixes for await async * chore: address PR comments --------- Co-authored-by: Fraz Arshad <[email protected]> * Added Interaction to get the value of a certain token (#19) * feat: added command to get tokens * chore: await/async fixes * Updates to CI/CD flow (#20) * ci: new docker ci file for keplr * ci: using docker workflow instead of debug workflow temporarily * ci: updated config to have not retires in ci * Adding Selecting Chain Interaction And Flow Improvements (#21) * chore: changing the flow of test cases; starting by creating a new wallet rather than importing * feature: adding behavior in import wallet flow to select a chain when importing/creating wallet * feature: adding helper methods to click elements in a reliable way * chore: using helper methods inside keplr.js * chore: handling edge case for grabbing token values when values are large numbers containing commas * chore: updating selector for getting wallet address and adding test cases to validate the behavior * chore: addressing PR comments * chore: addressing PR comments * chore: replacing Agoric local with Agoric localhost * feat: included settings to setup npm (#22) * refactor: changed args for setupWallet (#24) * Added automatic linting to the repository (#23) * style:changing settings for linting * style: fixes to lint + styling throughout repo * Enabled CI Pipeline for NPM deployment (#25) * feat: release workflow enabled * feat: added CI cache folders to .npmignore * chore: revert back to master after testing * Fix for switching between keplr windows with same url (#27) * fix: checking added for window instance * test: test added for edge case * fix: added click after timeout to resolve flakiness (#28) * Updated README.md (#29) * docs: updated README.md * docs: added env section to readme * docs: 24 words memonics --------- Co-authored-by: duckception <[email protected]> Co-authored-by: Peter F <[email protected]> Co-authored-by: Piotr Frankowski <[email protected]> Co-authored-by: Rafał Majchrzak <[email protected]> Co-authored-by: rabi-siddique <[email protected]> Co-authored-by: Rabi Siddique <[email protected]>

rabi-siddique added 5 commits March 6, 2024 11:50

chore: changing the flow of test cases; starting by creating a new wa…

4665470

…llet rather than importing

feature: adding behavior in import wallet flow to select a chain when…

c4bf858

… importing/creating wallet

feature: adding helper methods to click elements in a reliable way

a39daad

chore: using helper methods inside keplr.js

7f1a482

chore: handling edge case for grabbing token values when values are l…

a5713d7

…arge numbers containing commas

rabi-siddique changed the title ~~Adding Selecting Chain Interaction~~ Adding Selecting Chain Interaction And Flow Improvements Mar 6, 2024

chore: updating selector for getting wallet address and adding test c…

aee18bf

…ases to validate the behavior

frazarshad reviewed Mar 6, 2024

View reviewed changes

rabi-siddique added 3 commits March 6, 2024 21:50

chore: addressing PR comments

0cff640

chore: addressing PR comments

f1c1068

chore: replacing Agoric local with Agoric localhost

85c95cb

frazarshad reviewed Mar 7, 2024

View reviewed changes

frazarshad approved these changes Mar 7, 2024

View reviewed changes

frazarshad merged commit bd127a3 into dev Mar 7, 2024
2 checks passed

frazarshad deleted the rs-adding-selecting-chain-interaction branch March 7, 2024 17:27

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adding Selecting Chain Interaction And Flow Improvements #21

Adding Selecting Chain Interaction And Flow Improvements #21

rabi-siddique commented Mar 6, 2024 •

edited

Loading

frazarshad Mar 6, 2024

rabi-siddique Mar 6, 2024

frazarshad Mar 7, 2024

rabi-siddique Mar 7, 2024

frazarshad Mar 6, 2024

rabi-siddique Mar 6, 2024

frazarshad Mar 7, 2024

rabi-siddique Mar 7, 2024

frazarshad Mar 7, 2024

rabi-siddique Mar 8, 2024

Adding Selecting Chain Interaction And Flow Improvements #21

Adding Selecting Chain Interaction And Flow Improvements #21

Conversation

rabi-siddique commented Mar 6, 2024 • 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

Choose a reason for hiding this comment

rabi-siddique commented Mar 6, 2024 •

edited

Loading