🐛 fix: Align cache hashes

examples/metamask/package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@playwright/test": "1.48.2",
     "@synthetixio/synpress": "workspace:*",
+    "@synthetixio/synpress-cache": "workspace:*",
     "dotenv": "16.4.2"
   },
   "devDependencies": {

examples/metamask/test/config.ts

@@ -0,0 +1,5 @@
+export default {
+  baseUrl: 'https://www.alphabot.app/',
+  seedPhrase: 'test test test test test test test test test test test junk',
+  metamaskPassword: 'SynpressIsAwesomeNow!!!'
+}

examples/metamask/test/playwright/04_externalConfig.spec.ts

@@ -0,0 +1,10 @@
+import { testWithSynpress } from '@synthetixio/synpress'
+import { metaMaskFixtures } from '@synthetixio/synpress/playwright'
+import config from '../config'
+import importedConfigSetup from '../wallet-setup/importedConfig.setup'
+
+const test = testWithSynpress(metaMaskFixtures(importedConfigSetup))
+
+test('Properly generate cache', async ({ page }) => {
+  await page.goto(config.baseUrl)
+})

examples/metamask/test/wallet-setup/importedConfig.setup.ts

@@ -0,0 +1,27 @@
+import { defineWalletSetup } from '@synthetixio/synpress-cache'
+import { MetaMask, getExtensionId } from '@synthetixio/synpress/playwright'
+import 'dotenv/config'
+import config from '../config'
+
+const SEED_PHRASE = process.env.SEED_PHRASE
+const PASSWORD = process.env.WALLET_PASSWORD
+
+export default defineWalletSetup(PASSWORD, async (context, walletPage) => {
+  const extensionId = await getExtensionId(context, 'MetaMask')
+
+  const metamask = new MetaMask(context, walletPage, PASSWORD, extensionId)
+
+  await metamask.importWallet(SEED_PHRASE)
+
+  const page = await context.newPage()
+
+  await page.goto(config.baseUrl)
+  await page.getByRole('button', { name: 'Sign in' }).click()
+  await page.getByRole('button', { name: 'MetaMask' }).click()
+
+  await metamask.connectToDapp()
+
+  await page.waitForTimeout(2000)
+  await metamask.confirmSignature()
+  await page.waitForTimeout(2000)
+})

packages/cache/src/cli/cliEntrypoint.ts

@@ -34,9 +34,10 @@ export const cliEntrypoint = async () => {
     .addHelpText('afterAll', `\n${footer}\n`)
     .parse(process.argv)
 
-  let walletSetupDir = program.args[0]
-  if (!walletSetupDir) {
-    walletSetupDir = path.join(process.cwd(), 'test', WALLET_SETUP_DIR_NAME)
+  let walletSetupDir = path.join(process.cwd(), 'test', WALLET_SETUP_DIR_NAME)
+
+  if (program.args[0]) {
+    walletSetupDir = path.join(process.cwd(), program.args[0])
   }
 
   const flags: CliFlags = program.opts()
@@ -47,7 +48,14 @@ export const cliEntrypoint = async () => {
 
   if (flags.debug) {
     console.log('[DEBUG] Running with the following options:')
-    console.log({ cacheDir: walletSetupDir, ...flags, headless: Boolean(process.env.HEADLESS) ?? false }, '\n')
+    console.log(
+      {
+        cacheDir: walletSetupDir,
+        ...flags,
+        headless: Boolean(process.env.HEADLESS) ?? false
+      },
+      '\n'
+    )
   }
 
   if (os.platform() === 'win32') {
@@ -62,10 +70,15 @@ export const cliEntrypoint = async () => {
     process.exit(1)
   }
 
-  const compiledWalletSetupDirPath = await compileWalletSetupFunctions(walletSetupDir, flags.debug)
+  console.log(chalk.greenBright('🚀 Building the cache for wallet setup functions... 🚀\n'))
+
+  const { outDir: compiledWalletSetupDirPath, setupFunctionHashes } = await compileWalletSetupFunctions(
+    walletSetupDir,
+    flags.debug
+  )
 
   // TODO: We should be using `prepareExtension` function from the wallet itself!
-  await createCache(compiledWalletSetupDirPath, prepareExtension, flags.force)
+  await createCache(compiledWalletSetupDirPath, setupFunctionHashes, prepareExtension, flags.force)
 
   if (!flags.debug) {
     await rimraf(compiledWalletSetupDirPath)

packages/cache/src/cli/compileWalletSetupFunctions.ts

@@ -1,18 +1,25 @@
 import path from 'node:path'
+import fs from 'fs-extra'
 import { glob } from 'glob'
 import { build } from 'tsup'
+
 import { ensureCacheDirExists } from '../ensureCacheDirExists'
+import buildWalletSetupFunction from '../utils/buildWalletSetupFunction'
+import { extractWalletSetupFunction } from '../utils/extractWalletSetupFunction'
+import { getWalletSetupFuncHash } from '../utils/getWalletSetupFuncHash'
 import { FIXES_BANNER } from './compilationFixes'
 
-const OUT_DIR_NAME = 'wallet-setup-dist'
+const OUT_DIR_NAME = '.wallet-setup-dist'
 
 const createGlobPattern = (walletSetupDir: string) => path.join(walletSetupDir, '**', '*.setup.{ts,js,mjs}')
 
 export async function compileWalletSetupFunctions(walletSetupDir: string, debug: boolean) {
   const outDir = path.join(ensureCacheDirExists(), OUT_DIR_NAME)
 
+  fs.ensureDirSync(outDir)
+
   const globPattern = createGlobPattern(walletSetupDir)
-  const fileList = await glob(globPattern)
+  const fileList = (await glob(globPattern)).sort()
 
   if (debug) {
     console.log('[DEBUG] Found the following wallet setup files:')
@@ -51,5 +58,16 @@ export async function compileWalletSetupFunctions(walletSetupDir: string, debug:
     }
   })
 
-  return outDir
+  const setupFunctionHashes = await Promise.all(
+    fileList.map(async (filePath) => {
+      const sourceCode = fs.readFileSync(filePath, 'utf8')
+      const functionString = extractWalletSetupFunction(sourceCode)
+
+      const rawFunctionBuild = buildWalletSetupFunction(functionString)
+
+      return getWalletSetupFuncHash(rawFunctionBuild)
+    })
+  )
+
+  return { outDir, setupFunctionHashes }
 }

packages/cache/src/createCache.ts

@@ -1,18 +1,20 @@
 import { getUniqueWalletSetupFunctions } from './utils/getUniqueWalletSetupFunctions'
 import { triggerCacheCreation } from './utils/triggerCacheCreation'
 
-export async function createCache(walletSetupDirPath: string, downloadExtension: () => Promise<string>, force = false) {
+export async function createCache(
+  walletSetupDirPath: string,
+  hashes: string[],
+  downloadExtension: () => Promise<string>,
+  force = false
+) {
   const setupFunctions = await getUniqueWalletSetupFunctions(walletSetupDirPath)
 
-  const cacheCreationPromises = await triggerCacheCreation(setupFunctions, downloadExtension, force)
+  const cacheCreationOutput = await triggerCacheCreation(setupFunctions, hashes, downloadExtension, force)
 
-  if (cacheCreationPromises.length === 0) {
+  if (cacheCreationOutput.length === 0) {
     console.log('No new setup functions to cache. Exiting...')
     return
   }
 
-  // TODO: This line has no unit test. Not sure how to do it. Look into it later.
-  await Promise.all(cacheCreationPromises)
-
   console.log('All wallet setup functions are now cached!')
 }

packages/cache/src/defineWalletSetup.ts

@@ -1,4 +1,5 @@
 import type { BrowserContext, Page } from 'playwright-core'
+import buildWalletSetupFunction from './utils/buildWalletSetupFunction'
 import { getWalletSetupFuncHash } from './utils/getWalletSetupFuncHash'
 
 // TODO: Should we export this type in the `release` package?
@@ -15,7 +16,9 @@ export type WalletSetupFunction = (context: BrowserContext, walletPage: Page) =>
  * @returns An object containing the hash of the function, the function itself, and the wallet password. The `testWithWalletSetup` function uses this object.
  */
 export function defineWalletSetup(walletPassword: string, fn: WalletSetupFunction) {
-  const hash = getWalletSetupFuncHash(fn)
+  const walletSetupFunction = buildWalletSetupFunction(fn.toString())
+
+  const hash = getWalletSetupFuncHash(walletSetupFunction)
 
   return {
     hash,

packages/cache/src/utils/buildWalletSetupFunction.ts

@@ -0,0 +1,15 @@
+import { transformSync } from 'esbuild'
+
+export default function buildWalletSetupFunction(walletSetupFunctionString: string) {
+  const { code } = transformSync(walletSetupFunctionString, {
+    format: 'esm',
+    minifyWhitespace: true,
+    target: 'es2022',
+    drop: ['console', 'debugger'],
+    loader: 'ts',
+    logLevel: 'silent',
+    platform: 'node'
+  })
+
+  return code
+}

packages/cache/src/utils/extractWalletSetupFunction.ts

@@ -0,0 +1,12 @@
+export function extractWalletSetupFunction(sourceCode: string): string {
+  const match = sourceCode.match(
+    /defineWalletSetup\s*\([^,]*,\s*(async\s*\([^)]*\)\s*=>\s*{(?:[^{}]*|{(?:[^{}]*|{[^{}]*})*})*})\s*\)/
+  )
+
+  if (!match || !match[1]) {
+    console.log('Failed to extract defineWalletSetup callback from:', sourceCode)
+    throw new Error('Could not find defineWalletSetup callback')
+  }
+
+  return match[1]
+}

packages/cache/src/utils/getWalletSetupFiles.ts

@@ -27,5 +27,5 @@ export async function getWalletSetupFiles(walletSetupDirPath: string) {
     )
   }
 
-  return fileList
+  return fileList.sort()
 }

packages/cache/src/utils/getWalletSetupFuncHash.ts

@@ -1,26 +1,12 @@
 import { createHash } from 'node:crypto'
-import esbuild from 'esbuild'
 
 // Same length as the file part (first part before the `-`) of a Playwright Test ID.
 export const WALLET_SETUP_FUNC_HASH_LENGTH = 10
 
-// biome-ignore lint/suspicious/noExplicitAny: any type here is intentional
-type AnyFunction = (...args: any) => Promise<any>
-
-export function getWalletSetupFuncHash(walletSetupFunc: AnyFunction) {
-  // This transformation is necessary because a user could end up using a different execution engine than Playwright.
-  // Different execution engines -> different codes -> different hashes.
-  const { code } = esbuild.transformSync(walletSetupFunc.toString(), {
-    format: 'esm',
-    minifyWhitespace: true,
-    drop: ['console', 'debugger'],
-    loader: 'ts',
-    logLevel: 'silent'
-  })
-
+export function getWalletSetupFuncHash(walletSetupString: string) {
   const hash = createHash('shake256', {
     outputLength: WALLET_SETUP_FUNC_HASH_LENGTH
   })
 
-  return hash.update(code).digest('hex')
+  return hash.update(walletSetupString).digest('hex')
 }

packages/cache/src/utils/triggerCacheCreation.ts

@@ -1,52 +1,50 @@
 import path from 'node:path'
 import fs from 'fs-extra'
+import type { WalletSetupFunction } from '../defineWalletSetup'
 import { ensureCacheDirExists } from '../ensureCacheDirExists'
 import { createCacheForWalletSetupFunction } from './createCacheForWalletSetupFunction'
-import { getUniqueWalletSetupFunctions } from './getUniqueWalletSetupFunctions'
 import { isDirEmpty } from './isDirEmpty'
 
 export async function triggerCacheCreation(
-  setupFunctions: Awaited<ReturnType<typeof getUniqueWalletSetupFunctions>>,
+  setupFunctions: Map<string, { fileName: string; setupFunction: WalletSetupFunction }>,
+  hashes: string[],
   downloadExtension: () => Promise<string>,
   force: boolean
 ) {
   const cacheDirPath = ensureCacheDirExists()
   const extensionPath = await downloadExtension()
 
-  const cacheCreationPromises = []
-
-  for (const [funcHash, { fileName, setupFunction }] of setupFunctions) {
-    const cachePath = path.join(cacheDirPath, funcHash)
-    const doesCacheDirExist = await fs.exists(cachePath)
-    const isCacheDirEmpty = await isDirEmpty(cachePath)
+  return await Promise.all(
+    Array.from(setupFunctions).map(async ([_, { fileName, setupFunction }], index) => {
+      if (!hashes[index]) {
+        throw new Error(`No hash found for ${fileName}`)
+      }
 
-    if (doesCacheDirExist) {
-      if (isCacheDirEmpty) {
-        // In case of incorrect Playwright setup, the cache dir will be empty. For now, we're just deleting it.
-        await fs.remove(cachePath)
-      } else {
-        if (!force) {
-          console.log(`Cache already exists for ${funcHash}. Skipping...`)
-          continue
-        }
+      const funcHash = hashes[index]
 
-        console.log(`Cache already exists for ${funcHash} but force flag is set. Deleting cache...`)
-        await fs.remove(cachePath)
-      }
-    }
+      const cachePath = path.join(cacheDirPath, funcHash || 'unknown')
+      const doesCacheDirExist = await fs.exists(cachePath)
+      const isCacheDirEmpty = await isDirEmpty(cachePath)
 
-    const fileNameWithCorrectExtension = fileName.replace(/\.(ts|js|mjs)$/, '.{ts,js,mjs}')
-    console.log(`Triggering cache creation for: ${funcHash} (${fileNameWithCorrectExtension})`)
+      if (doesCacheDirExist) {
+        if (isCacheDirEmpty) {
+          // In case of incorrect Playwright setup, the cache dir will be empty. For now, we're just deleting it.
+          await fs.remove(cachePath)
+        } else {
+          if (!force) {
+            console.log(`Cache already exists for ${funcHash}. Skipping...`)
+            return
+          }
 
-    // We're not inferring the return type here to make sure we don't accidentally await the function.
-    const createCachePromise: Promise<void> = createCacheForWalletSetupFunction(
-      extensionPath,
-      cachePath,
-      setupFunction,
-      fileNameWithCorrectExtension
-    )
-    cacheCreationPromises.push(createCachePromise)
-  }
+          console.log(`Cache already exists for ${funcHash} but force flag is set. Deleting cache...`)
+          await fs.remove(cachePath)
+        }
+      }
 
-  return cacheCreationPromises
+      const fileNameWithCorrectExtension = fileName.replace(/\.(ts|js|mjs)$/, '.{ts,js,mjs}')
+      console.log(`Triggering cache creation for: ${funcHash} (${fileNameWithCorrectExtension})`)
+      // We're not inferring the return type here to make sure we don't accidentally await the function.
+      return createCacheForWalletSetupFunction(extensionPath, cachePath, setupFunction, fileNameWithCorrectExtension)
+    })
+  )
 }