check if right spec before setting it for field playground

Author: burieberry

packages/base/spec.gts

@@ -198,7 +198,6 @@ class Isolated extends Component<typeof Spec> {
         -webkit-line-clamp: 2;
         overflow: hidden;
         text-wrap: pretty;
-        word-break: break-word;
       }
       .box {
         border: 1px solid var(--boxel-border-color);

packages/host/app/components/operator-mode/code-submode/spec-preview.gts

@@ -203,7 +203,7 @@ interface ContentSignature {
     spec: Spec | undefined;
     isLoading: boolean;
     viewCardInPlayground: (cardDefOrId: CardDefOrId) => void;
-    onSpecView: (specId: string) => void;
+    onSpecView: (spec: Spec) => void;
   };
 }
 
@@ -351,7 +351,7 @@ class SpecPreviewContent extends GlimmerComponent<ContentSignature> {
                 @card={{@spec}}
                 @format='edit'
                 @cardContext={{this.cardContext}}
-                {{SpecPreviewModifier id=@spec.id onSpecView=@onSpecView}}
+                {{SpecPreviewModifier spec=@spec onSpecView=@onSpecView}}
               />
             {{/if}}
           </div>
@@ -675,8 +675,17 @@ export default class SpecPreview extends GlimmerComponent<Signature> {
     );
   }
 
-  private onSpecView = (id: string) => {
-    this.updatePlaygroundSelections(id, true);
+  private onSpecView = (spec: Spec) => {
+    if (!spec.isField) {
+      return; // not a field spec
+    }
+    if (
+      this.getSelectedDeclarationAsCodeRef.name !== spec.ref.name ||
+      this.getSelectedDeclarationAsCodeRef.module !== spec.moduleHref // absolute url
+    ) {
+      return; // not the right field spec
+    }
+    this.updatePlaygroundSelections(spec.id, true);
   };
 
   private viewCardInPlayground = (card: CardDefOrId) => {
@@ -786,8 +795,8 @@ function getRelativePath(baseUrl: string, targetUrl: string) {
 interface ModifierSignature {
   Args: {
     Named: {
-      id?: string;
-      onSpecView?: (id: string) => void;
+      spec?: Spec;
+      onSpecView?: (spec: Spec) => void;
     };
   };
 }
@@ -798,13 +807,13 @@ export class SpecPreviewModifier extends Modifier<ModifierSignature> {
   modify(
     _element: HTMLElement,
     _positional: [],
-    { id, onSpecView }: ModifierSignature['Args']['Named'],
+    { spec, onSpecView }: ModifierSignature['Args']['Named'],
   ) {
-    if (!id || !onSpecView) {
-      throw new Error('bug: no id or onSpecView hook');
+    if (!spec || !onSpecView) {
+      throw new Error('bug: no spec or onSpecView hook');
     }
     next(() => {
-      onSpecView(id);
+      onSpecView(spec);
     });
   }
 }

packages/host/tests/acceptance/code-submode/spec-test.gts

@@ -26,6 +26,7 @@ import {
   getPlaygroundSelections,
   getRecentFiles,
   assertCardExists,
+  selectDeclaration,
 } from '../../helpers/playground';
 
 import { setupApplicationTest } from '../../helpers/setup';
@@ -66,6 +67,9 @@ const personCardSource = `
   export class PersonField extends FieldDef {
     static displayName = 'PersonField';
   }
+  export class DifferentField extends FieldDef {
+    static displayName = 'DifferentField';
+  }
 `;
 
 const person1CardSource = `
@@ -461,6 +465,26 @@ module('Acceptance | Spec preview', function (hooks) {
             },
           },
         },
+        'different-field-entry.json': {
+          data: {
+            type: 'card',
+            attributes: {
+              title: 'DifferentField',
+              description: 'Spec for DifferentField',
+              specType: 'field',
+              ref: {
+                module: `./person`,
+                name: 'DifferentField',
+              },
+            },
+            meta: {
+              adoptsFrom: {
+                module: `${baseRealm.url}spec`,
+                name: 'Spec',
+              },
+            },
+          },
+        },
         '.realm.json': {
           name: 'Test Workspace B',
           backgroundURL:
@@ -1022,4 +1046,50 @@ module('Acceptance | Spec preview', function (hooks) {
     assert.dom('[data-test-exported-name]').hasText('Pet');
     assert.dom('[data-test-module-href]').hasText(`${testRealmURL}pet`);
   });
+
+  test('it does not set the wrong spec for field playground', async function (assert) {
+    await visitOperatorMode({
+      submode: 'code',
+      codePath: `${testRealmURL}person.gts`,
+    });
+    await click('[data-test-accordion-item="playground"] button');
+    assert.dom('[data-test-playground-panel]').exists();
+    let selection =
+      getPlaygroundSelections()?.[`${testRealmURL}person/PersonField`];
+    assert.strictEqual(selection, undefined);
+
+    await selectDeclaration('PersonField');
+    selection =
+      getPlaygroundSelections()?.[`${testRealmURL}person/PersonField`];
+    assert.strictEqual(
+      selection,
+      undefined,
+      'Person Spec is not set as the spec for PersonField',
+    );
+    assert.dom('[data-test-create-spec-button]').exists();
+
+    await selectDeclaration('DifferentField');
+    let newSelection =
+      getPlaygroundSelections()?.[`${testRealmURL}person/DifferentField`];
+    assert.strictEqual(
+      newSelection?.cardId,
+      `${testRealmURL}different-field-entry`,
+    );
+    assert.dom('[data-test-create-spec-button]').doesNotExist();
+
+    await selectDeclaration('PersonField');
+    selection =
+      getPlaygroundSelections()?.[`${testRealmURL}person/PersonField`];
+    assert.strictEqual(
+      selection,
+      undefined,
+      'DifferentField Spec is not set as the spec for PersonField',
+    );
+    assert.strictEqual(
+      selection,
+      undefined,
+      'DifferentField Spec is not set as the spec for PersonField',
+    );
+    assert.dom('[data-test-create-spec-button]').exists();
+  });
 });