[ENG-4133] Add "switch to testnet and back to mainnet" flow(#206)

[ENG-4132]Add data-testid to network address input fields
secretkeylabs · Apr 19, 2024 · 195e164 · 195e164
1 parent f961797
commit 195e164
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 1 deletion.
diff --git a/src/app/screens/settings/changeNetwork/nodeInput.tsx b/src/app/screens/settings/changeNetwork/nodeInput.tsx
@@ -77,7 +77,7 @@ function NodeInput({
         <NodeResetButton onClick={onReset}>{t('RESET_TO_DEFAULT')}</NodeResetButton>
       </NodeInputHeader>
       <InputContainer>
-        <Input onChange={onChange} value={value} />
+        <Input data-testid={label} onChange={onChange} value={value} />
         {value && (
           <Button onClick={onClear}>
             <XCircle size={18} weight="fill" color={theme.colors.white_200} />

diff --git a/tests/pages/startPage.ts b/tests/pages/startPage.ts
@@ -23,6 +23,22 @@ export default class StartPage {
 
   readonly buttonConfirmCopyAddress: Locator;
 
+  readonly buttonNetwork: Locator;
+
+  readonly buttonSave: Locator;
+
+  readonly buttonMainnet: Locator;
+
+  readonly buttonTestnet: Locator;
+
+  readonly buttonBack: Locator;
+
+  readonly inputStacksURL: Locator;
+
+  readonly inputBTCURL: Locator;
+
+  readonly inputFallbackBTCURL: Locator;
+
   constructor(readonly page: Page) {
     this.page = page;
     this.balance = page.getByTestId('total-balance-value');
@@ -41,6 +57,15 @@ export default class StartPage {
     );
 
     this.buttonConfirmCopyAddress = page.getByRole('button', { name: 'I understand' });
+
+    this.buttonNetwork = page.getByRole('button', { name: 'Network' });
+    this.buttonSave = page.getByRole('button', { name: 'Save' });
+    this.buttonMainnet = page.getByRole('button', { name: 'Mainnet' });
+    this.buttonTestnet = page.getByRole('button', { name: 'Testnet' });
+    this.buttonBack = page.getByRole('button', { name: 'back button' });
+    this.inputStacksURL = page.getByTestId('Stacks URL');
+    this.inputBTCURL = page.getByTestId('BTC URL');
+    this.inputFallbackBTCURL = page.getByTestId('Fallback BTC URL');
   }
 
   async checkVisuals() {
@@ -65,4 +90,65 @@ export default class StartPage {
     const address = await this.page.evaluate('navigator.clipboard.readText()');
     return address;
   }
+
+  async checkNetworkSettingVisuals() {
+    await expect(this.buttonSave).toBeVisible();
+    await expect(this.buttonBack).toBeVisible();
+    await expect(this.buttonMainnet).toBeVisible();
+    await expect(this.buttonTestnet).toBeVisible();
+    await expect(this.inputStacksURL).toBeVisible();
+    await expect(this.inputBTCURL).toBeVisible();
+    await expect(this.inputFallbackBTCURL).toBeVisible();
+  }
+
+  async checkTestnetUrls(shouldContainTestnet) {
+    const inputsURL = [this.inputStacksURL, this.inputBTCURL, this.inputFallbackBTCURL];
+    const checks = inputsURL.map(async (input) => {
+      const inputValue = await input.inputValue();
+      const message = `URL does not contain 'testnet' in ${input}`;
+      if (shouldContainTestnet) {
+        return expect(inputValue, message).toContain('testnet');
+      }
+      return expect(inputValue, message).not.toContain('testnet');
+    });
+    await Promise.all(checks);
+  }
+
+  async switchtoTestnetNetwork() {
+    await expect(this.buttonNetwork).toBeVisible();
+    await expect(this.buttonNetwork).toHaveText('NetworkMainnet');
+    await this.buttonNetwork.click();
+    await this.checkNetworkSettingVisuals();
+    await expect(this.buttonMainnet.locator('img')).toHaveAttribute('alt', 'tick');
+    await expect(this.buttonTestnet.locator('img[alt="tick"]')).toHaveCount(0);
+
+    await this.buttonTestnet.click();
+    await expect(this.buttonTestnet.locator('img')).toHaveAttribute('alt', 'tick');
+    await expect(this.buttonMainnet.locator('img[alt="tick"]')).toHaveCount(0);
+
+    await this.checkTestnetUrls(true);
+
+    await this.buttonSave.click();
+    await expect(this.buttonNetwork).toBeVisible();
+    await expect(this.buttonNetwork).toHaveText('NetworkTestnet');
+  }
+
+  async switchtoMainnetNetwork() {
+    await expect(this.buttonNetwork).toBeVisible();
+    await expect(this.buttonNetwork).toHaveText('NetworkTestnet');
+    await this.buttonNetwork.click();
+    await this.checkNetworkSettingVisuals();
+    await expect(this.buttonTestnet.locator('img')).toHaveAttribute('alt', 'tick');
+    await expect(this.buttonMainnet.locator('img[alt="tick"]')).toHaveCount(0);
+
+    await this.buttonMainnet.click();
+    await expect(this.buttonMainnet.locator('img')).toHaveAttribute('alt', 'tick');
+    await expect(this.buttonTestnet.locator('img[alt="tick"]')).toHaveCount(0);
+
+    await this.checkTestnetUrls(false);
+
+    await this.buttonSave.click();
+    await expect(this.buttonNetwork).toBeVisible();
+    await expect(this.buttonNetwork).toHaveText('NetworkMainnet');
+  }
 }
diff --git a/tests/specs/onboarding.spec.ts b/tests/specs/onboarding.spec.ts
@@ -201,4 +201,14 @@ test.describe('onboarding flow', () => {
     await onboardingpage.buttonUnlock.click();
     await startpage.checkVisuals();
   });
+
+  test('switch to testnet and back to mainnet', async ({ page, extensionId }) => {
+    const onboardingpage = new Onboarding(page);
+    const startpage = new StartPage(page);
+    await onboardingpage.createWalletSkipBackup(strongPW);
+    await page.goto(`chrome-extension://${extensionId}/popup.html#/settings`);
+
+    await startpage.switchtoTestnetNetwork();
+    await startpage.switchtoMainnetNetwork();
+  });
 });