refactor(tests/e2e): add setupPlayground helper (#836)

* refactor(tests/e2e): add `setupPlayground` helper
interledger · Jan 16, 2025 · 6ebcedf · 6ebcedf
1 parent ca5ca39
commit 6ebcedf
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 96 deletions.
diff --git a/tests/e2e/helpers/common.ts b/tests/e2e/helpers/common.ts
@@ -1,8 +1,10 @@
 import type { BrowserContext, Page } from '@playwright/test';
 import type { ConnectDetails } from '../pages/popup';
+import { spy } from 'tinyspy';
 import { getWalletInformation } from '@/shared/helpers';
 
 const OPEN_PAYMENTS_REDIRECT_URL = 'https://webmonetization.org/welcome';
+const PLAYGROUND_URL = 'https://webmonetization.org/play';
 
 export async function waitForWelcomePage(page: Page) {
   await page.waitForURL(
@@ -49,3 +51,24 @@ export async function getContinueWaitTime(
   })();
   return continueWaitMs;
 }
+
+export function playgroundUrl(...walletAddressUrls: string[]) {
+  const url = new URL(PLAYGROUND_URL);
+  for (const walletAddress of walletAddressUrls) {
+    url.searchParams.append('wa', walletAddress);
+  }
+  return url.href;
+}
+
+export async function setupPlayground(
+  page: Page,
+  ...walletAddressUrls: string[]
+) {
+  const monetizationCallback = spy<[Event], void>();
+  await page.exposeFunction('monetizationCallback', monetizationCallback);
+  await page.goto(playgroundUrl(...walletAddressUrls));
+  await page.evaluate(() => {
+    window.addEventListener('monetization', monetizationCallback);
+  });
+  return monetizationCallback;
+}
diff --git a/tests/e2e/reconnectAutoKeyTestWallet.spec.ts b/tests/e2e/reconnectAutoKeyTestWallet.spec.ts
@@ -9,11 +9,11 @@ import {
   waitForGrantConsentPage,
 } from './helpers/testWallet';
 import { getStorage } from './fixtures/helpers';
-import { spy } from 'tinyspy';
 import {
   getContinueWaitTime,
   waitForWelcomePage,
   waitForReconnectWelcomePage,
+  setupPlayground,
 } from './helpers/common';
 import { disconnectWallet, fillPopup } from './pages/popup';
 
@@ -25,7 +25,6 @@ test('Reconnect to test wallet with automatic key addition', async ({
   i18n,
 }) => {
   const walletAddressUrl = process.env.TEST_WALLET_ADDRESS_URL;
-  const monetizationCallback = spy<[Event], void>();
   const revokeInfo = await test.step('connect wallet', async () => {
     const connectButton = await test.step('fill popup', async () => {
       const connectButton = await fillPopup(popup, i18n, {
@@ -126,20 +125,8 @@ test('Reconnect to test wallet with automatic key addition', async ({
     expect(keys.find((key) => key.kid === revokeInfo.keyId)).toBeUndefined();
   });
 
+  const monetizationCallback = await setupPlayground(page, walletAddressUrl);
   await test.step('start monetization', async () => {
-    const playgroundUrl = 'https://webmonetization.org/play/';
-    await page.goto(playgroundUrl);
-
-    await page.exposeFunction('monetizationCallback', monetizationCallback);
-    await page.evaluate(() => {
-      window.addEventListener('monetization', monetizationCallback);
-    });
-
-    await page
-      .getByLabel('Wallet address/Payment pointer')
-      .fill(walletAddressUrl);
-    await page.getByRole('button', { name: 'Add monetization link' }).click();
-
     await expect(monetizationCallback).toHaveBeenCalledTimes(0);
   });
 

diff --git a/tests/e2e/simple.spec.ts b/tests/e2e/simple.spec.ts
@@ -1,5 +1,5 @@
-import { spy } from 'tinyspy';
 import { test, expect } from './fixtures/connected';
+import { setupPlayground } from './helpers/common';
 
 test.beforeEach(async ({ popup }) => {
   await popup.reload();
@@ -10,25 +10,7 @@ test('should monetize site with single wallet address', async ({
   popup,
 }) => {
   const walletAddressUrl = process.env.TEST_WALLET_ADDRESS_URL;
-  const playgroundUrl = 'https://webmonetization.org/play/';
-
-  await page.goto(playgroundUrl);
-
-  const monetizationCallback = spy<[Event], void>();
-  await page.exposeFunction('monetizationCallback', monetizationCallback);
-  await page.evaluate(() => {
-    window.addEventListener('monetization', monetizationCallback);
-  });
-
-  await page
-    .getByLabel('Wallet address/Payment pointer')
-    .fill(walletAddressUrl);
-  await page.getByRole('button', { name: 'Add monetization link' }).click();
-
-  await expect(page.locator('link[rel=monetization]')).toHaveAttribute(
-    'href',
-    walletAddressUrl,
-  );
+  const monetizationCallback = await setupPlayground(page, walletAddressUrl);
 
   await page.waitForSelector('#link-events .log-header');
   await page.waitForSelector('#link-events ul.events li');
@@ -60,7 +42,6 @@ test('does not monetize when continuous payments are disabled', async ({
   background,
 }) => {
   const walletAddressUrl = process.env.TEST_WALLET_ADDRESS_URL;
-  const playgroundUrl = 'https://webmonetization.org/play/';
 
   await test.step('disable continuous payments', async () => {
     await expect(background).toHaveStorage({ continuousPaymentsEnabled: true });
@@ -83,29 +64,13 @@ test('does not monetize when continuous payments are disabled', async ({
     });
   });
 
-  await page.goto(playgroundUrl);
-
-  const monetizationCallback = spy<[Event], void>();
-  await page.exposeFunction('monetizationCallback', monetizationCallback);
-  await page.evaluate(() => {
-    window.addEventListener('monetization', monetizationCallback);
-  });
+  const monetizationCallback = await setupPlayground(page, walletAddressUrl);
 
   await test.step('check continuous payments do not go through', async () => {
     await expect(background).toHaveStorage({
       continuousPaymentsEnabled: false,
     });
 
-    await page
-      .getByLabel('Wallet address/Payment pointer')
-      .fill(walletAddressUrl);
-    await page.getByRole('button', { name: 'Add monetization link' }).click();
-
-    await expect(page.locator('link[rel=monetization]')).toHaveAttribute(
-      'href',
-      walletAddressUrl,
-    );
-
     await page.waitForSelector('#link-events .log-header');
     await page.waitForSelector('#link-events ul.events li');
     await expect(
@@ -123,9 +88,7 @@ test('does not monetize when continuous payments are disabled', async ({
     await popup.getByRole('textbox').fill('1.5');
     await popup.getByRole('button', { name: 'Send now' }).click();
 
-    await expect(monetizationCallback).toHaveBeenCalledTimes(1, {
-      timeout: 1000,
-    });
+    await expect(monetizationCallback).toHaveBeenCalledTimes(1);
     await expect(monetizationCallback).toHaveBeenLastCalledWithMatching({
       paymentPointer: walletAddressUrl,
       amountSent: {

diff --git a/tests/e2e/special.spec.ts b/tests/e2e/special.spec.ts
@@ -1,35 +1,16 @@
-import { spy } from 'tinyspy';
 import { test, expect } from './fixtures/connected';
+import { setupPlayground } from './helpers/common';
 
 test('iframe add/remove does not de-monetize main page', async ({
   page,
   popup,
 }) => {
   const walletAddressUrl = process.env.TEST_WALLET_ADDRESS_URL;
-  const playgroundUrl = 'https://webmonetization.org/play/';
 
   await test.step('prepare', async () => {
     await expect(popup.getByTestId('not-monetized-message')).toBeVisible();
 
-    await page.goto(playgroundUrl);
-
-    const monetizationCallback = spy<[Event], void>();
-    await page.exposeFunction('monetizationCallback', monetizationCallback);
-    await page.evaluate(() => {
-      window.addEventListener('monetization', monetizationCallback);
-    });
-
-    await page
-      .getByLabel('Wallet address/Payment pointer')
-      .fill(walletAddressUrl);
-    await page.getByRole('button', { name: 'Add monetization link' }).click();
-
-    await page.$eval(
-      'link[rel="monetization"]',
-      (el) => new Promise((res) => el.addEventListener('load', res)),
-    );
-
-    await page.waitForTimeout(2000);
+    const monetizationCallback = await setupPlayground(page, walletAddressUrl);
     await expect(monetizationCallback).toHaveBeenCalledTimes(1);
     await expect(monetizationCallback).toHaveBeenLastCalledWithMatching({
       paymentPointer: walletAddressUrl,
@@ -72,30 +53,12 @@ test('iframe navigate does not de-monetize main page', async ({
   popup,
 }) => {
   const walletAddressUrl = process.env.TEST_WALLET_ADDRESS_URL;
-  const playgroundUrl = 'https://webmonetization.org/play/';
 
   await test.step('prepare', async () => {
     await expect(popup.getByTestId('not-monetized-message')).toBeVisible();
 
-    await page.goto(playgroundUrl);
-
-    const monetizationCallback = spy<[Event], void>();
-    await page.exposeFunction('monetizationCallback', monetizationCallback);
-    await page.evaluate(() => {
-      window.addEventListener('monetization', monetizationCallback);
-    });
-
-    await page
-      .getByLabel('Wallet address/Payment pointer')
-      .fill(walletAddressUrl);
-    await page.getByRole('button', { name: 'Add monetization link' }).click();
-
-    await page.$eval(
-      'link[rel="monetization"]',
-      (el) => new Promise((res) => el.addEventListener('load', res)),
-    );
+    const monetizationCallback = await setupPlayground(page, walletAddressUrl);
 
-    await page.waitForTimeout(2000);
     await expect(monetizationCallback).toHaveBeenCalledTimes(1);
     await expect(monetizationCallback).toHaveBeenLastCalledWithMatching({
       paymentPointer: walletAddressUrl,