Added test to mmd component (#119)

* added test to mmd component

* Create loud-countries-train.md

* extract fixture to function

.changeset/loud-countries-train.md

@@ -0,0 +1,5 @@
+---
+"@qiskit/web-components": patch
+---
+
+Added test to mmd component

components/mega-menu-dropdown/index.test.ts

@@ -5,21 +5,72 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { fixture, expect } from '@open-wc/testing';
+import { fixture, expect, nextFrame, triggerFocusFor } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
 
 import { tripleColumnMultiBlock } from './mockData.test.js';
 
 import './index.js';
 
+async function mmdFixture() {
+  return await fixture(
+    html`<qiskit-mega-menu-dropdown
+      placeholder="Browse all content"
+      .content="${tripleColumnMultiBlock}"
+    ></qiskit-mega-menu-dropdown>`
+  );
+}
+
 describe('mega menu dropdown', () => {
   it('passes accessibility test', async () => {
-    const el = await fixture(
-      html`<qiskit-mega-menu-dropdown
-        placeholder="Browse all content"
-        .content="${tripleColumnMultiBlock}"
-      ></qiskit-mega-menu-dropdown>`
-    );
+    const el = await mmdFixture();
     await expect(el).to.be.accessible();
   });
+  it('can be opened and closed', async () => {
+    const el = await mmdFixture();
+
+    if (!el.shadowRoot) {
+      expect.fail('Cannot find shadow root');
+    }
+
+    const contentSelector = '.content';
+    const filterButton: HTMLButtonElement | null =
+      el.shadowRoot.querySelector('.filter__button');
+
+    expect(el.shadowRoot?.querySelector(contentSelector)).to.not.exist;
+    expect(filterButton).to.exist;
+
+    filterButton?.click();
+    await nextFrame();
+    expect(filterButton).to.be.visible;
+    expect(el.shadowRoot?.querySelector(contentSelector)).to.exist.and.be
+      .visible;
+
+    filterButton?.click();
+    await nextFrame();
+    expect(filterButton).to.be.visible;
+    expect(el.shadowRoot?.querySelector(contentSelector)).to.not.exist;
+  });
+
+  it('should show empty view', async () => {
+    const el = await mmdFixture();
+
+    if (!el.shadowRoot) {
+      expect.fail('Cannot find shadowRoot');
+    }
+
+    const filterInput: HTMLInputElement | null =
+      el.shadowRoot.querySelector('.filter__input');
+    if (!filterInput) {
+      expect.fail("Cannot find '.filter__input'");
+    }
+
+    triggerFocusFor(filterInput);
+    filterInput.value = 'ExpectEmptyContentForSure';
+    filterInput.dispatchEvent(new Event('keyup'));
+    await nextFrame();
+    expect(filterInput).to.be.visible;
+    expect(el.shadowRoot?.querySelector('.content-empty')).to.exist.and.be
+      .visible;
+  });
 });