Skip to content

Commit

Permalink
feat: add wallet features and socials github tests (#2571)
Browse files Browse the repository at this point in the history
  • Loading branch information
enesozturk authored Jul 23, 2024
1 parent 7edf26e commit fea5064
Show file tree
Hide file tree
Showing 12 changed files with 135 additions and 53 deletions.
4 changes: 3 additions & 1 deletion apps/laboratory/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"playwright:test:siwe-sa": "playwright test --grep siwe-sa.spec.ts",
"playwright:test:sa": "playwright test --grep smart-account.spec.ts",
"playwright:test:canary": "playwright test --retries=0 --grep canary.spec.ts --project='Desktop Chrome/wagmi'",
"playwright:test:wallet-features": "playwright test --grep wallet-features.spec.ts",
"playwright:debug": "pnpm playwright:test -- --debug",
"playwright:debug:basic": "pnpm playwright:test:basic -- --debug",
"playwright:debug:wallet": "pnpm playwright:test:wallet -- --debug",
Expand All @@ -28,7 +29,8 @@
"playwright:debug:siwe-email": "pnpm playwright:test:siwe-email -- --debug",
"playwright:debug:siwe-sa": "pnpm playwright:test:siwe-sa -- --debug",
"playwright:debug:sa": "pnpm playwright:test:sa -- --debug",
"playwright:debug:canary": "pnpm playwright:test:canary -- --debug"
"playwright:debug:canary": "pnpm playwright:test:canary -- --debug",
"playwright:debug:wallet-features": "pnpm playwright:test:wallet-features -- --debug"
},
"dependencies": {
"@chakra-ui/icons": "2.1.1",
Expand Down
1 change: 1 addition & 0 deletions apps/laboratory/tests/shared/fixtures/w3m-fixture.ts
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export const testM = timingFixture.extend<ModalFixture>({
await use(modalValidator)
}
})

export const testMSiwe = timingFixture.extend<ModalFixture>({
library: ['wagmi', { option: true }],
modalPage: async ({ page, library }, use) => {
Expand Down
9 changes: 7 additions & 2 deletions apps/laboratory/tests/shared/fixtures/w3m-social-fixture.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,13 @@ import { ModalPage } from '../pages/ModalPage'
import { ModalValidator } from '../validators/ModalValidator'
import { timingFixture } from './timing-fixture'

export const testMSocial = timingFixture.extend<ModalFixture>({
export const testMSocial = timingFixture.extend<
ModalFixture & {
social: string[]
}
>({
library: ['wagmi', { option: true }],
social: ['github'],
modalPage: async ({ page, library }, use) => {
const modalPage = new ModalPage(page, library, 'email')
await modalPage.load()
Expand All @@ -18,7 +23,7 @@ export const testMSocial = timingFixture.extend<ModalFixture>({
throw new Error('SOCIAL_TEST_PASSWORD is not set')
}

await modalPage.loginWithSocial(socialMail, socialPass)
await modalPage.loginWithSocial('github', socialMail, socialPass)
await use(modalPage)
},
modalValidator: async ({ modalPage }, use) => {
Expand Down
47 changes: 36 additions & 11 deletions apps/laboratory/tests/shared/pages/ModalPage.ts
Original file line number Diff line number Diff line change
Expand Up @@ -133,21 +133,38 @@ export class ModalPage {
})
}

async loginWithSocial(socialMail: string, socialPass: string) {
const authFile = 'playwright/.auth/user.json'
async loginWithSocial(socialOption: 'github', socialMail: string, socialPass: string) {
await this.page
.getByTestId('connect-button')
.getByRole('button', { name: 'Connect Wallet' })
.click()
const discordPopupPromise = this.page.waitForEvent('popup')
await this.page.getByTestId('social-selector-discord').click()
const discordPopup = await discordPopupPromise
await discordPopup.fill('#uid_8', socialMail)
await discordPopup.fill('#uid_10', socialPass)
await discordPopup.locator('[type=submit]').click()
await discordPopup.locator('.footer_b96583 button:nth-child(2)').click()
await discordPopup.context().storageState({ path: authFile })
await discordPopup.waitForEvent('close')

switch (socialOption) {
case 'github':
await this.loginWithGitHub(socialMail, socialPass)
break
default:
throw new Error(`Unknown social option: ${socialOption}`)
}
}

async loginWithGitHub(socialMail: string, socialPass: string) {
const socialPopupPromise = this.page.waitForEvent('popup')
await this.page.getByTestId(`social-selector-github`).click()
const socialPopup = await socialPopupPromise
await socialPopup.waitForLoadState()
await socialPopup.fill('#login_field.form-control.input-block.js-login-field', socialMail)
await socialPopup.fill(
'#password.form-control.form-control.input-block.js-password-field',
socialPass
)
await socialPopup.locator('[type=submit]').click()

if (await socialPopup.locator('h1').getByText('Reauthorization required').isVisible()) {
await socialPopup.locator('button').getByText('Authorize WalletConnect').click()
}

await socialPopup.waitForEvent('close')
}

async enterOTP(otp: string, headerTitle = 'Confirm Email') {
Expand Down Expand Up @@ -317,7 +334,15 @@ export class ModalPage {

await this.enterOTP(otp, headerTitle)
}

async openProfileView() {
await this.page.getByTestId('wui-profile-button').click()
}

async getWalletFeaturesButton(feature: 'onramp' | 'swap' | 'receive' | 'send') {
const walletFeatureButton = this.page.getByTestId(`wallet-features-${feature}-button`)
await expect(walletFeatureButton).toBeVisible()

return walletFeatureButton
}
}
9 changes: 5 additions & 4 deletions apps/laboratory/tests/shared/utils/project.ts
Original file line number Diff line number Diff line change
Expand Up @@ -35,20 +35,21 @@ const braveOptions: UseOptions = {
}

const WAGMI_EMAIL_BASED_REGEX = /(?:smart-account\.spec\.ts|siwe-sa\.spec\.ts|social\.spec\.ts).*$/u
const ETHERS_EMAIL_BASED_REGEX = /(?:social\.spec\.ts).*$/u

const SOLANA_UNIMPLEMENTED_TESTS_REGEX =
/^(?!.*(?:email\.spec\.ts|siwe\.spec\.ts|canary\.spec\.ts|smart-account\.spec\.ts|social\.spec\.ts|siwe-sa\.spec\.ts|siwe-email\.spec\.ts)).*$/u
/^(?!.*(?:email\.spec\.ts|siwe\.spec\.ts|canary\.spec\.ts|smart-account\.spec\.ts|social\.spec\.ts|siwe-sa\.spec\.ts|siwe-email\.spec\.ts|wallet-features\.spec\.ts)).*$/u

const customProjectProperties: CustomProjectProperties = {
'Desktop Chrome/ethers': {
testIgnore: /(?:social\.spec\.ts).*$/u
testIgnore: ETHERS_EMAIL_BASED_REGEX
},
'Desktop Brave/ethers': {
testIgnore: /(?:email\.spec\.ts|smart-account\.spec\.ts|social\.spec\.ts).*$/u,
testIgnore: ETHERS_EMAIL_BASED_REGEX,
useOptions: braveOptions
},
'Desktop Firefox/ethers': {
testIgnore: /(?:social\.spec\.ts).*$/u
testIgnore: ETHERS_EMAIL_BASED_REGEX
},
'Desktop Brave/wagmi': {
testIgnore: WAGMI_EMAIL_BASED_REGEX,
Expand Down
50 changes: 19 additions & 31 deletions apps/laboratory/tests/social.spec.ts
Original file line number Diff line number Diff line change
@@ -1,40 +1,28 @@
/**
* Social tests are still blocked because we are having authorization issues with them.
* Some options like Google, Discord have human verification and passing them with the Playwright environment is not an easy pick (or not quite possible).
* GitHub doesn't have human verification but when running the tests in parallel, it's getting stuck too much and not passing.
* We are going to keep this test file here for future reference and when we have a better solution for this, we can enable them.
*/
import { expect } from '@playwright/test'
import { testMSocial } from './shared/fixtures/w3m-social-fixture'
import type { ModalWalletPage } from './shared/pages/ModalWalletPage'

testMSocial.beforeEach(async ({ modalValidator }) => {
await modalValidator.expectConnected()
})

testMSocial('it should sign', async ({ modalPage, modalValidator }) => {
await modalPage.sign()
await modalPage.approveSign()
await modalValidator.expectAcceptedSign()
})

testMSocial('it should reject sign', async ({ modalPage, modalValidator }) => {
await modalPage.sign()
await modalPage.rejectSign()
await modalValidator.expectRejectedSign()
})
testMSocial('it should connect with GitHub, switch network and sign', async ({ modalPage }) => {
const targetChain = 'Polygon'
const modalWalletPage = modalPage as ModalWalletPage

testMSocial('it should switch network and sign', async ({ modalPage, modalValidator }) => {
let targetChain = 'Polygon'
await modalPage.switchNetwork(targetChain)
await modalValidator.expectSwitchedNetwork(targetChain)
await modalPage.closeModal()
await modalPage.sign()
await modalPage.approveSign()
await modalValidator.expectAcceptedSign()

targetChain = 'Ethereum'
await modalPage.switchNetwork(targetChain)
await modalValidator.expectSwitchedNetwork(targetChain)
await modalPage.closeModal()
await modalPage.sign()
await modalPage.approveSign()
await modalValidator.expectAcceptedSign()
})
const networkButton = modalWalletPage.page.getByTestId('w3m-network-button')
await networkButton.click()

testMSocial('it should disconnect correctly', async ({ modalPage, modalValidator }) => {
await modalPage.disconnect()
await modalValidator.expectDisconnected()
const networkToSwitchButton = modalWalletPage.page.getByTestId(
`w3m-network-switch-${targetChain}`
)
await networkToSwitchButton.click()
await networkToSwitchButton.waitFor({ state: 'hidden' })
await expect(networkButton).toHaveText(targetChain)
})
36 changes: 36 additions & 0 deletions apps/laboratory/tests/wallet-features.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import { expect } from '@playwright/test'
import { testMEmail } from './shared/fixtures/w3m-email-fixture'

testMEmail.beforeEach(async ({ modalValidator }) => {
await modalValidator.expectConnected()
})

testMEmail('it should initialize swap as expected', async ({ modalPage }) => {
await modalPage.openAccount()
const walletFeatureButton = await modalPage.getWalletFeaturesButton('swap')
await walletFeatureButton.click()
await expect(modalPage.page.getByTestId('swap-input-sourceToken')).toHaveValue('1')
await expect(modalPage.page.getByTestId('swap-input-token-sourceToken')).toHaveText('ETH')
await modalPage.page.getByTestId('swap-select-token-button-toToken').click()
await modalPage.page
.getByTestId('swap-select-token-search-input')
.getByPlaceholder('Search token')
.fill('USDC')
await modalPage.page.getByTestId('swap-select-token-item-USDC').click()
await expect(modalPage.page.getByTestId('swap-action-button')).toHaveText('Insufficient balance')
})

testMEmail('it should initialize onramp as expected', async ({ modalPage }) => {
await modalPage.openAccount()
const walletFeatureButton = await modalPage.getWalletFeaturesButton('onramp')
await walletFeatureButton.click()
await expect(modalPage.page.getByText('Coinbase')).toBeVisible()
})

testMEmail('it should initialize receive as expected', async ({ modalPage }) => {
await modalPage.openAccount()
const walletFeatureButton = await modalPage.getWalletFeaturesButton('receive')
await walletFeatureButton.click()
await modalPage.page.getByTestId('receive-address-copy-button').click()
await expect(modalPage.page.getByText('Address copied')).toBeVisible()
})
Original file line number Diff line number Diff line change
Expand Up @@ -109,15 +109,27 @@ export class W3mAccountWalletFeaturesWidget extends LitElement {
${this.tokenBalanceTemplate()}
<wui-flex gap="s">
<w3m-tooltip-trigger text="Buy">
<wui-icon-button @click=${this.onBuyClick.bind(this)} icon="card"></wui-icon-button>
<wui-icon-button
data-testid="wallet-features-onramp-button"
@click=${this.onBuyClick.bind(this)}
icon="card"
></wui-icon-button>
</w3m-tooltip-trigger>
${this.swapsTemplate()}
<w3m-tooltip-trigger text="Receive">
<wui-icon-button @click=${this.onReceiveClick.bind(this)} icon="arrowBottomCircle">
<wui-icon-button
data-testid="wallet-features-receive-button"
@click=${this.onReceiveClick.bind(this)}
icon="arrowBottomCircle"
>
</wui-icon-button>
</w3m-tooltip-trigger>
<w3m-tooltip-trigger text="Send">
<wui-icon-button @click=${this.onSendClick.bind(this)} icon="send"></wui-icon-button>
<wui-icon-button
data-testid="wallet-features-send-button"
@click=${this.onSendClick.bind(this)}
icon="send"
></wui-icon-button>
</w3m-tooltip-trigger>
</wui-flex>
Expand All @@ -143,7 +155,11 @@ export class W3mAccountWalletFeaturesWidget extends LitElement {

return html`
<w3m-tooltip-trigger text="Swap">
<wui-icon-button @click=${this.onSwapClick.bind(this)} icon="recycleHorizontal">
<wui-icon-button
data-testid="wallet-features-swap-button"
@click=${this.onSwapClick.bind(this)}
icon="recycleHorizontal"
>
</wui-icon-button>
</w3m-tooltip-trigger>
`
Expand Down
3 changes: 3 additions & 0 deletions packages/scaffold-ui/src/partials/w3m-swap-input/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ export class W3mSwapInput extends LitElement {
class="swap-input"
>
<input
data-testid="swap-input-${this.target}"
@focusin=${() => this.onFocusChange(true)}
@focusout=${() => this.onFocusChange(false)}
?disabled=${this.disabled}
Expand Down Expand Up @@ -107,6 +108,7 @@ export class W3mSwapInput extends LitElement {
private templateTokenSelectButton() {
if (!this.token) {
return html` <wui-button
data-testid="swap-select-token-button-${this.target}"
class="swap-token-button"
size="md"
variant="accent"
Expand All @@ -125,6 +127,7 @@ export class W3mSwapInput extends LitElement {
gap="xxs"
>
<wui-token-button
data-testid="swap-input-token-${this.target}"
text=${this.token.symbol}
imageSrc=${this.token.logoUri}
@click=${this.onSelectToken.bind(this)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@ export class W3mSwapSelectTokenView extends LitElement {
return html`
<wui-flex .padding=${['3xs', 's', '0', 's']} gap="xs">
<wui-input-text
data-testid="swap-select-token-search-input"
class="network-search-input"
size="sm"
placeholder="Search token"
Expand Down Expand Up @@ -130,6 +131,7 @@ export class W3mSwapSelectTokenView extends LitElement {
return html`
<wui-token-list-item
data-testid="swap-select-token-item-${token.symbol}"
name=${token.name}
?disabled=${selected}
symbol=${token.symbol}
Expand All @@ -155,6 +157,7 @@ export class W3mSwapSelectTokenView extends LitElement {
? filteredTokens.map(
token => html`
<wui-token-list-item
data-testid="swap-select-token-item-${token.symbol}"
name=${token.name}
symbol=${token.symbol}
imageSrc=${token.logoUri}
Expand Down
1 change: 1 addition & 0 deletions packages/scaffold-ui/src/views/w3m-swap-view/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -261,6 +261,7 @@ export class W3mSwapView extends LitElement {

return html` <wui-flex gap="xs">
<wui-button
data-testid="swap-action-button"
class="action-button"
fullWidth
size="lg"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,7 @@ export class W3mWalletReceiveView extends LitElement {
alignItems="center"
>
<wui-chip-button
data-testid="receive-address-copy-button"
@click=${this.onCopyClick.bind(this)}
text=${UiHelperUtil.getTruncateString({
string: this.profileName || this.address || '',
Expand Down

0 comments on commit fea5064

Please sign in to comment.