From 5458a0e8f57b483a3291c1a10a95442d69729be5 Mon Sep 17 00:00:00 2001
From: Buni48 <37407974+Buni48@users.noreply.github.com>
Date: Fri, 14 Oct 2022 15:55:09 +0300
Subject: [PATCH] Added tests to menu-item & menu-label (#935)

* added tests to menu-item & menu-label

* updated changelog

* aTimeout instead of setTimeout
---
 docs/resources/changelog.md                  |  1 +
 src/components/menu-item/menu-item.test.ts   | 50 ++++++++++++++++++++
 src/components/menu-label/menu-label.test.ts |  9 ++++
 3 files changed, 60 insertions(+)
 create mode 100644 src/components/menu-item/menu-item.test.ts
 create mode 100644 src/components/menu-label/menu-label.test.ts

diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
index 0536fe8b..de32286c 100644
--- a/docs/resources/changelog.md
+++ b/docs/resources/changelog.md
@@ -13,6 +13,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Added `button--checked` to `<sl-radio-button>` and `control--checked` to `<sl-radio>` to style just the checked state [#933](https://github.com/shoelace-style/shoelace/pull/933)
 - Fixed a bug in `<sl-card>` that prevented the border radius to apply correctly to the header [#934](https://github.com/shoelace-style/shoelace/pull/934)
 - Improved `<sl-badge>` so it renders relative to the current font size and improved padding
+- Added tests for `<sl-menu-item>` and `<sl-menu-label>` [#935](https://github.com/shoelace-style/shoelace/pull/935)
 
 ## 2.0.0-beta.83
 
diff --git a/src/components/menu-item/menu-item.test.ts b/src/components/menu-item/menu-item.test.ts
new file mode 100644
index 00000000..588ae1a4
--- /dev/null
+++ b/src/components/menu-item/menu-item.test.ts
@@ -0,0 +1,50 @@
+import { expect, fixture, html, waitUntil, aTimeout } from '@open-wc/testing';
+import sinon from 'sinon';
+import type SlMenuItem from './menu-item';
+
+describe('<sl-menu-item>', () => {
+  it('passes accessibility test', async () => {
+    const el = await fixture<SlMenuItem>(html`
+      <sl-select>
+        <sl-menu-item>Test</sl-menu-item>
+      </sl-select>
+    `);
+    await expect(el).to.be.accessible();
+  });
+
+  it('default properties', async () => {
+    const el = await fixture<SlMenuItem>(html` <sl-menu-item>Test</sl-menu-item> `);
+
+    expect(el.checked).to.be.false;
+    expect(el.getAttribute('aria-checked')).to.equal('false');
+    expect(el.value).to.equal('');
+    expect(el.disabled).to.be.false;
+    expect(el.getAttribute('aria-disabled')).to.equal('false');
+  });
+
+  it('changes aria attributes', async () => {
+    const el = await fixture<SlMenuItem>(html` <sl-menu-item>Test</sl-menu-item> `);
+
+    el.checked = true;
+    await aTimeout(100);
+    expect(el.getAttribute('aria-checked')).to.equal('true');
+    el.disabled = true;
+    await aTimeout(100);
+    expect(el.getAttribute('aria-disabled')).to.equal('true');
+  });
+
+  it('get text label', async () => {
+    const el = await fixture<SlMenuItem>(html` <sl-menu-item>Test</sl-menu-item> `);
+    expect(el.getTextLabel()).to.equal('Test');
+  });
+
+  it('emit sl-label-change event on label change', async () => {
+    const el = await fixture<SlMenuItem>(html` <sl-menu-item>Test</sl-menu-item> `);
+
+    const labelChangeHandler = sinon.spy();
+    el.textContent = 'New Text';
+    el.addEventListener('sl-label-change', labelChangeHandler);
+    await waitUntil(() => labelChangeHandler.calledOnce);
+    expect(labelChangeHandler).to.have.been.calledOnce;
+  });
+});
diff --git a/src/components/menu-label/menu-label.test.ts b/src/components/menu-label/menu-label.test.ts
new file mode 100644
index 00000000..fd7d6647
--- /dev/null
+++ b/src/components/menu-label/menu-label.test.ts
@@ -0,0 +1,9 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import type SlMenuLabel from './menu-label';
+
+describe('<sl-menu-label>', () => {
+  it('passes accessibility test', async () => {
+    const el = await fixture<SlMenuLabel>(html` <sl-menu-label>Test</sl-menu-label> `);
+    await expect(el).to.be.accessible();
+  });
+});