Create mocks for the entire Customer Account extension API by kumar303 · Pull Request #3905 · Shopify/ui-extensions

kumar303 · 2026-02-12T17:51:09Z

Follow up to #3899 that adds a complete, type-safe mock of the Customer Account extension API

👁️ How to review this PR

📖 Read the main developer-facing documentation
📖 Read the Customer Account specific documentation
Try running tests in the example app on this branch

kumar303 · 2026-02-12T17:51:28Z

Warning

This pull request is not mergeable via GitHub because a downstack PR is open. Once all requirements are satisfied, merge this PR as a stack on Graphite.
Learn more

This stack of pull requests is managed by Graphite. Learn more about stacking.

robin-drexler · 2026-02-24T14:34:20Z

packages/ui-extensions-tester/src/customer-account/factories.ts

+
+const customerAccountMockFactories: CustomerAccountMockFactory = {
+  // StandardApi only
+  'customer-account.page.render': createStandardApiProperties,


Should we also add the navigation api? https://shopify.dev/docs/api/customer-account-ui-extensions/latest/apis/navigation

navigate is available in all targets, full page extensions have more properties available

oh yeah. Is this available for Admin, too? I can't tell.

I added a mock for all surfaces (on the base branch). Good call, thanks!

Why all surfaces? 😅 Checkout doesn't have it, right?

if at least two surfaces include it then I think it's good to include it everywhere. We could make navigate() throw an error if the extension under test is in an unsupported target.

POS implements the same navigation API. It should share the type but that's for another day. https://github.com/Shopify/ui-extensions/blob/2026-04-rc/packages/ui-extensions/src/surfaces/point-of-sale/api/navigation-api/navigation-api.ts

robin-drexler · 2026-02-25T14:58:12Z

Tried to run tests, but it failed to resolve the package.
Any other commands I gotta run despite yarn in the main package and npm i in the test example app?

 extensions/customer-account-testing-example/tests/OrderStatusBlock.test.ts [ extensions/customer-account-testing-example/tests/OrderStatusBlock.test.ts ]
Error: Failed to resolve entry for package "@shopify/ui-extensions-tester". The package may have incorrect main/module/exports specified in its package.json.
  Plugin: vite:import-analysis
  File: /Users/robindrexler/src/github.com/Shopify/ui-extensions/examples/testing/customer-account-testing-example/extensions/customer-account-testing-example/tests/OrderStatusBlock.test.ts:5:27
  1  |  import { expect, test, beforeEach, afterEach } from "vitest";
  2  |  import { getExtension } from "@shopify/ui-extensions-tester";
     |                                ^
  3  |  const extension = getExtension(
  4  |    "customer-account.order-status.block.render"
 ❯ packageEntryFailure node_modules/vite/dist/node/chunks/config.js:32816:32
 ❯ resolvePackageEntry node_modules/vite/dist/node/chunks/config.js:32813:2
 ❯ tryNodeResolve node_modules/vite/dist/node/chunks/config.js:32716:70
 ❯ ResolveIdContext.handler node_modules/vite/dist/node/chunks/config.js:32555:16
 ❯ EnvironmentPluginContainer.resolveId node_modules/vite/dist/node/chunks/config.js:28717:56
 ❯ TransformPluginContext.resolve node_modules/vite/dist/node/chunks/config.js:28929:13
 ❯ normalizeUrl node_modules/vite/dist/node/chunks/config.js:27111:22
 ❯ node_modules/vite/dist/node/chunks/config.js:27177:32

kumar303 · 2026-02-25T15:02:17Z

Hmm, this is working for me. Is this what you did?

yarn build
pushd examples/testing/customer-account-testing-example
npm install
npm test

robin-drexler · 2026-02-25T15:09:03Z

Hmm, this is working for me. Is this what you did?
yarn build
pushd examples/testing/customer-account-testing-example
npm install
npm test

ah nope, didn't run the yarn build step. 🤦‍♂️ Thanks

robin-drexler · 2026-02-25T15:09:59Z

Not sure if expected, after running yarn, I have diff in the yarn.lock

diff --git a/yarn.lock b/yarn.lock
index ecd4402ac..9094c8db4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2024,6 +2024,13 @@
   resolved "https://registry.npmjs.org/@shopify/typescript-configs/-/typescript-configs-5.1.0.tgz"
   integrity sha512-RywGBTR+nQyJLxcrUcihPkHPIG3pIQI6i0YwMrM5rs9nWJ0+9A5HKEcboyGPLH+8V08EXGfFQ6H820O9ajyk4A==

+"@shopify/ui-extensions@*":
+  version "2026.1.2"
+  resolved "https://npm.shopify.io/node/@shopify/ui-extensions/-/ui-extensions-2026.1.2.tgz#2599a6bf6063640f467a3c3ff2ab80afbd2de9d0"
+  integrity sha512-lngck7uPBcpMrL36cw/7NJCBsagIleB6dw/hrxEtW600PdPoOUoUyhOnsjM4J5NCheNGD4Ar2h/a0zh2ki9QXw==
+  dependencies:
+    ts-morph "^25.0.1"
+
 "@sinclair/typebox@^0.24.1":
   version "0.24.51"
   resolved "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.51.tgz"

robin-drexler · 2026-02-25T15:11:36Z

@kumar303 why did you choose to have all those examples be packages that use npm and handle their own locks etc?

Why not make them part of the workspaces for easier dependency management?

kumar303 · 2026-02-25T15:11:45Z

I updated all the example readmes to specify the build step. As for yarn.lock, that's probably because you're not at the top of the stack. I might have to fix yarn.local after it all merges anyway.

kumar303 · 2026-02-25T15:12:56Z

Why not make them part of the workspaces

probably no good reason. I didn't think I could make nested example directories part of the workspace.

kumar303 · 2026-02-25T15:13:44Z

and yarn is weird

robin-drexler

This is amazing. I haven't (yet) looked into how the sausage is made exactly, but the test experience looks good at a glance!

robin-drexler · 2026-02-25T15:12:43Z

...t-testing-example/extensions/customer-account-testing-example/tests/OrderStatusBlock.test.ts

+);
+
+beforeEach(() => {
+  extension.setUp();


nit: why not setup?

because that's not grammatically correct? 😅 The imperative verb tense is set up and in noun form it would be setup. Forgive me for being pedantic, sorry; I just need the illusion of control in my life sometimes.

andrewmcgov

Nice work @kumar303 this will be a huge win for extension devs. Very excited about this.

Was able to test it out successfully:

andrewmcgov · 2026-02-27T14:18:38Z

packages/ui-extensions-tester/src/customer-account/factories.ts

+function createMoney(): Money {
+  return {amount: 0, currencyCode: 'USD' as const};
+}


Not a huge deal but createMoney is defined twice, here and in packages/ui-extensions-tester/src/customer-account/index.ts Probably only need one of them?

kumar303 mentioned this pull request Feb 12, 2026

Add a testing library for ui-extensions #3899

Open

This was referenced Feb 12, 2026

Create mocks for the entire checkout extension API #3902

Open

Create mocks for the entire point-of-sale extension API #3904

Open

kumar303 force-pushed the 02-12-create_mocks_for_the_entire_customer_account_extension_api branch from 8c15ddb to 4a0e80d Compare February 12, 2026 17:57

kumar303 force-pushed the 02-12-create_mocks_for_the_entire_point-of-sale_extension_api branch from 3e06b36 to 072992f Compare February 12, 2026 19:44

kumar303 force-pushed the 02-12-create_mocks_for_the_entire_customer_account_extension_api branch from 4a0e80d to 27fe3a8 Compare February 12, 2026 19:44

kumar303 mentioned this pull request Feb 12, 2026

Create mocks for the entire Admin extension API #3914

Open

kumar303 force-pushed the 02-12-create_mocks_for_the_entire_point-of-sale_extension_api branch from 072992f to 34763c2 Compare February 13, 2026 11:46

kumar303 force-pushed the 02-12-create_mocks_for_the_entire_customer_account_extension_api branch from 27fe3a8 to 8fccf50 Compare February 13, 2026 11:46

kumar303 force-pushed the 02-12-create_mocks_for_the_entire_point-of-sale_extension_api branch from 34763c2 to c11b76b Compare February 13, 2026 11:58

kumar303 force-pushed the 02-12-create_mocks_for_the_entire_customer_account_extension_api branch from 8fccf50 to b6b83e9 Compare February 13, 2026 11:58

kumar303 force-pushed the 02-12-create_mocks_for_the_entire_point-of-sale_extension_api branch from c11b76b to bb5b1ed Compare February 13, 2026 12:20

kumar303 force-pushed the 02-12-create_mocks_for_the_entire_customer_account_extension_api branch 3 times, most recently from bab7729 to a303042 Compare February 13, 2026 14:57

kumar303 force-pushed the 02-12-create_mocks_for_the_entire_point-of-sale_extension_api branch 2 times, most recently from 344b671 to af00386 Compare February 13, 2026 15:11

kumar303 force-pushed the 02-12-create_mocks_for_the_entire_customer_account_extension_api branch from a303042 to 2db9df6 Compare February 13, 2026 15:11

kumar303 force-pushed the 02-12-create_mocks_for_the_entire_point-of-sale_extension_api branch from af00386 to 7049f9e Compare February 13, 2026 15:33

kumar303 force-pushed the 02-12-create_mocks_for_the_entire_customer_account_extension_api branch 2 times, most recently from 6e15cd7 to 83b81e0 Compare February 13, 2026 15:34

kumar303 force-pushed the 02-12-create_mocks_for_the_entire_point-of-sale_extension_api branch from 7049f9e to 1a6144c Compare February 13, 2026 15:34

kumar303 force-pushed the 02-12-create_mocks_for_the_entire_customer_account_extension_api branch from 83b81e0 to 69f7238 Compare February 13, 2026 16:14

kumar303 force-pushed the 02-12-create_mocks_for_the_entire_point-of-sale_extension_api branch from 1a6144c to 62487cd Compare February 13, 2026 16:14

kumar303 force-pushed the 02-12-create_mocks_for_the_entire_customer_account_extension_api branch from 69f7238 to bb90420 Compare February 13, 2026 16:24

kumar303 force-pushed the 02-12-create_mocks_for_the_entire_point-of-sale_extension_api branch from 62487cd to 4fd668d Compare February 13, 2026 16:24

kumar303 force-pushed the 02-12-create_mocks_for_the_entire_customer_account_extension_api branch from bb90420 to 9707ec1 Compare February 13, 2026 22:04

kumar303 force-pushed the 02-12-create_mocks_for_the_entire_point-of-sale_extension_api branch from 4fd668d to d8892b1 Compare February 13, 2026 22:58

kumar303 force-pushed the 02-12-create_mocks_for_the_entire_customer_account_extension_api branch from 9707ec1 to 2b029e3 Compare February 13, 2026 22:58

kumar303 force-pushed the 02-12-create_mocks_for_the_entire_point-of-sale_extension_api branch 2 times, most recently from 6a6278e to 62257f8 Compare February 15, 2026 21:16

kumar303 force-pushed the 02-12-create_mocks_for_the_entire_customer_account_extension_api branch from 6e71146 to 72c73f2 Compare February 15, 2026 21:16

kumar303 force-pushed the 02-12-create_mocks_for_the_entire_point-of-sale_extension_api branch from 62257f8 to a032d27 Compare February 15, 2026 21:17

kumar303 force-pushed the 02-12-create_mocks_for_the_entire_customer_account_extension_api branch 2 times, most recently from f40aec8 to c54d277 Compare February 15, 2026 22:24

kumar303 force-pushed the 02-12-create_mocks_for_the_entire_point-of-sale_extension_api branch 2 times, most recently from d589fc4 to 5efb512 Compare February 15, 2026 22:26

kumar303 force-pushed the 02-12-create_mocks_for_the_entire_customer_account_extension_api branch from c54d277 to ce20b48 Compare February 15, 2026 22:26

kumar303 force-pushed the 02-12-create_mocks_for_the_entire_point-of-sale_extension_api branch from 5efb512 to 85f54b7 Compare February 15, 2026 22:32

kumar303 force-pushed the 02-12-create_mocks_for_the_entire_customer_account_extension_api branch 2 times, most recently from 302e58c to f89ddc2 Compare February 15, 2026 22:45

kumar303 force-pushed the 02-12-create_mocks_for_the_entire_point-of-sale_extension_api branch 2 times, most recently from a3b1741 to d44f1a8 Compare February 15, 2026 23:31

kumar303 force-pushed the 02-12-create_mocks_for_the_entire_customer_account_extension_api branch from f89ddc2 to 698b63c Compare February 15, 2026 23:31

kumar303 force-pushed the 02-12-create_mocks_for_the_entire_point-of-sale_extension_api branch from d44f1a8 to 52fb875 Compare February 16, 2026 11:34

kumar303 force-pushed the 02-12-create_mocks_for_the_entire_customer_account_extension_api branch from 698b63c to 0e206f6 Compare February 16, 2026 11:34

kumar303 force-pushed the 02-12-create_mocks_for_the_entire_point-of-sale_extension_api branch from 52fb875 to ce1d887 Compare February 17, 2026 13:08

robin-drexler reviewed Feb 24, 2026

View reviewed changes

robin-drexler approved these changes Feb 25, 2026

View reviewed changes

andrewmcgov approved these changes Feb 27, 2026

View reviewed changes

Create mocks for the entire Customer Account extension API

31e8414

Conversation

kumar303 commented Feb 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

👁️ How to review this PR

Uh oh!

kumar303 commented Feb 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

robin-drexler commented Feb 25, 2026

Uh oh!

kumar303 commented Feb 25, 2026

Uh oh!

robin-drexler commented Feb 25, 2026

Uh oh!

robin-drexler commented Feb 25, 2026

Uh oh!

robin-drexler commented Feb 25, 2026

Uh oh!

kumar303 commented Feb 25, 2026

Uh oh!

kumar303 commented Feb 25, 2026

Uh oh!

kumar303 commented Feb 25, 2026

Uh oh!

robin-drexler left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

kumar303 Mar 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

andrewmcgov left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

kumar303 commented Feb 12, 2026 •

edited

Loading

kumar303 commented Feb 12, 2026 •

edited

Loading

kumar303 Mar 6, 2026 •

edited

Loading