@dta-au/civictheme-twig 1.13.1

package/components/00-base/collapsible/collapsible.stories.twig

@@ -0,0 +1,497 @@
+{#
+/**
+ * @file
+ * Collapsible story template.
+ */
+#}
+
+<div class="story-container">
+  <div class="story-container__title">Initially expanded</div>
+
+  <div data-collapsible>
+    <div data-collapsible-trigger>
+      TRIGGER (click me)
+    </div>
+    <div data-collapsible-panel>
+      Collapsible demo panel Lorem ipsum dolor sit amet, consectetur adipisicing
+      elit. Consectetur harum magnam modi obcaecati vitae voluptatibus!
+      Accusamus
+      atque deleniti, distinctio esse facere, nam odio officiis omnis porro
+      quibusdam quis repudiandae veritatis.
+    </div>
+  </div>
+</div>
+
+<div class="story-container">
+  <div class="story-container__title">Initially collapsed</div>
+
+  <div data-collapsible data-collapsible-collapsed>
+    <div data-collapsible-trigger>
+      TRIGGER (click me)
+    </div>
+    <div data-collapsible-panel>
+      Collapsible demo panel Lorem ipsum dolor sit amet, consectetur adipisicing
+      elit. Consectetur harum magnam modi obcaecati vitae voluptatibus!
+      Accusamus
+      atque deleniti, distinctio esse facere, nam odio officiis omnis porro
+      quibusdam quis repudiandae veritatis.
+    </div>
+  </div>
+</div>
+
+<div class="story-container">
+  <div class="story-container__title">Long animation</div>
+
+  <div data-collapsible data-collapsible-collapsed data-collapsible-duration="2000">
+    <div data-collapsible-trigger>
+      TRIGGER (click me)
+    </div>
+    <div data-collapsible-panel>
+      Collapsible demo panel Lorem ipsum dolor sit amet, consectetur adipisicing
+      elit. Consectetur harum magnam modi obcaecati vitae voluptatibus!
+      Accusamus
+      atque deleniti, distinctio esse facere, nam odio officiis omnis porro
+      quibusdam quis repudiandae veritatis.
+    </div>
+  </div>
+</div>
+
+<div class="story-container">
+  <div class="story-container__title">No animation</div>
+
+  <div data-collapsible data-collapsible-collapsed data-collapsible-duration="0">
+    <div data-collapsible-trigger>
+      TRIGGER (click me)
+    </div>
+    <div data-collapsible-panel>
+      Collapsible demo panel Lorem ipsum dolor sit amet, consectetur adipisicing
+      elit. Consectetur harum magnam modi obcaecati vitae voluptatibus!
+      Accusamus
+      atque deleniti, distinctio esse facere, nam odio officiis omnis porro
+      quibusdam quis repudiandae veritatis.
+    </div>
+  </div>
+</div>
+
+<div class="story-container">
+  <div class="story-container__title">Minimal data attributes</div>
+
+  <div data-collapsible>
+    <div>
+      TRIGGER (click me)
+    </div>
+    <div>
+      Collapsible demo panel Lorem ipsum dolor sit amet, consectetur adipisicing
+      elit. Consectetur harum magnam modi obcaecati vitae voluptatibus!
+      Accusamus
+      atque deleniti, distinctio esse facere, nam odio officiis omnis porro
+      quibusdam quis repudiandae veritatis.
+    </div>
+  </div>
+</div>
+
+<div class="story-container">
+  <div class="story-container__title">No trigger icon</div>
+
+  <div data-collapsible>
+    <div data-collapsible-trigger>
+      TRIGGER (click me)
+    </div>
+    <div data-collapsible-panel data-collapsible-trigger-no-icon>
+      Collapsible demo panel Lorem ipsum dolor sit amet, consectetur adipisicing
+      elit. Consectetur harum magnam modi obcaecati vitae voluptatibus!
+      Accusamus
+      atque deleniti, distinctio esse facere, nam odio officiis omnis porro
+      quibusdam quis repudiandae veritatis.
+    </div>
+  </div>
+</div>
+
+<div class="story-container">
+  <div class="story-container__title">Trigger icon which wraps with last word</div>
+
+  <div data-collapsible data-collapsible-icon-group>
+    <div data-collapsible-trigger>
+      TRIGGER with long text Lorem ipsum est in labore do laboris dolor dolor labore labore do dolor adipisicing.
+    </div>
+    <div data-collapsible-panel>
+      Collapsible demo panel Lorem ipsum dolor sit amet, consectetur adipisicing
+      elit. Consectetur harum magnam modi obcaecati vitae voluptatibus!
+      Accusamus
+      atque deleniti, distinctio esse facere, nam odio officiis omnis porro
+      quibusdam quis repudiandae veritatis.
+    </div>
+  </div>
+</div>
+
+<div class="story-container">
+  <div class="story-container__title">Wide trigger icon</div>
+
+  <div data-collapsible data-collapsible-trigger-wide>
+    <div>
+      TRIGGER (click me)
+    </div>
+    <div>
+      Collapsible demo panel Lorem ipsum dolor sit amet, consectetur adipisicing
+      elit. Consectetur harum magnam modi obcaecati vitae voluptatibus!
+      Accusamus
+      atque deleniti, distinctio esse facere, nam odio officiis omnis porro
+      quibusdam quis repudiandae veritatis.
+    </div>
+  </div>
+</div>
+
+<div class="story-container">
+  <div class="story-container__title">Themed</div>
+
+  <div data-collapsible class="{{ theme_class }}">
+    <div>
+      TRIGGER (click me)
+    </div>
+    <div>
+      Collapsible demo panel Lorem ipsum dolor sit amet, consectetur adipisicing
+      elit. Consectetur harum magnam modi obcaecati vitae voluptatibus!
+      Accusamus
+      atque deleniti, distinctio esse facere, nam odio officiis omnis porro
+      quibusdam quis repudiandae veritatis.
+    </div>
+  </div>
+</div>
+
+<div class="story-container">
+  <div class="story-container__title">Trigger is a link - Initially expanded</div>
+
+  <div data-collapsible>
+    <a href="#" data-collapsible-trigger>
+      TRIGGER (click me)
+    </a>
+    <div data-collapsible-panel>
+      Collapsible demo panel Lorem ipsum dolor sit amet, consectetur adipisicing
+      elit. Consectetur harum magnam modi obcaecati vitae voluptatibus!
+      Accusamus
+      atque deleniti, distinctio esse facere, nam odio officiis omnis porro
+      quibusdam quis repudiandae veritatis.
+    </div>
+  </div>
+</div>
+
+<div class="story-container">
+  <div class="story-container__title">Trigger is a button - Initially expanded</div>
+
+  <div data-collapsible>
+    <button data-collapsible-trigger>
+      TRIGGER (click me)
+    </button>
+    <div data-collapsible-panel>
+      Collapsible demo panel Lorem ipsum dolor sit amet, consectetur adipisicing
+      elit. Consectetur harum magnam modi obcaecati vitae voluptatibus!
+      Accusamus
+      atque deleniti, distinctio esse facere, nam odio officiis omnis porro
+      quibusdam quis repudiandae veritatis.
+    </div>
+  </div>
+</div>
+
+<div class="story-container">
+  <div class="story-container__title">Inline trigger</div>
+
+  <div data-collapsible>
+    <span data-collapsible-trigger>
+      TRIGGER (click me)
+    </span>
+    <div data-collapsible-panel>
+      Collapsible demo panel Lorem ipsum dolor sit amet, consectetur adipisicing
+      elit. Consectetur harum magnam modi obcaecati vitae voluptatibus!
+      Accusamus
+      atque deleniti, distinctio esse facere, nam odio officiis omnis porro
+      quibusdam quis repudiandae veritatis.
+    </div>
+  </div>
+</div>
+
+<div class="story-container" style="height: 300px">
+  <div class="story-container__title">Absolute panel</div>
+
+  <div data-collapsible style="position: relative">
+    <span data-collapsible-trigger>
+      TRIGGER (click me)
+    </span>
+    <div data-collapsible-panel style="position: absolute; background-color: rgba(200,200,200, 0.8);">
+      Collapsible demo panel Lorem ipsum dolor sit amet, consectetur adipisicing
+      elit. Consectetur harum magnam modi obcaecati vitae voluptatibus!
+      Accusamus
+      atque deleniti, distinctio esse facere, nam odio officiis omnis porro
+      quibusdam quis repudiandae veritatis.
+    </div>
+  </div>
+
+  Text behind absolutely positioned panel.
+</div>
+
+<div class="story-container story-menu-multiple-inline-with-absolute-panels" style="height: 300px">
+  <div class="story-container__title">
+    Multiple inline with absolute panels
+  </div>
+
+  <ul style="display: flex;">
+    <li data-collapsible data-collapsible-collapsed data-collapsible-group="menu1" style="display: flex;">
+      <a href="#" data-collapsible-trigger>Item 1</a>
+      <ul data-collapsible-panel style="position: absolute; background-color: rgba(150,200,200, 0.8);">
+        <li>
+          <a href="#">Item 11</a>
+        </li>
+        <li>
+          <a href="#">Item 12</a>
+        </li>
+        <li>
+          <a href="#">Item 13</a>
+        </li>
+      </ul>
+    </li>
+    <li data-collapsible data-collapsible-collapsed data-collapsible-group="menu1" style="display: flex;">
+      <a href="#" data-collapsible-trigger>Item 2</a>
+      <ul data-collapsible-panel style="position: absolute; background-color: rgba(150,200,200, 0.8);">
+        <li>
+          <a href="#">Item 21</a>
+        </li>
+        <li>
+          <a href="#">Item 22</a>
+        </li>
+        <li>
+          <a href="#">Item 23</a>
+        </li>
+      </ul>
+    </li>
+    <li data-collapsible data-collapsible-collapsed data-collapsible-group="menu1" style="display: flex;">
+      <a href="#" data-collapsible-trigger>Item 3</a>
+      <ul data-collapsible-panel style="position: absolute; background-color: rgba(150,200,200, 0.8);">
+        <li>
+          <a href="#">Item 31</a>
+        </li>
+        <li>
+          <a href="#">Item 32</a>
+        </li>
+        <li>
+          <a href="#">Item 33</a>
+        </li>
+      </ul>
+    </li>
+  </ul>
+
+  Text behind absolutely positioned panels.
+</div>
+
+<div class="story-container story-menu-multiple-inline-with-absolute-panels story-menu-focus" style="height: 300px">
+  <div class="story-container__title">
+    Multiple inline with absolute panels and focus
+  </div>
+
+  <div>
+    <button>Example button before</button>
+  </div>
+
+  <ul style="display: flex;">
+    <li data-collapsible data-collapsible-collapsed data-collapsible-group="menu2" style="display: flex;">
+      <a href="#" data-collapsible-trigger>Item 1</a>
+      <ul data-collapsible-panel style="position: absolute; background-color: rgba(150,200,200, 0.8);">
+        <li>
+          <a href="#">Item 11</a>
+        </li>
+        <li>
+          <a href="#">Item 12</a>
+        </li>
+        <li>
+          <a href="#">Item 13</a>
+        </li>
+      </ul>
+    </li>
+    <li data-collapsible data-collapsible-collapsed data-collapsible-group="menu2" style="display: flex;">
+      <a href="#" data-collapsible-trigger>Item 2</a>
+      <ul data-collapsible-panel style="position: absolute; background-color: rgba(150,200,200, 0.8);">
+        <li>
+          <a href="#">Item 21</a>
+        </li>
+        <li>
+          <a href="#">Item 22</a>
+        </li>
+        <li>
+          <a href="#">Item 23</a>
+        </li>
+      </ul>
+    </li>
+    <li data-collapsible data-collapsible-collapsed data-collapsible-group="menu2" style="display: flex;">
+      <a href="#" data-collapsible-trigger>Item 3</a>
+      <ul data-collapsible-panel style="position: absolute; background-color: rgba(150,200,200, 0.8);">
+        <li>
+          <a href="#">Item 31</a>
+        </li>
+        <li>
+          <a href="#">Item 32</a>
+        </li>
+        <li>
+          <a href="#">Item 33</a>
+        </li>
+      </ul>
+    </li>
+  </ul>
+
+  Text behind absolutely positioned panels.
+
+  <div>
+    <button>Example button after</button>
+  </div>
+</div>
+
+<div class="story-container">
+    <div class="story-container__title">Test Nested Collapsible Closed</div>
+
+    <div data-collapsible data-collapsible-collapsed>
+        <div data-collapsible-trigger>
+            TRIGGER (click me)
+        </div>
+        <div data-collapsible-panel>
+            Collapsible demo panel Lorem ipsum dolor sit amet, consectetur adipisicing
+            elit. Consectetur harum magnam modi obcaecati vitae voluptatibus!
+            Accusamus
+            atque deleniti, distinctio esse facere, nam odio officiis omnis porro
+            quibusdam quis repudiandae veritatis.
+            <div data-collapsible data-collapsible-collapsed>
+                <div data-collapsible-trigger>
+                    TRIGGER (click me) 1
+                </div>
+                <div data-collapsible-panel>
+                    Collapsible demo panel Lorem ipsum dolor sit amet, consectetur adipisicing
+                    elit. Consectetur harum magnam modi obcaecati vitae voluptatibus!
+                    Accusamus
+                    atque deleniti, distinctio esse facere, nam odio officiis omnis porro
+                    quibusdam quis repudiandae veritatis.
+                </div>
+            </div>
+            <div data-collapsible data-collapsible-collapsed>
+                <div data-collapsible-trigger>
+                    TRIGGER (click me) 2
+                </div>
+                <div data-collapsible-panel>
+                    Collapsible demo panel Lorem ipsum dolor sit amet, consectetur adipisicing
+                    elit. Consectetur harum magnam modi obcaecati vitae voluptatibus!
+                    Accusamus
+                    atque deleniti, distinctio esse facere, nam odio officiis omnis porro
+                    quibusdam quis repudiandae veritatis.
+                    <div data-collapsible data-collapsible-collapsed>
+                        <div data-collapsible-trigger>
+                            TRIGGER (click me) 2:1
+                        </div>
+                        <div data-collapsible-panel>
+                            Collapsible demo panel Lorem ipsum dolor sit amet, consectetur adipisicing
+                            elit. Consectetur harum magnam modi obcaecati vitae voluptatibus!
+                            Accusamus
+                            atque deleniti, distinctio esse facere, nam odio officiis omnis porro
+                            quibusdam quis repudiandae veritatis.
+                        </div>
+                    </div>
+                    <div data-collapsible data-collapsible-collapsed>
+                        <div data-collapsible-trigger>
+                            TRIGGER (click me) 2:2
+                        </div>
+                        <div data-collapsible-panel>
+                            Collapsible demo panel Lorem ipsum dolor sit amet, consectetur adipisicing
+                            elit. Consectetur harum magnam modi obcaecati vitae voluptatibus!
+                            Accusamus
+                            atque deleniti, distinctio esse facere, nam odio officiis omnis porro
+                            quibusdam quis repudiandae veritatis.
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div data-collapsible data-collapsible-collapsed>
+                <div data-collapsible-trigger>
+                    TRIGGER (click me) 3
+                </div>
+                <div data-collapsible-panel>
+                    Collapsible demo panel Lorem ipsum dolor sit amet, consectetur adipisicing
+                    elit. Consectetur harum magnam modi obcaecati vitae voluptatibus!
+                    Accusamus
+                    atque deleniti, distinctio esse facere, nam odio officiis omnis porro
+                    quibusdam quis repudiandae veritatis.
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="story-container">
+    <div class="story-container__title">Test Nested Collapsible Expanded</div>
+
+    <div data-collapsible>
+        <div data-collapsible-trigger>
+            TRIGGER (click me)
+        </div>
+        <div data-collapsible-panel>
+            Collapsible demo panel Lorem ipsum dolor sit amet, consectetur adipisicing
+            elit. Consectetur harum magnam modi obcaecati vitae voluptatibus!
+            Accusamus
+            atque deleniti, distinctio esse facere, nam odio officiis omnis porro
+            quibusdam quis repudiandae veritatis.
+            <div data-collapsible>
+                <div data-collapsible-trigger>
+                    TRIGGER (click me) 1
+                </div>
+                <div data-collapsible-panel>
+                    Collapsible demo panel Lorem ipsum dolor sit amet, consectetur adipisicing
+                    elit. Consectetur harum magnam modi obcaecati vitae voluptatibus!
+                    Accusamus
+                    atque deleniti, distinctio esse facere, nam odio officiis omnis porro
+                    quibusdam quis repudiandae veritatis.
+                </div>
+            </div>
+            <div data-collapsible>
+                <div data-collapsible-trigger>
+                    TRIGGER (click me) 2
+                </div>
+                <div data-collapsible-panel>
+                    Collapsible demo panel Lorem ipsum dolor sit amet, consectetur adipisicing
+                    elit. Consectetur harum magnam modi obcaecati vitae voluptatibus!
+                    Accusamus
+                    atque deleniti, distinctio esse facere, nam odio officiis omnis porro
+                    quibusdam quis repudiandae veritatis.
+                    <div data-collapsible>
+                        <div data-collapsible-trigger>
+                            TRIGGER (click me) 2:1
+                        </div>
+                        <div data-collapsible-panel>
+                            Collapsible demo panel Lorem ipsum dolor sit amet, consectetur adipisicing
+                            elit. Consectetur harum magnam modi obcaecati vitae voluptatibus!
+                            Accusamus
+                            atque deleniti, distinctio esse facere, nam odio officiis omnis porro
+                            quibusdam quis repudiandae veritatis.
+                        </div>
+                    </div>
+                    <div data-collapsible>
+                        <div data-collapsible-trigger>
+                            TRIGGER (click me) 2:2
+                        </div>
+                        <div data-collapsible-panel>
+                            Collapsible demo panel Lorem ipsum dolor sit amet, consectetur adipisicing
+                            elit. Consectetur harum magnam modi obcaecati vitae voluptatibus!
+                            Accusamus
+                            atque deleniti, distinctio esse facere, nam odio officiis omnis porro
+                            quibusdam quis repudiandae veritatis.
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div data-collapsible>
+                <div data-collapsible-trigger>
+                    TRIGGER (click me) 3
+                </div>
+                <div data-collapsible-panel>
+                    Collapsible demo panel Lorem ipsum dolor sit amet, consectetur adipisicing
+                    elit. Consectetur harum magnam modi obcaecati vitae voluptatibus!
+                    Accusamus
+                    atque deleniti, distinctio esse facere, nam odio officiis omnis porro
+                    quibusdam quis repudiandae veritatis.
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

package/components/00-base/collapsible/collapsible.test.js

@@ -0,0 +1,186 @@
+import { jest } from '@jest/globals';
+
+describe('Collapsible utility', () => {
+  beforeAll(() => {
+    // jsdom doesn't support innerText by default.
+    // https://github.com/jsdom/jsdom/issues/1245
+    Object.defineProperty(HTMLDivElement.prototype, 'innerText', {
+      get() {
+        return this.textContent;
+      },
+      set(value) {
+        this.textContent = value;
+      },
+    });
+  });
+
+  beforeEach(() => {
+    jest.resetModules();
+    jest.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => cb());
+  });
+
+  afterEach(() => {
+    window.requestAnimationFrame.mockRestore();
+  });
+
+  test('expands when clicking on the trigger', async () => {
+    document.body.innerHTML = `
+      <div data-collapsible data-collapsible-collapsed data-collapsible-duration="0">
+        <div data-collapsible-trigger>
+          My trigger
+        </div>
+        <div data-collapsible-panel>
+          My panel
+        </div>
+      </div>
+    `;
+
+    // eslint-disable-next-line global-require
+    await import('./collapsible');
+
+    document.querySelector('[data-collapsible-trigger]').click();
+
+    expect(document.querySelector('[data-collapsible-trigger]').getAttribute('aria-expanded')).toEqual('true');
+    expect(document.querySelector('[data-collapsible-panel]').getAttribute('aria-hidden')).toEqual('false');
+
+    document.querySelector('[data-collapsible-trigger]').click();
+
+    expect(document.querySelector('[data-collapsible-trigger]').getAttribute('aria-expanded')).toEqual('false');
+    expect(document.querySelector('[data-collapsible-panel]').getAttribute('aria-hidden')).toEqual('true');
+  });
+
+  test('renders icons when using icon group', async () => {
+    document.body.innerHTML = `
+      <div data-collapsible data-collapsible-icon-group>
+        <div data-collapsible-trigger>
+          My trigger
+        </div>
+        <div data-collapsible-panel>
+          My panel
+        </div>
+      </div>
+    `;
+
+    // eslint-disable-next-line global-require
+    await import('./collapsible');
+
+    expect(document.querySelectorAll('[data-collapsible-trigger] .ct-text-icon__group')).toHaveLength(1);
+    expect(document.querySelector('[data-collapsible-trigger] .ct-text-icon__group').textContent.trim()).toEqual('trigger');
+  });
+
+  test('renders no icon correctly when set', async () => {
+    document.body.innerHTML = `
+      <div data-collapsible>
+        <div data-collapsible-trigger>
+          My trigger
+        </div>
+        <div data-collapsible-panel data-collapsible-trigger-no-icon>
+          My panel
+        </div>
+      </div>
+    `;
+
+    // eslint-disable-next-line global-require
+    await import('./collapsible');
+
+    expect(document.querySelectorAll('.ct-icon')).toHaveLength(0);
+  });
+
+  test('renders in a group when set', async () => {
+    document.body.innerHTML = `
+      <div class="group-a" data-collapsible data-collapsible-collapsed data-collapsible-duration="0" data-collapsible-group="group_test">
+        <div data-collapsible-trigger>
+          My trigger
+        </div>
+        <div data-collapsible-panel data-collapsible-trigger-no-icon>
+          My panel
+        </div>
+      </div>
+      <div class="group-b" data-collapsible data-collapsible-collapsed data-collapsible-duration="0" data-collapsible-group="group_test">
+        <div data-collapsible-trigger>
+          My trigger
+        </div>
+        <div data-collapsible-panel data-collapsible-trigger-no-icon>
+          My panel
+        </div>
+      </div>
+    `;
+
+    // eslint-disable-next-line global-require
+    await import('./collapsible');
+
+    // Both closed.
+    expect(document.querySelector('.group-a [data-collapsible-trigger]').getAttribute('aria-expanded')).toEqual('false');
+    expect(document.querySelector('.group-b [data-collapsible-trigger]').getAttribute('aria-expanded')).toEqual('false');
+
+    // Click A and check A opens, B remains closed.
+    document.querySelector('.group-a [data-collapsible-trigger]').click();
+    expect(document.querySelector('.group-a [data-collapsible-trigger]').getAttribute('aria-expanded')).toEqual('true');
+    expect(document.querySelector('.group-b [data-collapsible-trigger]').getAttribute('aria-expanded')).toEqual('false');
+
+    // Click B and check B opens, A closes.
+    document.querySelector('.group-b [data-collapsible-trigger]').click();
+    expect(document.querySelector('.group-a [data-collapsible-trigger]').getAttribute('aria-expanded')).toEqual('false');
+    expect(document.querySelector('.group-b [data-collapsible-trigger]').getAttribute('aria-expanded')).toEqual('true');
+
+    // Click A and check A opens, B closes.
+    document.querySelector('.group-a [data-collapsible-trigger]').click();
+    expect(document.querySelector('.group-a [data-collapsible-trigger]').getAttribute('aria-expanded')).toEqual('true');
+    expect(document.querySelector('.group-b [data-collapsible-trigger]').getAttribute('aria-expanded')).toEqual('false');
+
+    // Click A and check A and B close.
+    document.querySelector('.group-a [data-collapsible-trigger]').click();
+    expect(document.querySelector('.group-a [data-collapsible-trigger]').getAttribute('aria-expanded')).toEqual('false');
+    expect(document.querySelector('.group-b [data-collapsible-trigger]').getAttribute('aria-expanded')).toEqual('false');
+  });
+
+  test('renders transition style when using animation', async () => {
+    document.body.innerHTML = `
+      <div data-collapsible data-collapsible-collapsed data-collapsible-duration="100">
+        <div data-collapsible-trigger>
+          My trigger
+        </div>
+        <div data-collapsible-panel>
+          My panel
+        </div>
+      </div>
+    `;
+
+    // eslint-disable-next-line global-require
+    await import('./collapsible');
+
+    document.querySelector('[data-collapsible-trigger]').click();
+    expect(document.querySelector('[data-collapsible-collapsing]')).not.toBe(undefined);
+    expect(document.querySelector('[data-collapsible-panel]').style.transition).toEqual(`height 100ms ease-out`);
+  });
+
+  test('does not initialize when collapsible is true', async () => {
+    document.body.innerHTML = `
+      <div data-collapsible="true">
+        <div data-collapsible-trigger>
+          My trigger
+        </div>
+        <div data-collapsible-panel>
+          My panel
+        </div>
+      </div>
+    `;
+
+    // eslint-disable-next-line global-require
+    await import('./collapsible');
+
+    expect(document.querySelector('[data-collapsible-trigger]').getAttribute('aria-expanded')).toEqual(null);
+  });
+
+  test('does not initialize when no inner elements available', async () => {
+    document.body.innerHTML = `
+      <div data-collapsible>
+      </div>
+    `;
+
+    // eslint-disable-next-line global-require
+    await import('./collapsible');
+
+    expect(document.querySelector('[data-collapsible]').getAttribute('data-collapsible')).toEqual('');
+  });
+});