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

Author: kumar303

.github/workflows/ci.yml

@@ -62,6 +62,10 @@ jobs:
         run: npm install && npm run typecheck && npm test
         working-directory: examples/testing/checkout-basic-testing-example
 
+      - name: Testing example (point-of-sale)
+        run: npm install && npm run typecheck && npm test
+        working-directory: examples/testing/point-of-sale-testing-example
+
   test-build:
     runs-on: ubuntu-latest
 

examples/testing/point-of-sale-testing-example/.gitignore

@@ -0,0 +1,28 @@
+# Environment Configuration
+.env
+.env.*
+
+# Dependency directory
+node_modules
+
+# Test coverage directory
+coverage
+
+# Ignore Apple macOS Desktop Services Store
+.DS_Store
+
+# Logs
+logs
+*.log
+
+# extensions build output
+extensions/*/build
+extensions/*/dist
+
+# lock files
+
+
+
+# Ignore shopify files created during app dev
+.shopify/*
+.shopify.lock

examples/testing/point-of-sale-testing-example/.graphqlrc.js

@@ -0,0 +1,30 @@
+const fs = require("node:fs");
+
+function getConfig() {
+  const config = {
+    projects: {},
+  };
+
+  let extensions = [];
+  try {
+    extensions = fs.readdirSync("./extensions");
+  } catch {
+    // ignore if no extensions
+  }
+
+  for (const entry of extensions) {
+    const extensionPath = `./extensions/${entry}`;
+    const schema = `${extensionPath}/schema.graphql`;
+    if (!fs.existsSync(schema)) {
+      continue;
+    }
+    config.projects[entry] = {
+      schema,
+      documents: [`${extensionPath}/**/*.graphql`],
+    };
+  }
+
+  return config;
+}
+
+module.exports = getConfig();

examples/testing/point-of-sale-testing-example/README.md

@@ -0,0 +1,24 @@
+This extension was created with:
+
+```
+shopify app init --name point-of-sale-testing-example
+cd point-of-sale-testing-example
+shopify app generate extension
+# I chose 'POS block'
+```
+
+See it in action:
+
+Build the root package:
+
+```
+yarn build
+```
+
+Change into this example package and run:
+
+```
+npm install
+npm run typecheck
+npm test
+```

examples/testing/point-of-sale-testing-example/extensions/.gitkeep

@@ -0,0 +1,10 @@
+{
+  "name": "point-of-sale-testing-example-ext",
+  "private": true,
+  "version": "1.0.0",
+  "license": "UNLICENSED",
+  "dependencies": {
+    "@shopify/ui-extensions": "file:../../../../packages/ui-extensions",
+    "preact": "^10.10.x"
+  }
+}

examples/testing/point-of-sale-testing-example/extensions/point-of-sale-testing-example/package-lock.json

@@ -0,0 +1,13 @@
+import '@shopify/ui-extensions';
+
+//@ts-ignore
+declare module './src/Tile.jsx' {
+  const shopify: import('@shopify/ui-extensions/pos.home.tile.render').Api;
+  const globalThis: { shopify: typeof shopify };
+}
+
+//@ts-ignore
+declare module './src/Modal.jsx' {
+  const shopify: import('@shopify/ui-extensions/pos.home.modal.render').Api;
+  const globalThis: { shopify: typeof shopify };
+}

examples/testing/point-of-sale-testing-example/extensions/point-of-sale-testing-example/package.json

@@ -0,0 +1,21 @@
+# Learn more about configuring your POS UI extension:
+# https://shopify.dev/docs/api/pos-ui-extensions
+
+# The version of APIs your extension will receive. Learn more:
+# https://shopify.dev/docs/api/usage/versioning
+api_version = "2026-04"
+
+[[extensions]]
+uid = "80f617f3-cfaf-bcfc-f4bd-8bf4faabbc38dc0e7226"
+type = "ui_extension"
+name = "point-of-sale-testing-example"
+handle = "point-of-sale-testing-example"
+description = "A preact POS UI extension"
+
+[[extensions.targeting]]
+module = "./src/Tile.jsx"
+target = "pos.home.tile.render"
+
+[[extensions.targeting]]
+module = "./src/Modal.jsx"
+target = "pos.home.modal.render"

examples/testing/point-of-sale-testing-example/extensions/point-of-sale-testing-example/shopify.d.ts

@@ -0,0 +1,27 @@
+import {render} from 'preact';
+
+export default async () => {
+  render(<Extension />, document.body);
+};
+
+function Extension() {
+  const cart = shopify.cart.current.value;
+  const lineItems = cart ? cart.lineItems : [];
+
+  return (
+    <s-page heading="Cart details">
+      <s-stack direction="block">
+        {lineItems.length === 0 ? (
+          <s-text>No items in cart</s-text>
+        ) : (
+          lineItems.map((item) => (
+            <s-stack key={item.uuid} direction="inline">
+              <s-text>{item.title}</s-text>
+              <s-text>Qty: {item.quantity}</s-text>
+            </s-stack>
+          ))
+        )}
+      </s-stack>
+    </s-page>
+  );
+}