E2E - QA: init, deploy, versions list, config link, 2nd deploy

Author: phyllis-sy-wu

packages/e2e/setup/app.ts

@@ -27,20 +27,16 @@ export async function createApp(ctx: {
   const template = ctx.template ?? 'reactRouter'
   const packageManager =
     ctx.packageManager ?? (process.env.E2E_PACKAGE_MANAGER as 'npm' | 'yarn' | 'pnpm' | 'bun') ?? 'pnpm'
-
-  const args = [
-    '--name',
-    name,
-    '--path',
-    parentDir,
-    '--package-manager',
-    packageManager,
-    '--local',
-    '--template',
-    template,
-  ]
+  // reactRouter/remix both require a --flavor or they'll hang on the language
+  // prompt in non-interactive runs. Default to javascript when template needs
+  // it. For `--template none` (extension-only) flavor is ignored.
+  const flavor = ctx.flavor ?? (template === 'none' ? undefined : 'javascript')
+
+  const args = ['--template', template]
+  if (flavor) args.push('--flavor', flavor)
+  args.push('--name', name, '--package-manager', packageManager, '--local')
   if (ctx.orgId) args.push('--organization-id', ctx.orgId)
-  if (ctx.flavor) args.push('--flavor', ctx.flavor)
+  args.push('--path', parentDir)
 
   const result = await cli.execCreateApp(args, {
     env: {FORCE_COLOR: '0'},
@@ -116,8 +112,9 @@ export async function generateExtension(
     flavor?: string
   },
 ): Promise<ExecResult> {
-  const args = ['app', 'generate', 'extension', '--name', ctx.name, '--path', ctx.appDir, '--template', ctx.template]
+  const args = ['app', 'generate', 'extension', '--template', ctx.template]
   if (ctx.flavor) args.push('--flavor', ctx.flavor)
+  args.push('--name', ctx.name, '--path', ctx.appDir)
   return ctx.cli.exec(args, {timeout: CLI_TIMEOUT.long})
 }
 
@@ -134,12 +131,13 @@ export async function deployApp(
     noBuild?: boolean
   },
 ): Promise<ExecResult> {
-  const args = ['app', 'deploy', '--path', ctx.appDir]
-  if (ctx.force ?? true) args.push('--force')
-  if (ctx.noBuild) args.push('--no-build')
+  const args = ['app', 'deploy']
   if (ctx.version) args.push('--version', ctx.version)
   if (ctx.message) args.push('--message', ctx.message)
   if (ctx.config) args.push('--config', ctx.config)
+  if (ctx.force ?? true) args.push('--force')
+  if (ctx.noBuild) args.push('--no-build')
+  args.push('--path', ctx.appDir)
   return ctx.cli.exec(args, {timeout: CLI_TIMEOUT.long})
 }
 
@@ -152,7 +150,7 @@ export async function appInfo(ctx: CLIContext): Promise<{
     entrySourceFilePath: string
   }[]
 }> {
-  const result = await ctx.cli.exec(['app', 'info', '--path', ctx.appDir, '--json'])
+  const result = await ctx.cli.exec(['app', 'info', '--json', '--path', ctx.appDir])
   if (result.exitCode !== 0) {
     throw new Error(`app info failed (exit ${result.exitCode}):\nstdout: ${result.stdout}\nstderr: ${result.stderr}`)
   }
@@ -168,25 +166,124 @@ export async function functionRun(
     inputPath: string
   },
 ): Promise<ExecResult> {
-  return ctx.cli.exec(['app', 'function', 'run', '--path', ctx.appDir, '--input', ctx.inputPath], {
+  return ctx.cli.exec(['app', 'function', 'run', '--input', ctx.inputPath, '--path', ctx.appDir], {
     timeout: CLI_TIMEOUT.short,
   })
 }
 
-export async function versionsList(ctx: CLIContext): Promise<ExecResult> {
-  return ctx.cli.exec(['app', 'versions', 'list', '--path', ctx.appDir, '--json'], {
-    timeout: CLI_TIMEOUT.short,
-  })
+export async function versionsList(
+  ctx: CLIContext & {
+    config?: string
+  },
+): Promise<ExecResult> {
+  const args = ['app', 'versions', 'list', '--json']
+  if (ctx.config) args.push('--config', ctx.config)
+  args.push('--path', ctx.appDir)
+  return ctx.cli.exec(args, {timeout: CLI_TIMEOUT.short})
 }
 
+/**
+ * Run `app config link` to create a brand-new app on Shopify interactively.
+ * Answers the prompts:
+ *   "Which organization is this work for?" → filter by orgId → Enter
+ *   "Create this project as a new app on Shopify?" → Yes (default)
+ *   "App name" → appName
+ *   "Configuration file name" → skipped via `--config` flag
+ *
+ * Env overrides (via PTY spawn):
+ *   CI=undefined                        — drop the key so prompts render.
+ *                                         Fixture default is CI=1; Ink's `is-in-ci`
+ *                                         treats `'CI' in env` as CI even when ''.
+ *                                         In CI mode Ink suppresses prompt frames
+ *                                         (only emitted on unmount), so waitForOutput
+ *                                         hangs until the process is killed.
+ *   SHOPIFY_CLI_NEVER_USE_PARTNERS_API=1 — skip Partners client in fetchOrganizations.
+ *                                         Without this, fetchOrganizations iterates
+ *                                         AppManagement AND Partners sequentially.
+ *                                         Partners requires SHOPIFY_CLI_PARTNERS_TOKEN
+ *                                         (not set in OAuth-auth'd tests) and hangs
+ *                                         for minutes trying to authenticate. The e2e
+ *                                         test org (161686155) lives in AppManagement.
+ */
 export async function configLink(
   ctx: CLIContext & {
-    clientId: string
+    appName: string
+    orgId: string
+    configName?: string
   },
 ): Promise<ExecResult> {
-  return ctx.cli.exec(['app', 'config', 'link', '--path', ctx.appDir, '--client-id', ctx.clientId], {
-    timeout: CLI_TIMEOUT.medium,
+  const args = ['app', 'config', 'link']
+  // Pass configName as --config flag. link.ts → loadConfigurationFileName skips
+  // the "Configuration file name" prompt when options.configName is set, which
+  // also side-steps a painful interactive quirk: that prompt uses
+  // `initialAnswer = remoteApp.title`, so any text we write would be appended
+  // to the app name rather than replacing it.
+  if (ctx.configName) args.push('--config', ctx.configName)
+  args.push('--path', ctx.appDir)
+
+  const proc = await ctx.cli.spawn(args, {
+    env: {
+      CI: undefined,
+      SHOPIFY_CLI_NEVER_USE_PARTNERS_API: '1',
+    },
   })
+
+  // Short sleep so Ink's useInput hooks attach before we start writing.
+  // Without this, an Enter press arrives mid-mount and a subsequent render can
+  // flip the prompt state unexpectedly (e.g. turning a select into search mode).
+  const settle = (ms = 150) => new Promise<void>((resolve) => setTimeout(resolve, ms))
+
+  try {
+    // The first prompt is either the multi-org selector or — when the account
+    // has only one org, or none of the orgs have existing apps — we jump
+    // straight to `createAsNewAppPrompt`. Race both.
+    const firstPrompt = await Promise.race([
+      proc.waitForOutput('Which organization', CLI_TIMEOUT.medium).then(() => 'org' as const),
+      proc.waitForOutput('Create this project as a new app', CLI_TIMEOUT.medium).then(() => 'create' as const),
+      proc.waitForOutput('App name', CLI_TIMEOUT.medium).then(() => 'appName' as const),
+    ])
+
+    if (firstPrompt === 'org') {
+      // Type the orgId to filter the autocomplete prompt to exactly one match.
+      // selectOrganizationPrompt's label includes `(${org.id})` when duplicate
+      // org names exist (which is true for the e2e test account), so substring
+      // matching on the numeric ID is unique. Avoids relying on MRU ordering.
+      await settle()
+      proc.ptyProcess.write(ctx.orgId)
+      await settle()
+      proc.sendKey('\r')
+      // After org selection the CLI fetches apps for the chosen org. If
+      // the org has existing apps → "Create this project" prompt. If it has
+      // zero apps → selectOrCreateApp skips straight to appNamePrompt.
+      const next = await Promise.race([
+        proc.waitForOutput('Create this project as a new app', CLI_TIMEOUT.medium).then(() => 'create' as const),
+        proc.waitForOutput('App name', CLI_TIMEOUT.medium).then(() => 'appName' as const),
+      ])
+      if (next === 'create') {
+        await settle()
+        proc.sendKey('\r')
+      }
+    } else if (firstPrompt === 'create') {
+      await settle()
+      proc.sendKey('\r')
+    }
+
+    // Wait for "App name" text prompt and submit the desired name.
+    // Important: Ink parses each PTY data event as ONE keypress. If we write
+    // "name\r" in one call, parseKeypress sees the whole string and treats
+    // it as text (not Enter), so the prompt never submits. We must write the
+    // text, wait for it to be consumed, then write \r separately.
+    await proc.waitForOutput('App name', CLI_TIMEOUT.medium)
+    await settle()
+    proc.ptyProcess.write(ctx.appName)
+    await settle()
+    proc.sendKey('\r')
+
+    const exitCode = await proc.waitForExit(CLI_TIMEOUT.long)
+    return {exitCode, stdout: proc.getOutput(), stderr: ''}
+  } finally {
+    proc.kill()
+  }
 }
 
 // ---------------------------------------------------------------------------

packages/e2e/tests/app-deploy.spec.ts

@@ -1,55 +1,157 @@
-import {appTestFixture as test, createApp, deployApp, versionsList} from '../setup/app.js'
+/* eslint-disable no-restricted-imports */
+import {appTestFixture as test, createApp, deployApp, versionsList, configLink} from '../setup/app.js'
 import {teardownAll} from '../setup/teardown.js'
 import {TEST_TIMEOUT} from '../setup/constants.js'
 import {requireEnv} from '../setup/env.js'
 import {expect} from '@playwright/test'
 import * as fs from 'fs'
-import * as path from 'path' // eslint-disable-line no-restricted-imports
+import * as path from 'path'
+
+/**
+ * Test A — full deploy lifecycle (QA checklist: Apps section, deploy flow).
+ *
+ *   1. `app init` Create primary app (React Router + JavaScript)
+ *   2. `app deploy --version v1` Deploy with a version tag
+ *   3. `app versions list` Verify the primary tag is active and no other
+ *      version is stuck active
+ *   4. `app config link` from primary dir → creates a brand-new secondary app
+ *      interactively (answers org → "Create new?" → app name; config name
+ *      prompt is skipped via `--config secondary`)
+ *   5. `app deploy --config secondary` Deploy from primary dir to secondary app
+ *   6. `app versions list --config secondary` Verify the secondary deploy hit
+ *      the secondary app (not a silent fallback to primary) and the primary
+ *      tag does not leak into secondary's list
+ *
+ * Test body is pure CLI; teardown uses the dev dashboard to delete both apps.
+ */
+
+interface VersionLine {
+  versionTag?: string | null
+  status: string
+}
+
+/**
+ * Asserts a `versions list --json` result shows:
+ *   - `expectedTag` is present and `active`
+ *   - no other version is stuck `active`
+ *   - (if `forbiddenTag` provided) `forbiddenTag` does not appear at all
+ *
+ * The last check guards cross-app leakage: a version we expect to live on one
+ * app should never appear in another app's version list.
+ */
+function assertActiveVersion(opts: {
+  result: {stdout: string; stderr: string; exitCode: number}
+  expectedTag: string
+  step: string
+  forbiddenTag?: string
+}) {
+  const {result, expectedTag, step, forbiddenTag} = opts
+  const output = result.stdout + result.stderr
+  expect(result.exitCode, `${step} - versions list failed:\n${output}`).toBe(0)
+  const versions = JSON.parse(result.stdout) as VersionLine[]
+  const entry = versions.find((version) => version.versionTag === expectedTag)
+  expect(entry, `${step} - version tag "${expectedTag}" not found in:\n${result.stdout}`).toBeDefined()
+  expect(entry?.status, `${step} - expected "${expectedTag}" to be active, got "${entry?.status}"`).toBe('active')
+  const otherActive = versions.filter((version) => version.versionTag !== expectedTag && version.status === 'active')
+  expect(otherActive, `${step} - unexpected other active versions: ${JSON.stringify(otherActive)}`).toHaveLength(0)
+  if (forbiddenTag) {
+    const tags = versions.map((version) => version.versionTag)
+    expect(tags, `${step} - tag "${forbiddenTag}" unexpectedly found in list`).not.toContain(forbiddenTag)
+  }
+}
 
 test.describe('App deploy', () => {
-  test('deploy and verify version exists', async ({cli, env, browserPage}) => {
+  test('init, deploy, versions list, config link, deploy to secondary', async ({cli, env, browserPage}) => {
     test.setTimeout(TEST_TIMEOUT.long)
     requireEnv(env, 'orgId')
 
     const parentDir = fs.mkdtempSync(path.join(env.tempDir, 'app-'))
-    const appName = `E2E-deploy-${Date.now()}`
+    const appName = `E2E-deploy1-${Date.now()}`
+    const secondaryAppName = `E2E-deploy2-${Date.now()}`
 
     try {
-      // Step 1: Create an extension-only app (no scopes needed for deploy)
+      // Step 1: Create primary app (React Router template)
       const initResult = await createApp({
         cli,
         parentDir,
         name: appName,
-        template: 'none',
+        template: 'reactRouter',
+        flavor: 'javascript',
         packageManager: 'pnpm',
         orgId: env.orgId,
       })
-      expect(initResult.exitCode, `createApp failed:\nstdout: ${initResult.stdout}\nstderr: ${initResult.stderr}`).toBe(
-        0,
-      )
+      expect(initResult.exitCode, `Step 1 - primary app init failed:\n${initResult.stderr}`).toBe(0)
       const appDir = initResult.appDir
 
       // Step 2: Deploy with a tagged version
-      const versionTag = `e2e-v-${Date.now()}`
-      const deployResult = await deployApp({cli, appDir, version: versionTag, message: 'E2E test deployment'})
+      const versionTag = `E2E-v1-${Date.now()}`
+      const deployResult = await deployApp({cli, appDir, version: versionTag, message: 'E2E A primary deployment'})
       const deployOutput = deployResult.stdout + deployResult.stderr
-      expect(deployResult.exitCode, `deploy failed:\n${deployOutput}`).toBe(0)
+      expect(deployResult.exitCode, `Step 2 - deploy failed:\n${deployOutput}`).toBe(0)
 
-      // Step 3: Verify the version exists via versions list
+      // Step 3: Verify the primary tag is active and no other version is stuck active.
       const listResult = await versionsList({cli, appDir})
-      const listOutput = listResult.stdout + listResult.stderr
-      expect(listResult.exitCode, `versions list failed:\n${listOutput}`).toBe(0)
-      expect(listOutput).toContain(versionTag)
+      assertActiveVersion({result: listResult, expectedTag: versionTag, step: 'Step 3'})
+
+      // Step 4: Config link from primary dir → creates a brand-new secondary app
+      // interactively (org → "Create new?" → "App name"). The "Configuration file
+      // name" prompt is skipped via `--config secondary`.
+      const secondaryConfig = 'secondary'
+      const linkResult = await configLink({
+        cli,
+        appDir,
+        appName: secondaryAppName,
+        orgId: env.orgId,
+        configName: secondaryConfig,
+      })
+      const linkOutput = linkResult.stdout + linkResult.stderr
+      expect(linkResult.exitCode, `Step 4 - config link failed:\n${linkOutput}`).toBe(0)
+      expect(linkOutput, 'Step 4 - missing "is now linked to"').toContain('is now linked to')
+      const secondaryTomlPath = path.join(appDir, `shopify.app.${secondaryConfig}.toml`)
+      expect(
+        fs.existsSync(secondaryTomlPath),
+        `Step 4 - expected ${secondaryTomlPath} to exist after config link`,
+      ).toBe(true)
+
+      // Step 5: Deploy from primary dir to secondary app via --config secondary
+      const secondaryVersionTag = `E2E-v2-${Date.now()}`
+      const secondaryDeployResult = await deployApp({
+        cli,
+        appDir,
+        config: secondaryConfig,
+        version: secondaryVersionTag,
+        message: 'E2E A secondary deployment',
+      })
+      const secondaryDeployOutput = secondaryDeployResult.stdout + secondaryDeployResult.stderr
+      expect(secondaryDeployResult.exitCode, `Step 5 - secondary deploy failed:\n${secondaryDeployOutput}`).toBe(0)
+
+      // Step 6: Verify the secondary deploy hit the secondary app (not a silent
+      // fallback to primary). Checks the secondary tag is active, no other
+      // version is stuck active, and the primary tag doesn't leak into secondary.
+      const secondaryListResult = await versionsList({cli, appDir, config: secondaryConfig})
+      assertActiveVersion({
+        result: secondaryListResult,
+        expectedTag: secondaryVersionTag,
+        step: 'Step 6',
+        forbiddenTag: versionTag,
+      })
     } finally {
       // E2E_SKIP_TEARDOWN=1 skips teardown for debugging. Run cleanup scripts afterward.
       if (!process.env.E2E_SKIP_TEARDOWN) {
         fs.rmSync(parentDir, {recursive: true, force: true})
+        // Neither app was installed on a store — delete the apps only (no uninstall)
         await teardownAll({
           browserPage,
           appName,
           orgId: env.orgId,
           workerIndex: env.workerIndex,
         })
+        await teardownAll({
+          browserPage,
+          appName: secondaryAppName,
+          orgId: env.orgId,
+          workerIndex: env.workerIndex,
+        })
       }
     }
   })