add test

Author: tintinthong

Diff for: packages/base/catalog-entry.gts

@@ -131,19 +131,19 @@ export class CatalogEntry extends CardDef {
           <div class='container-code-ref'>
             <div class='row-code-ref'>
               <div class='row-code-ref-label'>URL</div>
-              <div class='row-code-ref-value box'>
+              <div class='row-code-ref-value box' data-test-module-href>
                 {{@model.moduleHref}}
               </div>
             </div>
             <div class='row-code-ref'>
               <div class='row-code-ref-label'>Exported Name</div>
               <div class='row-code-ref-value box'>
                 <div class='exported-row'>
-                  <div class='exported-name'>
+                  <div class='exported-name' data-test-exported-name>
                     <DiagonalArrowLeftUp class='exported-arrow' />
                     {{@model.ref.name}}
                   </div>
-                  <div class='exported-type'>
+                  <div class='exported-type' data-test-exported-type>
                     {{@model.type}}
                   </div>
                 </div>

Diff for: packages/boxel-ui/addon/src/components/select/trigger.gts

@@ -89,7 +89,10 @@ export class BoxelSelectDefaultTrigger extends Component<TriggerSignature> {
         {{/if}}
       </:default>
       <:icon>
-        <CaretDown class={{cn 'icon' (if @select.isOpen 'is-open')}} />
+        <CaretDown
+          class={{cn 'icon' (if @select.isOpen 'is-open')}}
+          data-test-caret-down
+        />
       </:icon>
     </BoxelTriggerWrapper>
     <style scoped>

Diff for: packages/host/app/components/operator-mode/code-submode.gts

@@ -937,6 +937,7 @@ export default class CodeSubmode extends Component<Signature> {
                             this.selectedAccordionItem
                             'schema-editor'
                           }}
+                          data-test-accordion-item='schema-editor'
                         >
                           <:title>
                             <SchemaEditorTitle />
@@ -964,6 +965,7 @@ export default class CodeSubmode extends Component<Signature> {
                               this.selectedAccordionItem
                               'boxel-spec-preview'
                             }}
+                            data-test-accordion-item='boxel-spec-preview'
                           >
                             <:title>
                               <BoxelSpecPreviewTitle />

Diff for: packages/host/app/components/operator-mode/code-submode/boxel-spec-preview.gts

@@ -187,7 +187,7 @@ class BoxelSpecPreviewContent extends GlimmerComponent<ContentSignature> {
       </div>
     {{else}}
       <div class='boxel-spec-preview'>
-        <div class='boxel-spec-selector'>
+        <div class='boxel-spec-selector' data-test-boxel-spec-selector>
           <BoxelSelect
             @options={{@boxelSpecInstances}}
             @selected={{@selectedInstance}}

Diff for: packages/host/tests/acceptance/code-submode-test.ts

@@ -576,6 +576,42 @@ module('Acceptance | code submode tests', function (_hooks) {
               },
             },
           },
+          'pet-entry.json': {
+            data: {
+              type: 'card',
+              attributes: {
+                type: 'card',
+                ref: {
+                  module: `./pet`,
+                  name: 'Pet',
+                },
+              },
+              meta: {
+                adoptsFrom: {
+                  module: `${baseRealm.url}catalog-entry`,
+                  name: 'CatalogEntry',
+                },
+              },
+            },
+          },
+          'pet-entry-2.json': {
+            data: {
+              type: 'card',
+              attributes: {
+                type: 'card',
+                ref: {
+                  module: `./pet`,
+                  name: 'Pet',
+                },
+              },
+              meta: {
+                adoptsFrom: {
+                  module: `${baseRealm.url}catalog-entry`,
+                  name: 'CatalogEntry',
+                },
+              },
+            },
+          },
           'index.json': {
             data: {
               type: 'card',
@@ -1758,5 +1794,38 @@ module('Acceptance | code submode tests', function (_hooks) {
       await click(createFileModalOverlay!);
       assert.dom('[data-test-create-file-modal]').doesNotExist();
     });
+
+    test('boxel-spec-preview is shown with module that has a single boxel spec instance', async function (assert) {
+      await visitOperatorMode({
+        submode: 'code',
+        codePath: `${testRealmURL}person.gts`,
+      });
+      await waitFor('[data-test-accordion-item="boxel-spec-preview"]');
+      assert.dom('[data-test-accordion-item="boxel-spec-preview"]').exists();
+      assert.dom('[data-test-has-boxel-spec]').containsText('card');
+      await click('[data-test-accordion-item="boxel-spec-preview"] button');
+      await waitFor('[data-test-boxel-spec-selector]');
+      assert.dom('[data-test-boxel-spec-selector]').exists();
+      assert.dom('[data-test-title]').containsText('Person');
+      assert.dom('[data-test-description]').containsText('Catalog entry');
+      assert
+        .dom('[data-test-module-href]')
+        .containsText(`${testRealmURL}person`);
+      assert.dom('[data-test-exported-name]').containsText('Person');
+      assert.dom('[data-test-exported-type]').containsText('card');
+    });
+    test('boxel-spec-preview is shown with module that has multple boxel spec instances', async function (assert) {
+      await visitOperatorMode({
+        submode: 'code',
+        codePath: `${testRealmURL}pet.gts`,
+      });
+      await waitFor('[data-test-accordion-item="boxel-spec-preview"]');
+      assert.dom('[data-test-accordion-item="boxel-spec-preview"]').exists();
+      assert.dom('[data-test-has-boxel-spec]').containsText('2 instances');
+      await click('[data-test-accordion-item="boxel-spec-preview"] button');
+      await waitFor('[data-test-boxel-spec-selector]');
+      assert.dom('[data-test-boxel-spec-selector]').exists();
+      assert.dom('[data-test-caret-down]').exists();
+    });
   });
 });