@cardstack/boxel-cli 0.13.0-unstable.4 → 0.13.0-unstable.5

package/bundled-test-harness/assets/schema-editor-test-NkKjCgyf.js

@@ -0,0 +1,785 @@
+import { s as __toESM } from "./chunk-Rp0pCe6z.js";
+import { Br as testRealmURL, Rc as Deferred } from "./runtime-common-BTaLJEw-.js";
+import { O as baseRealm, it as baseRealmRRI } from "./constants-Icc0nFW-.js";
+import { M as waitUntil, d as click, l as triggerEvent, o as waitFor, s as fillIn } from "./dist-BOAdzfkP.js";
+import { t as require_qunit } from "./qunit-C-Foo4Nd.js";
+import { D as realmConfigCardJSON, F as setupLocalIndexing, I as setupOnSave, L as setupRealmCacheTeardown, S as getMonacoContent, Z as withCachedRealmSetup, a as SYSTEM_CARD_FIXTURE_CONTENTS, ct as setupApplicationTest, j as setupAcceptanceTestRealm, mt as setupAuthEndpoints, st as visitOperatorMode, t as setupMockMatrix, u as cardDefFieldCount, z as setupUserSubscription } from "./mock-matrix-FjsXmU7-.js";
+import { r as getService } from "./dist-CPfIHBla.js";
+import "./code-equality-assertion-Dco7Q4O6.js";
+//#region tests/acceptance/code-submode/schema-editor-test.ts
+var import_qunit = /* @__PURE__ */ __toESM(require_qunit());
+async function waitForRealmIcon(selector, timeoutMs = 5e3) {
+	try {
+		await waitFor(selector, { timeout: timeoutMs });
+	} catch (e) {
+		let parentSelector = selector.replace(/\s*\[data-test-realm-icon-url\][^[]*$/, "").trim();
+		let parent = parentSelector ? document.querySelector(parentSelector) : null;
+		let allIcons = Array.from(document.querySelectorAll("[data-test-realm-icon-url]")).map((el) => ({
+			url: el.getAttribute("data-test-realm-icon-url"),
+			schema: el.closest("[data-test-card-schema]")?.getAttribute("data-test-card-schema"),
+			fieldName: el.closest("[data-test-field-name]")?.getAttribute("data-test-field-name")
+		}));
+		console.error(`[schema-editor diagnostic] waitFor("${selector}") timed out after ${timeoutMs}ms. Parent ("${parentSelector}") HTML: ${parent?.outerHTML?.slice(0, 2e3) ?? "<missing>"} | All [data-test-realm-icon-url] in DOM: ${JSON.stringify(allIcons)}`);
+		throw e;
+	}
+}
+var indexCardSource = `
+  import { CardDef, Component } from "@cardstack/base/card-api";
+
+  export class Index extends CardDef {
+    static isolated = class Isolated extends Component<typeof this> {
+      <template>
+        <div data-test-index-card>
+          Hello, world!
+        </div>
+      </template>
+    };
+  }
+`;
+var personOwnFieldCount = 5;
+var personTotalFieldCount = `${cardDefFieldCount + personOwnFieldCount}`;
+var personCardSource = `
+  import { contains, containsMany, field, linksToMany, CardDef, Component, StringField } from "@cardstack/base/card-api";
+  import { Friend } from './friend';
+
+  export class Person extends CardDef {
+    static displayName = 'Person';
+    @field firstName = contains(StringField);
+    @field lastName = contains(StringField);
+    @field cardTitle = contains(StringField, {
+      computeVia: function (this: Person) {
+        return [this.firstName, this.lastName].filter(Boolean).join(' ');
+      },
+    });
+    @field friends = linksToMany(Friend);
+    @field address = containsMany(StringField);
+    static isolated = class Isolated extends Component<typeof this> {
+      <template>
+        <div data-test-person>
+          <p>First name: <@fields.firstName /></p>
+          <p>Last name: <@fields.lastName /></p>
+          <p>Title: <@fields.cardTitle /></p>
+          <p>Address List: <@fields.address /></p>
+          <p>Friends: <@fields.friends /></p>
+        </div>
+        <style scoped>
+          div {
+            color: green;
+            content: '';
+          }
+        </style>
+      </template>
+    };
+  }
+`;
+var employeeCardSource = `
+  import {
+    contains,
+    field,
+    linksTo,
+    Component,
+    FieldDef,
+  } from '@cardstack/base/card-api';
+  import StringField from '@cardstack/base/string';
+  import BooleanField from '@cardstack/base/boolean';
+  import DateField from '@cardstack/base/date';
+  import { Person } from './person';
+
+  class Supervisor extends Person {
+    static displayName = 'Supervisor';
+    @field canApproveTimesheets = contains(BooleanField);
+  }
+
+  export class EmploymentInfo extends FieldDef {
+    static displayName = 'Employment Info';
+    @field startDate = contains(DateField);
+    @field role = contains(StringField);
+    @field hiringManager = linksTo(() => Manager);
+    static embedded = class Embedded extends Component<typeof this> {
+      <template>
+        <div>Start Date: <@fields.startDate /></div>
+        <div>Role: <@fields.role /></div>
+        <div>Hiring Manager: <@fields.hiringManager /></div>
+      </template>
+    };
+  }
+
+  export class Employee extends Person {
+    static displayName = 'Employee';
+    @field employeeId = contains(StringField);
+    @field department = contains(StringField);
+    @field supervisor = linksTo(Supervisor);
+    @field employmentInfo = contains(EmploymentInfo);
+
+    static isolated = class Isolated extends Component<typeof this> {
+      <template>
+        <@fields.firstName /> <@fields.lastName />
+
+        Department: <@fields.department />
+        Supervisor: <@fields.supervisor />
+        <hr>
+        Employment Details: <@fields.employmentInfo />
+      </template>
+    };
+  }
+
+  export class Manager extends Employee {
+    static displayName = 'Manager';
+    @field departmentSize = contains(StringField);
+  }
+`;
+var inThisFileSource = `
+  import {
+    contains,
+    field,
+    CardDef,
+    FieldDef,
+  } from '@cardstack/base/card-api';
+  import StringField from '@cardstack/base/string';
+
+  export const exportedVar = 'exported var';
+
+  const localVar = 'local var';
+
+  class LocalClass {}
+  export class ExportedClass {}
+
+  export class ExportedClassInheritLocalClass extends LocalClass {}
+
+  function localFunction() {}
+  export function exportedFunction() {}
+
+  export { LocalClass as AClassWithExportName };
+
+  class LocalCard extends CardDef {
+    static displayName = 'local card';
+  }
+
+  export class ExportedCard extends CardDef {
+    static displayName = 'exported card';
+    @field someString = contains(StringField);
+  }
+
+  export class ExportedCardInheritLocalCard extends LocalCard {
+    static displayName = 'exported card extends local card';
+  }
+
+  class LocalField extends FieldDef {
+    static displayName = 'local field';
+  }
+  export class ExportedField extends FieldDef {
+    static displayName = 'exported field';
+    @field someString = contains(StringField);
+  }
+
+  export class ExportedFieldInheritLocalField extends LocalField {
+    static displayName = 'exported field extends local field';
+  }
+
+  export default class DefaultClass {}
+`;
+var friendCardSource = `
+  import { contains, linksTo, field, CardDef, Component } from "@cardstack/base/card-api";
+  import StringField from "@cardstack/base/string";
+
+  export class Friend extends CardDef {
+    static displayName = 'Friend';
+    @field name = contains(StringField);
+    @field friend = linksTo(() => Friend);
+    @field cardTitle = contains(StringField, {
+      computeVia: function (this: Person) {
+        return name;
+      },
+    });
+    static isolated = class Isolated extends Component<typeof this> {
+      <template>
+        <div data-test-person>
+          <p>First name: <@fields.firstName /></p>
+          <p>Last name: <@fields.lastName /></p>
+          <p>Title: <@fields.cardTitle /></p>
+        </div>
+        <style scoped>
+          div {
+            color: green;
+            content: '';
+          }
+        </style>
+      </template>
+    };
+  }
+`;
+var ambiguousDisplayNamesCardSource = `
+  import {
+    CardDef,
+    field,
+    linksTo,
+    Component,
+  } from '@cardstack/base/card-api';
+
+  export class Editor extends CardDef {
+    static displayName = 'Author Bio';
+  }
+
+  export class Author extends CardDef {
+    static displayName = 'Author Bio';
+  }
+
+  export class BlogPost extends CardDef {
+    static displayName = 'Blog Post';
+    @field authorBio = linksTo(Author);
+    @field editorBio = linksTo(Editor);
+  }
+`;
+(0, import_qunit.module)("Acceptance | code submode | schema editor tests", function(hooks) {
+	let monacoService;
+	setupApplicationTest(hooks);
+	setupLocalIndexing(hooks);
+	setupOnSave(hooks);
+	setupRealmCacheTeardown(hooks);
+	let mockMatrixUtils = setupMockMatrix(hooks, {
+		loggedInAs: "@testuser:localhost",
+		activeRealms: [baseRealm.url, testRealmURL]
+	});
+	let { createAndJoinRoom } = mockMatrixUtils;
+	hooks.beforeEach(async function() {
+		createAndJoinRoom({
+			sender: "@testuser:localhost",
+			name: "room-test"
+		});
+		setupUserSubscription();
+		setupAuthEndpoints();
+		await withCachedRealmSetup(async () => {
+			await setupAcceptanceTestRealm({
+				mockMatrixUtils,
+				contents: {
+					...SYSTEM_CARD_FIXTURE_CONTENTS,
+					"index.gts": indexCardSource,
+					"empty.gts": " ",
+					"pet-person.gts": personCardSource,
+					"person.gts": personCardSource,
+					"friend.gts": friendCardSource,
+					"employee.gts": employeeCardSource,
+					"in-this-file.gts": inThisFileSource,
+					"ambiguous-display-names.gts": ambiguousDisplayNamesCardSource,
+					"person-entry.json": { data: {
+						type: "card",
+						attributes: {
+							cardTitle: "Person",
+							cardDescription: "Spec",
+							specType: "card",
+							ref: {
+								module: `./person`,
+								name: "Person"
+							}
+						},
+						meta: { adoptsFrom: {
+							module: `${baseRealmRRI}spec`,
+							name: "Spec"
+						} }
+					} },
+					"fields/biginteger-field.json": { data: {
+						type: "card",
+						attributes: {
+							cardTitle: "Bigint Field",
+							cardDescription: "A field that captures big int values",
+							specType: "field",
+							ref: {
+								module: `${baseRealmRRI}big-integer`,
+								name: "default"
+							}
+						},
+						meta: { adoptsFrom: {
+							module: `${baseRealmRRI}spec`,
+							name: "Spec"
+						} }
+					} },
+					"fields/date-field.json": { data: {
+						type: "card",
+						attributes: {
+							cardTitle: "Date Field",
+							cardDescription: "A field that captures date values",
+							specType: "field",
+							ref: {
+								module: `${baseRealmRRI}date`,
+								name: "default"
+							}
+						},
+						meta: { adoptsFrom: {
+							module: `${baseRealmRRI}spec`,
+							name: "Spec"
+						} }
+					} },
+					"index.json": { data: {
+						type: "card",
+						attributes: {},
+						meta: { adoptsFrom: {
+							module: "./index",
+							name: "Index"
+						} }
+					} },
+					"not-json.json": "I am not JSON.",
+					"Person/1.json": { data: {
+						type: "card",
+						attributes: {
+							firstName: "Hassan",
+							lastName: "Abdel-Rahman"
+						},
+						meta: { adoptsFrom: {
+							module: "../person",
+							name: "Person"
+						} }
+					} },
+					"z00.json": "{}",
+					"z01.json": "{}",
+					"z02.json": "{}",
+					"z03.json": "{}",
+					"z04.json": "{}",
+					"z05.json": "{}",
+					"z06.json": "{}",
+					"z07.json": "{}",
+					"z08.json": "{}",
+					"z09.json": "{}",
+					"z10.json": "{}",
+					"z11.json": "{}",
+					"z12.json": "{}",
+					"z13.json": "{}",
+					"z14.json": "{}",
+					"z15.json": "{}",
+					"z16.json": "{}",
+					"z17.json": "{}",
+					"z18.json": "{}",
+					"z19.json": "{}",
+					"zzz/zzz/file.json": "{}",
+					"realm.json": realmConfigCardJSON({
+						name: "Test Workspace B",
+						backgroundURL: "/test-fixtures/realm-images/pawel-czerwinski-Ly-ZLa-A5jti-Y-unsplash.jpg",
+						iconURL: "/test-fixtures/realm-images/boxel-logo.png"
+					})
+				}
+			});
+		});
+		monacoService = getService("monaco-service");
+	});
+	(0, import_qunit.test)("schema editor lists the inheritance chain", async function(assert) {
+		await visitOperatorMode({
+			submode: "code",
+			codePath: `${testRealmURL}person.gts`
+		});
+		await waitFor("[data-test-card-schema]");
+		assert.dom("[data-test-card-schema]").exists({ count: 3 });
+		assert.dom("[data-test-total-fields]").containsText(personTotalFieldCount);
+		assert.dom("[data-test-card-schema=\"Person\"] [data-test-total-fields]").containsText(`+ ${personOwnFieldCount} Fields`);
+		assert.dom(`[data-test-card-schema="Person"] [data-test-field-name="firstName"] [data-test-card-display-name="String"]`).exists();
+		assert.dom(`[data-test-card-schema="Person"] [data-test-field-name="lastName"] [data-test-card-display-name="String"]`).exists();
+		assert.dom(`[data-test-card-schema="Person"] [data-test-field-name="cardTitle"] [data-test-card-display-name="String"]`).exists();
+		assert.dom(`[data-test-card-schema="Person"] [data-test-field-name="cardTitle"] [data-test-field-types]`).hasText("Override, Computed");
+		assert.dom(`[data-test-card-schema="Person"] [data-test-field-name="cardTitle"] [data-test-computed-icon]`).exists();
+		assert.dom(`[data-test-card-schema="Person"] [data-test-field-name="friends"] [data-test-card-display-name="Friend"]`).exists();
+		assert.dom(`[data-test-card-schema="Person"] [data-test-field-name="friends"] [data-test-field-types]`).hasText("Link, Collection");
+		assert.dom(`[data-test-card-schema="Person"] [data-test-field-name="friends"] [data-test-linked-icon]`).exists();
+		assert.dom(`[data-test-card-schema="Person"] [data-test-field-name="address"] [data-test-card-display-name="String"]`).exists();
+		assert.dom(`[data-test-card-schema="Person"] [data-test-field-name="address"] [data-test-field-types]`).hasText("Collection");
+		assert.dom("[data-test-card-schema=\"Card\"] [data-test-total-fields]").containsText("+ 5 Fields");
+		assert.dom(`[data-test-card-schema="Card"] [data-test-field-name="cardTitle"] [data-test-overridden-field-link]`).exists();
+		assert.dom(`[data-test-card-schema="Card"] [data-test-field-name="cardTitle"] [data-test-field-types]`).hasText("Overridden, Computed");
+		assert.dom(`[data-test-card-schema="Card"] [data-test-field-name="cardDescription"] [data-test-card-display-name="String"]`).exists();
+		assert.dom(`[data-test-card-schema="Card"] [data-test-field-name="cardThumbnailURL"] [data-test-card-display-name="String"]`).exists();
+		assert.dom(`[data-test-card-schema="Card"] [data-test-field-name="cardTheme"] [data-test-card-display-name="Theme"]`).exists();
+		assert.dom("[data-test-card-schema=\"Base\"] [data-test-total-fields]").containsText("No Fields");
+		assert.dom(`[data-test-card-schema="Base"]`).exists();
+		let realm1IconUrl = "/test-fixtures/realm-images/boxel-logo.png";
+		let realm2IconUrl = "https://boxel-images.boxel.ai/icons/cardstack.png";
+		await waitForRealmIcon("[data-test-card-schema=\"Person\"] .pill .icon [data-test-realm-icon-url]");
+		assert.dom(`[data-test-card-schema="Person"] [data-test-realm-icon-url]`).hasAttribute("data-test-realm-icon-url", realm1IconUrl);
+		await waitForRealmIcon("[data-test-card-schema=\"Person\"] [data-test-field-name=\"firstName\"] [data-test-realm-icon-url]");
+		assert.dom(`[data-test-card-schema="Person"] [data-test-field-name="firstName"] [data-test-realm-icon-url]`).hasAttribute("data-test-realm-icon-url", realm2IconUrl);
+		await waitForRealmIcon("[data-test-card-schema=\"Card\"] .pill .icon [data-test-realm-icon-url]");
+		assert.dom(`[data-test-card-schema="Card"] [data-test-realm-icon-url]`).hasAttribute("data-test-realm-icon-url", realm2IconUrl);
+	});
+	(0, import_qunit.test)("can list the inheritance chain of a card with complex cyclic relationships", async function(assert) {
+		await visitOperatorMode({
+			submode: "code",
+			codePath: `${testRealmURL}employee.gts`
+		});
+		await click("[data-test-boxel-selector-item-text=\"Employee\"]");
+		assert.dom("[data-test-definition-name]").containsText("Employee");
+		assert.dom("[data-test-card-schema=\"Employee\"] [data-test-total-fields]").containsText("4");
+		assert.dom("[data-field-name=\"employmentInfo\"]").hasText("employmentInfo Employment Info");
+	});
+	(0, import_qunit.test)("when selecting card definition from a card instance in code mode, the right hand panel changes from card preview to schema mode", async function(assert) {
+		await visitOperatorMode({
+			submode: "code",
+			codePath: `${testRealmURL}Person/1.json`
+		});
+		await waitFor("[data-test-code-mode-card-renderer-body]");
+		assert.dom("[data-test-code-mode-card-renderer-body]").containsText("Hassan");
+		await waitFor(`button[data-test-clickable-definition-container`);
+		await click(`button[data-test-clickable-definition-container`);
+		await waitFor("[data-test-card-schema]");
+		assert.dom("[data-test-card-schema]").exists({ count: 3 });
+		assert.dom("[data-test-total-fields]").containsText(personTotalFieldCount);
+	});
+	(0, import_qunit.test)("shows displayName of CardResource when field refers to itself", async function(assert) {
+		await visitOperatorMode({
+			submode: "code",
+			codePath: `${testRealmURL}friend.gts`
+		});
+		await waitFor("[data-test-card-schema]");
+		assert.dom("[data-test-card-schema-navigational-button]").containsText("Friend");
+		assert.dom(`[data-test-card-schema="Friend"] [data-test-field-name="name"] [data-test-card-display-name="String"]`).exists();
+	});
+	(0, import_qunit.test)("card type and fields are clickable and navigate to the correct file", async function(assert) {
+		await visitOperatorMode({
+			submode: "code",
+			codePath: `${testRealmURL}employee.gts`
+		});
+		await waitFor("[data-test-card-schema=\"Employee\"] [data-test-card-schema-navigational-button]");
+		await waitFor("[data-test-card-schema=\"Employee\"] [data-test-card-schema-navigational-button]");
+		await click("[data-test-card-schema=\"Person\"] [data-test-card-schema-navigational-button]");
+		await waitFor("[data-test-current-module-name=\"person.gts\"]");
+		assert.dom("[data-test-current-module-name]").hasText("person.gts");
+		await visitOperatorMode({
+			submode: "code",
+			codePath: `${testRealmURL}employee.gts`
+		});
+		await click("[data-test-in-this-file-selector] [data-test-boxel-selector-item-text=\"Employee\"]");
+		await waitFor("[data-test-card-schema=\"Employee\"] [data-test-card-schema-navigational-button]");
+		await waitFor("[data-test-card-schema=\"Employee\"] [data-test-field-name=\"department\"]");
+		assert.dom("[data-test-card-schema=\"Employee\"] [data-test-field-name=\"department\"] [data-test-card-display-name]").hasText("String");
+		await click("[data-test-card-schema=\"Employee\"] [data-test-field-name=\"department\"] [data-test-card-display-name]");
+		await waitFor("[data-test-current-module-name=\"card-api.gts\"]");
+		assert.dom("[data-test-current-module-name]").hasText("card-api.gts");
+	});
+	(0, import_qunit.test)("adding a field from schema editor - whole flow test", async function(assert) {
+		await visitOperatorMode({
+			submode: "code",
+			codePath: `${testRealmURL}person.gts`
+		});
+		await waitFor("[data-test-add-field-button]");
+		assert.dom("[data-test-add-field-button]").exists({ count: 1 });
+		await click("[data-test-add-field-button]");
+		assert.dom("[data-test-save-field-button]").hasAttribute("disabled");
+		await click("[data-test-cancel-adding-field-button]");
+		assert.dom("[data-test-edit-field-modal]").doesNotExist();
+		await click("[data-test-add-field-button]");
+		assert.dom("[data-test-edit-field-modal]").exists();
+		await waitFor("[data-test-selected-type-display-name]");
+		assert.dom("[data-test-selected-type-display-name]").hasText("String");
+		await click("[data-test-choose-card-button]");
+		await waitFor(`[data-test-item-button="${testRealmURL}fields/biginteger-field"]`);
+		await click(`[data-test-item-button="${testRealmURL}fields/biginteger-field"]`);
+		await click("[data-test-card-chooser-go-button]");
+		await waitUntil(() => document.querySelector("[data-test-selected-type-display-name]")?.textContent?.includes("BigInteger"));
+		await waitForRealmIcon("[data-test-selected-type] [data-test-realm-icon-url]");
+		await assert.dom("[data-test-selected-type] [data-test-realm-icon-url]").exists();
+		await assert.dom("[data-test-selected-type-display-name]").hasText("BigInteger");
+		await click("[data-test-choose-card-button]");
+		await waitFor("[data-test-search-field]");
+		await fillIn("[data-test-search-field]", "Date");
+		await waitFor(`[data-test-item-button="${testRealmURL}fields/date-field"]`);
+		await click(`[data-test-item-button="${testRealmURL}fields/date-field"]`);
+		await click("[data-test-card-chooser-go-button]");
+		await waitUntil(() => document.querySelector("[data-test-selected-type-display-name]")?.textContent?.includes("Date"));
+		await assert.dom("[data-test-selected-type-display-name]").hasText("Date");
+		assert.dom("[data-test-save-field-button]").hasAttribute("disabled");
+		await fillIn("[data-test-field-name-input]", " birth date");
+		assert.dom("[data-test-boxel-input-error-message]").hasText("Field names cannot contain spaces");
+		await fillIn("[data-test-field-name-input]", "Birth");
+		assert.dom("[data-test-boxel-input-error-message]").hasText("Field names must start with a lowercase letter");
+		await fillIn("[data-test-field-name-input]", "birth-date");
+		assert.dom("[data-test-boxel-input-error-message]").hasText("Field names can only contain letters, numbers, and underscores");
+		await fillIn("[data-test-field-name-input]", "firstName");
+		await click("[data-test-save-field-button]");
+		await waitFor("[data-test-boxel-input-error-message]");
+		assert.dom("[data-test-boxel-input-error-message]").hasText("the field \"firstName\" already exists");
+		assert.dom("[data-test-save-field-button]").hasAttribute("disabled");
+		await fillIn("[data-test-field-name-input]", "birthdate");
+		assert.dom("[data-test-save-field-button]").doesNotHaveAttribute("disabled");
+		await click("[data-test-save-field-button]");
+		await waitFor("[data-test-card-schema=\"Person\"] [data-test-field-name=\"birthdate\"] [data-test-card-display-name=\"Date\"]");
+		assert.dom(`[data-test-card-schema="Person"] [data-test-field-name="birthdate"] [data-test-card-display-name="Date"]`).exists();
+		assert.ok(getMonacoContent().includes("birthdate = contains(DateField)"));
+	});
+	(0, import_qunit.test)("adding a field from schema editor - cardinality test", async function(assert) {
+		let waitForOpts = { timeout: 2e3 };
+		await visitOperatorMode({
+			submode: "code",
+			codePath: `${testRealmURL}person.gts`
+		});
+		await waitFor("[data-test-add-field-button]");
+		await click("[data-test-add-field-button]");
+		await click("[data-test-choose-card-button]");
+		await waitFor(`[data-test-item-button="${testRealmURL}fields/biginteger-field"]`);
+		await click(`[data-test-item-button="${testRealmURL}fields/biginteger-field"]`);
+		await click("[data-test-card-chooser-go-button]");
+		await fillIn("[data-test-field-name-input]", "luckyNumbers");
+		await click("[data-test-boxel-radio-option-id=\"many\"]");
+		await waitFor(".card-chooser-area [data-test-selected-type-display-name]");
+		assert.dom(".card-chooser-area [data-test-selected-type-display-name]").containsText("BigInteger");
+		await click("[data-test-save-field-button]");
+		await waitFor("[data-test-card-schema=\"Person\"] [data-test-field-name=\"luckyNumbers\"] [data-test-card-display-name=\"BigInteger\"]", waitForOpts);
+		assert.dom(`[data-test-card-schema="Person"] [data-test-field-name="luckyNumbers"] [data-test-field-types]`).hasText("Collection");
+		assert.ok(getMonacoContent().includes("luckyNumbers = containsMany(BigIntegerField)"), "code editor contains line 'luckyNumbers = containsMany(BigIntegerField)'");
+		await waitFor("[data-test-add-field-button]");
+		await click("[data-test-add-field-button]");
+		await click("[data-test-choose-card-button]");
+		await waitFor("[data-test-item-button=\"http://test-realm/test/person-entry\"]");
+		await click("[data-test-item-button=\"http://test-realm/test/person-entry\"]");
+		await click("[data-test-card-chooser-go-button]");
+		await fillIn("[data-test-field-name-input]", "favPerson");
+		await click("[data-test-boxel-radio-option-id=\"one\"]");
+		await click("[data-test-save-field-button]");
+		await waitFor("[data-test-card-schema=\"Person\"] [data-test-field-name=\"favPerson\"] [data-test-card-display-name=\"Person\"]", waitForOpts);
+		assert.dom(`[data-test-card-schema="Person"] [data-test-field-name="favPerson"] [data-test-field-types]`).hasText("Link");
+		assert.ok(getMonacoContent().includes("favPerson = linksTo(() => Person);"), "code editor contains line 'favPerson = linksTo(() => Person);'");
+		await waitFor("[data-test-add-field-button]");
+		await click("[data-test-add-field-button]");
+		await click("[data-test-choose-card-button]");
+		await waitFor("[data-test-item-button=\"http://test-realm/test/person-entry\"]", waitForOpts);
+		await click("[data-test-item-button=\"http://test-realm/test/person-entry\"]");
+		await click("[data-test-card-chooser-go-button]");
+		await fillIn("[data-test-field-name-input]", "favPeople");
+		await click("[data-test-boxel-radio-option-id=\"many\"]");
+		await click("[data-test-save-field-button]");
+		await waitFor("[data-test-card-schema=\"Person\"] [data-test-field-name=\"favPeople\"] [data-test-card-display-name=\"Person\"]", waitForOpts);
+		assert.dom(`[data-test-card-schema="Person"] [data-test-field-name="favPeople"] [data-test-field-types]`).hasText("Link, Collection");
+		assert.ok(getMonacoContent().includes("favPeople = linksToMany(() => Person);"));
+	});
+	(0, import_qunit.test)("deleting a field from schema editor", async function(assert) {
+		assert.expect(9);
+		await visitOperatorMode({
+			submode: "code",
+			codePath: `${testRealmURL}person.gts`
+		});
+		await waitFor("[data-test-card-schema]");
+		await click("[data-test-card-schema=\"Person\"] [data-test-field-name=\"firstName\"] [data-test-schema-editor-field-contextual-button]");
+		assert.dom("[data-test-card-schema=\"Person\"] [data-test-total-fields]").containsText(`+ ${personOwnFieldCount} Fields`);
+		assert.true(getMonacoContent().includes("firstName = contains(StringField)"));
+		this.onSave((_, content) => {
+			if (typeof content !== "string") throw new Error("expected string save data");
+			assert.false(content.includes("firstName = contains(StringField)"), "firstName field removed from saved module");
+		});
+		assert.dom("[data-test-remove-field-modal]").doesNotExist();
+		assert.dom("[data-test-delete-modal-container]").doesNotExist();
+		await click("[data-test-boxel-menu-item-text=\"Remove Field\"]");
+		assert.dom("[data-test-remove-field-modal]").exists();
+		await click("[data-test-cancel-remove-field-button]");
+		assert.dom("[data-test-remove-field-modal]").doesNotExist();
+		await click("[data-test-card-schema=\"Person\"] [data-test-field-name=\"firstName\"] [data-test-schema-editor-field-contextual-button]");
+		await click("[data-test-boxel-menu-item-text=\"Remove Field\"]");
+		await click("[data-test-remove-field-button]");
+		await waitFor("[data-test-card-schema]");
+		await waitUntil(() => {
+			return document.querySelector("[data-test-card-schema=\"Person\"] [data-test-total-fields]")?.textContent?.includes("4");
+		});
+		assert.dom("[data-test-card-schema=\"Person\"] [data-test-total-fields]").containsText(`+ ${personOwnFieldCount - 1} Fields`);
+		assert.dom("[data-test-card-schema=\"Person\"] [data-test-field-name=\"firstName\"]").doesNotExist();
+	});
+	(0, import_qunit.test)("editing a field from schema editor", async function(assert) {
+		assert.expect(2);
+		await visitOperatorMode({
+			submode: "code",
+			codePath: `${testRealmURL}person.gts`
+		});
+		await waitFor("[data-test-card-schema]");
+		assert.dom(`[data-test-card-schema="Person"] [data-test-field-name="friends"] [data-test-field-types]`).hasText("Link, Collection");
+		await click("[data-test-card-schema=\"Person\"] [data-test-field-name=\"friends\"] [data-test-schema-editor-field-contextual-button]");
+		await click("[data-test-boxel-menu-item-text=\"Edit Field Settings\"]");
+		await click("[data-test-choose-card-button]");
+		await waitFor(`[data-test-item-button="${testRealmURL}fields/biginteger-field"]`);
+		await click(`[data-test-item-button="${testRealmURL}fields/biginteger-field"]`);
+		await click("[data-test-card-chooser-go-button]");
+		await fillIn("[data-test-field-name-input]", "friendCount");
+		await click("[data-test-boxel-radio-option-id=\"one\"]");
+		this.onSave((_, content) => {
+			if (typeof content !== "string") throw new Error("expected string save data");
+			assert.ok(content.includes("friendCount = contains(BigIntegerField)"));
+		});
+		await click("[data-test-save-field-button]");
+		await waitFor("[data-test-card-schema=\"Person\"] [data-test-field-name=\"friendCount\"] [data-test-card-display-name=\"BigInteger\"]");
+	});
+	(0, import_qunit.test)("editing a local field from schema editor", async function(assert) {
+		assert.expect(4);
+		await visitOperatorMode({
+			submode: "code",
+			codePath: `${testRealmURL}employee.gts`
+		});
+		assert.dom(`[data-test-card-schema="Employee"] [data-test-field-name="supervisor"] [data-test-field-types]`).hasText("Link");
+		await click("[data-test-card-schema=\"Employee\"] [data-test-field-name=\"supervisor\"] [data-test-schema-editor-field-contextual-button]");
+		await click("[data-test-boxel-menu-item-text=\"Edit Field Settings\"]");
+		assert.dom("[data-test-selected-type=\"Supervisor\"]").exists();
+		await click("[data-test-choose-card-button]");
+		await click(`[data-test-item-button="${testRealmURL}person-entry"]`);
+		await click("[data-test-card-chooser-go-button]");
+		await fillIn("[data-test-field-name-input]", "supervisedBy");
+		await click("[data-test-boxel-radio-option-id=\"many\"]");
+		this.onSave((_, content) => {
+			if (typeof content !== "string") throw new Error("expected string save data");
+			assert.ok(content.includes("supervisedBy = linksToMany(Person)"));
+		});
+		await click("[data-test-save-field-button]");
+		await waitFor("[data-test-card-schema=\"Employee\"] [data-test-field-name=\"supervisedBy\"] [data-test-card-display-name=\"Person\"]");
+		assert.dom(`[data-test-card-schema="Employee"] [data-test-field-name="supervisedBy"] [data-test-field-types]`).hasText("Link, Collection");
+	});
+	(0, import_qunit.test)("adding a \"default\" field type from the schema editor", async function(assert) {
+		assert.expect(1);
+		await visitOperatorMode({
+			submode: "code",
+			codePath: `${testRealmURL}person.gts`
+		});
+		await waitFor("[data-test-card-schema]");
+		await click("[data-test-add-field-button]");
+		await fillIn("[data-test-field-name-input]", "middleName");
+		let deferred = new Deferred();
+		this.onSave((_, content) => {
+			if (typeof content !== "string") throw new Error("expected string save data");
+			assert.codeEqual(content, `
+  import { contains, containsMany, field, linksToMany, CardDef, Component, StringField } from "@cardstack/base/card-api";
+  import { Friend } from './friend';
+
+  export class Person extends CardDef {
+    static displayName = 'Person';
+    @field firstName = contains(StringField);
+    @field lastName = contains(StringField);
+    @field cardTitle = contains(StringField, {
+      computeVia: function (this: Person) {
+        return [this.firstName, this.lastName].filter(Boolean).join(' ');
+      },
+    });
+    @field friends = linksToMany(Friend);
+    @field address = containsMany(StringField);
+    @field middleName = contains(StringField);
+    static isolated = class Isolated extends Component<typeof this> {
+      <template>
+        <div data-test-person>
+          <p>First name: <@fields.firstName /></p>
+          <p>Last name: <@fields.lastName /></p>
+          <p>Title: <@fields.cardTitle /></p>
+          <p>Address List: <@fields.address /></p>
+          <p>Friends: <@fields.friends /></p>
+        </div>
+        <style scoped>
+          div {
+            color: green;
+            content: '';
+          }
+        </style>
+      </template>
+    };
+  }`);
+			deferred.fulfill();
+		});
+		await click("[data-test-save-field-button]");
+		await deferred.promise;
+	});
+	(0, import_qunit.test)("renaming a field from the schema editor", async function(assert) {
+		assert.expect(1);
+		await visitOperatorMode({
+			submode: "code",
+			codePath: `${testRealmURL}person.gts`
+		});
+		await waitFor("[data-test-card-schema]");
+		await click("[data-test-card-schema=\"Person\"] [data-test-field-name=\"firstName\"] [data-test-schema-editor-field-contextual-button]");
+		await click("[data-test-boxel-menu-item-text=\"Edit Field Settings\"]");
+		await fillIn("[data-test-field-name-input]", "givenName");
+		let deferred = new Deferred();
+		this.onSave((_, content) => {
+			if (typeof content !== "string") throw new Error("expected string save data");
+			assert.codeEqual(content, `
+  import { contains, containsMany, field, linksToMany, CardDef, Component, StringField } from "@cardstack/base/card-api";
+  import { Friend } from './friend';
+
+  export class Person extends CardDef {
+    static displayName = 'Person';
+    @field givenName = contains(StringField);
+    @field lastName = contains(StringField);
+    @field cardTitle = contains(StringField, {
+      computeVia: function (this: Person) {
+        return [this.firstName, this.lastName].filter(Boolean).join(' ');
+      },
+    });
+    @field friends = linksToMany(Friend);
+    @field address = containsMany(StringField);
+    static isolated = class Isolated extends Component<typeof this> {
+      <template>
+        <div data-test-person>
+          <p>First name: <@fields.firstName /></p>
+          <p>Last name: <@fields.lastName /></p>
+          <p>Title: <@fields.cardTitle /></p>
+          <p>Address List: <@fields.address /></p>
+          <p>Friends: <@fields.friends /></p>
+        </div>
+        <style scoped>
+          div {
+            color: green;
+            content: '';
+          }
+        </style>
+      </template>
+    };
+  }`);
+			deferred.fulfill();
+		});
+		await click("[data-test-save-field-button]");
+		await deferred.promise;
+	});
+	(0, import_qunit.test)("tooltip is displayed when hovering over a pill", async function(assert) {
+		await visitOperatorMode({
+			submode: "code",
+			codePath: `${testRealmURL}ambiguous-display-names.gts`
+		});
+		await waitFor(`[data-test-boxel-selector-item-text="BlogPost"]`);
+		await click(`[data-test-boxel-selector-item-text="BlogPost"]`);
+		await waitFor("[data-test-card-schema=\"Blog Post\"] [data-test-card-schema-navigational-button]");
+		await triggerEvent("[data-test-card-schema=\"Blog Post\"] [data-test-card-schema-navigational-button]", "mouseenter");
+		await waitFor("[data-test-tooltip-content]");
+		assert.dom("[data-test-tooltip-content]").hasText("http://test-realm/test/ambiguous-display-names (BlogPost)");
+		await triggerEvent("[data-test-card-schema=\"Blog Post\"] [data-test-card-schema-navigational-button]", "mouseleave");
+		await waitFor("[data-test-card-schema=\"Base\"] [data-test-card-schema-navigational-button]");
+		await triggerEvent("[data-test-card-schema=\"Base\"] [data-test-card-schema-navigational-button]", "mouseenter");
+		await waitFor("[data-test-tooltip-content]");
+		assert.dom("[data-test-tooltip-content]").hasText("@cardstack/base/card-api (BaseDef)");
+		await triggerEvent("[data-test-card-schema=\"Base\"] [data-test-card-schema-navigational-button]", "mouseleave");
+		await waitFor("[data-test-card-schema=\"Blog Post\"] [data-test-field-name=\"authorBio\"] [data-test-card-display-name=\"Author Bio\"]");
+		await triggerEvent("[data-test-card-schema=\"Blog Post\"] [data-test-field-name=\"authorBio\"] [data-test-card-display-name=\"Author Bio\"]", "mouseenter");
+		await waitFor("[data-test-tooltip-content]");
+		assert.dom("[data-test-tooltip-content]").hasText("http://test-realm/test/ambiguous-display-names (Author)");
+		await triggerEvent("[data-test-card-schema=\"Blog Post\"] [data-test-field-name=\"authorBio\"] [data-test-card-display-name=\"Author Bio\"]", "mouseleave");
+		await waitFor("[data-test-card-schema=\"Blog Post\"] [data-test-field-name=\"editorBio\"] [data-test-card-display-name=\"Author Bio\"]");
+		await triggerEvent("[data-test-card-schema=\"Blog Post\"] [data-test-field-name=\"editorBio\"] [data-test-card-display-name=\"Author Bio\"]", "mouseenter");
+		await waitFor("[data-test-tooltip-content]");
+		assert.dom("[data-test-tooltip-content]").hasText("http://test-realm/test/ambiguous-display-names (Editor)");
+		await triggerEvent("[data-test-card-schema=\"Blog Post\"] [data-test-field-name=\"editorBio\"] [data-test-card-display-name=\"Author Bio\"]", "mouseleave");
+	});
+	(0, import_qunit.test)("an empty file is detected", async function(assert) {
+		await visitOperatorMode({
+			submode: "code",
+			codePath: `${testRealmURL}empty.gts`
+		});
+		await waitFor("[data-test-empty-file-message]");
+		assert.dom("[data-test-empty-file-message]").hasText("File is empty - tools like schema inspector, and file preview, are unavailable.");
+	});
+	(0, import_qunit.test)("updates cursor position in monaco editor when field row clicked", async function(assert) {
+		await visitOperatorMode({
+			submode: "code",
+			codePath: `${testRealmURL}employee.gts`
+		});
+		await waitFor("[data-test-card-schema]");
+		assert.false(monacoService.getLineCursorOn()?.includes("@field department"));
+		await click(`[data-test-card-schema="Employee"] [data-test-field-name-button="department"]`);
+		assert.true(monacoService.getLineCursorOn()?.includes("@field department"));
+		await click(`[data-test-card-schema="Employee"] [data-test-field-name-button="employeeId"]`);
+		assert.true(monacoService.getLineCursorOn()?.includes("@field employeeId"));
+		assert.dom("[data-test-current-module-name=\"employee.gts\"]").exists();
+		assert.dom("[data-test-current-module-name=\"person.gts\"]").doesNotExist();
+		await click(`[data-test-card-schema="Person"] [data-test-field-name-button="address"]`);
+		assert.dom("[data-test-current-module-name=\"employee.gts\"]").doesNotExist();
+		assert.dom("[data-test-current-module-name=\"person.gts\"]").exists();
+		assert.true(monacoService.getLineCursorOn()?.includes("@field address"));
+		await click(`[data-test-card-schema="Card"] [data-test-field-name-button="cardTitle"]`);
+		assert.dom("[data-test-current-module-name=\"person.gts\"]").doesNotExist();
+		assert.dom("[data-test-current-module-name=\"card-api.gts\"]").exists();
+		assert.true(monacoService.getLineCursorOn()?.includes("@field cardTitle"));
+	});
+});
+//#endregion