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

@@ -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
 

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;
+  });
+});

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();
+  });
+});