Get types to work inside of a realm test file locally

packages/catalog-realm/package.json

@@ -8,7 +8,10 @@
     "@cardstack/boxel-ui": "workspace:*",
     "@cardstack/local-types": "workspace:*",
     "@cardstack/runtime-common": "workspace:*",
+    "@ember/test-helpers": "catalog:",
     "@types/lodash": "catalog:",
+    "@types/qunit": "catalog:",
+    "@universal-ember/test-support": "catalog:",
     "@types/uuid": "catalog:",
     "chess.js": "catalog:",
     "concurrently": "catalog:",

packages/catalog-realm/tsconfig.json

@@ -27,6 +27,7 @@
     },
     "types": ["@cardstack/local-types"]
   },
+  "include": ["**/*.ts", "**/*.gts", "../local-types/test-support.d.ts"],
   "glint": {
     "environment": ["ember-loose", "ember-template-imports"]
   }

packages/experiments-realm/package.json

@@ -8,6 +8,9 @@
     "@cardstack/boxel-ui": "workspace:*",
     "@cardstack/local-types": "workspace:*",
     "@cardstack/runtime-common": "workspace:*",
+    "@ember/test-helpers": "catalog:",
+    "@types/qunit": "catalog:",
+    "@universal-ember/test-support": "catalog:",
     "@cardstack/view-transitions": "catalog:",
     "@types/lodash": "catalog:",
     "ember-animated": "catalog:",

packages/experiments-realm/sample-command-card.gts

@@ -0,0 +1,106 @@
+import { CardDef, field, contains, Component } from 'https://cardstack.com/base/card-api';
+import StringField from 'https://cardstack.com/base/string';
+
+export class SampleCommandCard extends CardDef {
+  static displayName = 'Sample Command Card';
+  @field title = contains(StringField);
+
+  static isolated = class Isolated extends Component<typeof SampleCommandCard> {
+    <template>
+      <h1><@fields.title /></h1>
+      <button type='button'>Create Card</button>
+    </template>
+  };
+}
+
+// ── Tests (imports resolved via loader.shimModule in live-test.js) ────────────
+import { on } from '@ember/modifier';
+import { service } from '@ember/service';
+import { click, render } from '@ember/test-helpers';
+import GlimmerComponent from '@glimmer/component';
+import { module, test } from 'qunit';
+
+import { getService } from '@universal-ember/test-support';
+import { baseRealm } from '@cardstack/runtime-common';
+import type StoreService from '@cardstack/host/services/store';
+import {
+  setupIntegrationTestRealm,
+  setupLocalIndexing,
+  setupOnSave,
+  setupCardLogs,
+  testRealmURL,
+  setupRealmCacheTeardown,
+  withCachedRealmSetup,
+  type TestContextWithSave,
+} from '@cardstack/host/tests/helpers';
+import { setupMockMatrix } from '@cardstack/host/tests/helpers/mock-matrix';
+import { setupRenderingTest } from '@cardstack/host/tests/helpers/setup';
+import type { TestRealmAdapter } from '@cardstack/host/tests/helpers/adapter';
+
+class CreateCardButton extends GlimmerComponent {
+  @service declare store: StoreService;
+
+  createCard = async () => {
+    await this.store.add(new SampleCommandCard({ title: 'Hello from live-test' }));
+  };
+
+  <template>
+    <button type='button' {{on 'click' this.createCard}}>Create Card</button>
+  </template>
+}
+
+module('Experiments | SampleCommandCard', function (hooks) {
+  setupRenderingTest(hooks);
+  setupLocalIndexing(hooks);
+  setupOnSave(hooks);
+  setupRealmCacheTeardown(hooks);
+  setupCardLogs(hooks, async () =>
+    (getService('loader-service') as any).loader.import(`${baseRealm.url}card-api`),
+  );
+
+  let mockMatrixUtils = setupMockMatrix(hooks, {
+    loggedInAs: '@testuser:localhost',
+    activeRealms: [testRealmURL],
+    autostart: true,
+  });
+
+  let testRealmAdapter: TestRealmAdapter;
+
+  hooks.beforeEach(async function () {
+    ({ adapter: testRealmAdapter } = await withCachedRealmSetup(async () =>
+      setupIntegrationTestRealm({
+        mockMatrixUtils,
+        contents: {
+          'sample-command-card.gts': { SampleCommandCard },
+          '.realm.json': '{ "name": "Sample Realm" }',
+        },
+      }),
+    ));
+  });
+
+  test('clicking Create Card writes a new card to the realm', async function (
+    this: TestContextWithSave,
+    assert,
+  ) {
+      assert.expect(3);
+
+      let savedUrl: URL | undefined;
+      this.onSave((url, doc) => {
+        savedUrl = url;
+        assert.strictEqual(
+          (doc as any).data.attributes.title,
+          'Hello from live-test',
+          'saved doc has correct title',
+        );
+      });
+
+      await render(<template><CreateCardButton /></template>);
+      await click('button');
+
+      assert.ok(savedUrl, 'card was saved to realm');
+      let relativePath = `${savedUrl!.href.substring(testRealmURL.length)}.json`;
+      let file = await testRealmAdapter.openFile(relativePath);
+      assert.ok(file, 'card JSON file exists in the realm adapter');
+    },
+  );
+});

packages/experiments-realm/tsconfig.json

@@ -28,6 +28,7 @@
     },
     "types": ["@cardstack/local-types"]
   },
+  "include": ["**/*.ts", "**/*.gts", "../local-types/test-support.d.ts"],
   "glint": {
     "environment": ["ember-loose", "ember-template-imports"]
   }

packages/host/package.json

@@ -48,7 +48,7 @@
     "@cardstack/view-transitions": "catalog:",
     "@ember/optional-features": "^2.0.0",
     "@ember/string": "^3.1.1",
-    "@ember/test-helpers": "^3.3.1",
+    "@ember/test-helpers": "catalog:",
     "@ember/test-waiters": "catalog:",
     "@embroider/compat": "^3.5.5",
     "@embroider/core": "^3.4.15",

packages/local-types/test-support.d.ts

@@ -0,0 +1,66 @@
+// Opt-in type declarations for colocated realm test files.
+// Add this path to your realm package's tsconfig "include" array:
+//   "../local-types/test-support.d.ts"
+//
+// Also add to your realm package's devDependencies:
+//   "@ember/test-helpers": "catalog:"
+//   "@types/qunit": "catalog:"
+//   "@universal-ember/test-support": "catalog:"
+//
+// The declarations below cover @cardstack/host internal modules which have no
+// separate npm package. All other test imports resolve via node_modules.
+
+// ── @cardstack/host services ─────────────────────────────────────────────────
+declare module '@cardstack/host/services/store' {
+  export default class StoreService {
+    add(instance: unknown): Promise<unknown>;
+    peek(id: string): unknown;
+  }
+}
+
+// ── @cardstack/host test helpers ─────────────────────────────────────────────
+declare module '@cardstack/host/tests/helpers/adapter' {
+  export interface TestRealmAdapter {
+    openFile(path: string): Promise<{ content: string | Uint8Array } | undefined>;
+  }
+}
+
+declare module '@cardstack/host/tests/helpers' {
+  import type { TestRealmAdapter } from '@cardstack/host/tests/helpers/adapter';
+
+  export interface SetupRealmResult {
+    adapter: TestRealmAdapter;
+  }
+
+  export function setupIntegrationTestRealm(opts: {
+    mockMatrixUtils: unknown;
+    contents: Record<string, unknown>;
+  }): Promise<SetupRealmResult>;
+
+  export function setupLocalIndexing(hooks: unknown): void;
+  export function setupOnSave(hooks: unknown): void;
+  export function setupCardLogs(hooks: unknown, fn: () => Promise<unknown>): void;
+  export function setupRealmCacheTeardown(hooks: unknown): void;
+  export function withCachedRealmSetup<T>(fn: () => Promise<T>): Promise<T>;
+
+  export const testRealmURL: string;
+
+  export interface TestContextWithSave {
+    onSave(cb: (url: URL, doc: unknown) => void): void;
+  }
+}
+
+declare module '@cardstack/host/tests/helpers/mock-matrix' {
+  export function setupMockMatrix(
+    hooks: unknown,
+    opts: {
+      loggedInAs: string;
+      activeRealms: string[];
+      autostart: boolean;
+    },
+  ): unknown;
+}
+
+declare module '@cardstack/host/tests/helpers/setup' {
+  export function setupRenderingTest(hooks: unknown): void;
+}

pnpm-workspace.yaml

@@ -27,6 +27,7 @@ catalog:
   "@cardstack/requirejs-monaco-ember-polyfill": ^0.0.1
   "@cardstack/view-transitions": ^0.2.0
   "@ember/string": ^4.0.1
+  "@ember/test-helpers": ^3.3.1
   "@ember/test-waiters": ^4.1.1
   "@eslint/eslintrc": ^2.1.4
   "@eslint/js": ^8.57.1