kopia lustrzana https://github.com/shoelace-style/shoelace
update tests
rodzic
dfc4cb6248
commit
eb08be0fce
|
@ -27,8 +27,8 @@ describe('<sl-button-group>', () => {
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('slotted button classes', () => {
|
describe('slotted button data attributes', () => {
|
||||||
it('slotted buttons have the right classes applied based on their order', async () => {
|
it('slotted buttons have the right data attributes applied based on their order', async () => {
|
||||||
const group = await fixture<SlButtonGroup>(html`
|
const group = await fixture<SlButtonGroup>(html`
|
||||||
<sl-button-group>
|
<sl-button-group>
|
||||||
<sl-button>Button 1 Label</sl-button>
|
<sl-button>Button 1 Label</sl-button>
|
||||||
|
@ -38,19 +38,19 @@ describe('<sl-button-group>', () => {
|
||||||
`);
|
`);
|
||||||
|
|
||||||
const allButtons = group.querySelectorAll('sl-button');
|
const allButtons = group.querySelectorAll('sl-button');
|
||||||
const hasGroupClass = Array.from(allButtons).every(button =>
|
const hasGroupAttrib = Array.from(allButtons).every(button =>
|
||||||
button.classList.contains('sl-button-group__button')
|
button.hasAttribute('data-sl-button-group__button')
|
||||||
);
|
);
|
||||||
expect(hasGroupClass).to.be.true;
|
expect(hasGroupAttrib).to.be.true;
|
||||||
|
|
||||||
expect(allButtons[0]).to.have.class('sl-button-group__button--first');
|
expect(allButtons[0]).to.have.attribute('data-sl-button-group__button--first');
|
||||||
expect(allButtons[1]).to.have.class('sl-button-group__button--inner');
|
expect(allButtons[1]).to.have.attribute('data-sl-button-group__button--inner');
|
||||||
expect(allButtons[2]).to.have.class('sl-button-group__button--last');
|
expect(allButtons[2]).to.have.attribute('data-sl-button-group__button--last');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('focus and blur events', () => {
|
describe('focus and blur events', () => {
|
||||||
it('toggles focus class to slotted buttons on focus/blur', async () => {
|
it('toggles focus data attribute to slotted buttons on focus/blur', async () => {
|
||||||
const group = await fixture<SlButtonGroup>(html`
|
const group = await fixture<SlButtonGroup>(html`
|
||||||
<sl-button-group>
|
<sl-button-group>
|
||||||
<sl-button>Button 1 Label</sl-button>
|
<sl-button>Button 1 Label</sl-button>
|
||||||
|
@ -63,16 +63,16 @@ describe('<sl-button-group>', () => {
|
||||||
allButtons[0].dispatchEvent(new FocusEvent('focusin', { bubbles: true }));
|
allButtons[0].dispatchEvent(new FocusEvent('focusin', { bubbles: true }));
|
||||||
|
|
||||||
await elementUpdated(allButtons[0]);
|
await elementUpdated(allButtons[0]);
|
||||||
expect(allButtons[0].classList.contains('sl-button-group__button--focus')).to.be.true;
|
expect(allButtons[0]).to.have.attribute('data-sl-button-group__button--focus');
|
||||||
|
|
||||||
allButtons[0].dispatchEvent(new FocusEvent('focusout', { bubbles: true }));
|
allButtons[0].dispatchEvent(new FocusEvent('focusout', { bubbles: true }));
|
||||||
await elementUpdated(allButtons[0]);
|
await elementUpdated(allButtons[0]);
|
||||||
expect(allButtons[0].classList.contains('sl-button-group__button--focus')).not.to.be.true;
|
expect(allButtons[0]).to.not.have.attribute('data-sl-button-group__button--focus');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
describe('mouseover and mouseout events', () => {
|
describe('mouseover and mouseout events', () => {
|
||||||
it('toggles hover class to slotted buttons on mouseover/mouseout', async () => {
|
it('toggles hover data attribute to slotted buttons on mouseover/mouseout', async () => {
|
||||||
const group = await fixture<SlButtonGroup>(html`
|
const group = await fixture<SlButtonGroup>(html`
|
||||||
<sl-button-group>
|
<sl-button-group>
|
||||||
<sl-button>Button 1 Label</sl-button>
|
<sl-button>Button 1 Label</sl-button>
|
||||||
|
@ -85,11 +85,12 @@ describe('<sl-button-group>', () => {
|
||||||
|
|
||||||
allButtons[0].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
|
allButtons[0].dispatchEvent(new MouseEvent('mouseover', { bubbles: true }));
|
||||||
await elementUpdated(allButtons[0]);
|
await elementUpdated(allButtons[0]);
|
||||||
expect(allButtons[0].classList.contains('sl-button-group__button--hover')).to.be.true;
|
expect(allButtons[0]).to.have.attribute('data-sl-button-group__button--hover');
|
||||||
|
|
||||||
allButtons[0].dispatchEvent(new MouseEvent('mouseout', { bubbles: true }));
|
allButtons[0].dispatchEvent(new MouseEvent('mouseout', { bubbles: true }));
|
||||||
await elementUpdated(allButtons[0]);
|
await elementUpdated(allButtons[0]);
|
||||||
expect(allButtons[0].classList.contains('sl-button-group__button--hover')).not.to.be.true;
|
console.log(allButtons[0]);
|
||||||
|
expect(allButtons[0]).to.not.have.attribute('data-sl-button-group__button--hover');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -21,7 +21,7 @@ describe('<sl-radio-button>', () => {
|
||||||
expect(radio2.checked).to.be.false;
|
expect(radio2.checked).to.be.false;
|
||||||
});
|
});
|
||||||
|
|
||||||
it('should receive positional classes from <sl-button-group>', async () => {
|
it('should receive positional data attributes from <sl-button-group>', async () => {
|
||||||
const radioGroup = await fixture<SlRadioGroup>(html`
|
const radioGroup = await fixture<SlRadioGroup>(html`
|
||||||
<sl-radio-group value="1">
|
<sl-radio-group value="1">
|
||||||
<sl-radio-button id="radio-1" value="1"></sl-radio-button>
|
<sl-radio-button id="radio-1" value="1"></sl-radio-button>
|
||||||
|
@ -35,11 +35,11 @@ describe('<sl-radio-button>', () => {
|
||||||
|
|
||||||
await Promise.all([radioGroup.updateComplete, radio1.updateComplete, radio2.updateComplete, radio3.updateComplete]);
|
await Promise.all([radioGroup.updateComplete, radio1.updateComplete, radio2.updateComplete, radio3.updateComplete]);
|
||||||
|
|
||||||
expect(radio1.classList.contains('sl-button-group__button')).to.be.true;
|
expect(radio1).to.have.attribute('data-sl-button-group__button');
|
||||||
expect(radio1.classList.contains('sl-button-group__button--first')).to.be.true;
|
expect(radio1).to.have.attribute('data-sl-button-group__button--first');
|
||||||
expect(radio2.classList.contains('sl-button-group__button')).to.be.true;
|
expect(radio2).to.have.attribute('data-sl-button-group__button');
|
||||||
expect(radio2.classList.contains('sl-button-group__button--inner')).to.be.true;
|
expect(radio2).to.have.attribute('data-sl-button-group__button--inner');
|
||||||
expect(radio3.classList.contains('sl-button-group__button')).to.be.true;
|
expect(radio3).to.have.attribute('data-sl-button-group__button');
|
||||||
expect(radio3.classList.contains('sl-button-group__button--last')).to.be.true;
|
expect(radio3).to.have.attribute('data-sl-button-group__button--last');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
Ładowanie…
Reference in New Issue