Skip to content

Commit

Permalink
feat(ui-test): cover siwe (#1679)
Browse files Browse the repository at this point in the history
  • Loading branch information
arein committed Dec 29, 2023
1 parent fd29e0f commit 2ec21ef
Show file tree
Hide file tree
Showing 11 changed files with 119 additions and 9 deletions.
1 change: 1 addition & 0 deletions .github/workflows/ui_tests.yml
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ jobs:
- name: Run Playwright tests
env:
NEXT_PUBLIC_PROJECT_ID: ${{ secrets.NEXT_PUBLIC_PROJECT_ID }}
NEXTAUTH_SECRET: ${{ secrets.TESTS_NEXTAUTH_SECRET }}
working-directory: ./apps/laboratory/
run: npm run playwright:test
- uses: actions/upload-artifact@v3
Expand Down
2 changes: 1 addition & 1 deletion apps/laboratory/playwright.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default defineConfig<ModalFixture>({
reporter: [['list'], ['html']],

expect: {
timeout: (process.env['CI'] ? 60 : 5) * 1000
timeout: (process.env['CI'] ? 60 : 15) * 1000
},
timeout: 60 * 1000,

Expand Down
1 change: 1 addition & 0 deletions apps/laboratory/src/constants.ts
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
export const SigningSucceededToastTitle = 'Signing Succeeded'
export const SigningFailedToastTitle = 'Signing Failed'
export const TestIdSiweAuthenticationStatus = 'w3m-authentication-status'
3 changes: 2 additions & 1 deletion apps/laboratory/src/pages/library/ethers-siwe.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
} from '../../utils/ChainsUtil'
import type { SIWECreateMessageArgs, SIWESession, SIWEVerifyMessageArgs } from '@web3modal/core'
import { createSIWEConfig } from '@web3modal/siwe'
import { TestIdSiweAuthenticationStatus } from '../../constants'

const projectId = process.env['NEXT_PUBLIC_PROJECT_ID']
if (!projectId) {
Expand Down Expand Up @@ -133,7 +134,7 @@ export default function EthersSiwe() {
</Center>
<Center h="65vh">
<VStack gap={4}>
<Text>SIWE Status: {status}</Text>
<Text data-testid={TestIdSiweAuthenticationStatus}>SIWE Status: {status}</Text>
{session && (
<>
<Text>Network: eip155:{session.chainId}</Text>
Expand Down
3 changes: 2 additions & 1 deletion apps/laboratory/src/pages/library/wagmi-siwe.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import { NetworksButton } from '../../components/NetworksButton'
import { ThemeStore } from '../../utils/StoreUtil'
import type { SIWEVerifyMessageArgs, SIWECreateMessageArgs, SIWESession } from '@web3modal/core'
import { createSIWEConfig } from '@web3modal/siwe'
import { TestIdSiweAuthenticationStatus } from '../../constants'

// 1. Get projectId
const projectId = process.env['NEXT_PUBLIC_PROJECT_ID']
Expand Down Expand Up @@ -145,7 +146,7 @@ export default function Wagmi() {
</Center>
<Center h="65vh">
<VStack gap={4}>
<Text>Status: {status}</Text>
<Text data-testid={TestIdSiweAuthenticationStatus}>Status: {status}</Text>
{session && (
<>
<Text>Network: eip155:{session.chainId}</Text>
Expand Down
14 changes: 13 additions & 1 deletion apps/laboratory/tests/shared/fixtures/w3m-fixture.ts
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,19 @@ export interface ModalFixture {
export const testM = base.extend<ModalFixture>({
library: ['wagmi', { option: true }],
modalPage: async ({ page, library }, use) => {
const modalPage = new ModalPage(page, library)
const modalPage = new ModalPage(page, library, 'default')
await modalPage.load()
await use(modalPage)
},
modalValidator: async ({ modalPage }, use) => {
const modalValidator = new ModalValidator(modalPage.page)
await use(modalValidator)
}
})
export const testMSiwe = base.extend<ModalFixture>({
library: ['wagmi', { option: true }],
modalPage: async ({ page, library }, use) => {
const modalPage = new ModalPage(page, library, 'siwe')
await modalPage.load()
await use(modalPage)
},
Expand Down
19 changes: 18 additions & 1 deletion apps/laboratory/tests/shared/fixtures/w3m-wallet-fixture.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { testM as base } from './w3m-fixture'
import { testM as base, testMSiwe as siwe } from './w3m-fixture'
import { WalletPage } from '../pages/WalletPage'
import { WalletValidator } from '../validators/WalletValidator'

Expand Down Expand Up @@ -26,4 +26,21 @@ export const testMW = base.extend<ModalWalletFixture>({
await use(walletValidator)
}
})
export const testMWSiwe = siwe.extend<ModalWalletFixture>({
walletPage: async ({ context, browserName }, use) => {
// WalletPage needs clipboard permissions with chromium to paste URI
if (browserName === 'chromium') {
await context.grantPermissions(['clipboard-read', 'clipboard-write'])
}

// Use a new page, to open alongside the modal
const walletPage = new WalletPage(await context.newPage())
await walletPage.load()
await use(walletPage)
},
walletValidator: async ({ walletPage }, use) => {
const walletValidator = new WalletValidator(walletPage.page)
await use(walletValidator)
}
})
export { expect } from '@playwright/test'
22 changes: 19 additions & 3 deletions apps/laboratory/tests/shared/pages/ModalPage.ts
Original file line number Diff line number Diff line change
@@ -1,24 +1,32 @@
import type { Locator, Page } from '@playwright/test'
import { BASE_URL } from '../constants'

export type ModalFlavor = 'default' | 'siwe'

export class ModalPage {
private readonly baseURL = BASE_URL

private readonly connectButton: Locator
private readonly url: string

constructor(
public readonly page: Page,
public readonly library: string
public readonly library: string,
public readonly flavor: ModalFlavor
) {
this.connectButton = this.page.getByTestId('connect-button')
this.url =
flavor === 'siwe'
? `${this.baseURL}library/${this.library}-siwe/`
: `${this.baseURL}library/${this.library}/`
}

async load() {
await this.page.goto(`${this.baseURL}library/${this.library}/`)
await this.page.goto(this.url)
}

async copyConnectUriToClipboard() {
await this.page.goto(`${this.baseURL}library/${this.library}/`)
await this.page.goto(this.url)
await this.connectButton.click()
await this.page.getByTestId('wallet-selector-walletconnect').click()
await this.page.waitForTimeout(2000)
Expand All @@ -34,6 +42,14 @@ export class ModalPage {
await this.page.getByTestId('sign-message-button').click()
}

async promptSiwe() {
await this.page.getByTestId('w3m-connecting-siwe-sign').click()
}

async cancelSiwe() {
await this.page.getByTestId('w3m-connecting-siwe-cancel').click()
}

async switchNetwork(network: string) {
await this.page.getByTestId('account-button').click()
await this.page.getByTestId('w3m-account-select-network').click()
Expand Down
16 changes: 16 additions & 0 deletions apps/laboratory/tests/shared/validators/ModalValidator.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,22 @@ export class ModalValidator {
await expect(this.page.getByTestId('account-button')).toBeVisible()
}

async expectAuthenticated() {
await expect(this.page.getByTestId('w3m-authentication-status')).toContainText(
'Status: authenticated'
)
}

async expectUnauthenticated() {
await expect(this.page.getByTestId('w3m-authentication-status')).toContainText(
'Status: unauthenticated'
)
}

async expectSignatureDeclined() {
await expect(this.page.getByText('Signature declined')).toBeVisible()
}

async expectDisconnected() {
await expect(this.page.getByTestId('account-button')).not.toBeVisible()
}
Expand Down
38 changes: 38 additions & 0 deletions apps/laboratory/tests/siwe.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { DEFAULT_SESSION_PARAMS } from './shared/constants'
import { testMWSiwe } from './shared/fixtures/w3m-wallet-fixture'

testMWSiwe.beforeEach(async ({ modalPage, walletPage }) => {
await modalPage.copyConnectUriToClipboard()
await walletPage.connect()
await walletPage.handleSessionProposal(DEFAULT_SESSION_PARAMS)
})

testMWSiwe.afterEach(async ({ modalValidator, walletValidator }) => {
await modalValidator.expectDisconnected()
await walletValidator.expectDisconnected()
})

testMWSiwe(
'it should sign in with ethereum',
async ({ modalPage, walletPage, modalValidator, walletValidator }) => {
await modalPage.promptSiwe()
await walletValidator.expectReceivedSign({})
await walletPage.handleRequest({ accept: true })
await modalValidator.expectAuthenticated()
await modalValidator.expectConnected()
await walletValidator.expectConnected()
await modalPage.disconnect()
}
)

testMWSiwe(
'it should reject sign in with ethereum',
async ({ modalPage, walletPage, modalValidator, walletValidator }) => {
await modalPage.promptSiwe()
await walletValidator.expectReceivedSign({})
await walletPage.handleRequest({ accept: false })
await modalValidator.expectSignatureDeclined()
await modalPage.cancelSiwe()
await modalValidator.expectUnauthenticated()
}
)
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,13 @@ export class W3mConnectingSiweView extends LitElement {
>
</wui-flex>
<wui-flex .padding=${['l', 'xl', 'xl', 'xl'] as const} gap="s" justifyContent="space-between">
<wui-button size="md" ?fullwidth=${true} variant="shade" @click=${this.onCancel.bind(this)}>
<wui-button
size="md"
?fullwidth=${true}
variant="shade"
@click=${this.onCancel.bind(this)}
data-testid="w3m-connecting-siwe-cancel"
>
Cancel
</wui-button>
<wui-button
Expand All @@ -54,6 +60,7 @@ export class W3mConnectingSiweView extends LitElement {
variant="fill"
@click=${this.onSign.bind(this)}
?loading=${this.isSigning}
data-testid="w3m-connecting-siwe-sign"
>
${this.isSigning ? 'Signing...' : 'Sign'}
</wui-button>
Expand Down

3 comments on commit 2ec21ef

@vercel
Copy link

@vercel vercel bot commented on 2ec21ef Dec 29, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 2ec21ef Dec 29, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 2ec21ef Dec 29, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.