update tests

Author: burieberry

packages/boxel-ui/addon/src/components/accordion/item/index.gts

@@ -2,14 +2,15 @@ import type { TemplateOnlyComponent } from '@ember/component/template-only';
 import { on } from '@ember/modifier';
 
 import cn from '../../../helpers/cn.ts';
+import optional from '../../../helpers/optional.ts';
 import DropdownArrowDown from '../../../icons/dropdown-arrow-down.gts';
 
 export interface AccordionItemSignature {
   Args: {
     className?: string;
     contentClass?: string;
     isOpen: boolean;
-    onClick: (event: MouseEvent) => void;
+    onClick?: (event: MouseEvent) => void;
   };
   Blocks: {
     content: [];
@@ -20,7 +21,11 @@ export interface AccordionItemSignature {
 
 const AccordionItem: TemplateOnlyComponent<AccordionItemSignature> = <template>
   <div class={{cn 'accordion-item' @className open=@isOpen}} ...attributes>
-    <button class='title' {{on 'click' @onClick}}>
+    <button
+      class='title'
+      {{on 'click' (optional @onClick)}}
+      disabled={{if @onClick false true}}
+    >
       <DropdownArrowDown class='caret' width='12' height='12' />
       {{yield to='title'}}
     </button>
@@ -62,13 +67,14 @@ const AccordionItem: TemplateOnlyComponent<AccordionItemSignature> = <template>
       align-items: center;
       gap: var(--boxel-sp-xxs);
       padding: var(--accordion-item-title-padding);
+      color: inherit;
       font: var(--accordion-item-title-font);
       letter-spacing: var(--accordion-item-title-letter-spacing);
       background-color: transparent;
       border: none;
       text-align: left;
     }
-    .title:hover {
+    .title:hover:not(:disabled) {
       cursor: pointer;
     }
     .caret {

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

@@ -493,10 +493,7 @@ export default class CodeSubmode extends Component<Signature> {
   }
 
   get showSpecPreview() {
-    return (
-      this.selectedAccordionItem === 'spec-preview' &&
-      Boolean(this.selectedCardOrField?.exportName)
-    );
+    return Boolean(this.selectedCardOrField?.exportName);
   }
 
   private get itemToDeleteAsCard() {
@@ -1090,6 +1087,7 @@ export default class CodeSubmode extends Component<Signature> {
                         class='accordion-item'
                         @contentClass='accordion-item-content'
                         @isOpen={{true}}
+                        data-test-module-error-panel
                       >
                         <:title>
                           <SchemaEditorTitle @hasModuleError={{true}} />

packages/host/tests/acceptance/code-submode-test.ts

@@ -855,18 +855,16 @@ module('Acceptance | code submode tests', function (_hooks) {
         submode: 'code',
         codePath: `${testRealmURL}broken.gts`,
       })!;
-
       await visit(
         `/?operatorModeEnabled=true&operatorModeState=${encodeURIComponent(
           operatorModeStateParam,
         )}`,
       );
-
       await waitFor('[data-test-syntax-error]');
-
       assert
         .dom('[data-test-syntax-error]')
         .includesText('/broken.gts: Missing semicolon. (1:4)');
+      assert.dom('[data-test-module-error-panel] > button').isDisabled();
     });
 
     test('it shows card preview errors', async function (assert) {
@@ -1790,41 +1788,50 @@ module('Acceptance | code submode tests', function (_hooks) {
       assert
         .dom('[data-test-selected-accordion-item="schema-editor"]')
         .exists('defaults to schema-editor view');
-      await click('[data-test-accordion-item="spec-preview"] > button'); // select spec panel
+      await click('[data-test-accordion-item="playground"] > button');
+      assert.dom('[data-test-selected-accordion-item="playground"]').exists();
 
       await click('[data-test-file-browser-toggle]');
       await click('[data-test-file="address.gts"]');
       assert.dom('[data-test-selected-accordion-item="spec-preview"]').exists();
       assert.dom('[data-test-accordion-item="spec-preview"]').hasClass('open');
+      await click('[data-test-accordion-item="spec-preview"] > button');
+      assert
+        .dom('[data-test-selected-accordion-item="playground"]')
+        .exists('closing the final panel opens the previous panel');
 
       await click('[data-test-file="country.gts"]');
       assert.dom('[data-test-rhs-panel="card-or-field"]').exists();
-      assert.dom('[data-test-selected-accordion-item]').doesNotExist();
-      await click('[data-test-accordion-item="playground"] > button'); // open playground
-      assert.dom('[data-test-selected-accordion-item="playground"]').exists();
+      assert
+        .dom('[data-test-selected-accordion-item="schema-editor"]')
+        .exists();
+      await click('[data-test-accordion-item="spec-preview"] > button'); // open spec preview
+      assert.dom('[data-test-selected-accordion-item="spec-preview"]').exists();
 
       await click('[data-test-file="person.gts"]');
       assert
         .dom('[data-test-selected-accordion-item="schema-editor"]')
         .exists();
-      await click('[data-test-accordion-item="schema-editor"] > button'); // close schema-editor panel
-      assert.dom('[data-test-rhs-panel="card-or-field"]').exists();
-      assert.dom('[data-test-selected-accordion-item]').doesNotExist();
 
       await click('[data-test-file="pet-person.gts"]');
       assert.dom('[data-test-selected-accordion-item="playground"]').exists();
+      await click('[data-test-accordion-item="playground"] > button'); // toggle playground closed
+      assert.dom('[data-test-rhs-panel="card-or-field"]').exists();
+      assert
+        .dom('[data-test-selected-accordion-item="spec-preview"]')
+        .exists('closing panel toggles next panel open');
 
       let currentSelections = window.localStorage.getItem(
         CodeModePanelSelections,
       );
       assert.strictEqual(
         currentSelections,
         JSON.stringify({
-          [`${testRealmURL}address.gts`]: 'spec-preview',
-          [`${testRealmURL}country.gts`]: 'playground',
-          [`${testRealmURL}person.gts`]: null,
-          [`${testRealmURL}pet-person.gts`]: 'playground',
-          [`${testRealmURL}pet.gts`]: 'spec-preview',
+          [`${testRealmURL}address.gts`]: 'playground',
+          [`${testRealmURL}country.gts`]: 'spec-preview',
+          [`${testRealmURL}person.gts`]: 'schema-editor',
+          [`${testRealmURL}pet-person.gts`]: 'spec-preview',
+          [`${testRealmURL}pet.gts`]: 'playground',
         }),
       );
     });

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

@@ -561,8 +561,6 @@ module('Acceptance | Spec preview', function (hooks) {
     });
     assert.dom('[data-test-accordion-item="spec-preview"]').exists();
     assert.dom('[data-test-create-spec-button]').exists();
-    assert.dom('[data-test-create-spec-intent-message]').doesNotExist();
-    await click('[data-test-accordion-item="spec-preview"] button');
     assert.dom('[data-test-create-spec-intent-message]').exists();
     await percySnapshot(assert);
   });