lion/packages/ui/components/core/test/DisabledMixin.test.js
2024-12-04 12:01:42 +01:00

108 lines
3.3 KiB
JavaScript

import { expect, fixture } from '@open-wc/testing';
import { DisabledMixin } from '@lion/ui/core.js';
import { html } from 'lit/static-html.js';
import { LitElement } from 'lit';
import sinon from 'sinon';
describe('DisabledMixin', () => {
class CanBeDisabled extends DisabledMixin(LitElement) {}
before(() => {
customElements.define('can-be-disabled', CanBeDisabled);
});
it('reflects disabled to attribute', async () => {
const el = /** @type {CanBeDisabled} */ (
await fixture(html`<can-be-disabled></can-be-disabled>`)
);
expect(el.hasAttribute('disabled')).to.be.false;
el.makeRequestToBeDisabled();
el.disabled = true;
await el.updateComplete;
expect(el.hasAttribute('disabled')).to.be.true;
});
it('can be requested to be disabled', async () => {
const el = /** @type {CanBeDisabled} */ (
await fixture(html`<can-be-disabled></can-be-disabled>`)
);
el.makeRequestToBeDisabled();
expect(el.disabled).to.be.true;
await el.updateComplete;
expect(el.hasAttribute('disabled')).to.be.true;
});
it('will not allow to become enabled after makeRequestToBeDisabled()', async () => {
const el = /** @type {CanBeDisabled} */ (
await fixture(html`<can-be-disabled></can-be-disabled>`)
);
el.makeRequestToBeDisabled();
expect(el.disabled).to.be.true;
el.disabled = false;
expect(el.disabled).to.be.true;
});
it('will stay disabled after retractRequestToBeDisabled() if it was disabled before', async () => {
const el = /** @type {CanBeDisabled} */ (
await fixture(html`<can-be-disabled disabled></can-be-disabled>`)
);
el.makeRequestToBeDisabled();
el.retractRequestToBeDisabled();
expect(el.disabled).to.be.true;
});
it('will become enabled after retractRequestToBeDisabled() if it was enabled before', async () => {
const el = /** @type {CanBeDisabled} */ (
await fixture(html`<can-be-disabled></can-be-disabled>`)
);
el.makeRequestToBeDisabled();
expect(el.disabled).to.be.true;
el.retractRequestToBeDisabled();
expect(el.disabled).to.be.false;
});
it('may allow multiple calls to makeRequestToBeDisabled()', async () => {
const el = /** @type {CanBeDisabled} */ (
await fixture(html`<can-be-disabled></can-be-disabled>`)
);
el.makeRequestToBeDisabled();
el.makeRequestToBeDisabled();
el.retractRequestToBeDisabled();
expect(el.disabled).to.be.false;
});
it('will restore last state after retractRequestToBeDisabled()', async () => {
const el = /** @type {CanBeDisabled} */ (
await fixture(html`<can-be-disabled></can-be-disabled>`)
);
el.makeRequestToBeDisabled();
el.disabled = true;
el.retractRequestToBeDisabled();
expect(el.disabled).to.be.true;
el.makeRequestToBeDisabled();
el.disabled = false;
el.retractRequestToBeDisabled();
expect(el.disabled).to.be.false;
});
it('will not perform click when disabled', async () => {
const el = /** @type {CanBeDisabled} */ (
await fixture(html`<can-be-disabled></can-be-disabled>`)
);
const spy = sinon.spy();
el.addEventListener('click', spy);
el.click();
expect(spy.callCount).to.equal(1);
el.disabled = true;
el.click();
expect(spy.callCount).to.equal(1);
el.disabled = false;
el.click();
expect(spy.callCount).to.equal(2);
});
});