use proper TOML tooling instead of regex for fixture helpers

Author: phyllis-sy-wu

packages/e2e/data/valid-app/shopify.app.toml

@@ -1,7 +1,7 @@
 # Comprehensive shopify.app.toml for E2E regression testing
-# client_id is injected at runtime via injectFixtureToml()
-client_id = "__CLIENT_ID__"
-name = "__NAME__"
+# client_id and name are patched at runtime via injectFixtureToml()
+client_id = "placeholder"
+name = "placeholder"
 application_url = "https://example.com"
 embedded = true
 

packages/e2e/package.json

@@ -29,7 +29,9 @@
     }
   },
   "devDependencies": {
+    "@iarna/toml": "2.2.5",
     "@playwright/test": "^1.50.0",
+    "@shopify/toml-patch": "0.3.0",
     "@types/node": "18.19.70",
     "dotenv": "16.4.7",
     "execa": "^7.2.0",

packages/e2e/setup/app.ts

@@ -2,6 +2,8 @@
 import {authFixture} from './auth.js'
 import {navigateToDashboard} from './browser.js'
 import {CLI_TIMEOUT, BROWSER_TIMEOUT} from './constants.js'
+import {updateTomlValues} from '@shopify/toml-patch'
+import * as toml from '@iarna/toml'
 import * as path from 'path'
 import * as fs from 'fs'
 import type {CLIContext, CLIProcess, ExecResult} from './cli.js'
@@ -84,23 +86,27 @@ export async function createApp(ctx: {
  * Read the client_id from a shopify.app.toml file.
  */
 export function extractClientId(appDir: string): string {
-  const toml = fs.readFileSync(path.join(appDir, 'shopify.app.toml'), 'utf8')
-  const match = toml.match(/client_id\s*=\s*"([^"]+)"/)
-  if (!match?.[1]) {
-    throw new Error(`Could not find client_id in ${path.join(appDir, 'shopify.app.toml')}`)
+  const tomlPath = path.join(appDir, 'shopify.app.toml')
+  const parsed = toml.parse(fs.readFileSync(tomlPath, 'utf8'))
+  const clientId = parsed.client_id as string | undefined
+  if (!clientId) {
+    throw new Error(`Could not find client_id in ${tomlPath}`)
   }
-  return match[1]
+  return clientId
 }
 
 /**
  * Overwrite a created app's shopify.app.toml with a fixture TOML template.
- * The template should contain `__CLIENT_ID__` and `__NAME__` placeholders which get
- * replaced with the app's real client_id and the provided name.
+ * Uses toml-patch to surgically set client_id and name while
+ * preserving comments and formatting in the fixture file.
  */
 export function injectFixtureToml(appDir: string, fixtureTomlContent: string, name: string): void {
   const clientId = extractClientId(appDir)
-  const toml = fixtureTomlContent.replace(/__CLIENT_ID__/g, clientId).replace(/__NAME__/g, name)
-  fs.writeFileSync(path.join(appDir, 'shopify.app.toml'), toml)
+  const patched = updateTomlValues(fixtureTomlContent, [
+    [['client_id'], clientId],
+    [['name'], name],
+  ])
+  fs.writeFileSync(path.join(appDir, 'shopify.app.toml'), patched)
 }
 
 export async function generateExtension(

packages/e2e/tests/dev-hot-reload.spec.ts

@@ -3,6 +3,7 @@
 import {appTestFixture as test, createApp, injectFixtureToml, teardownApp} from '../setup/app.js'
 import {CLI_TIMEOUT, TEST_TIMEOUT} from '../setup/constants.js'
 import {requireEnv} from '../setup/env.js'
+import {updateTomlValues} from '@shopify/toml-patch'
 import {expect} from '@playwright/test'
 import * as fs from 'fs'
 import * as path from 'path'
@@ -60,13 +61,8 @@ test.describe('Dev hot reload', () => {
         // Edit scopes in the TOML to trigger a reload
         const tomlPath = path.join(appDir, 'shopify.app.toml')
         const original = fs.readFileSync(tomlPath, 'utf8')
-        fs.writeFileSync(
-          tomlPath,
-          original.replace(
-            'scopes = "read_products,write_products,read_orders"',
-            'scopes = "read_products,write_products"',
-          ),
-        )
+        const patched = updateTomlValues(original, [[['access_scopes', 'scopes'], 'read_products,write_products']])
+        fs.writeFileSync(tomlPath, patched)
 
         await proc.waitForOutput('App config updated', CLI_TIMEOUT.medium)
         await proc.waitForOutput(UPDATED_MESSAGE, CLI_TIMEOUT.medium)