ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: fixed all tests

Browse source
This commit is contained in:
Danny Moerkerke 2022-08-08 11:45:26 +02:00
parent be30ff540b
commit 14a7807f3b
2 changed files with 29 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
packages/accordion/src/LionAccordion.js
View file

@ -43,21 +43,21 @@ export class LionAccordion extends LitElement {
flex-direction: column; flex-direction: column;
} }
.accordion ::slotted([slot='invoker']) { .accordion ::slotted([slot='accordion']) {
margin: 0; margin: 0;
} }
.accordion ::slotted([slot='invoker'][expanded]) { .accordion ::slotted([slot='accordion'][expanded]) {
font-weight: bold; font-weight: bold;
} }
.accordion ::slotted([slot='content']) { .accordion ::slotted([slot='accordion']) {
margin: 0; margin: 0;
visibility: hidden; visibility: hidden;
display: none; display: none;
} }
.accordion ::slotted([slot='content'][expanded]) { .accordion ::slotted([slot='accordion'][expanded]) {
visibility: visible; visibility: visible;
display: block; display: block;
} }
@ -148,6 +148,7 @@ export class LionAccordion extends LitElement {
<div class="accordion"> <div class="accordion">
<slot name="invoker"></slot> <slot name="invoker"></slot>
<slot name="content"></slot> <slot name="content"></slot>
<slot name="accordion"></slot>
</div> </div>
`; `;
} }
@ -218,7 +219,7 @@ export class LionAccordion extends LitElement {
const contents = /** @type {HTMLElement[]} */ ( const contents = /** @type {HTMLElement[]} */ (
Array.from(this.querySelectorAll('[slot="content"]')) Array.from(this.querySelectorAll('[slot="content"]'))
); );
const accordion = this.shadowRoot?.querySelector('.accordion'); const accordion = this.shadowRoot?.querySelector('slot[name=accordion]');
if (accordion) { if (accordion) {
invokers.forEach((invoker, index) => { invokers.forEach((invoker, index) => {

37
packages/accordion/test/lion-accordion.test.js
View file

@ -18,6 +18,12 @@ const basicAccordion = html`
</lion-accordion> </lion-accordion>
`; `;
function getAccordionChildren(/** @type {Element} */ el) {
const slot = el.shadowRoot?.querySelector('slot[name=accordion]');
return slot ? slot.children : [];
}
describe('<lion-accordion>', () => { describe('<lion-accordion>', () => {
describe('Accordion', () => { describe('Accordion', () => {
it('sets expanded to [] by default', async () => { it('sets expanded to [] by default', async () => {
@ -37,15 +43,16 @@ describe('<lion-accordion>', () => {
`) `)
); );
expect(el.expanded).to.deep.equal([1]); expect(el.expanded).to.deep.equal([1]);
expect( expect(
Array.from(el.children).find( Array.from(getAccordionChildren(el)).find(
child => child.slot === 'invoker' && child.hasAttribute('expanded'), child => child.slot === 'invoker' && child.hasAttribute('expanded'),
)?.textContent, )?.textContent,
).to.equal('invoker 2'); ).to.equal('invoker 2');
el.expanded = [0]; el.expanded = [0];
expect( expect(
Array.from(el.children).find( Array.from(getAccordionChildren(el)).find(
child => child.slot === 'invoker' && child.hasAttribute('expanded'), child => child.slot === 'invoker' && child.hasAttribute('expanded'),
)?.textContent, )?.textContent,
).to.equal('invoker 1'); ).to.equal('invoker 1');
@ -118,14 +125,14 @@ describe('<lion-accordion>', () => {
); );
expect(el.focusedIndex).to.equal(1); expect(el.focusedIndex).to.equal(1);
expect( expect(
Array.from(el.children).find( Array.from(getAccordionChildren(el)).find(
child => child.slot === 'invoker' && child.firstElementChild?.hasAttribute('focused'), child => child.slot === 'invoker' && child.firstElementChild?.hasAttribute('focused'),
)?.textContent, )?.textContent,
).to.equal('invoker 2'); ).to.equal('invoker 2');
el.focusedIndex = 0; el.focusedIndex = 0;
expect( expect(
Array.from(el.children).find( Array.from(getAccordionChildren(el)).find(
child => child.slot === 'invoker' && child.firstElementChild?.hasAttribute('focused'), child => child.slot === 'invoker' && child.firstElementChild?.hasAttribute('focused'),
)?.textContent, )?.textContent,
).to.equal('invoker 1'); ).to.equal('invoker 1');
@ -325,12 +332,12 @@ describe('<lion-accordion>', () => {
el.expanded = [4]; el.expanded = [4];
await el.updateComplete; await el.updateComplete;
expect( expect(
Array.from(el.children).find( Array.from(getAccordionChildren(el)).find(
child => child.slot === 'invoker' && child.hasAttribute('expanded'), child => child.slot === 'invoker' && child.hasAttribute('expanded'),
)?.textContent, )?.textContent,
).to.equal('invoker 5'); ).to.equal('invoker 5');
expect( expect(
Array.from(el.children).find( Array.from(getAccordionChildren(el)).find(
child => child.slot === 'content' && child.hasAttribute('expanded'), child => child.slot === 'content' && child.hasAttribute('expanded'),
)?.textContent, )?.textContent,
).to.equal('content 5'); ).to.equal('content 5');
@ -375,12 +382,12 @@ describe('<lion-accordion>', () => {
<div slot="content">content 2</div> <div slot="content">content 2</div>
</lion-accordion> </lion-accordion>
`); `);
expect(Array.from(el.children).find(child => child.slot === 'content')).to.not.have.attribute( expect(
'tabindex', Array.from(getAccordionChildren(el)).find(child => child.slot === 'content'),
); ).to.not.have.attribute('tabindex');
expect(Array.from(el.children).find(child => child.slot === 'content')).to.not.have.attribute( expect(
'tabindex', Array.from(getAccordionChildren(el)).find(child => child.slot === 'content'),
); ).to.not.have.attribute('tabindex');
}); });
describe('Invokers', () => { describe('Invokers', () => {
@ -411,7 +418,8 @@ describe('<lion-accordion>', () => {
</lion-accordion> </lion-accordion>
`); `);
expect( expect(
Array.from(el.children).find(child => child.slot === 'invoker')?.firstElementChild, Array.from(getAccordionChildren(el)).find(child => child.slot === 'invoker')
?.firstElementChild,
).to.have.attribute('aria-expanded', 'false'); ).to.have.attribute('aria-expanded', 'false');
}); });
@ -426,7 +434,8 @@ describe('<lion-accordion>', () => {
); );
el.expanded = [0]; el.expanded = [0];
expect( expect(
Array.from(el.children).find(child => child.slot === 'invoker')?.firstElementChild, Array.from(getAccordionChildren(el)).find(child => child.slot === 'invoker')
?.firstElementChild,
).to.have.attribute('aria-expanded', 'true'); ).to.have.attribute('aria-expanded', 'true');
}); });
}); });