added a few e2e tests for popup

e2e-tests/account_secret_key.pem

@@ -0,0 +1,3 @@
+-----BEGIN PRIVATE KEY-----
+MC4CAQAwBQYDK2VwBCIEIHRZr1HEgKVbgchuatwA7dCWDWB7QZe+bpDb5dguIyLE
+-----END PRIVATE KEY-----

e2e-tests/common/constants.ts

@@ -1,10 +1,13 @@
+import path from 'path';
+
 export const vaultPassword = '3hQqzYn4C7Y8rEZTVEZb';
 export const recoverSecretPhrase =
   'hold matrix spider subway bottom jazz charge fire lawn valley stay coil moral hospital dream cycle multiply december agree huge major tower devote old';
-export const secretKeyPath = 'e2e/account_secret_key.pem';
+export const secretKeyPath = path.join(__dirname, '../account_secret_key.pem');
 
 export const ACCOUNT_NAMES = {
-  defaultAccountName: 'Account 1',
+  defaultFirstAccountName: 'Account 1',
+  defaultSecondAccountName: 'Account 2',
   createdAccountName: 'New account 1',
   importedAccountName: 'Imported account',
   renamedAccountName: 'Renamed account'
@@ -19,9 +22,16 @@ export const IMPORTED_ACCOUNT = {
   truncatedPublicKey: '0184f...dad55'
 };
 
-export const DEFAULT_ACCOUNT = {
-  accountName: ACCOUNT_NAMES.defaultAccountName,
+export const DEFAULT_FIRST_ACCOUNT = {
+  accountName: ACCOUNT_NAMES.defaultFirstAccountName,
+  publicKey:
+    '0202b1943511b8c23b1b2b8ed7ddcedffcc7be70d9366a5005c7beab08a81b7ae633',
+  truncatedPublicKey: '0202b...ae633'
+};
+
+export const DEFAULT_SECOND_ACCOUNT = {
+  accountName: ACCOUNT_NAMES.defaultSecondAccountName,
   publicKey:
-    '02021006f7e7ecba9dda1fbd68bd88b0b509ce07a24c4ce8a96c62d44bec4beb9f9d',
-  truncatedPublicKey: '02021...b9f9d'
+    '0203b2e05f074452f5e69ba512310deceaca152ebd3394eadcec26c6e68e91aa7724',
+  truncatedPublicKey: '0203b...a7724'
 };

e2e-tests/fixtures.ts

@@ -6,7 +6,7 @@ import {
 } from '@playwright/test';
 import path from 'path';
 
-import { vaultPassword } from './common';
+import { PLAYGROUND_URL, vaultPassword } from './common';
 
 const getBrowserConfig = () => {
   switch (process.env.PLAYWRIGHT_BROWSER) {
@@ -242,20 +242,29 @@ export const onboarding = test.extend<{
 export const onboardingExpect = onboarding.expect;
 
 export const popup = test.extend<{
-  unlockVault: () => Promise<void>;
+  popupPage: Page;
+  playgroundPage: Page;
+  unlockVault: (popupPage?: Page) => Promise<void>;
   lockVault: () => Promise<void>;
   createAccount: (newAccountName: string) => Promise<void>;
+  connectAccounts: () => Promise<void>;
 }>({
-  page: async ({ extensionId, page }, use) => {
+  popupPage: async ({ extensionId, page }, use) => {
     await page.goto(`chrome-extension://${extensionId}/popup.html`);
     await use(page);
   },
+  playgroundPage: async ({ page }, use) => {
+    await page.goto(PLAYGROUND_URL);
+    await use(page);
+  },
   unlockVault: async ({ page }, use) => {
-    const unlockVault = async () => {
-      await page
+    const unlockVault = async popupPage => {
+      const currentPage = popupPage || page;
+
+      await currentPage
         .getByPlaceholder('Password', { exact: true })
         .fill(vaultPassword);
-      await page.getByRole('button', { name: 'Unlock wallet' }).click();
+      await currentPage.getByRole('button', { name: 'Unlock wallet' }).click();
     };
 
     await use(unlockVault);
@@ -280,6 +289,27 @@ export const popup = test.extend<{
     };
 
     await use(createAccount);
+  },
+  connectAccounts: async ({ page, unlockVault, context }, use) => {
+    const connectAccounts = async () => {
+      await page.goto(PLAYGROUND_URL);
+
+      const [connectAccountPage] = await Promise.all([
+        context.waitForEvent('page'),
+        page.getByRole('button', { name: 'Connect', exact: true }).click()
+      ]);
+
+      await unlockVault(connectAccountPage);
+
+      await connectAccountPage.getByText('select all', { exact: true }).click();
+
+      await connectAccountPage.getByRole('button', { name: 'Next' }).click();
+      await connectAccountPage
+        .getByRole('button', { name: 'Connect to 2 accounts' })
+        .click();
+    };
+
+    await use(connectAccounts);
   }
 });
 

e2e-tests/popup/connect-account/connect-account.spec.ts

@@ -0,0 +1,108 @@
+import { Page } from '@playwright/test';
+
+import { popup, popupExpect } from '../../fixtures';
+import { ACCOUNT_NAMES, PLAYGROUND_URL } from '../../common';
+
+popup.describe('Popup UI: connect account', () => {
+  let connectAccountPage: Page;
+
+  popup.beforeEach(async ({ page, context, unlockVault }) => {
+    await page.goto(PLAYGROUND_URL);
+
+    [connectAccountPage] = await Promise.all([
+      context.waitForEvent('page'),
+      page.getByRole('button', { name: 'Connect', exact: true }).click()
+    ]);
+
+    await unlockVault(connectAccountPage);
+  });
+
+  popup(
+    'should connect one account to playground',
+    async ({ extensionId, page }) => {
+      await popupExpect(
+        connectAccountPage.getByText('Connect with Casper Wallet Playground')
+      ).toBeVisible();
+
+      await popupExpect(
+        connectAccountPage.getByRole('button', { name: 'Next' })
+      ).toBeDisabled();
+
+      await connectAccountPage
+        .getByText(ACCOUNT_NAMES.defaultFirstAccountName, { exact: true })
+        .click();
+
+      await popupExpect(
+        connectAccountPage.getByRole('button', { name: 'Next' })
+      ).toBeEnabled();
+
+      await connectAccountPage.getByRole('button', { name: 'Next' }).click();
+      await connectAccountPage
+        .getByRole('button', { name: 'Connect to 1 account' })
+        .click();
+
+      await page.goto(`chrome-extension://${extensionId}/popup.html`);
+
+      await page.getByTestId('menu-open-icon').click();
+      await page.getByText('Connected sites').click();
+
+      await popupExpect(
+        page.getByText('Casper Wallet Playground')
+      ).toBeVisible();
+      await popupExpect(
+        page.getByText('casper-wallet-playground.make.services')
+      ).toBeVisible();
+      await popupExpect(
+        page.getByRole('button', { name: 'Disconnect' })
+      ).toBeVisible();
+      await popupExpect(
+        page.getByText(ACCOUNT_NAMES.defaultFirstAccountName)
+      ).toBeVisible();
+    }
+  );
+
+  popup(
+    'should connect two accounts to playground',
+    async ({ extensionId, page }) => {
+      await popupExpect(
+        connectAccountPage.getByText('Connect with Casper Wallet Playground')
+      ).toBeVisible();
+
+      await popupExpect(
+        connectAccountPage.getByRole('button', { name: 'Next' })
+      ).toBeDisabled();
+
+      await connectAccountPage.getByText('select all', { exact: true }).click();
+
+      await popupExpect(
+        connectAccountPage.getByRole('button', { name: 'Next' })
+      ).toBeEnabled();
+
+      await connectAccountPage.getByRole('button', { name: 'Next' }).click();
+      await connectAccountPage
+        .getByRole('button', { name: 'Connect to 2 accounts' })
+        .click();
+
+      await page.goto(`chrome-extension://${extensionId}/popup.html`);
+
+      await page.getByTestId('menu-open-icon').click();
+      await page.getByText('Connected sites').click();
+
+      await popupExpect(
+        page.getByText('Casper Wallet Playground')
+      ).toBeVisible();
+      await popupExpect(
+        page.getByText('casper-wallet-playground.make.services')
+      ).toBeVisible();
+      await popupExpect(
+        page.getByRole('button', { name: 'Disconnect' })
+      ).toBeVisible();
+      await popupExpect(
+        page.getByText(ACCOUNT_NAMES.defaultFirstAccountName)
+      ).toBeVisible();
+      await popupExpect(
+        page.getByText(ACCOUNT_NAMES.defaultSecondAccountName)
+      ).toBeVisible();
+    }
+  );
+});

e2e-tests/popup/create-account/create-account.spec.ts

@@ -2,38 +2,39 @@ import { popup, popupExpect } from '../../fixtures';
 import { ACCOUNT_NAMES } from '../../common';
 
 popup.describe('Popup UI: create account', () => {
+  popup.beforeEach(async ({ unlockVault, popupPage }) => {
+    await unlockVault(popupPage);
+  });
+
   popup(
     'should create account from navigation menu',
-    async ({ page, createAccount, unlockVault }) => {
-      await unlockVault();
-
+    async ({ popupPage, createAccount }) => {
       await createAccount(ACCOUNT_NAMES.createdAccountName);
 
       await popupExpect(
-        page.getByText(ACCOUNT_NAMES.createdAccountName)
+        popupPage.getByText(ACCOUNT_NAMES.createdAccountName)
       ).toBeVisible();
     }
   );
+
   popup(
     'should create account from account list modal',
-    async ({ page, unlockVault }) => {
-      await unlockVault();
-
-      await page.getByTestId('connection-status-modal').click();
+    async ({ popupPage }) => {
+      await popupPage.getByTestId('connection-status-modal').click();
 
-      await page.getByRole('button', { name: 'Create' }).click();
+      await popupPage.getByRole('button', { name: 'Create' }).click();
 
       await popupExpect(
-        page.getByRole('heading', { name: 'Create account' })
+        popupPage.getByRole('heading', { name: 'Create account' })
       ).toBeVisible();
 
-      await page
+      await popupPage
         .getByPlaceholder('Account name', { exact: true })
         .fill(ACCOUNT_NAMES.createdAccountName);
-      await page.getByRole('button', { name: 'Create account' }).click();
+      await popupPage.getByRole('button', { name: 'Create account' }).click();
 
       await popupExpect(
-        page.getByText(ACCOUNT_NAMES.createdAccountName)
+        popupPage.getByText(ACCOUNT_NAMES.createdAccountName)
       ).toBeVisible();
     }
   );

e2e-tests/popup/disconnect-account/disconnect-account.spec.ts

@@ -0,0 +1,71 @@
+import { popup, popupExpect } from '../../fixtures';
+import { ACCOUNT_NAMES, PLAYGROUND_URL } from '../../common';
+
+popup.describe('Popup UI: disconnect account', () => {
+  popup.beforeEach(async ({ connectAccounts }) => {
+    await connectAccounts();
+  });
+
+  popup(
+    'should click the disconnect button on dapp and disconnect all accounts from the site',
+    async ({ page, extensionId }) => {
+      await page.goto(PLAYGROUND_URL);
+
+      await page.getByRole('button', { name: 'Disconnect' }).click();
+
+      await page.goto(`chrome-extension://${extensionId}/popup.html`);
+      await page.getByTestId('menu-open-icon').click();
+      await page.getByText('Connected sites').click();
+
+      await popupExpect(page.getByText('No connected sites yet')).toBeVisible();
+    }
+  );
+
+  popup(
+    'should click the disconnect button on connecting site page and disconnect one account from the site',
+    async ({ popupPage }) => {
+      await popupPage.getByTestId('menu-open-icon').click();
+      await popupPage.getByText('Connected sites').click();
+
+      await popupExpect(
+        popupPage.getByText(ACCOUNT_NAMES.defaultFirstAccountName)
+      ).toBeVisible();
+      await popupExpect(
+        popupPage.getByText(ACCOUNT_NAMES.defaultSecondAccountName)
+      ).toBeVisible();
+
+      const disconnectIcons = await popupPage
+        .getByTestId('disconnect-account-icon')
+        .all();
+      await disconnectIcons[0].click();
+
+      await popupExpect(
+        popupPage.getByText(ACCOUNT_NAMES.defaultFirstAccountName)
+      ).not.toBeVisible();
+      await popupExpect(
+        popupPage.getByText(ACCOUNT_NAMES.defaultSecondAccountName)
+      ).toBeVisible();
+    }
+  );
+
+  popup(
+    'should click the disconnect button on connecting site page and disconnect all accounts from the site',
+    async ({ popupPage }) => {
+      await popupPage.getByTestId('menu-open-icon').click();
+      await popupPage.getByText('Connected sites').click();
+
+      await popupExpect(
+        popupPage.getByText(ACCOUNT_NAMES.defaultFirstAccountName)
+      ).toBeVisible();
+      await popupExpect(
+        popupPage.getByText(ACCOUNT_NAMES.defaultSecondAccountName)
+      ).toBeVisible();
+
+      await popupPage.getByRole('button', { name: 'Disconnect' }).click();
+
+      await popupExpect(
+        popupPage.getByText('No connected sites yet')
+      ).toBeVisible();
+    }
+  );
+});