2022-10-24 14:04:17 +00:00
|
|
|
import { expect, fixture, html } from '@open-wc/testing';
|
|
|
|
import type SlRating from './rating';
|
|
|
|
|
|
|
|
describe('<sl-rating>', () => {
|
|
|
|
it('should pass accessibility tests', async () => {
|
|
|
|
const el = await fixture<SlRating>(html` <sl-rating label="Test"></sl-rating> `);
|
|
|
|
await expect(el).to.be.accessible();
|
|
|
|
|
2022-11-17 14:35:44 +00:00
|
|
|
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
|
2022-10-24 14:04:17 +00:00
|
|
|
|
|
|
|
expect(base.getAttribute('role')).to.equal('slider');
|
|
|
|
expect(base.getAttribute('aria-disabled')).to.equal('false');
|
|
|
|
expect(base.getAttribute('aria-readonly')).to.equal('false');
|
|
|
|
expect(base.getAttribute('aria-valuenow')).to.equal('0');
|
|
|
|
expect(base.getAttribute('aria-valuemin')).to.equal('0');
|
|
|
|
expect(base.getAttribute('aria-valuemax')).to.equal('5');
|
|
|
|
expect(base.getAttribute('tabindex')).to.equal('0');
|
|
|
|
expect(base.getAttribute('class')).to.equal(' rating ');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should be readonly with the readonly attribute', async () => {
|
|
|
|
const el = await fixture<SlRating>(html` <sl-rating label="Test" readonly></sl-rating> `);
|
2022-11-17 14:35:44 +00:00
|
|
|
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
|
2022-10-24 14:04:17 +00:00
|
|
|
|
|
|
|
expect(base.getAttribute('aria-readonly')).to.equal('true');
|
|
|
|
expect(base.getAttribute('class')).to.equal(' rating rating--readonly ');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should be disabled with the disabled attribute', async () => {
|
|
|
|
const el = await fixture<SlRating>(html` <sl-rating label="Test" disabled></sl-rating> `);
|
2022-11-17 14:35:44 +00:00
|
|
|
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
|
2022-10-24 14:04:17 +00:00
|
|
|
|
|
|
|
expect(base.getAttribute('aria-disabled')).to.equal('true');
|
|
|
|
expect(base.getAttribute('class')).to.equal(' rating rating--disabled ');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should set max value by attribute', async () => {
|
|
|
|
const el = await fixture<SlRating>(html` <sl-rating label="Test" max="12"></sl-rating> `);
|
2022-11-17 14:35:44 +00:00
|
|
|
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
|
2022-10-24 14:04:17 +00:00
|
|
|
|
|
|
|
expect(base.getAttribute('aria-valuemax')).to.equal('12');
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should set selected value by attribute', async () => {
|
|
|
|
const el = await fixture<SlRating>(html` <sl-rating label="Test" value="3"></sl-rating> `);
|
2022-11-17 14:35:44 +00:00
|
|
|
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
|
2022-10-24 14:04:17 +00:00
|
|
|
|
|
|
|
expect(base.getAttribute('aria-valuenow')).to.equal('3');
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('focus', () => {
|
|
|
|
it('should focus inner div', async () => {
|
|
|
|
const el = await fixture<SlRating>(html` <sl-rating label="Test"></sl-rating> `);
|
|
|
|
|
2022-11-17 14:35:44 +00:00
|
|
|
const base = el.shadowRoot!.querySelector<HTMLElement>('[part~="base"]')!;
|
2022-10-24 14:04:17 +00:00
|
|
|
|
|
|
|
el.focus();
|
|
|
|
await el.updateComplete;
|
|
|
|
|
|
|
|
expect(el.shadowRoot!.activeElement).to.equal(base);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
describe('blur', () => {
|
|
|
|
it('should blur inner div', async () => {
|
|
|
|
const el = await fixture<SlRating>(html` <sl-rating label="Test"></sl-rating> `);
|
|
|
|
|
|
|
|
el.focus();
|
|
|
|
await el.updateComplete;
|
|
|
|
|
|
|
|
el.blur();
|
|
|
|
await el.updateComplete;
|
|
|
|
|
|
|
|
expect(el.shadowRoot!.activeElement).to.equal(null);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
});
|