import React from 'react';
import { composeStories } from '@storybook/react-vite';

import { render as testRender } from '../../../vitest/render';

import * as stories from './Accordion.stories';

const composedStories = composeStories(stories);

describe('Accordion Story Snapshots', () => {
  it('has tests for all stories', () => {
    const storyNames = Object.keys(composedStories);
    const testedStories = new Set([
      'Default',
      'Dense',
      'SingleExpand',
      'WithTopAndBottomDivider',
      'WithBackground',
      'WithTopDividerAndBackground',
      'WithTopDivider',
      'WithBottomDivider',
    ]);

    const untestedStories = storyNames.filter(name => !testedStories.has(name));

    expect(untestedStories).toEqual([]);
  });

  it('renders Default story', () => {
    const Story = composedStories.Default;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="accordion"
  >
    <div
      class="accordion__item"
    >
      <button
        aria-controls="react-aria-_r_0_"
        aria-expanded="false"
        class="accordion__trigger"
        data-react-aria-pressable="true"
        id="react-aria-_r_1_"
        tabindex="0"
        type="button"
      >
        <span
          class="accordion__trigger__inner"
        >
          <span
            class="accordion__title"
          >
            Item 1
          </span>
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-arrow-down-2"
          />
        </span>
      </button>
      <div
        aria-hidden="true"
        aria-labelledby="react-aria-_r_1_"
        class="accordion__content"
        hidden="until-found"
        id="react-aria-_r_0_"
        role="group"
        style="--disclosure-panel-width: 0px; --disclosure-panel-height: 0px;"
      >
        This is my content 1
      </div>
    </div>
    <div
      class="accordion__item"
    >
      <button
        aria-controls="react-aria-_r_2_"
        aria-expanded="false"
        class="accordion__trigger"
        data-react-aria-pressable="true"
        id="react-aria-_r_3_"
        tabindex="0"
        type="button"
      >
        <span
          class="accordion__trigger__inner"
        >
          <span
            class="accordion__title"
          >
            Item 2
          </span>
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-arrow-down-2"
          />
        </span>
      </button>
      <div
        aria-hidden="true"
        aria-labelledby="react-aria-_r_3_"
        class="accordion__content"
        hidden="until-found"
        id="react-aria-_r_2_"
        role="group"
        style="--disclosure-panel-width: 0px; --disclosure-panel-height: 0px;"
      >
        This is my content 2
      </div>
    </div>
    <div
      class="accordion__item"
    >
      <button
        aria-controls="react-aria-_r_4_"
        aria-expanded="false"
        class="accordion__trigger"
        data-react-aria-pressable="true"
        id="react-aria-_r_5_"
        tabindex="0"
        type="button"
      >
        <span
          class="accordion__trigger__inner"
        >
          <span
            class="accordion__title"
          >
            Item 3
          </span>
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-arrow-down-2"
          />
        </span>
      </button>
      <div
        aria-hidden="true"
        aria-labelledby="react-aria-_r_5_"
        class="accordion__content"
        hidden="until-found"
        id="react-aria-_r_4_"
        role="group"
        style="--disclosure-panel-width: 0px; --disclosure-panel-height: 0px;"
      >
        This is my content 3
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders Dense story', () => {
    const Story = composedStories.Dense;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="accordion accordion--dense"
  >
    <div
      class="accordion__item"
    >
      <button
        aria-controls="react-aria-_r_0_"
        aria-expanded="false"
        class="accordion__trigger"
        data-react-aria-pressable="true"
        id="react-aria-_r_1_"
        tabindex="0"
        type="button"
      >
        <span
          class="accordion__trigger__inner"
        >
          <span
            class="accordion__title"
          >
            Item 1
          </span>
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-arrow-down-2"
          />
        </span>
      </button>
      <div
        aria-hidden="true"
        aria-labelledby="react-aria-_r_1_"
        class="accordion__content"
        hidden="until-found"
        id="react-aria-_r_0_"
        role="group"
        style="--disclosure-panel-width: 0px; --disclosure-panel-height: 0px;"
      >
        This is my content 1
      </div>
    </div>
    <div
      class="accordion__item"
    >
      <button
        aria-controls="react-aria-_r_2_"
        aria-expanded="false"
        class="accordion__trigger"
        data-react-aria-pressable="true"
        id="react-aria-_r_3_"
        tabindex="0"
        type="button"
      >
        <span
          class="accordion__trigger__inner"
        >
          <span
            class="accordion__title"
          >
            Item 2
          </span>
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-arrow-down-2"
          />
        </span>
      </button>
      <div
        aria-hidden="true"
        aria-labelledby="react-aria-_r_3_"
        class="accordion__content"
        hidden="until-found"
        id="react-aria-_r_2_"
        role="group"
        style="--disclosure-panel-width: 0px; --disclosure-panel-height: 0px;"
      >
        This is my content 2
      </div>
    </div>
    <div
      class="accordion__item"
    >
      <button
        aria-controls="react-aria-_r_4_"
        aria-expanded="false"
        class="accordion__trigger"
        data-react-aria-pressable="true"
        id="react-aria-_r_5_"
        tabindex="0"
        type="button"
      >
        <span
          class="accordion__trigger__inner"
        >
          <span
            class="accordion__title"
          >
            Item 3
          </span>
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-arrow-down-2"
          />
        </span>
      </button>
      <div
        aria-hidden="true"
        aria-labelledby="react-aria-_r_5_"
        class="accordion__content"
        hidden="until-found"
        id="react-aria-_r_4_"
        role="group"
        style="--disclosure-panel-width: 0px; --disclosure-panel-height: 0px;"
      >
        This is my content 3
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders SingleExpand story', () => {
    const Story = composedStories.SingleExpand;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="accordion accordion--dividerTopBottom"
  >
    <div
      class="accordion__item"
    >
      <button
        aria-controls="react-aria-_r_0_"
        aria-expanded="false"
        class="accordion__trigger"
        data-react-aria-pressable="true"
        id="react-aria-_r_1_"
        tabindex="0"
        type="button"
      >
        <span
          class="accordion__trigger__inner"
        >
          <span
            class="accordion__title"
          >
            Item 1
          </span>
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-arrow-down-2"
          />
        </span>
      </button>
      <div
        aria-hidden="true"
        aria-labelledby="react-aria-_r_1_"
        class="accordion__content"
        hidden="until-found"
        id="react-aria-_r_0_"
        role="group"
        style="--disclosure-panel-width: 0px; --disclosure-panel-height: 0px;"
      >
        I will be closed when the other item is open.
      </div>
    </div>
    <div
      class="accordion__item"
    >
      <button
        aria-controls="react-aria-_r_2_"
        aria-expanded="false"
        class="accordion__trigger"
        data-react-aria-pressable="true"
        id="react-aria-_r_3_"
        tabindex="0"
        type="button"
      >
        <span
          class="accordion__trigger__inner"
        >
          <span
            class="accordion__title"
          >
            Item 2
          </span>
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-arrow-down-2"
          />
        </span>
      </button>
      <div
        aria-hidden="true"
        aria-labelledby="react-aria-_r_3_"
        class="accordion__content"
        hidden="until-found"
        id="react-aria-_r_2_"
        role="group"
        style="--disclosure-panel-width: 0px; --disclosure-panel-height: 0px;"
      >
        I will be closed when the other item is open.
      </div>
    </div>
    <div
      class="accordion__item"
    >
      <button
        aria-controls="react-aria-_r_4_"
        aria-expanded="false"
        class="accordion__trigger"
        data-react-aria-pressable="true"
        id="react-aria-_r_5_"
        tabindex="0"
        type="button"
      >
        <span
          class="accordion__trigger__inner"
        >
          <span
            class="accordion__title"
          >
            Item 3
          </span>
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-arrow-down-2"
          />
        </span>
      </button>
      <div
        aria-hidden="true"
        aria-labelledby="react-aria-_r_5_"
        class="accordion__content"
        hidden="until-found"
        id="react-aria-_r_4_"
        role="group"
        style="--disclosure-panel-width: 0px; --disclosure-panel-height: 0px;"
      >
        I will be closed when the other item is open.
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders WithTopAndBottomDivider story', () => {
    const Story = composedStories.WithTopAndBottomDivider;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="accordion accordion--dividerTopBottom"
  >
    <div
      class="accordion__item"
    >
      <button
        aria-controls="react-aria-_r_0_"
        aria-expanded="false"
        class="accordion__trigger"
        data-react-aria-pressable="true"
        id="react-aria-_r_1_"
        tabindex="0"
        type="button"
      >
        <span
          class="accordion__trigger__inner"
        >
          <span
            class="accordion__title"
          >
            I already have campaigns on Google, can I also use Shoptet Campaigns?
          </span>
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-arrow-down-2"
          />
        </span>
      </button>
      <div
        aria-hidden="true"
        aria-labelledby="react-aria-_r_1_"
        class="accordion__content"
        hidden="until-found"
        id="react-aria-_r_0_"
        role="group"
        style="--disclosure-panel-width: 0px; --disclosure-panel-height: 0px;"
      >
        Yes, you can leverage Shoptet Campaigns in addition to your existing campaigns on Google.
      </div>
    </div>
    <div
      class="accordion__item"
    >
      <button
        aria-controls="react-aria-_r_2_"
        aria-expanded="false"
        class="accordion__trigger"
        data-react-aria-pressable="true"
        id="react-aria-_r_3_"
        tabindex="0"
        type="button"
      >
        <span
          class="accordion__trigger__inner"
        >
          <span
            class="accordion__title"
          >
            I already have an advertising account, can I use it?
          </span>
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-arrow-down-2"
          />
        </span>
      </button>
      <div
        aria-hidden="true"
        aria-labelledby="react-aria-_r_3_"
        class="accordion__content"
        hidden="until-found"
        id="react-aria-_r_2_"
        role="group"
        style="--disclosure-panel-width: 0px; --disclosure-panel-height: 0px;"
      >
        Before we launch your advertisement, please review and examine everything to see how and where it will appear within the Google advertising system. Once you approve everything, Google will begin approving the ads before publishing them. This process may take several hours to two days. Therefore, we ask for your patience.
      </div>
    </div>
    <div
      class="accordion__item"
    >
      <button
        aria-controls="react-aria-_r_4_"
        aria-expanded="false"
        class="accordion__trigger"
        data-react-aria-pressable="true"
        id="react-aria-_r_5_"
        tabindex="0"
        type="button"
      >
        <span
          class="accordion__trigger__inner"
        >
          <span
            class="accordion__title"
          >
            Will I have access to the account where the campaigns are running?
          </span>
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-arrow-down-2"
          />
        </span>
      </button>
      <div
        aria-hidden="true"
        aria-labelledby="react-aria-_r_5_"
        class="accordion__content"
        hidden="until-found"
        id="react-aria-_r_4_"
        role="group"
        style="--disclosure-panel-width: 0px; --disclosure-panel-height: 0px;"
      >
        Yes, you will have access to the account where the campaigns are running.
      </div>
    </div>
    <div
      class="accordion__item"
    >
      <button
        aria-controls="react-aria-_r_6_"
        aria-expanded="false"
        class="accordion__trigger"
        data-react-aria-pressable="true"
        id="react-aria-_r_7_"
        tabindex="0"
        type="button"
      >
        <span
          class="accordion__trigger__inner"
        >
          <span
            class="accordion__title"
          >
            Can I pause or adjust my campaigns after they are launched?
          </span>
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-arrow-down-2"
          />
        </span>
      </button>
      <div
        aria-hidden="true"
        aria-labelledby="react-aria-_r_7_"
        class="accordion__content"
        hidden="until-found"
        id="react-aria-_r_6_"
        role="group"
        style="--disclosure-panel-width: 0px; --disclosure-panel-height: 0px;"
      >
        Yes, campaigns can be updated over time based on your business goals and current performance.
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders WithBackground story', () => {
    const Story = composedStories.WithBackground;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="accordion accordion--withBackground"
  >
    <div
      class="accordion__item"
    >
      <button
        aria-controls="react-aria-_r_0_"
        aria-expanded="false"
        class="accordion__trigger"
        data-react-aria-pressable="true"
        id="react-aria-_r_1_"
        tabindex="0"
        type="button"
      >
        <span
          class="accordion__trigger__inner"
        >
          <span
            class="accordion__title"
          >
            Item 1
          </span>
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-arrow-down-2"
          />
        </span>
      </button>
      <div
        aria-hidden="true"
        aria-labelledby="react-aria-_r_1_"
        class="accordion__content"
        hidden="until-found"
        id="react-aria-_r_0_"
        role="group"
        style="--disclosure-panel-width: 0px; --disclosure-panel-height: 0px;"
      >
        This is my content 1
      </div>
    </div>
    <div
      class="accordion__item"
    >
      <button
        aria-controls="react-aria-_r_2_"
        aria-expanded="false"
        class="accordion__trigger"
        data-react-aria-pressable="true"
        id="react-aria-_r_3_"
        tabindex="0"
        type="button"
      >
        <span
          class="accordion__trigger__inner"
        >
          <span
            class="accordion__title"
          >
            Item 2
          </span>
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-arrow-down-2"
          />
        </span>
      </button>
      <div
        aria-hidden="true"
        aria-labelledby="react-aria-_r_3_"
        class="accordion__content"
        hidden="until-found"
        id="react-aria-_r_2_"
        role="group"
        style="--disclosure-panel-width: 0px; --disclosure-panel-height: 0px;"
      >
        This is my content 2
      </div>
    </div>
    <div
      class="accordion__item"
    >
      <button
        aria-controls="react-aria-_r_4_"
        aria-expanded="false"
        class="accordion__trigger"
        data-react-aria-pressable="true"
        id="react-aria-_r_5_"
        tabindex="0"
        type="button"
      >
        <span
          class="accordion__trigger__inner"
        >
          <span
            class="accordion__title"
          >
            Item 3
          </span>
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-arrow-down-2"
          />
        </span>
      </button>
      <div
        aria-hidden="true"
        aria-labelledby="react-aria-_r_5_"
        class="accordion__content"
        hidden="until-found"
        id="react-aria-_r_4_"
        role="group"
        style="--disclosure-panel-width: 0px; --disclosure-panel-height: 0px;"
      >
        This is my content 3
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders WithTopDividerAndBackground story', () => {
    const Story = composedStories.WithTopDividerAndBackground;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="accordion accordion--withBackground accordion--dividerTop"
  >
    <div
      class="accordion__item"
    >
      <button
        aria-controls="react-aria-_r_0_"
        aria-expanded="false"
        class="accordion__trigger"
        data-react-aria-pressable="true"
        id="react-aria-_r_1_"
        tabindex="0"
        type="button"
      >
        <span
          class="accordion__trigger__inner"
        >
          <span
            class="accordion__title"
          >
            Item 1
          </span>
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-arrow-down-2"
          />
        </span>
      </button>
      <div
        aria-hidden="true"
        aria-labelledby="react-aria-_r_1_"
        class="accordion__content"
        hidden="until-found"
        id="react-aria-_r_0_"
        role="group"
        style="--disclosure-panel-width: 0px; --disclosure-panel-height: 0px;"
      >
        This is my content 1
      </div>
    </div>
    <div
      class="accordion__item"
    >
      <button
        aria-controls="react-aria-_r_2_"
        aria-expanded="false"
        class="accordion__trigger"
        data-react-aria-pressable="true"
        id="react-aria-_r_3_"
        tabindex="0"
        type="button"
      >
        <span
          class="accordion__trigger__inner"
        >
          <span
            class="accordion__title"
          >
            Item 2
          </span>
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-arrow-down-2"
          />
        </span>
      </button>
      <div
        aria-hidden="true"
        aria-labelledby="react-aria-_r_3_"
        class="accordion__content"
        hidden="until-found"
        id="react-aria-_r_2_"
        role="group"
        style="--disclosure-panel-width: 0px; --disclosure-panel-height: 0px;"
      >
        This is my content 2
      </div>
    </div>
    <div
      class="accordion__item"
    >
      <button
        aria-controls="react-aria-_r_4_"
        aria-expanded="false"
        class="accordion__trigger"
        data-react-aria-pressable="true"
        id="react-aria-_r_5_"
        tabindex="0"
        type="button"
      >
        <span
          class="accordion__trigger__inner"
        >
          <span
            class="accordion__title"
          >
            Item 3
          </span>
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-arrow-down-2"
          />
        </span>
      </button>
      <div
        aria-hidden="true"
        aria-labelledby="react-aria-_r_5_"
        class="accordion__content"
        hidden="until-found"
        id="react-aria-_r_4_"
        role="group"
        style="--disclosure-panel-width: 0px; --disclosure-panel-height: 0px;"
      >
        This is my content 3
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders WithTopDivider story', () => {
    const Story = composedStories.WithTopDivider;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="accordion accordion--dividerTop"
  >
    <div
      class="accordion__item"
    >
      <button
        aria-controls="react-aria-_r_0_"
        aria-expanded="false"
        class="accordion__trigger"
        data-react-aria-pressable="true"
        id="react-aria-_r_1_"
        tabindex="0"
        type="button"
      >
        <span
          class="accordion__trigger__inner"
        >
          <span
            class="accordion__title"
          >
            Item 1
          </span>
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-arrow-down-2"
          />
        </span>
      </button>
      <div
        aria-hidden="true"
        aria-labelledby="react-aria-_r_1_"
        class="accordion__content"
        hidden="until-found"
        id="react-aria-_r_0_"
        role="group"
        style="--disclosure-panel-width: 0px; --disclosure-panel-height: 0px;"
      >
        This is my content 1
      </div>
    </div>
    <div
      class="accordion__item"
    >
      <button
        aria-controls="react-aria-_r_2_"
        aria-expanded="false"
        class="accordion__trigger"
        data-react-aria-pressable="true"
        id="react-aria-_r_3_"
        tabindex="0"
        type="button"
      >
        <span
          class="accordion__trigger__inner"
        >
          <span
            class="accordion__title"
          >
            Item 2
          </span>
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-arrow-down-2"
          />
        </span>
      </button>
      <div
        aria-hidden="true"
        aria-labelledby="react-aria-_r_3_"
        class="accordion__content"
        hidden="until-found"
        id="react-aria-_r_2_"
        role="group"
        style="--disclosure-panel-width: 0px; --disclosure-panel-height: 0px;"
      >
        This is my content 2
      </div>
    </div>
    <div
      class="accordion__item"
    >
      <button
        aria-controls="react-aria-_r_4_"
        aria-expanded="false"
        class="accordion__trigger"
        data-react-aria-pressable="true"
        id="react-aria-_r_5_"
        tabindex="0"
        type="button"
      >
        <span
          class="accordion__trigger__inner"
        >
          <span
            class="accordion__title"
          >
            Item 3
          </span>
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-arrow-down-2"
          />
        </span>
      </button>
      <div
        aria-hidden="true"
        aria-labelledby="react-aria-_r_5_"
        class="accordion__content"
        hidden="until-found"
        id="react-aria-_r_4_"
        role="group"
        style="--disclosure-panel-width: 0px; --disclosure-panel-height: 0px;"
      >
        This is my content 3
      </div>
    </div>
  </div>
</div>
`);
  });

  it('renders WithBottomDivider story', () => {
    const Story = composedStories.WithBottomDivider;
    const { container } = testRender(<Story />);
    expect(container).toMatchInlineSnapshot(`
<div>
  <div
    class="accordion accordion--dividerBottom"
  >
    <div
      class="accordion__item"
    >
      <button
        aria-controls="react-aria-_r_0_"
        aria-expanded="false"
        class="accordion__trigger"
        data-react-aria-pressable="true"
        id="react-aria-_r_1_"
        tabindex="0"
        type="button"
      >
        <span
          class="accordion__trigger__inner"
        >
          <span
            class="accordion__title"
          >
            Item 1
          </span>
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-arrow-down-2"
          />
        </span>
      </button>
      <div
        aria-hidden="true"
        aria-labelledby="react-aria-_r_1_"
        class="accordion__content"
        hidden="until-found"
        id="react-aria-_r_0_"
        role="group"
        style="--disclosure-panel-width: 0px; --disclosure-panel-height: 0px;"
      >
        This is my content 1
      </div>
    </div>
    <div
      class="accordion__item"
    >
      <button
        aria-controls="react-aria-_r_2_"
        aria-expanded="false"
        class="accordion__trigger"
        data-react-aria-pressable="true"
        id="react-aria-_r_3_"
        tabindex="0"
        type="button"
      >
        <span
          class="accordion__trigger__inner"
        >
          <span
            class="accordion__title"
          >
            Item 2
          </span>
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-arrow-down-2"
          />
        </span>
      </button>
      <div
        aria-hidden="true"
        aria-labelledby="react-aria-_r_3_"
        class="accordion__content"
        hidden="until-found"
        id="react-aria-_r_2_"
        role="group"
        style="--disclosure-panel-width: 0px; --disclosure-panel-height: 0px;"
      >
        This is my content 2
      </div>
    </div>
    <div
      class="accordion__item"
    >
      <button
        aria-controls="react-aria-_r_4_"
        aria-expanded="false"
        class="accordion__trigger"
        data-react-aria-pressable="true"
        id="react-aria-_r_5_"
        tabindex="0"
        type="button"
      >
        <span
          class="accordion__trigger__inner"
        >
          <span
            class="accordion__title"
          >
            Item 3
          </span>
          <span
            aria-hidden="true"
            class="shoptet-icon icon icon--default icon--md shp-arrow-down-2"
          />
        </span>
      </button>
      <div
        aria-hidden="true"
        aria-labelledby="react-aria-_r_5_"
        class="accordion__content"
        hidden="until-found"
        id="react-aria-_r_4_"
        role="group"
        style="--disclosure-panel-width: 0px; --disclosure-panel-height: 0px;"
      >
        This is my content 3
      </div>
    </div>
  </div>
</div>
`);
  });
});