Add a testing library for ui-extensions

.changeset/config.json

@@ -6,7 +6,7 @@
   ],
   "commit": false,
   "fixed": [],
-  "linked": [],
+  "linked": [["@shopify/ui-extensions", "@shopify/ui-extensions-tester"]],
   "access": "restricted",
   "baseBranch": "unstable",
   "updateInternalDependencies": "patch",

.github/workflows/ci.yml

@@ -42,6 +42,22 @@ jobs:
       - name: Lint
         run: yarn lint
 
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ./.github/workflows/actions/prepare
+
+      - name: Build packages
+        run: yarn build
+
+      - name: Typecheck ui-extensions-tester (including tests)
+        run: npx tsc --project packages/ui-extensions-tester/tsconfig.typecheck.json
+
+      - name: Test ui-extensions-tester
+        run: npx loom test --no-watch packages/ui-extensions-tester/
+
   test-build:
     runs-on: ubuntu-latest
 

.prettierignore

@@ -1,4 +1,6 @@
 node_modules
+.shopify
+**/.shopify
 packages/*/build
 packages/web-pixels-extension/src/schemas/pixel-events.jtd.json
 packages/ui-extensions/src/surfaces/checkout/**/*.d.ts

.prettierrc

@@ -12,6 +12,14 @@
       "options": {
         "printWidth": 50
       }
+    },
+    {
+      "files": [
+        "packages/ui-extensions-tester/**/README.md"
+      ],
+      "options": {
+        "printWidth": 50
+      }
     }
   ]
 }

AGENTS.md

@@ -0,0 +1,12 @@
+# AGENTS.md
+
+After every change, you must:
+
+1. **Run `yarn build`** — rebuild any changed packages.
+2. **Run relevant tests** — ensure all affected test suites pass. Read ./CONTRIBUTING.md for how to run tests.
+3. **Check for type errors** — run the TypeScript compiler to verify there are no type errors.
+4. **Check for lint and formatting errors** — run the linter and formatter to ensure code quality.
+
+## ui-extensions-tester
+
+When working on `ui-extensions-tester`, ALWAYS read [packages/ui-extensions-tester/AGENTS.md](packages/ui-extensions-tester/AGENTS.md).

CONTRIBUTING.md

@@ -7,3 +7,25 @@ These packages act as the public API Shopify is exposing for UI Extensions in ou
 Though we are not accepting contributions, we’d still love to hear from you! If you have ideas for new components or APIs, please [raise an issue on this repo](https://github.com/Shopify/ui-extensions/issues/new/choose). We will also happily accept pull requests for fixing typos in the documentation. If you do raise an issue or PR on this repo, please read [the code of conduct](./CODE_OF_CONDUCT.md), which all contributors must adhere to.
 
 Shopifolk looking to contribute fixes and new features to our UI extension APIs can follow the [versions and deploys guide](./documentation/versions-and-deploys.md).
+
+## Development
+
+Build all libraries:
+
+```
+yarn build
+```
+
+## Development on ui-extensions-tester
+
+Run all tests:
+
+```
+yarn test -- packages/ui-extensions-tester/
+```
+
+For integration, run all example test suites:
+
+```
+yarn test:example-suites
+```

package.json

@@ -31,7 +31,10 @@
     "run:ts": "babel-node --extensions .ts,.tsx,.mjs,.js,.json",
     "run:ts:watch": "nodemon --ext .ts,.tsx,.mjs,.json,.graphql node_modules/.bin/babel-node --extensions .ts,.tsx,.mjs,.js,.json",
     "type-check": "loom type-check",
-    "changeset:exit-pre-mode": "test -f .changeset/pre.json && jq -e '.mode == \"pre\"' .changeset/pre.json > /dev/null && yarn changeset pre exit || true"
+    "changeset:exit-pre-mode": "test -f .changeset/pre.json && jq -e '.mode == \"pre\"' .changeset/pre.json > /dev/null && yarn changeset pre exit || true",
+    "test": "loom test --no-watch",
+    "test:watch": "loom test",
+    "test:example-suites": "for dir in examples/testing/*/; do (cd \"$dir\" && npm install && npm run typecheck && npm test) || exit 1; done"
   },
   "devDependencies": {
     "@babel/node": "^7.8.7",

packages/ui-extensions-tester/AGENTS.md

@@ -0,0 +1,16 @@
+# AGENTS.md
+
+Implement every feature with TDD. See `./tests`.
+
+After every change, run the relevant test suites in `examples/testing/*` to verify that example tests still pass.
+
+Keep documentation up to date in both the package README (`packages/ui-extensions-tester/README.md`) and each surface-specific README:
+
+- `packages/ui-extensions-tester/src/admin/README.md`
+- `packages/ui-extensions-tester/src/checkout/README.md`
+- `packages/ui-extensions-tester/src/customer-account/README.md`
+- `packages/ui-extensions-tester/src/point-of-sale/README.md`
+
+Any change to exports, function signatures, or behavior must be reflected in the relevant docs.
+
+Code blocks in README files are formatted at print width 50 via the root `.prettierrc` override. Run `npx prettier --write` on any changed README.