fix(esl-panel-group): has-opened attribute inconsistent

exadel-inc · Dec 12, 2023 · 13003e4 · 13003e4
1 parent 8bc6395
commit 13003e4
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 2 deletions.
diff --git a/src/modules/esl-panel-group/core/esl-panel-group.ts b/src/modules/esl-panel-group/core/esl-panel-group.ts
@@ -105,11 +105,15 @@ export class ESLPanelGroup extends ESLBaseElement {
 
     this.updateModeCls();
     this.reset();
-    this.toggleAttribute('has-opened', this.$activePanels.length > 0);
+    this.updateOpenState();
 
     if (prevMode !== currentMode) this.$$fire(this.MODE_CHANGE_EVENT, {detail: {prevMode, currentMode}});
   }
 
+  protected updateOpenState(): void {
+    this.$$attr('has-opened', this.$activePanels.length > 0);
+  }
+
   /** Updates mode class marker */
   protected updateModeCls(): void {
     const {modeCls, currentMode} = this;
@@ -304,7 +308,7 @@ export class ESLPanelGroup extends ESLBaseElement {
   protected _onStateChanged(e: CustomEvent): void {
     const panel = e.target;
     if (!this.includesPanel(panel)) return;
-    this.toggleAttribute('has-opened', panel.open);
+    this.updateOpenState();
 
     if (this.currentMode !== 'tabs') return;
 

diff --git a/src/modules/esl-panel-group/test/esl-panel-group.test.ts b/src/modules/esl-panel-group/test/esl-panel-group.test.ts
@@ -0,0 +1,71 @@
+import {ESLPanel} from '../../esl-panel/core';
+import {ESLPanelGroup} from '../../esl-panel-group/core';
+import {ESLTestTemplate} from '../../esl-utils/test/template';
+
+const REFERENCES = {
+  group: 'esl-panel-group',
+  panel: 'esl-panel',
+};
+
+describe('ESLPanelGroup has-opened attribute behavior', () => {
+  ESLPanelGroup.register();
+  ESLPanel.register();
+
+  describe('Initially opened panel group', () => {
+    const TEMPLATE = ESLTestTemplate.create(`
+      <esl-panel-group min-open-items="0">
+        <esl-panel></esl-panel>
+        <esl-panel></esl-panel>
+        <esl-panel open></esl-panel>
+      </esl-panel-group>
+    `, REFERENCES).bind('beforeall');
+
+
+    test('"has-opened" attribute should be present initially', () => expect(TEMPLATE.$group.hasAttribute('has-opened')).toBe(true));
+
+    test('"has-opened" attribute should be removed after closing all panels', () => {
+      TEMPLATE.$$panel.forEach((panel: ESLPanel) => panel.hide());
+      expect(TEMPLATE.$group.hasAttribute('has-opened')).toBe(false);
+    });
+
+    test('"has-opened" attribute should be set after opening panels again', () => {
+      (TEMPLATE.$$panel[0] as ESLPanel).show();
+      expect(TEMPLATE.$group.hasAttribute('has-opened')).toBe(true);
+      (TEMPLATE.$$panel[1] as ESLPanel).show();
+      expect(TEMPLATE.$group.hasAttribute('has-opened')).toBe(true);
+      (TEMPLATE.$$panel[2] as ESLPanel).show();
+      expect(TEMPLATE.$group.hasAttribute('has-opened')).toBe(true);
+    });
+
+    test('"has-opened" attribute should be removed only after last panel is closed', () => {
+      (TEMPLATE.$$panel[0] as ESLPanel).hide();
+      expect(TEMPLATE.$group.hasAttribute('has-opened')).toBe(true);
+      (TEMPLATE.$$panel[1] as ESLPanel).hide();
+      expect(TEMPLATE.$group.hasAttribute('has-opened')).toBe(true);
+      (TEMPLATE.$$panel[2] as ESLPanel).hide();
+      expect(TEMPLATE.$group.hasAttribute('has-opened')).toBe(false);
+    });
+  });
+
+  describe('Initially closed panel group', () => {
+    const TEMPLATE = ESLTestTemplate.create(`
+      <esl-panel-group min-open-items="0">
+        <esl-panel></esl-panel>
+        <esl-panel></esl-panel>
+        <esl-panel></esl-panel>
+      </esl-panel-group>
+    `, REFERENCES).bind('beforeall');
+
+    test('"has-opened" attribute shouldn`t be set initially', () => expect(TEMPLATE.$group.hasAttribute('has-opened')).toBe(false));
+
+    test('"has-opened" attribute should be set after opening all panels', () => {
+      TEMPLATE.$$panel.forEach((panel: ESLPanel) => panel.show());
+      expect(TEMPLATE.$group.hasAttribute('has-opened')).toBe(true);
+    });
+
+    test('"has-opened" attribute should be removed after closing all panels', () => {
+      TEMPLATE.$$panel.forEach((panel: ESLPanel) => panel.hide());
+      expect(TEMPLATE.$group.hasAttribute('has-opened')).toBe(false);
+    });
+  });
+});