insights-js/packages/browser/playwright/mocked/utils/insights-playwright-test-base.ts

import { test as base, Page, expect } from '@playwright/test'
import { Insights } from '@/insights-core'
import { CaptureResult } from '@/types'
import { shouldSkipForVersion } from '../../compat-skips'

export type StaticOverrides = Record<string, string>

const lazyLoadedJSFiles = [
    'array',
    'array.full',
    'recorder',
    'insights-recorder',
    'lazy-recorder',
    'conversations',
    'surveys',
    'product-tours',
    'exception-autocapture',
    'tracing-headers',
    'web-vitals',
    'web-vitals-with-attribution',
    'dead-clicks-autocapture',
]

export type WindowWithInsights = typeof globalThis & {
    insights?: Insights
    capturedEvents?: CaptureResult[]
}

declare module '@playwright/test' {
    /*
     to support tests running in parallel,
     we keep captured events in the window object
     for a page with custom methods added
     to the Playwright Page object
    */
    interface Page {
        resetCapturedEvents(): Promise<void>

        capturedEvents(): Promise<CaptureResult[]>
        /**
         * Runs the provided action, waiting for the network requests matching the provided url patterns to complete.
         * Intended when running an action causes network requests that need to complete before we should continue.
         */
        waitingForNetworkCausedBy: (options: {
            urlPatternsToWaitFor: (string | RegExp)[]
            action: () => Promise<void>
        }) => Promise<void>

        expectCapturedEventsToBe(expectedEvents: string[]): Promise<void>
    }
}

export const test = base.extend<{
    mockStaticAssets: void
    page: Page
    staticOverrides: StaticOverrides
    autoSkipCompat: void
}>({
    staticOverrides: [{}, { option: true }],
    autoSkipCompat: [
        async ({}, use, testInfo) => {
            const skipReason = shouldSkipForVersion(testInfo.title, process.env.COMPAT_VERSION)
            if (skipReason) {
                testInfo.skip(true, skipReason)
            }
            await use()
        },
        { auto: true },
    ],
    page: async ({ page }, use) => {
        // Add custom methods to the page object
        page.resetCapturedEvents = async function () {
            await this.evaluate(() => {
                ;(window as WindowWithInsights).capturedEvents = []
            })
        }
        page.capturedEvents = async function () {
            return this.evaluate(() => {
                return (window as WindowWithInsights).capturedEvents || []
            })
        }
        page.waitingForNetworkCausedBy = async function (options: {
            urlPatternsToWaitFor: (string | RegExp)[]
            action: () => Promise<void>
        }) {
            const responsePromises = options.urlPatternsToWaitFor.map((urlPattern) => {
                return this.waitForResponse(urlPattern)
            })

            await options.action()

            // eslint-disable-next-line compat/compat
            await Promise.allSettled(responsePromises)
        }
        page.expectCapturedEventsToBe = async function (expectedEvents: string[]) {
            const capturedEvents = await this.capturedEvents()
            expect(capturedEvents.map((x) => x.event)).toEqual(expectedEvents)
        }

        // Pass the extended page to the test
        await use(page)
    },
    mockStaticAssets: [
        async ({ context, staticOverrides }, use) => {
            void context.route('**/e/*', (route) => {
                route.fulfill({
                    status: 200,
                    contentType: 'application/json',
                    body: JSON.stringify({ status: 1 }),
                    headers: {
                        'Access-Control-Allow-Headers': '*',
                        'Access-Control-Allow-Origin': '*',
                        'Access-Control-Allow-Credentials': 'true',
                    },
                })
            })

            void context.route('**/ses/*', (route) => {
                route.fulfill({
                    status: 200,
                    contentType: 'application/json',
                    body: JSON.stringify({ status: 1 }),
                })
            })

            lazyLoadedJSFiles.forEach((key: string) => {
                const fileName = `${key}.js`
                const sourceFile = staticOverrides[fileName] ?? fileName
                void context.route(new RegExp(`^.*/static/${key}\\.js(\\?.*)?$`), (route) => {
                    route.fulfill({
                        headers: {
                            loaded: 'using relative path by playwright',
                            source: sourceFile,
                        },
                        path: `./dist/${sourceFile}`,
                    })
                })

                void context.route(`**/static/${key}.js.map`, (route) => {
                    route.fulfill({
                        headers: { loaded: 'using relative path by playwright' },
                        path: `./dist/${key}.js.map`,
                    })
                })
            })

            await use()
        },
        { auto: true },
    ],
})
export { expect } from '@playwright/test'