feat(ui-test): cover switching networks

.github/workflows/ui_tests.yml

@@ -23,7 +23,7 @@ jobs:
   ui_tests:
     name: 'Playwright Tests'
     runs-on: ubuntu-latest
-    timeout-minutes: 5
+    timeout-minutes: 10
     steps:
       - name: checkout
         uses: actions/checkout@v3

apps/laboratory/tests/connect.spec.ts

@@ -31,3 +31,23 @@ testMW(
     await modalValidator.expectRejectedSign()
   }
 )
+
+testMW(
+  'it should switch networks and sign',
+  async ({ modalPage, walletPage, modalValidator, walletValidator }) => {
+    let targetChain = 'Polygon'
+    await modalPage.switchNetwork(targetChain)
+    await modalPage.sign()
+    await walletValidator.expectReceivedSign({ chainName: targetChain })
+    await walletPage.handleRequest({ accept: true })
+    await modalValidator.expectAcceptedSign()
+
+    // Switch to Ethereum
+    targetChain = 'Ethereum'
+    await modalPage.switchNetwork(targetChain)
+    await modalPage.sign()
+    await walletValidator.expectReceivedSign({ chainName: targetChain })
+    await walletPage.handleRequest({ accept: true })
+    await modalValidator.expectAcceptedSign()
+  }
+)

apps/laboratory/tests/shared/pages/ModalPage.ts

@@ -33,4 +33,11 @@ export class ModalPage {
   async sign() {
     await this.page.getByTestId('sign-message-button').click()
   }
+
+  async switchNetwork(network: string) {
+    await this.page.getByTestId('account-button').click()
+    await this.page.getByTestId('w3m-account-select-network').click()
+    await this.page.getByTestId(`w3m-network-switch-${network}`).click()
+    await this.page.getByTestId(`w3m-header-close`).click()
+  }
 }

packages/scaffold/src/partials/w3m-header/index.ts

@@ -79,6 +79,7 @@ export class W3mHeader extends LitElement {
           ?disabled=${this.buffering}
           icon="close"
           @click=${this.onClose.bind(this)}
+          data-testid="w3m-header-close"
         ></wui-icon-link>
       </wui-flex>
       ${this.separatorTemplate()}

packages/scaffold/src/views/w3m-account-view/index.ts

@@ -133,6 +133,7 @@ export class W3mAccountView extends LitElement {
           imageSrc=${ifDefined(networkImage)}
           ?chevron=${this.isAllowedNetworkSwitch()}
           @click=${this.onNetworks.bind(this)}
+          data-testid="w3m-account-select-network"
         >
           <wui-text variant="paragraph-500" color="fg-100">
             ${this.network?.name ?? 'Unknown'}

packages/scaffold/src/views/w3m-networks-view/index.ts

@@ -94,6 +94,7 @@ export class W3mNetworksView extends LitElement {
           name=${network.name ?? network.id}
           @click=${() => this.onSwitchNetwork(network)}
           .disabled=${!supportsAllNetworks && !approvedIds?.includes(network.id)}
+          data-testid=${`w3m-network-switch-${network.name ?? network.id}`}
         ></wui-card-select>
       `
     )