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

@@ -23,10 +23,12 @@
     "experimentalDecorators": true,
     "paths": {
       "https://cardstack.com/base/*": ["../base/*"],
+      "@cardstack/host/tests/*": ["../host/tests/*"],
       "@cardstack/boxel-host/commands/*": ["../host/app/commands/*"]
     },
     "types": ["@cardstack/local-types"]
   },
+  "include": ["**/*.ts", "**/*.gts"],
   "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,110 @@
+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, type Store } from '@cardstack/runtime-common';
+import {
+  setupIntegrationTestRealm,
+  setupLocalIndexing,
+  setupOnSave,
+  setupCardLogs,
+  testRealmURL,
+  setupRealmCacheTeardown,
+  withCachedRealmSetup,
+  type TestContextWithSave,
+} from '@cardstack/host/tests/helpers';
+import { TestRealmAdapter } from '@cardstack/host/tests/helpers/adapter';
+import { setupMockMatrix } from '@cardstack/host/tests/helpers/mock-matrix';
+import { setupRenderingTest } from '@cardstack/host/tests/helpers/setup';
+
+class CreateCardButton extends GlimmerComponent {
+  @service declare store: Store;
+
+  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

@@ -23,11 +23,13 @@
     "experimentalDecorators": true,
     "paths": {
       "https://cardstack.com/base/*": ["../base/*"],
+      "@cardstack/host/tests/*": ["../host/tests/*"],
       "@cardstack/catalog/commands/*": ["../catalog-realm/commands/*"],
       "@cardstack/catalog/*": ["../catalog-realm/catalog-app/*"]
     },
     "types": ["@cardstack/local-types"]
   },
+  "include": ["**/*.ts", "**/*.gts"],
   "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",