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

chore: apply prettier formatting changes

Browse source
This commit is contained in:
Joren Broekema 2020-04-28 11:17:22 +02:00 committed by Thomas Allmer
parent 0918b77e5b
commit a451d4fc8a
52 changed files with 277 additions and 825 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
demo/src/LeaTab.js
View file

@ -1,4 +1,4 @@
import { LitElement, html, css } from 'lit-element'; import { css, html, LitElement } from 'lit-element';
export class LeaTab extends LitElement { export class LeaTab extends LitElement {
static get styles() { static get styles() {
@ -38,8 +38,6 @@ export class LeaTab extends LitElement {
} }
render() { render() {
return html` return html`<slot></slot>`;
<slot></slot>
`;
} }
} }

12
packages/button/src/LionButton.js
View file

@ -34,12 +34,8 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
<div class="click-area"></div> <div class="click-area"></div>
${this._beforeTemplate()} ${this._beforeTemplate()}
${browserDetection.isIE11 ${browserDetection.isIE11
? html` ? html`<div id="${this._buttonId}"><slot></slot></div>`
<div id="${this._buttonId}"><slot></slot></div> : html`<slot></slot>`}
`
: html`
<slot></slot>
`}
${this._afterTemplate()} ${this._afterTemplate()}
<slot name="_button"></slot> <slot name="_button"></slot>
</div> </div>
@ -165,9 +161,7 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
this.__setupDelegationInConstructor(); this.__setupDelegationInConstructor();
if (browserDetection.isIE11) { if (browserDetection.isIE11) {
this._buttonId = `button-${Math.random() this._buttonId = `button-${Math.random().toString(36).substr(2, 10)}`;
.toString(36)
.substr(2, 10)}`;
this.updateComplete.then(() => this.setAttribute('aria-labelledby', this._buttonId)); this.updateComplete.then(() => this.setAttribute('aria-labelledby', this._buttonId));
} }
} }

6
packages/button/test/lion-button.test.js
View file

@ -389,11 +389,7 @@ describe('lion-button', () => {
describe('click event', () => { describe('click event', () => {
it('is fired once', async () => { it('is fired once', async () => {
const clickSpy = sinon.spy(); const clickSpy = sinon.spy();
const el = await fixture( const el = await fixture(html`<lion-button @click="${clickSpy}">foo</lion-button>`);
html`
<lion-button @click="${clickSpy}">foo</lion-button>
`,
);
getTopElement(el).click(); getTopElement(el).click();

157
packages/calendar/test/lion-calendar.test.js
View file

@ -1,15 +1,12 @@
import { expect, fixture } from '@open-wc/testing';
import '@lion/core/test-helpers/keyboardEventShimIE.js';
import sinon from 'sinon';
import { html } from '@lion/core'; import { html } from '@lion/core';
import '@lion/core/test-helpers/keyboardEventShimIE.js';
import { localize } from '@lion/localize'; import { localize } from '@lion/localize';
import { localizeTearDown } from '@lion/localize/test-helpers.js'; import { localizeTearDown } from '@lion/localize/test-helpers.js';
import { expect, fixture } from '@open-wc/testing';
import { CalendarObject, DayObject } from '../test-helpers.js'; import sinon from 'sinon';
import { isSameDate } from '../src/utils/isSameDate.js';
import '../lion-calendar.js'; import '../lion-calendar.js';
import { isSameDate } from '../src/utils/isSameDate.js';
import { CalendarObject, DayObject } from '../test-helpers.js';
describe('<lion-calendar>', () => { describe('<lion-calendar>', () => {
beforeEach(() => { beforeEach(() => {
@ -18,11 +15,7 @@ describe('<lion-calendar>', () => {
describe('Structure', () => { describe('Structure', () => {
it('implements BEM structure', async () => { it('implements BEM structure', async () => {
const el = await fixture( const el = await fixture(html`<lion-calendar></lion-calendar>`);
html`
<lion-calendar></lion-calendar>
`,
);
expect(el.shadowRoot.querySelector('.calendar')).to.exist; expect(el.shadowRoot.querySelector('.calendar')).to.exist;
expect(el.shadowRoot.querySelector('.calendar__header')).to.exist; expect(el.shadowRoot.querySelector('.calendar__header')).to.exist;
@ -35,11 +28,7 @@ describe('<lion-calendar>', () => {
it('has heading with month and year', async () => { it('has heading with month and year', async () => {
const clock = sinon.useFakeTimers({ now: new Date('2000/12/01').getTime() }); const clock = sinon.useFakeTimers({ now: new Date('2000/12/01').getTime() });
const el = await fixture( const el = await fixture(html`<lion-calendar></lion-calendar>`);
html`
<lion-calendar></lion-calendar>
`,
);
expect(el.shadowRoot.querySelector('.calendar__month-heading')).dom.to.equal(` expect(el.shadowRoot.querySelector('.calendar__month-heading')).dom.to.equal(`
<h2 <h2
@ -56,9 +45,7 @@ describe('<lion-calendar>', () => {
it('has previous month button', async () => { it('has previous month button', async () => {
const el = await fixture( const el = await fixture(
html` html`<lion-calendar .centralDate=${new Date('2019/11/20')}></lion-calendar>`,
<lion-calendar .centralDate=${new Date('2019/11/20')}></lion-calendar>
`,
); );
expect(el.shadowRoot.querySelector('.calendar__previous-month-button')).dom.to.equal(` expect(el.shadowRoot.querySelector('.calendar__previous-month-button')).dom.to.equal(`
<button class="calendar__previous-month-button" aria-label="Previous month, October 2019" title="Previous month, October 2019">&lt;</button> <button class="calendar__previous-month-button" aria-label="Previous month, October 2019" title="Previous month, October 2019">&lt;</button>
@ -67,9 +54,7 @@ describe('<lion-calendar>', () => {
it('has next month button', async () => { it('has next month button', async () => {
const el = await fixture( const el = await fixture(
html` html`<lion-calendar .centralDate=${new Date('2019/11/20')}></lion-calendar>`,
<lion-calendar .centralDate=${new Date('2019/11/20')}></lion-calendar>
`,
); );
expect(el.shadowRoot.querySelector('.calendar__next-month-button')).dom.to.equal(` expect(el.shadowRoot.querySelector('.calendar__next-month-button')).dom.to.equal(`
<button class="calendar__next-month-button" aria-label="Next month, December 2019" title="Next month, December 2019">&gt;</button> <button class="calendar__next-month-button" aria-label="Next month, December 2019" title="Next month, December 2019">&gt;</button>
@ -90,9 +75,7 @@ describe('<lion-calendar>', () => {
it('sets "centralDate" to today by default', async () => { it('sets "centralDate" to today by default', async () => {
const clock = sinon.useFakeTimers({ now: new Date('2013/03/15').getTime() }); const clock = sinon.useFakeTimers({ now: new Date('2013/03/15').getTime() });
const el = await fixture(html` const el = await fixture(html`<lion-calendar></lion-calendar>`);
<lion-calendar></lion-calendar>
`);
const elObj = new CalendarObject(el); const elObj = new CalendarObject(el);
expect(isSameDate(el.centralDate, new Date())).to.be.true; expect(isSameDate(el.centralDate, new Date())).to.be.true;
expect(elObj.activeMonthAndYear).to.equal('March 2013'); expect(elObj.activeMonthAndYear).to.equal('March 2013');
@ -172,9 +155,7 @@ describe('<lion-calendar>', () => {
}); });
it('does not set "selectedDate" by default', async () => { it('does not set "selectedDate" by default', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-calendar></lion-calendar>`);
<lion-calendar></lion-calendar>
`);
const elObj = new CalendarObject(el); const elObj = new CalendarObject(el);
const today = new Date(); const today = new Date();
expect(el.selectedDate).to.equal(undefined); expect(el.selectedDate).to.equal(undefined);
@ -236,9 +217,7 @@ describe('<lion-calendar>', () => {
}); });
it('has a focusDate() method to focus an arbitrary date', async () => { it('has a focusDate() method to focus an arbitrary date', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-calendar></lion-calendar>`);
<lion-calendar></lion-calendar>
`);
const elObj = new CalendarObject(el); const elObj = new CalendarObject(el);
await el.focusDate(new Date('2016/06/10')); await el.focusDate(new Date('2016/06/10'));
expect(isSameDate(el.focusedDate, new Date('2016/06/10'))).to.be.true; expect(isSameDate(el.focusedDate, new Date('2016/06/10'))).to.be.true;
@ -364,11 +343,7 @@ describe('<lion-calendar>', () => {
return d.getHours() === 0 && d.getMinutes() === 0 && d.getSeconds() === 0; return d.getHours() === 0 && d.getMinutes() === 0 && d.getSeconds() === 0;
} }
const el = await fixture( const el = await fixture(html`<lion-calendar></lion-calendar>`);
html`
<lion-calendar></lion-calendar>
`,
);
// The central date will be today's date: it's the date all other // The central date will be today's date: it's the date all other
// dates in the month view will be derived from. // dates in the month view will be derived from.
expect(isNormalizedDate(el.centralDate)).to.be.true; expect(isNormalizedDate(el.centralDate)).to.be.true;
@ -406,9 +381,7 @@ describe('<lion-calendar>', () => {
describe('Title', () => { describe('Title', () => {
it('contains secondary title displaying the current month and year in focus', async () => { it('contains secondary title displaying the current month and year in focus', async () => {
const el = await fixture( const el = await fixture(
html` html`<lion-calendar .selectedDate="${new Date('2000/12/12')}"></lion-calendar>`,
<lion-calendar .selectedDate="${new Date('2000/12/12')}"></lion-calendar>
`,
); );
const elObj = new CalendarObject(el); const elObj = new CalendarObject(el);
expect(elObj.activeMonthAndYear).to.equal('December 2000'); expect(elObj.activeMonthAndYear).to.equal('December 2000');
@ -416,9 +389,7 @@ describe('<lion-calendar>', () => {
it('updates the secondary title when the displayed month/year changes', async () => { it('updates the secondary title when the displayed month/year changes', async () => {
const el = await fixture( const el = await fixture(
html` html`<lion-calendar .centralDate="${new Date('2000/12/12')}"></lion-calendar>`,
<lion-calendar .centralDate="${new Date('2000/12/12')}"></lion-calendar>
`,
); );
const elObj = new CalendarObject(el); const elObj = new CalendarObject(el);
el.centralDate = new Date('1999/10/12'); el.centralDate = new Date('1999/10/12');
@ -428,13 +399,7 @@ describe('<lion-calendar>', () => {
describe('Accessibility', () => { describe('Accessibility', () => {
it('has aria-atomic="true" set on the secondary title', async () => { it('has aria-atomic="true" set on the secondary title', async () => {
const elObj = new CalendarObject( const elObj = new CalendarObject(await fixture(html`<lion-calendar></lion-calendar>`));
await fixture(
html`
<lion-calendar></lion-calendar>
`,
),
);
expect(elObj.monthHeadingEl.getAttribute('aria-atomic')).to.equal('true'); expect(elObj.monthHeadingEl.getAttribute('aria-atomic')).to.equal('true');
}); });
}); });
@ -443,9 +408,7 @@ describe('<lion-calendar>', () => {
describe('Navigation', () => { describe('Navigation', () => {
it('has a button for navigation to previous month', async () => { it('has a button for navigation to previous month', async () => {
const el = await fixture( const el = await fixture(
html` html`<lion-calendar .selectedDate="${new Date('2001/01/01')}"></lion-calendar>`,
<lion-calendar .selectedDate="${new Date('2001/01/01')}"></lion-calendar>
`,
); );
const elObj = new CalendarObject(el); const elObj = new CalendarObject(el);
expect(elObj.previousMonthButtonEl).not.to.equal(null); expect(elObj.previousMonthButtonEl).not.to.equal(null);
@ -462,9 +425,7 @@ describe('<lion-calendar>', () => {
it('has a button for navigation to next month', async () => { it('has a button for navigation to next month', async () => {
const el = await fixture( const el = await fixture(
html` html`<lion-calendar .selectedDate="${new Date('2000/12/12')}"></lion-calendar>`,
<lion-calendar .selectedDate="${new Date('2000/12/12')}"></lion-calendar>
`,
); );
const elObj = new CalendarObject(el); const elObj = new CalendarObject(el);
expect(elObj.nextMonthButtonEl).not.to.equal(null); expect(elObj.nextMonthButtonEl).not.to.equal(null);
@ -507,9 +468,7 @@ describe('<lion-calendar>', () => {
it('handles switch to previous month when dates are disabled', async () => { it('handles switch to previous month when dates are disabled', async () => {
const clock = sinon.useFakeTimers({ now: new Date('2000/12/15').getTime() }); const clock = sinon.useFakeTimers({ now: new Date('2000/12/15').getTime() });
const el = await fixture(html` const el = await fixture(html`<lion-calendar></lion-calendar>`);
<lion-calendar></lion-calendar>
`);
const elObj = new CalendarObject(el); const elObj = new CalendarObject(el);
expect(elObj.activeMonthAndYear).to.equal('December 2000'); expect(elObj.activeMonthAndYear).to.equal('December 2000');
@ -530,9 +489,7 @@ describe('<lion-calendar>', () => {
it('handles switch to next month when dates are disabled', async () => { it('handles switch to next month when dates are disabled', async () => {
const clock = sinon.useFakeTimers({ now: new Date('2000/12/15').getTime() }); const clock = sinon.useFakeTimers({ now: new Date('2000/12/15').getTime() });
const el = await fixture(html` const el = await fixture(html`<lion-calendar></lion-calendar>`);
<lion-calendar></lion-calendar>
`);
const elObj = new CalendarObject(el); const elObj = new CalendarObject(el);
expect(elObj.activeMonthAndYear).to.equal('December 2000'); expect(elObj.activeMonthAndYear).to.equal('December 2000');
@ -601,9 +558,7 @@ describe('<lion-calendar>', () => {
describe('Calendar body (months view)', () => { describe('Calendar body (months view)', () => {
it('renders the days of the week as table headers', async () => { it('renders the days of the week as table headers', async () => {
const el = await fixture( const el = await fixture(
html` html`<lion-calendar .selectedDate="${new Date('2000/12/12')}"></lion-calendar>`,
<lion-calendar .selectedDate="${new Date('2000/12/12')}"></lion-calendar>
`,
); );
const elObj = new CalendarObject(el); const elObj = new CalendarObject(el);
expect(elObj.weekdayHeaderEls.map(h => h.textContent.trim())).to.deep.equal([ expect(elObj.weekdayHeaderEls.map(h => h.textContent.trim())).to.deep.equal([
@ -621,11 +576,7 @@ describe('<lion-calendar>', () => {
it('adds "today" attribute if date is today', async () => { it('adds "today" attribute if date is today', async () => {
const clock = sinon.useFakeTimers({ now: new Date('2000/12/15').getTime() }); const clock = sinon.useFakeTimers({ now: new Date('2000/12/15').getTime() });
const el = await fixture( const el = await fixture(html`<lion-calendar></lion-calendar>`);
html`
<lion-calendar></lion-calendar>
`,
);
const elObj = new CalendarObject(el); const elObj = new CalendarObject(el);
expect(elObj.getDayEl(15).hasAttribute('today')).to.be.true; expect(elObj.getDayEl(15).hasAttribute('today')).to.be.true;
@ -636,9 +587,7 @@ describe('<lion-calendar>', () => {
it('adds "selected" attribute to the selected date', async () => { it('adds "selected" attribute to the selected date', async () => {
const el = await fixture( const el = await fixture(
html` html`<lion-calendar .selectedDate="${new Date('2000/12/12')}"></lion-calendar>`,
<lion-calendar .selectedDate="${new Date('2000/12/12')}"></lion-calendar>
`,
); );
const elObj = new CalendarObject(el); const elObj = new CalendarObject(el);
expect(elObj.checkForAllDayObjs(obj => obj.el.hasAttribute('selected'), [12])).to.equal( expect(elObj.checkForAllDayObjs(obj => obj.el.hasAttribute('selected'), [12])).to.equal(
@ -929,9 +878,7 @@ describe('<lion-calendar>', () => {
it('is today if no selected date is available', async () => { it('is today if no selected date is available', async () => {
const clock = sinon.useFakeTimers({ now: new Date('2000/12/15').getTime() }); const clock = sinon.useFakeTimers({ now: new Date('2000/12/15').getTime() });
const el = await fixture(html` const el = await fixture(html`<lion-calendar></lion-calendar>`);
<lion-calendar></lion-calendar>
`);
const elObj = new CalendarObject(el); const elObj = new CalendarObject(el);
expect(elObj.centralDayObj.monthday).to.equal(15); expect(elObj.centralDayObj.monthday).to.equal(15);
@ -1021,37 +968,19 @@ describe('<lion-calendar>', () => {
// As an enhancement, we detect when grid boundaries day are exceeded, so we move to // As an enhancement, we detect when grid boundaries day are exceeded, so we move to
// next/previous month. // next/previous month.
it('has role="application" to activate keyboard navigation', async () => { it('has role="application" to activate keyboard navigation', async () => {
const elObj = new CalendarObject( const elObj = new CalendarObject(await fixture(html`<lion-calendar></lion-calendar>`));
await fixture(
html`
<lion-calendar></lion-calendar>
`,
),
);
expect(elObj.rootEl.getAttribute('role')).to.equal('application'); expect(elObj.rootEl.getAttribute('role')).to.equal('application');
}); });
it(`renders the calendar as a table element with role="grid", aria-readonly="true" and it(`renders the calendar as a table element with role="grid", aria-readonly="true" and
a caption (month + year)`, async () => { a caption (month + year)`, async () => {
const elObj = new CalendarObject( const elObj = new CalendarObject(await fixture(html`<lion-calendar></lion-calendar>`));
await fixture(
html`
<lion-calendar></lion-calendar>
`,
),
);
expect(elObj.gridEl.getAttribute('role')).to.equal('grid'); expect(elObj.gridEl.getAttribute('role')).to.equal('grid');
expect(elObj.gridEl.getAttribute('aria-readonly')).to.equal('true'); expect(elObj.gridEl.getAttribute('aria-readonly')).to.equal('true');
}); });
it('adds aria-labels to the weekday table headers', async () => { it('adds aria-labels to the weekday table headers', async () => {
const elObj = new CalendarObject( const elObj = new CalendarObject(await fixture(html`<lion-calendar></lion-calendar>`));
await fixture(
html`
<lion-calendar></lion-calendar>
`,
),
);
expect(elObj.weekdayHeaderEls.map(h => h.getAttribute('aria-label'))).to.eql([ expect(elObj.weekdayHeaderEls.map(h => h.getAttribute('aria-label'))).to.eql([
'Sunday', 'Sunday',
'Monday', 'Monday',
@ -1064,13 +993,7 @@ describe('<lion-calendar>', () => {
}); });
it('renders each day as a button inside a table cell', async () => { it('renders each day as a button inside a table cell', async () => {
const elObj = new CalendarObject( const elObj = new CalendarObject(await fixture(html`<lion-calendar></lion-calendar>`));
await fixture(
html`
<lion-calendar></lion-calendar>
`,
),
);
const hasBtn = d => d.el.tagName === 'BUTTON'; const hasBtn = d => d.el.tagName === 'BUTTON';
expect(elObj.checkForAllDayObjs(hasBtn)).to.equal(true); expect(elObj.checkForAllDayObjs(hasBtn)).to.equal(true);
}); });
@ -1099,13 +1022,7 @@ describe('<lion-calendar>', () => {
}); });
it('sets aria-current="date" to todays button', async () => { it('sets aria-current="date" to todays button', async () => {
const elObj = new CalendarObject( const elObj = new CalendarObject(await fixture(html`<lion-calendar></lion-calendar>`));
await fixture(
html`
<lion-calendar></lion-calendar>
`,
),
);
const hasAriaCurrent = d => d.buttonEl.getAttribute('aria-current') === 'date'; const hasAriaCurrent = d => d.buttonEl.getAttribute('aria-current') === 'date';
const monthday = new Date().getDate(); const monthday = new Date().getDate();
expect(elObj.checkForAllDayObjs(hasAriaCurrent, [monthday])).to.equal(true); expect(elObj.checkForAllDayObjs(hasAriaCurrent, [monthday])).to.equal(true);
@ -1247,11 +1164,7 @@ describe('<lion-calendar>', () => {
describe('Accessibility', () => { describe('Accessibility', () => {
it('is accessible', async () => { it('is accessible', async () => {
const el = await fixture( const el = await fixture(html`<lion-calendar></lion-calendar>`);
html`
<lion-calendar></lion-calendar>
`,
);
await expect(el).to.be.accessible(); await expect(el).to.be.accessible();
}); });
@ -1259,9 +1172,7 @@ describe('<lion-calendar>', () => {
const today = new Date(); const today = new Date();
const selectedDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1); const selectedDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
const el = await fixture( const el = await fixture(
html` html`<lion-calendar .selectedDate="${selectedDate}"></lion-calendar>`,
<lion-calendar .selectedDate="${selectedDate}"></lion-calendar>
`,
); );
await expect(el).to.be.accessible(); await expect(el).to.be.accessible();
}); });
@ -1278,11 +1189,7 @@ describe('<lion-calendar>', () => {
}); });
it('is hidden when attribute hidden is true', async () => { it('is hidden when attribute hidden is true', async () => {
const el = await fixture( const el = await fixture(html`<lion-calendar hidden></lion-calendar>`);
html`
<lion-calendar hidden></lion-calendar>
`,
);
expect(el).not.to.be.displayed; expect(el).not.to.be.displayed;
}); });
}); });

7
packages/checkbox-group/test/lion-checkbox-group.test.js
View file

@ -1,6 +1,5 @@
import { localizeTearDown } from '@lion/localize/test-helpers.js'; import { localizeTearDown } from '@lion/localize/test-helpers.js';
import { expect, fixture, html } from '@open-wc/testing'; import { expect, fixture, html } from '@open-wc/testing';
import '../lion-checkbox-group.js'; import '../lion-checkbox-group.js';
import '../lion-checkbox.js'; import '../lion-checkbox.js';
@ -56,11 +55,7 @@ describe('<lion-checkbox-group>', () => {
}); });
it("should throw exception if name doesn't end in []", async () => { it("should throw exception if name doesn't end in []", async () => {
const el = await fixture( const el = await fixture(html`<lion-checkbox-group name="woof[]"></lion-checkbox-group>`);
html`
<lion-checkbox-group name="woof[]"></lion-checkbox-group>
`,
);
el.name = 'woof'; el.name = 'woof';
let err; let err;
try { try {

2
packages/choice-input/test/ChoiceGroupMixin.test.js
View file

@ -1,10 +1,10 @@
import { html, LitElement } from '@lion/core'; import { html, LitElement } from '@lion/core';
import { formFixture as fixture } from '@lion/field/test-helpers.js';
import { FormGroupMixin } from '@lion/fieldset'; import { FormGroupMixin } from '@lion/fieldset';
import '@lion/fieldset/lion-fieldset.js'; import '@lion/fieldset/lion-fieldset.js';
import { LionInput } from '@lion/input'; import { LionInput } from '@lion/input';
import { Required } from '@lion/validate'; import { Required } from '@lion/validate';
import { expect, nextFrame } from '@open-wc/testing'; import { expect, nextFrame } from '@open-wc/testing';
import { formFixture as fixture } from '@lion/field/test-helpers.js';
import { ChoiceGroupMixin } from '../src/ChoiceGroupMixin.js'; import { ChoiceGroupMixin } from '../src/ChoiceGroupMixin.js';
import { ChoiceInputMixin } from '../src/ChoiceInputMixin.js'; import { ChoiceInputMixin } from '../src/ChoiceInputMixin.js';

28
packages/choice-input/test/ChoiceInputMixin.test.js
View file

@ -17,16 +17,12 @@ describe('ChoiceInputMixin', () => {
}); });
it('is hidden when attribute hidden is true', async () => { it('is hidden when attribute hidden is true', async () => {
const el = await fixture(html` const el = await fixture(html`<choice-input hidden></choice-input>`);
<choice-input hidden></choice-input>
`);
expect(el).not.to.be.displayed; expect(el).not.to.be.displayed;
}); });
it('has choiceValue', async () => { it('has choiceValue', async () => {
const el = await fixture(html` const el = await fixture(html`<choice-input .choiceValue=${'foo'}></choice-input>`);
<choice-input .choiceValue=${'foo'}></choice-input>
`);
expect(el.choiceValue).to.equal('foo'); expect(el.choiceValue).to.equal('foo');
expect(el.modelValue).to.deep.equal({ expect(el.modelValue).to.deep.equal({
@ -38,9 +34,7 @@ describe('ChoiceInputMixin', () => {
it('can handle complex data via choiceValue', async () => { it('can handle complex data via choiceValue', async () => {
const date = new Date(2018, 11, 24, 10, 33, 30, 0); const date = new Date(2018, 11, 24, 10, 33, 30, 0);
const el = await fixture(html` const el = await fixture(html`<choice-input .choiceValue=${date}></choice-input>`);
<choice-input .choiceValue=${date}></choice-input>
`);
expect(el.choiceValue).to.equal(date); expect(el.choiceValue).to.equal(date);
expect(el.modelValue.value).to.equal(date); expect(el.modelValue.value).to.equal(date);
@ -134,9 +128,7 @@ describe('ChoiceInputMixin', () => {
}); });
it('synchronizes modelValue to checked state and vice versa', async () => { it('synchronizes modelValue to checked state and vice versa', async () => {
const el = await fixture(html` const el = await fixture(html`<choice-input .choiceValue=${'foo'}></choice-input>`);
<choice-input .choiceValue=${'foo'}></choice-input>
`);
expect(el.checked).to.be.false; expect(el.checked).to.be.false;
expect(el.modelValue).to.deep.equal({ expect(el.modelValue).to.deep.equal({
checked: false, checked: false,
@ -153,9 +145,7 @@ describe('ChoiceInputMixin', () => {
it('ensures optimal synchronize performance by preventing redundant computation steps', async () => { it('ensures optimal synchronize performance by preventing redundant computation steps', async () => {
/* we are checking private apis here to make sure we do not have cyclical updates /* we are checking private apis here to make sure we do not have cyclical updates
which can be quite common for these type of connected data */ which can be quite common for these type of connected data */
const el = await fixture(html` const el = await fixture(html`<choice-input .choiceValue=${'foo'}></choice-input>`);
<choice-input .choiceValue=${'foo'}></choice-input>
`);
expect(el.checked).to.be.false; expect(el.checked).to.be.false;
const spyModelCheckedToChecked = sinon.spy(el, '__syncModelCheckedToChecked'); const spyModelCheckedToChecked = sinon.spy(el, '__syncModelCheckedToChecked');
@ -224,9 +214,7 @@ describe('ChoiceInputMixin', () => {
describe('Format/parse/serialize loop', () => { describe('Format/parse/serialize loop', () => {
it('creates a modelValue object like { checked: true, value: foo } on init', async () => { it('creates a modelValue object like { checked: true, value: foo } on init', async () => {
const el = await fixture(html` const el = await fixture(html`<choice-input .choiceValue=${'foo'}></choice-input>`);
<choice-input .choiceValue=${'foo'}></choice-input>
`);
expect(el.modelValue).deep.equal({ value: 'foo', checked: false }); expect(el.modelValue).deep.equal({ value: 'foo', checked: false });
const elChecked = await fixture(html` const elChecked = await fixture(html`
@ -248,9 +236,7 @@ describe('ChoiceInputMixin', () => {
describe('Interaction states', () => { describe('Interaction states', () => {
it('is considered prefilled when checked and not considered prefilled when unchecked', async () => { it('is considered prefilled when checked and not considered prefilled when unchecked', async () => {
const el = await fixture(html` const el = await fixture(html`<choice-input .checked=${true}></choice-input>`);
<choice-input .checked=${true}></choice-input>
`);
expect(el.prefilled).equal(true, 'checked element not considered prefilled'); expect(el.prefilled).equal(true, 'checked element not considered prefilled');
const elUnchecked = await fixture(`<choice-input></choice-input>`); const elUnchecked = await fixture(`<choice-input></choice-input>`);

2
packages/core/src/differentKeyEventNamesShimIE.js
View file

@ -25,7 +25,7 @@ if (typeof window.KeyboardEvent !== 'function') {
}; };
Object.defineProperty(event, 'key', { Object.defineProperty(event, 'key', {
// eslint-disable-next-line object-shorthand, func-names // eslint-disable-next-line object-shorthand, func-names
get: function() { get: function () {
const key = descriptor.get.call(this); const key = descriptor.get.call(this);
// eslint-disable-next-line no-prototype-builtins // eslint-disable-next-line no-prototype-builtins

51
packages/core/test/DelegateMixin.test.js
View file

@ -1,7 +1,6 @@
import { expect, fixture, defineCE, unsafeStatic, html } from '@open-wc/testing'; import { defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
import sinon from 'sinon'; import sinon from 'sinon';
import { LitElement } from '../index.js'; import { LitElement } from '../index.js';
import { DelegateMixin } from '../src/DelegateMixin.js'; import { DelegateMixin } from '../src/DelegateMixin.js';
describe('DelegateMixin', () => { describe('DelegateMixin', () => {
@ -21,9 +20,7 @@ describe('DelegateMixin', () => {
} }
render() { render() {
return html` return html`<button id="button1">with delegation</button>`;
<button id="button1">with delegation</button>
`;
} }
}, },
); );
@ -46,9 +43,7 @@ describe('DelegateMixin', () => {
} }
render() { render() {
return html` return html`<button id="button1">with delegation</button>`;
<button id="button1">with delegation</button>
`;
} }
}, },
); );
@ -107,9 +102,7 @@ describe('DelegateMixin', () => {
} }
render() { render() {
return html` return html`<button id="button1">with delegation</button>`;
<button id="button1">with delegation</button>
`;
} }
foo() { foo() {
@ -136,9 +129,7 @@ describe('DelegateMixin', () => {
} }
render() { render() {
return html` return html`<button id="button1">with delegation</button>`;
<button id="button1">with delegation</button>
`;
} }
}, },
); );
@ -173,9 +164,7 @@ describe('DelegateMixin', () => {
} }
render() { render() {
return html` return html`<delegate-argument-sub id="sub"></delegate-argument-sub>`;
<delegate-argument-sub id="sub"></delegate-argument-sub>
`;
} }
}, },
); );
@ -199,9 +188,7 @@ describe('DelegateMixin', () => {
} }
render() { render() {
return html` return html`<button id="button1">with delegation</button>`;
<button id="button1">with delegation</button>
`;
} }
}, },
); );
@ -224,9 +211,7 @@ describe('DelegateMixin', () => {
} }
render() { render() {
return html` return html`<button id="button1">with delegation</button>`;
<button id="button1">with delegation</button>
`;
} }
}, },
); );
@ -252,9 +237,7 @@ describe('DelegateMixin', () => {
} }
render() { render() {
return html` return html`<button id="button1">with delegation</button>`;
<button id="button1">with delegation</button>
`;
} }
}, },
); );
@ -277,9 +260,7 @@ describe('DelegateMixin', () => {
} }
render() { render() {
return html` return html`<button id="button1">with delegation</button>`;
<button id="button1">with delegation</button>
`;
} }
}, },
); );
@ -300,9 +281,7 @@ describe('DelegateMixin', () => {
} }
render() { render() {
return html` return html`<button id="button1">with delegation</button>`;
<button id="button1">with delegation</button>
`;
} }
}, },
); );
@ -404,9 +383,7 @@ describe('DelegateMixin', () => {
} }
render() { render() {
return html` return html`<div></div>`;
<div></div>
`;
} }
}, },
); );
@ -431,9 +408,7 @@ describe('DelegateMixin', () => {
} }
render() { render() {
return html` return html`<div></div>`;
<div></div>
`;
} }
}, },
); );

29
packages/core/test/DisabledMixin.test.js
View file

@ -1,5 +1,4 @@
import { expect, fixture, html } from '@open-wc/testing'; import { expect, fixture, html } from '@open-wc/testing';
import { LitElement } from '../index.js'; import { LitElement } from '../index.js';
import { DisabledMixin } from '../src/DisabledMixin.js'; import { DisabledMixin } from '../src/DisabledMixin.js';
@ -10,9 +9,7 @@ describe('DisabledMixin', () => {
}); });
it('reflects disabled to attribute', async () => { it('reflects disabled to attribute', async () => {
const el = await fixture(html` const el = await fixture(html`<can-be-disabled></can-be-disabled>`);
<can-be-disabled></can-be-disabled>
`);
expect(el.hasAttribute('disabled')).to.be.false; expect(el.hasAttribute('disabled')).to.be.false;
el.disabled = true; el.disabled = true;
await el.updateComplete; await el.updateComplete;
@ -20,9 +17,7 @@ describe('DisabledMixin', () => {
}); });
it('can be requested to be disabled', async () => { it('can be requested to be disabled', async () => {
const el = await fixture(html` const el = await fixture(html`<can-be-disabled></can-be-disabled>`);
<can-be-disabled></can-be-disabled>
`);
el.makeRequestToBeDisabled(); el.makeRequestToBeDisabled();
expect(el.disabled).to.be.true; expect(el.disabled).to.be.true;
await el.updateComplete; await el.updateComplete;
@ -30,9 +25,7 @@ describe('DisabledMixin', () => {
}); });
it('will not allow to become enabled after makeRequestToBeDisabled()', async () => { it('will not allow to become enabled after makeRequestToBeDisabled()', async () => {
const el = await fixture(html` const el = await fixture(html`<can-be-disabled></can-be-disabled>`);
<can-be-disabled></can-be-disabled>
`);
el.makeRequestToBeDisabled(); el.makeRequestToBeDisabled();
expect(el.disabled).to.be.true; expect(el.disabled).to.be.true;
@ -41,18 +34,14 @@ describe('DisabledMixin', () => {
}); });
it('will stay disabled after retractRequestToBeDisabled() if it was disabled before', async () => { it('will stay disabled after retractRequestToBeDisabled() if it was disabled before', async () => {
const el = await fixture(html` const el = await fixture(html`<can-be-disabled disabled></can-be-disabled>`);
<can-be-disabled disabled></can-be-disabled>
`);
el.makeRequestToBeDisabled(); el.makeRequestToBeDisabled();
el.retractRequestToBeDisabled(); el.retractRequestToBeDisabled();
expect(el.disabled).to.be.true; expect(el.disabled).to.be.true;
}); });
it('will become enabled after retractRequestToBeDisabled() if it was enabled before', async () => { it('will become enabled after retractRequestToBeDisabled() if it was enabled before', async () => {
const el = await fixture(html` const el = await fixture(html`<can-be-disabled></can-be-disabled>`);
<can-be-disabled></can-be-disabled>
`);
el.makeRequestToBeDisabled(); el.makeRequestToBeDisabled();
expect(el.disabled).to.be.true; expect(el.disabled).to.be.true;
el.retractRequestToBeDisabled(); el.retractRequestToBeDisabled();
@ -60,9 +49,7 @@ describe('DisabledMixin', () => {
}); });
it('may allow multiple calls to makeRequestToBeDisabled()', async () => { it('may allow multiple calls to makeRequestToBeDisabled()', async () => {
const el = await fixture(html` const el = await fixture(html`<can-be-disabled></can-be-disabled>`);
<can-be-disabled></can-be-disabled>
`);
el.makeRequestToBeDisabled(); el.makeRequestToBeDisabled();
el.makeRequestToBeDisabled(); el.makeRequestToBeDisabled();
el.retractRequestToBeDisabled(); el.retractRequestToBeDisabled();
@ -70,9 +57,7 @@ describe('DisabledMixin', () => {
}); });
it('will restore last state after retractRequestToBeDisabled()', async () => { it('will restore last state after retractRequestToBeDisabled()', async () => {
const el = await fixture(html` const el = await fixture(html`<can-be-disabled></can-be-disabled>`);
<can-be-disabled></can-be-disabled>
`);
el.makeRequestToBeDisabled(); el.makeRequestToBeDisabled();
el.disabled = true; el.disabled = true;
el.retractRequestToBeDisabled(); el.retractRequestToBeDisabled();

11
packages/core/test/UpdateStylesMixin.test.js
View file

@ -1,6 +1,5 @@
import { expect, fixture, defineCE, html } from '@open-wc/testing'; import { defineCE, expect, fixture, html } from '@open-wc/testing';
import { css, LitElement } from '../index.js'; import { css, LitElement } from '../index.js';
import { UpdateStylesMixin } from '../src/UpdateStylesMixin.js'; import { UpdateStylesMixin } from '../src/UpdateStylesMixin.js';
describe('UpdateStylesMixin', () => { describe('UpdateStylesMixin', () => {
@ -24,9 +23,7 @@ describe('UpdateStylesMixin', () => {
} }
render() { render() {
return html` return html`<h1 id="header">hey</h1>`;
<h1 id="header">hey</h1>
`;
} }
}, },
); );
@ -65,9 +62,7 @@ describe('UpdateStylesMixin', () => {
} }
render() { render() {
return html` return html`<h1 id="header">hey</h1>`;
<h1 id="header">hey</h1>
`;
} }
}, },
); );

12
packages/field/src/FormControlMixin.js
View file

@ -8,9 +8,7 @@ import { getAriaElementsInRightDomOrder } from './utils/getAriaElementsInRightDo
* @param {string} prefix * @param {string} prefix
*/ */
function uuid(prefix) { function uuid(prefix) {
return `${prefix}-${Math.random() return `${prefix}-${Math.random().toString(36).substr(2, 10)}`;
.toString(36)
.substr(2, 10)}`;
} }
/** /**
@ -304,15 +302,11 @@ export const FormControlMixin = dedupeMixin(
} }
_groupOneTemplate() { _groupOneTemplate() {
return html` return html` ${this._labelTemplate()} ${this._helpTextTemplate()} `;
${this._labelTemplate()} ${this._helpTextTemplate()}
`;
} }
_groupTwoTemplate() { _groupTwoTemplate() {
return html` return html` ${this._inputGroupTemplate()} ${this._feedbackTemplate()} `;
${this._inputGroupTemplate()} ${this._feedbackTemplate()}
`;
} }
// eslint-disable-next-line class-methods-use-this // eslint-disable-next-line class-methods-use-this

12
packages/field/test-suites/FormRegistrationMixins.suite.js
View file

@ -90,9 +90,7 @@ export const runRegistrationSuite = customConfig => {
} }
render() { render() {
return html` return html`<slot></slot>`;
<slot></slot>
`;
} }
}, },
); );
@ -245,9 +243,7 @@ export const runRegistrationSuite = customConfig => {
<${childTag}></${childTag}> <${childTag}></${childTag}>
</${portalTag}> </${portalTag}>
`); `);
const otherPlace = await fixture(html` const otherPlace = await fixture(html`<div></div>`);
<div></div>
`);
otherPlace.appendChild(portal); otherPlace.appendChild(portal);
const newField = await fixture(html` const newField = await fixture(html`
<${childTag}></${childTag}> <${childTag}></${childTag}>
@ -271,9 +267,7 @@ export const runRegistrationSuite = customConfig => {
} }
render() { render() {
return html` return html`<slot></slot>`;
<slot></slot>
`;
} }
}, },
); );

9
packages/field/test-suites/FormatMixin.suite.js
View file

@ -1,8 +1,7 @@
import { expect, fixture, html, aTimeout, defineCE, unsafeStatic } from '@open-wc/testing';
import sinon from 'sinon';
import { LitElement } from '@lion/core'; import { LitElement } from '@lion/core';
import { Unparseable, Validator } from '@lion/validate'; import { Unparseable, Validator } from '@lion/validate';
import { aTimeout, defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
import sinon from 'sinon';
import { FormatMixin } from '../src/FormatMixin.js'; import { FormatMixin } from '../src/FormatMixin.js';
function mimicUserInput(formControl, newViewValue) { function mimicUserInput(formControl, newViewValue) {
@ -62,9 +61,7 @@ export function runFormatMixinSuite(customConfig) {
cfg.tagString = defineCE( cfg.tagString = defineCE(
class extends FormatMixin(LitElement) { class extends FormatMixin(LitElement) {
render() { render() {
return html` return html`<slot name="input"></slot>`;
<slot name="input"></slot>
`;
} }
set value(newValue) { set value(newValue) {

7
packages/field/test/FocusMixin.test.js
View file

@ -1,6 +1,5 @@
import { expect, fixture, html, defineCE, unsafeStatic, oneEvent } from '@open-wc/testing';
import { LitElement } from '@lion/core'; import { LitElement } from '@lion/core';
import { defineCE, expect, fixture, html, oneEvent, unsafeStatic } from '@open-wc/testing';
import { FocusMixin } from '../src/FocusMixin.js'; import { FocusMixin } from '../src/FocusMixin.js';
describe('FocusMixin', () => { describe('FocusMixin', () => {
@ -10,9 +9,7 @@ describe('FocusMixin', () => {
const tagString = defineCE( const tagString = defineCE(
class extends FocusMixin(LitElement) { class extends FocusMixin(LitElement) {
render() { render() {
return html` return html`<slot name="input"></slot>`;
<slot name="input"></slot>
`;
} }
get _inputNode() { get _inputNode() {

6
packages/field/test/FormRegistrationMixins.test.js
View file

@ -1,5 +1,5 @@
import { LitElement, UpdatingElement } from '@lion/core';
import { html } from '@open-wc/testing'; import { html } from '@open-wc/testing';
import { UpdatingElement, LitElement } from '@lion/core';
import { runRegistrationSuite } from '../test-suites/FormRegistrationMixins.suite.js'; import { runRegistrationSuite } from '../test-suites/FormRegistrationMixins.suite.js';
runRegistrationSuite({ runRegistrationSuite({
@ -11,9 +11,7 @@ runRegistrationSuite({
suffix: 'with LitElement, using shadow dom', suffix: 'with LitElement, using shadow dom',
baseElement: class ShadowElement extends LitElement { baseElement: class ShadowElement extends LitElement {
render() { render() {
return html` return html`<slot></slot>`;
<slot></slot>
`;
} }
}, },
}); });

18
packages/fieldset/test/lion-fieldset.test.js
View file

@ -1,5 +1,6 @@
import { LionField } from '@lion/field'; import { LionField } from '@lion/field';
import '@lion/field/lion-field.js'; import '@lion/field/lion-field.js';
import { formFixture as fixture } from '@lion/field/test-helpers.js';
import { localizeTearDown } from '@lion/localize/test-helpers.js'; import { localizeTearDown } from '@lion/localize/test-helpers.js';
import { IsNumber, Validator } from '@lion/validate'; import { IsNumber, Validator } from '@lion/validate';
import { import {
@ -11,7 +12,6 @@ import {
triggerFocusFor, triggerFocusFor,
unsafeStatic, unsafeStatic,
} from '@open-wc/testing'; } from '@open-wc/testing';
import { formFixture as fixture } from '@lion/field/test-helpers.js';
import sinon from 'sinon'; import sinon from 'sinon';
import '../lion-fieldset.js'; import '../lion-fieldset.js';
@ -461,9 +461,7 @@ describe('<lion-fieldset>', () => {
await triggerFocusFor( await triggerFocusFor(
fieldset.formElements['hobbies[]'][fieldset.formElements['gender[]'].length - 1]._inputNode, fieldset.formElements['hobbies[]'][fieldset.formElements['gender[]'].length - 1]._inputNode,
); );
const el = await fixture(html` const el = await fixture(html`<button></button>`);
<button></button>
`);
el.focus(); el.focus();
expect(fieldset.touched).to.be.true; expect(fieldset.touched).to.be.true;
@ -540,9 +538,7 @@ describe('<lion-fieldset>', () => {
`); `);
await nextFrame(); await nextFrame();
const outside = await fixture(html` const outside = await fixture(html`<button>outside</button>`);
<button>outside</button>
`);
outside.click(); outside.click();
expect(el.touched, 'unfocused fieldset should stay untouched').to.be.false; expect(el.touched, 'unfocused fieldset should stay untouched').to.be.false;
@ -569,9 +565,7 @@ describe('<lion-fieldset>', () => {
} }
} }
const outSideButton = await fixture(html` const outSideButton = await fixture(html`<button>outside</button>`);
<button>outside</button>
`);
const el = await fixture(html` const el = await fixture(html`
<${tag} .validators=${[new Input1IsTen()]}> <${tag} .validators=${[new Input1IsTen()]}>
<${childTag} name="input1" .validators=${[new IsNumber()]}></${childTag}> <${childTag} name="input1" .validators=${[new IsNumber()]}></${childTag}>
@ -599,9 +593,7 @@ describe('<lion-fieldset>', () => {
return hasError; return hasError;
} }
} }
const outSideButton = await fixture(html` const outSideButton = await fixture(html`<button>outside</button>`);
<button>outside</button>
`);
const el = await fixture(html` const el = await fixture(html`
<${tag} .validators=${[new Input1IsTen()]}> <${tag} .validators=${[new Input1IsTen()]}>
<${childTag} name="input1" .validators=${[new IsNumber()]}></${childTag}> <${childTag} name="input1" .validators=${[new IsNumber()]}></${childTag}>

14
packages/form-system/stories/helper-wc/h-output.js
View file

@ -1,4 +1,4 @@
import { LitElement, html, css } from '@lion/core'; import { css, html, LitElement } from '@lion/core';
import { LionField } from '@lion/field'; import { LionField } from '@lion/field';
import { LionFieldset } from '@lion/fieldset'; import { LionFieldset } from '@lion/fieldset';
@ -84,19 +84,11 @@ export class HelperOutput extends LitElement {
Interaction States Interaction States
</caption> </caption>
<tr> <tr>
${this.show.map( ${this.show.map(prop => html`<th>${prop}</th>`)}
prop => html`
<th>${prop}</th>
`,
)}
</tr> </tr>
<tr></tr> <tr></tr>
<tr> <tr>
${this.show.map( ${this.show.map(prop => html`<td>${this.__renderProp(field[prop])}</td>`)}
prop => html`
<td>${this.__renderProp(field[prop])}</td>
`,
)}
</tr> </tr>
</table> </table>
`; `;

6
packages/form-system/test/form-integrations.test.js
View file

@ -4,11 +4,7 @@ import './helpers/umbrella-form.js';
// Test umbrella form // Test umbrella form
describe('Form Integrations', () => { describe('Form Integrations', () => {
it('".serializedValue" returns all non disabled fields based on form structure', async () => { it('".serializedValue" returns all non disabled fields based on form structure', async () => {
const el = await fixture( const el = await fixture(html`<umbrella-form></umbrella-form>`);
html`
<umbrella-form></umbrella-form>
`,
);
const formEl = el._lionFormNode; const formEl = el._lionFormNode;
expect(formEl.serializedValue).to.eql({ expect(formEl.serializedValue).to.eql({
bio: '', bio: '',

22
packages/form-system/test/model-value-event.test.js
View file

@ -1,19 +1,15 @@
import { expect, html } from '@open-wc/testing';
import { formFixture as fixture } from '@lion/field/test-helpers.js'; import { formFixture as fixture } from '@lion/field/test-helpers.js';
import '@lion/fieldset/lion-fieldset.js';
import '@lion/input/lion-input.js';
import { expect, html } from '@open-wc/testing';
// eslint-disable-next-line import/no-extraneous-dependencies // eslint-disable-next-line import/no-extraneous-dependencies
import sinon from 'sinon'; import sinon from 'sinon';
import '@lion/input/lion-input.js';
import '@lion/fieldset/lion-fieldset.js';
describe('model value event', () => { describe('model value event', () => {
describe('form path', () => { describe('form path', () => {
it('should be property', async () => { it('should be property', async () => {
const spy = sinon.spy(); const spy = sinon.spy();
const input = await fixture(html` const input = await fixture(html`<lion-input></lion-input>`);
<lion-input></lion-input>
`);
input.addEventListener('model-value-changed', spy); input.addEventListener('model-value-changed', spy);
input.modelValue = 'woof'; input.modelValue = 'woof';
const e = spy.firstCall.args[0]; const e = spy.firstCall.args[0];
@ -22,9 +18,7 @@ describe('model value event', () => {
it('should contain dispatching field', async () => { it('should contain dispatching field', async () => {
const spy = sinon.spy(); const spy = sinon.spy();
const input = await fixture(html` const input = await fixture(html`<lion-input></lion-input>`);
<lion-input></lion-input>
`);
input.addEventListener('model-value-changed', spy); input.addEventListener('model-value-changed', spy);
input.modelValue = 'foo'; input.modelValue = 'foo';
const e = spy.firstCall.args[0]; const e = spy.firstCall.args[0];
@ -90,11 +84,7 @@ describe('model value event', () => {
let e; let e;
beforeEach(async () => { beforeEach(async () => {
const spy = sinon.spy(); const spy = sinon.spy();
const el = await fixture( const el = await fixture(html`<lion-input></lion-input>`);
html`
<lion-input></lion-input>
`,
);
el.addEventListener('model-value-changed', spy); el.addEventListener('model-value-changed', spy);
el.modelValue = 'foo'; el.modelValue = 'foo';
// eslint-disable-next-line prefer-destructuring // eslint-disable-next-line prefer-destructuring

36
packages/helpers/sb-action-logger/test/sb-action-logger.test.js
View file

@ -5,9 +5,7 @@ import '../../sb-action-logger.js';
describe('sb-action-logger', () => { describe('sb-action-logger', () => {
it('has a default title "Action Logger"', async () => { it('has a default title "Action Logger"', async () => {
const el = await fixture(html` const el = await fixture(html`<sb-action-logger></sb-action-logger>`);
<sb-action-logger></sb-action-logger>
`);
expect(el.shadowRoot.querySelector('.header__title').innerText).to.equal('Action Logger'); expect(el.shadowRoot.querySelector('.header__title').innerText).to.equal('Action Logger');
}); });
@ -24,9 +22,7 @@ describe('sb-action-logger', () => {
describe('Logger behavior', () => { describe('Logger behavior', () => {
it('is possible to send something to the logger using the log method', async () => { it('is possible to send something to the logger using the log method', async () => {
const el = await fixture(html` const el = await fixture(html`<sb-action-logger></sb-action-logger>`);
<sb-action-logger></sb-action-logger>
`);
el.log('Hello, World!'); el.log('Hello, World!');
@ -37,9 +33,7 @@ describe('sb-action-logger', () => {
}); });
it('appends new logs to the logger', async () => { it('appends new logs to the logger', async () => {
const el = await fixture(html` const el = await fixture(html`<sb-action-logger></sb-action-logger>`);
<sb-action-logger></sb-action-logger>
`);
el.log('Hello, World!'); el.log('Hello, World!');
el.log('Hello, Planet!'); el.log('Hello, Planet!');
@ -53,9 +47,7 @@ describe('sb-action-logger', () => {
}); });
it('shows a visual cue whenever something is logged to the logger', async () => { it('shows a visual cue whenever something is logged to the logger', async () => {
const el = await fixture(html` const el = await fixture(html`<sb-action-logger></sb-action-logger>`);
<sb-action-logger></sb-action-logger>
`);
const cueEl = el.shadowRoot.querySelector('.header__log-cue-overlay'); const cueEl = el.shadowRoot.querySelector('.header__log-cue-overlay');
expect(cueEl.classList.contains('header__log-cue-overlay--slide')).to.be.false; expect(cueEl.classList.contains('header__log-cue-overlay--slide')).to.be.false;
@ -65,9 +57,7 @@ describe('sb-action-logger', () => {
}); });
it('has a visual counter that counts the amount of total logs', async () => { it('has a visual counter that counts the amount of total logs', async () => {
const el = await fixture(html` const el = await fixture(html`<sb-action-logger></sb-action-logger>`);
<sb-action-logger></sb-action-logger>
`);
const cueEl = el.shadowRoot.querySelector('.header__log-cue-overlay'); const cueEl = el.shadowRoot.querySelector('.header__log-cue-overlay');
@ -78,9 +68,7 @@ describe('sb-action-logger', () => {
}); });
it('has a clear button that clears the logs and resets the counter', async () => { it('has a clear button that clears the logs and resets the counter', async () => {
const el = await fixture(html` const el = await fixture(html`<sb-action-logger></sb-action-logger>`);
<sb-action-logger></sb-action-logger>
`);
el.log('Hello, World!'); el.log('Hello, World!');
el.log('Hello, Planet!'); el.log('Hello, Planet!');
@ -92,9 +80,7 @@ describe('sb-action-logger', () => {
}); });
it('duplicate consecutive logs are kept as one, adds a visual counter', async () => { it('duplicate consecutive logs are kept as one, adds a visual counter', async () => {
const el = await fixture(html` const el = await fixture(html`<sb-action-logger></sb-action-logger>`);
<sb-action-logger></sb-action-logger>
`);
el.log('Hello, World!'); el.log('Hello, World!');
el.log('Hello, World!'); el.log('Hello, World!');
@ -115,9 +101,7 @@ describe('sb-action-logger', () => {
}); });
it('can be set to simple mode for only showing a single log statement', async () => { it('can be set to simple mode for only showing a single log statement', async () => {
const el = await fixture(html` const el = await fixture(html`<sb-action-logger simple></sb-action-logger>`);
<sb-action-logger simple></sb-action-logger>
`);
el.log('Hello, World!'); el.log('Hello, World!');
const loggerEl = el.shadowRoot.querySelector('.logger'); const loggerEl = el.shadowRoot.querySelector('.logger');
@ -138,9 +122,7 @@ describe('sb-action-logger', () => {
describe('Potential Additional Features', () => { describe('Potential Additional Features', () => {
it.skip('fires a sb-action-logged event when something is logged to the logger', async () => { it.skip('fires a sb-action-logged event when something is logged to the logger', async () => {
const el = await fixture(html` const el = await fixture(html`<sb-action-logger></sb-action-logger>`);
<sb-action-logger></sb-action-logger>
`);
expect(el).to.be.true; expect(el).to.be.true;
}); });
}); });

6
packages/icon/src/LionIcon.js
View file

@ -1,4 +1,4 @@
import { html, nothing, TemplateResult, css, render, LitElement } from '@lion/core'; import { css, html, LitElement, nothing, render, TemplateResult } from '@lion/core';
import { icons } from './icons.js'; import { icons } from './icons.js';
function unwrapSvg(wrappedSvgObject) { function unwrapSvg(wrappedSvgObject) {
@ -107,9 +107,7 @@ export class LionIcon extends LitElement {
} }
render() { render() {
return html` return html`<slot></slot>`;
<slot></slot>
`;
} }
connectedCallback() { connectedCallback() {

121
packages/icon/test/lion-icon.test.js
View file

@ -1,41 +1,26 @@
import { expect, fixture, fixtureSync, aTimeout, html } from '@open-wc/testing';
import { until } from '@lion/core'; import { until } from '@lion/core';
import { icons } from '../src/icons.js'; import { aTimeout, expect, fixture, fixtureSync, html } from '@open-wc/testing';
import heartSvg from './heart.svg.js';
import hammerSvg from './hammer.svg.js';
import '../lion-icon.js'; import '../lion-icon.js';
import { icons } from '../src/icons.js';
import hammerSvg from './hammer.svg.js';
import heartSvg from './heart.svg.js';
describe('lion-icon', () => { describe('lion-icon', () => {
it('supports svg icon as a function which recieves a tag function as an argument and returns a tagged template literal', async () => { it('supports svg icon as a function which recieves a tag function as an argument and returns a tagged template literal', async () => {
const iconFunction = tag => tag`<svg data-test-id="svg"></svg>`; const iconFunction = tag => tag`<svg data-test-id="svg"></svg>`;
const el = await fixture( const el = await fixture(html`<lion-icon .svg=${iconFunction}></lion-icon>`);
html`
<lion-icon .svg=${iconFunction}></lion-icon>
`,
);
expect(el.children[0].getAttribute('data-test-id')).to.equal('svg'); expect(el.children[0].getAttribute('data-test-id')).to.equal('svg');
}); });
it('is hidden when attribute hidden is true', async () => { it('is hidden when attribute hidden is true', async () => {
const iconFunction = tag => tag`<svg data-test-id="svg"></svg>`; const iconFunction = tag => tag`<svg data-test-id="svg"></svg>`;
const el = await fixture( const el = await fixture(html`<lion-icon .svg=${iconFunction} hidden></lion-icon>`);
html`
<lion-icon .svg=${iconFunction} hidden></lion-icon>
`,
);
expect(el).not.to.be.displayed; expect(el).not.to.be.displayed;
}); });
it('supports svg icon as a lit-html template', async () => { it('supports svg icon as a lit-html template', async () => {
const icon = html` const icon = html`<svg data-test-id="svg"></svg>`;
<svg data-test-id="svg"></svg> const el = await fixture(html`<lion-icon .svg=${icon}></lion-icon>`);
`;
const el = await fixture(
html`
<lion-icon .svg=${icon}></lion-icon>
`,
);
expect(el.children[0].getAttribute('data-test-id')).to.equal('svg'); expect(el.children[0].getAttribute('data-test-id')).to.equal('svg');
}); });
@ -43,27 +28,15 @@ describe('lion-icon', () => {
const errorMessage = const errorMessage =
'icon accepts only lit-html templates or functions like "tag => tag`<svg>...</svg>`"'; 'icon accepts only lit-html templates or functions like "tag => tag`<svg>...</svg>`"';
expect(() => { expect(() => {
fixtureSync( fixtureSync(html`<lion-icon .svg=${'<svg></svg>'}></lion-icon>`);
html`
<lion-icon .svg=${'<svg></svg>'}></lion-icon>
`,
);
}).to.throw(Error, errorMessage); }).to.throw(Error, errorMessage);
expect(() => { expect(() => {
fixtureSync( fixtureSync(html`<lion-icon .svg=${() => '<svg></svg>'}></lion-icon>`);
html`
<lion-icon .svg=${() => '<svg></svg>'}></lion-icon>
`,
);
}).to.throw(Error, errorMessage); }).to.throw(Error, errorMessage);
}); });
it('displays an svg icon with an aria label attribute', async () => { it('displays an svg icon with an aria label attribute', async () => {
const el = await fixture( const el = await fixture(html`<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>`);
html`
<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>
`,
);
expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-heart'); expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-heart');
expect(el.getAttribute('role')).to.equal('img'); expect(el.getAttribute('role')).to.equal('img');
@ -72,49 +45,29 @@ describe('lion-icon', () => {
}); });
it('displays an svg icon with an aria hidden attribute', async () => { it('displays an svg icon with an aria hidden attribute', async () => {
const el = await fixture( const el = await fixture(html`<lion-icon .svg=${hammerSvg}></lion-icon>`);
html`
<lion-icon .svg=${hammerSvg}></lion-icon>
`,
);
expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-hammer'); expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-hammer');
expect(el.getAttribute('aria-hidden')).to.equal('true'); expect(el.getAttribute('aria-hidden')).to.equal('true');
expect(el.hasAttribute('aria-label')).to.equal(false); expect(el.hasAttribute('aria-label')).to.equal(false);
}); });
it('is accessible with an aria label', async () => { it('is accessible with an aria label', async () => {
const el = await fixture( const el = await fixture(html`<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>`);
html`
<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>
`,
);
await expect(el).to.be.accessible(); await expect(el).to.be.accessible();
}); });
it('is accessible without an aria label', async () => { it('is accessible without an aria label', async () => {
const el = await fixture( const el = await fixture(html`<lion-icon .svg=${heartSvg}></lion-icon>`);
html`
<lion-icon .svg=${heartSvg}></lion-icon>
`,
);
await expect(el).to.be.accessible(); await expect(el).to.be.accessible();
}); });
it('expects svg-icons to have the attribute `focusable="false"` so the icon doesn\'t appear in tab-order in IE/Edge', async () => { it('expects svg-icons to have the attribute `focusable="false"` so the icon doesn\'t appear in tab-order in IE/Edge', async () => {
const icon = await fixture( const icon = await fixture(html`<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>`);
html`
<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>
`,
);
expect(icon.children[0].getAttribute('focusable')).to.equal('false'); expect(icon.children[0].getAttribute('focusable')).to.equal('false');
}); });
it('can change the displayed icon', async () => { it('can change the displayed icon', async () => {
const el = await fixture( const el = await fixture(html`<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>`);
html`
<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>
`,
);
expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-heart'); expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-heart');
el.svg = hammerSvg; el.svg = hammerSvg;
await el.updateComplete; await el.updateComplete;
@ -122,16 +75,8 @@ describe('lion-icon', () => {
}); });
it('can add or remove the aria-label attribute', async () => { it('can add or remove the aria-label attribute', async () => {
const el = await fixture( const el = await fixture(html`<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>`);
html` const elHammer = await fixture(html`<lion-icon .svg=${hammerSvg}></lion-icon>`);
<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>
`,
);
const elHammer = await fixture(
html`
<lion-icon .svg=${hammerSvg}></lion-icon>
`,
);
// verify initial values // verify initial values
expect(el.getAttribute('aria-label')).to.equal('Love'); expect(el.getAttribute('aria-label')).to.equal('Love');
@ -182,11 +127,7 @@ describe('lion-icon', () => {
}); });
it('does not render "undefined" if changed from valid input to undefined', async () => { it('does not render "undefined" if changed from valid input to undefined', async () => {
const el = await fixture( const el = await fixture(html`<lion-icon .svg=${heartSvg}></lion-icon>`);
html`
<lion-icon .svg=${heartSvg}></lion-icon>
`,
);
await el.updateComplete; await el.updateComplete;
el.svg = undefined; el.svg = undefined;
await el.updateComplete; await el.updateComplete;
@ -194,11 +135,7 @@ describe('lion-icon', () => {
}); });
it('does not render "null" if changed from valid input to null', async () => { it('does not render "null" if changed from valid input to null', async () => {
const el = await fixture( const el = await fixture(html`<lion-icon .svg=${heartSvg}></lion-icon>`);
html`
<lion-icon .svg=${heartSvg}></lion-icon>
`,
);
await el.updateComplete; await el.updateComplete;
el.svg = null; el.svg = null;
await el.updateComplete; await el.updateComplete;
@ -208,11 +145,7 @@ describe('lion-icon', () => {
it('supports icons using an icon id', async () => { it('supports icons using an icon id', async () => {
try { try {
icons.addIconResolver('foo', () => heartSvg); icons.addIconResolver('foo', () => heartSvg);
const el = await fixture( const el = await fixture(html`<lion-icon icon-id="foo:lorem:ipsum"></lion-icon>`);
html`
<lion-icon icon-id="foo:lorem:ipsum"></lion-icon>
`,
);
expect(el.children[0].dataset.testId).to.equal('svg-heart'); expect(el.children[0].dataset.testId).to.equal('svg-heart');
} finally { } finally {
@ -223,11 +156,7 @@ describe('lion-icon', () => {
it('clears rendered icon when icon id is removed', async () => { it('clears rendered icon when icon id is removed', async () => {
try { try {
icons.addIconResolver('foo', () => heartSvg); icons.addIconResolver('foo', () => heartSvg);
const el = await fixture( const el = await fixture(html`<lion-icon icon-id="foo:lorem:ipsum"></lion-icon>`);
html`
<lion-icon icon-id="foo:lorem:ipsum"></lion-icon>
`,
);
await el.updateComplete; await el.updateComplete;
el.removeAttribute('icon-id'); el.removeAttribute('icon-id');
await el.updateComplete; await el.updateComplete;
@ -247,11 +176,7 @@ describe('lion-icon', () => {
'bar', 'bar',
() => new Promise(resolve => setTimeout(() => resolve(hammerSvg), 4)), () => new Promise(resolve => setTimeout(() => resolve(hammerSvg), 4)),
); );
const el = await fixture( const el = await fixture(html`<lion-icon icon-id="foo:lorem:ipsum"></lion-icon>`);
html`
<lion-icon icon-id="foo:lorem:ipsum"></lion-icon>
`,
);
await el.updateComplete; await el.updateComplete;
el.iconId = 'bar:lorem:ipsum'; el.iconId = 'bar:lorem:ipsum';

9
packages/input-amount/test/lion-input-amount.test.js
View file

@ -1,11 +1,10 @@
import { expect, fixture, aTimeout } from '@open-wc/testing';
import { html } from '@lion/core'; import { html } from '@lion/core';
import { localize } from '@lion/localize'; import { localize } from '@lion/localize';
import { localizeTearDown } from '@lion/localize/test-helpers.js'; import { localizeTearDown } from '@lion/localize/test-helpers.js';
import { aTimeout, expect, fixture } from '@open-wc/testing';
import '../lion-input-amount.js';
import { formatAmount } from '../src/formatters.js'; import { formatAmount } from '../src/formatters.js';
import { parseAmount } from '../src/parsers.js'; import { parseAmount } from '../src/parsers.js';
import '../lion-input-amount.js';
describe('<lion-input-amount>', () => { describe('<lion-input-amount>', () => {
beforeEach(() => { beforeEach(() => {
@ -21,9 +20,7 @@ describe('<lion-input-amount>', () => {
// JOD displays 3 fraction digits by default // JOD displays 3 fraction digits by default
localize.locale = 'fr-FR'; localize.locale = 'fr-FR';
const el = await fixture( const el = await fixture(
html` html`<lion-input-amount currency="JOD" .modelValue="${123}"></lion-input-amount>`,
<lion-input-amount currency="JOD" .modelValue="${123}"></lion-input-amount>
`,
); );
expect(el.formattedValue).to.equal('123,000'); expect(el.formattedValue).to.equal('123,000');
}); });

22
packages/input-date/test/lion-input-date.test.js
View file

@ -1,10 +1,8 @@
import { expect, fixture } from '@open-wc/testing';
import { html } from '@lion/core'; import { html } from '@lion/core';
import { localizeTearDown } from '@lion/localize/test-helpers.js';
import { localize } from '@lion/localize'; import { localize } from '@lion/localize';
import { localizeTearDown } from '@lion/localize/test-helpers.js';
import { MaxDate } from '@lion/validate'; import { MaxDate } from '@lion/validate';
import { expect, fixture } from '@open-wc/testing';
import '../lion-input-date.js'; import '../lion-input-date.js';
describe('<lion-input-date>', () => { describe('<lion-input-date>', () => {
@ -13,23 +11,17 @@ describe('<lion-input-date>', () => {
}); });
it('returns undefined when value is empty string', async () => { it('returns undefined when value is empty string', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-input-date></lion-input-date>`);
<lion-input-date></lion-input-date>
`);
expect(el.parser('')).to.equal(undefined); expect(el.parser('')).to.equal(undefined);
}); });
it('has type="text" to activate default keyboard on mobile with all necessary symbols', async () => { it('has type="text" to activate default keyboard on mobile with all necessary symbols', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-input-date></lion-input-date>`);
<lion-input-date></lion-input-date>
`);
expect(el._inputNode.type).to.equal('text'); expect(el._inputNode.type).to.equal('text');
}); });
it('has validator "isDate" applied by default', async () => { it('has validator "isDate" applied by default', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-input-date></lion-input-date>`);
<lion-input-date></lion-input-date>
`);
el.modelValue = '2005/11/10'; el.modelValue = '2005/11/10';
expect(el.hasFeedbackFor).to.include('error'); expect(el.hasFeedbackFor).to.include('error');
expect(el.validationStates).to.have.a.property('error'); expect(el.validationStates).to.have.a.property('error');
@ -42,9 +34,7 @@ describe('<lion-input-date>', () => {
}); });
it("does not throw on invalid dates like new Date('foo')", async () => { it("does not throw on invalid dates like new Date('foo')", async () => {
const el = await fixture(html` const el = await fixture(html`<lion-input-date></lion-input-date>`);
<lion-input-date></lion-input-date>
`);
expect(() => { expect(() => {
el.modelValue = new Date('foo'); el.modelValue = new Date('foo');
}).to.not.throw(); }).to.not.throw();

4
packages/input-datepicker/src/LionInputDatepicker.js
View file

@ -169,9 +169,7 @@ export class LionInputDatepicker extends ScopedElementsMixin(OverlayMixin(LionIn
} }
__createUniqueIdForA11y() { __createUniqueIdForA11y() {
return `${this.localName}-${Math.random() return `${this.localName}-${Math.random().toString(36).substr(2, 10)}`;
.toString(36)
.substr(2, 10)}`;
} }
_requestUpdate(name, oldValue) { _requestUpdate(name, oldValue) {

84
packages/input-datepicker/test/lion-input-datepicker.test.js
View file

@ -1,19 +1,17 @@
import { expect, fixture, defineCE, aTimeout } from '@open-wc/testing';
import sinon from 'sinon';
import { html, LitElement } from '@lion/core';
import { MaxDate, MinDate, MinMaxDate, IsDateDisabled } from '@lion/validate';
import { LionCalendar } from '@lion/calendar'; import { LionCalendar } from '@lion/calendar';
import { isSameDate } from '@lion/calendar/src/utils/isSameDate.js'; import { isSameDate } from '@lion/calendar/src/utils/isSameDate.js';
import { DatepickerInputObject } from '../test-helpers.js'; import { html, LitElement } from '@lion/core';
import { LionInputDatepicker } from '../src/LionInputDatepicker.js'; import { IsDateDisabled, MaxDate, MinDate, MinMaxDate } from '@lion/validate';
import { aTimeout, defineCE, expect, fixture } from '@open-wc/testing';
import sinon from 'sinon';
import '../lion-input-datepicker.js'; import '../lion-input-datepicker.js';
import { LionInputDatepicker } from '../src/LionInputDatepicker.js';
import { DatepickerInputObject } from '../test-helpers.js';
describe('<lion-input-datepicker>', () => { describe('<lion-input-datepicker>', () => {
describe('Calendar Overlay', () => { describe('Calendar Overlay', () => {
it('implements calendar-overlay Style component', async () => { it('implements calendar-overlay Style component', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
<lion-input-datepicker></lion-input-datepicker>
`);
const elObj = new DatepickerInputObject(el); const elObj = new DatepickerInputObject(el);
await elObj.openCalendar(); await elObj.openCalendar();
@ -30,9 +28,7 @@ describe('<lion-input-datepicker>', () => {
}); });
it('has a close button, with a tooltip "Close"', async () => { it('has a close button, with a tooltip "Close"', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
<lion-input-datepicker></lion-input-datepicker>
`);
const elObj = new DatepickerInputObject(el); const elObj = new DatepickerInputObject(el);
await elObj.openCalendar(); await elObj.openCalendar();
// Since tooltip not ready, use title which can be progressively enhanced in extension layers. // Since tooltip not ready, use title which can be progressively enhanced in extension layers.
@ -69,9 +65,7 @@ describe('<lion-input-datepicker>', () => {
}); });
it('closes the calendar on [esc] key', async () => { it('closes the calendar on [esc] key', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
<lion-input-datepicker></lion-input-datepicker>
`);
const elObj = new DatepickerInputObject(el); const elObj = new DatepickerInputObject(el);
await elObj.openCalendar(); await elObj.openCalendar();
expect(elObj.overlayController.isShown).to.equal(true); expect(elObj.overlayController.isShown).to.equal(true);
@ -83,9 +77,7 @@ describe('<lion-input-datepicker>', () => {
}); });
it('closes the calendar via close button', async () => { it('closes the calendar via close button', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
<lion-input-datepicker></lion-input-datepicker>
`);
const elObj = new DatepickerInputObject(el); const elObj = new DatepickerInputObject(el);
await elObj.openCalendar(); await elObj.openCalendar();
expect(elObj.overlayController.isShown).to.equal(true); expect(elObj.overlayController.isShown).to.equal(true);
@ -95,9 +87,7 @@ describe('<lion-input-datepicker>', () => {
}); });
it('closes the calendar via outside click', async () => { it('closes the calendar via outside click', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
<lion-input-datepicker></lion-input-datepicker>
`);
const elObj = new DatepickerInputObject(el); const elObj = new DatepickerInputObject(el);
await elObj.openCalendar(); await elObj.openCalendar();
expect(elObj.overlayController.isShown).to.equal(true); expect(elObj.overlayController.isShown).to.equal(true);
@ -115,9 +105,7 @@ describe('<lion-input-datepicker>', () => {
describe('Calendar Invoker', () => { describe('Calendar Invoker', () => {
it('adds invoker button that toggles the overlay on click in suffix slot ', async () => { it('adds invoker button that toggles the overlay on click in suffix slot ', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
<lion-input-datepicker></lion-input-datepicker>
`);
const elObj = new DatepickerInputObject(el); const elObj = new DatepickerInputObject(el);
expect(elObj.invokerEl).not.to.equal(null); expect(elObj.invokerEl).not.to.equal(null);
expect(elObj.overlayController.isShown).to.be.false; expect(elObj.overlayController.isShown).to.be.false;
@ -126,9 +114,7 @@ describe('<lion-input-datepicker>', () => {
}); });
it('delegates disabled state of host input', async () => { it('delegates disabled state of host input', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-input-datepicker disabled></lion-input-datepicker>`);
<lion-input-datepicker disabled></lion-input-datepicker>
`);
const elObj = new DatepickerInputObject(el); const elObj = new DatepickerInputObject(el);
expect(elObj.overlayController.isShown).to.equal(false); expect(elObj.overlayController.isShown).to.equal(false);
await elObj.openCalendar(); await elObj.openCalendar();
@ -139,9 +125,7 @@ describe('<lion-input-datepicker>', () => {
}); });
it('disables invoker when host input is readonly', async () => { it('disables invoker when host input is readonly', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-input-datepicker readonly></lion-input-datepicker>`);
<lion-input-datepicker readonly></lion-input-datepicker>
`);
const elObj = new DatepickerInputObject(el); const elObj = new DatepickerInputObject(el);
expect(elObj.overlayController.isShown).to.equal(false); expect(elObj.overlayController.isShown).to.equal(false);
await elObj.openCalendar(); await elObj.openCalendar();
@ -167,9 +151,7 @@ describe('<lion-input-datepicker>', () => {
}); });
it('closes the calendar overlay on "user-selected-date-changed"', async () => { it('closes the calendar overlay on "user-selected-date-changed"', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
<lion-input-datepicker></lion-input-datepicker>
`);
const elObj = new DatepickerInputObject(el); const elObj = new DatepickerInputObject(el);
// Make sure the calendar overlay is opened // Make sure the calendar overlay is opened
await elObj.openCalendar(); await elObj.openCalendar();
@ -190,9 +172,7 @@ describe('<lion-input-datepicker>', () => {
}); });
it('focuses central date on opening of calendar if no date selected', async () => { it('focuses central date on opening of calendar if no date selected', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
<lion-input-datepicker></lion-input-datepicker>
`);
const elObj = new DatepickerInputObject(el); const elObj = new DatepickerInputObject(el);
await elObj.openCalendar(); await elObj.openCalendar();
expect(isSameDate(elObj.calendarEl.focusedDate, elObj.calendarEl.centralDate)).to.be.true; expect(isSameDate(elObj.calendarEl.focusedDate, elObj.calendarEl.centralDate)).to.be.true;
@ -280,9 +260,7 @@ describe('<lion-input-datepicker>', () => {
}); });
it('adds accessible label to invoker button', async () => { it('adds accessible label to invoker button', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
<lion-input-datepicker></lion-input-datepicker>
`);
const elObj = new DatepickerInputObject(el); const elObj = new DatepickerInputObject(el);
await elObj.openCalendar(); await elObj.openCalendar();
@ -291,9 +269,7 @@ describe('<lion-input-datepicker>', () => {
}); });
it('adds [aria-expanded] to invoker button', async () => { it('adds [aria-expanded] to invoker button', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
<lion-input-datepicker></lion-input-datepicker>
`);
const elObj = new DatepickerInputObject(el); const elObj = new DatepickerInputObject(el);
expect(elObj.invokerEl.getAttribute('aria-expanded')).to.equal('false'); expect(elObj.invokerEl.getAttribute('aria-expanded')).to.equal('false');
@ -304,9 +280,7 @@ describe('<lion-input-datepicker>', () => {
}); });
it('is accessible when closed', async () => { it('is accessible when closed', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
<lion-input-datepicker></lion-input-datepicker>
`);
const elObj = new DatepickerInputObject(el); const elObj = new DatepickerInputObject(el);
await expect(elObj.invokerEl).to.be.accessible(); await expect(elObj.invokerEl).to.be.accessible();
@ -314,9 +288,7 @@ describe('<lion-input-datepicker>', () => {
}); });
it('is accessible when open', async () => { it('is accessible when open', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
<lion-input-datepicker></lion-input-datepicker>
`);
const elObj = new DatepickerInputObject(el); const elObj = new DatepickerInputObject(el);
await elObj.openCalendar(); await elObj.openCalendar();
@ -325,9 +297,7 @@ describe('<lion-input-datepicker>', () => {
}); });
it('has accessible invoker when open', async () => { it('has accessible invoker when open', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
<lion-input-datepicker></lion-input-datepicker>
`);
const elObj = new DatepickerInputObject(el); const elObj = new DatepickerInputObject(el);
await elObj.openCalendar(); await elObj.openCalendar();
@ -355,9 +325,7 @@ describe('<lion-input-datepicker>', () => {
class extends LionInputDatepicker { class extends LionInputDatepicker {
/** @override */ /** @override */
_invokerTemplate() { _invokerTemplate() {
return html` return html`<my-button>Pick my date</my-button>`;
<my-button>Pick my date</my-button>
`;
} }
}, },
); );
@ -415,9 +383,7 @@ describe('<lion-input-datepicker>', () => {
const myTag = defineCE( const myTag = defineCE(
class extends LionInputDatepicker { class extends LionInputDatepicker {
_calendarTemplate() { _calendarTemplate() {
return html` return html`<my-calendar id="calendar"></my-calendar>`;
<my-calendar id="calendar"></my-calendar>
`;
} }
}, },
); );
@ -515,9 +481,7 @@ describe('<lion-input-datepicker>', () => {
}); });
it('is hidden when attribute hidden is true', async () => { it('is hidden when attribute hidden is true', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
<lion-input-datepicker></lion-input-datepicker>
`);
await el.updateComplete; await el.updateComplete;
const myElObj = new DatepickerInputObject(el); const myElObj = new DatepickerInputObject(el);

32
packages/localize/test/LocalizeMixin.test.js
View file

@ -1,26 +1,24 @@
import { isDirective, LitElement } from '@lion/core';
import { import {
aTimeout,
defineCE,
expect, expect,
fixture, fixture,
fixtureSync, fixtureSync,
nextFrame,
aTimeout,
defineCE,
html, html,
nextFrame,
} from '@open-wc/testing'; } from '@open-wc/testing';
import sinon from 'sinon'; import sinon from 'sinon';
import { LitElement, isDirective } from '@lion/core'; import { localize } from '../src/localize.js';
import { LocalizeMixin } from '../src/LocalizeMixin.js';
import { import {
localizeTearDown,
setupEmptyFakeImportsFor,
resetFakeImport,
fakeImport, fakeImport,
localizeTearDown,
resetFakeImport,
setupEmptyFakeImportsFor,
setupFakeImport, setupFakeImport,
} from '../test-helpers.js'; } from '../test-helpers.js';
import { localize } from '../src/localize.js';
import { LocalizeMixin } from '../src/LocalizeMixin.js';
describe('LocalizeMixin', () => { describe('LocalizeMixin', () => {
afterEach(() => { afterEach(() => {
resetFakeImport(); resetFakeImport();
@ -300,9 +298,7 @@ describe('LocalizeMixin', () => {
} }
render() { render() {
return html` return html`<p>${this.msgLit('my-element:greeting')}</p>`;
<p>${this.msgLit('my-element:greeting')}</p>
`;
} }
}, },
); );
@ -333,9 +329,7 @@ describe('LocalizeMixin', () => {
} }
render() { render() {
return html` return html`<p>${this.msgLit('my-element:greeting')}</p>`;
<p>${this.msgLit('my-element:greeting')}</p>
`;
} }
}, },
); );
@ -369,9 +363,7 @@ describe('LocalizeMixin', () => {
} }
render() { render() {
return html` return html`<p>${this.msgLit('my-element:greeting')}</p>`;
<p>${this.msgLit('my-element:greeting')}</p>
`;
} }
}, },
); );

4
packages/overlays/src/OverlayController.js
View file

@ -71,9 +71,7 @@ export class OverlayController {
this.manager.add(this); this.manager.add(this);
this._contentNodeWrapper = document.createElement('div'); this._contentNodeWrapper = document.createElement('div');
this._contentId = `overlay-content--${Math.random() this._contentId = `overlay-content--${Math.random().toString(36).substr(2, 10)}`;
.toString(36)
.substr(2, 10)}`;
this.updateConfig(config); this.updateConfig(config);

71
packages/overlays/test/OverlayController.test.js
View file

@ -1,33 +1,29 @@
/* eslint-disable no-new */ /* eslint-disable no-new */
import '@lion/core/test-helpers/keyboardEventShimIE.js';
import { import {
expect,
html,
fixture,
aTimeout, aTimeout,
defineCE, defineCE,
unsafeStatic, expect,
fixture,
html,
nextFrame, nextFrame,
unsafeStatic,
} from '@open-wc/testing'; } from '@open-wc/testing';
import { fixtureSync } from '@open-wc/testing-helpers'; import { fixtureSync } from '@open-wc/testing-helpers';
import '@lion/core/test-helpers/keyboardEventShimIE.js';
import sinon from 'sinon'; import sinon from 'sinon';
import { keyCodes } from '../src/utils/key-codes.js';
import { simulateTab } from '../src/utils/simulate-tab.js';
import { OverlayController } from '../src/OverlayController.js'; import { OverlayController } from '../src/OverlayController.js';
import { overlays } from '../src/overlays.js'; import { overlays } from '../src/overlays.js';
import { keyCodes } from '../src/utils/key-codes.js';
import { simulateTab } from '../src/utils/simulate-tab.js';
const withGlobalTestConfig = () => ({ const withGlobalTestConfig = () => ({
placementMode: 'global', placementMode: 'global',
contentNode: fixtureSync(html` contentNode: fixtureSync(html`<div>my content</div>`),
<div>my content</div>
`),
}); });
const withLocalTestConfig = () => ({ const withLocalTestConfig = () => ({
placementMode: 'local', placementMode: 'local',
contentNode: fixtureSync(html` contentNode: fixtureSync(html`<div>my content</div>`),
<div>my content</div>
`),
invokerNode: fixtureSync(html` invokerNode: fixtureSync(html`
<div role="button" style="width: 100px; height: 20px;">Invoker</div> <div role="button" style="width: 100px; height: 20px;">Invoker</div>
`), `),
@ -138,9 +134,7 @@ describe('OverlayController', () => {
it.skip('creates local target next to sibling for placement mode "local"', async () => { it.skip('creates local target next to sibling for placement mode "local"', async () => {
const ctrl = new OverlayController({ const ctrl = new OverlayController({
...withLocalTestConfig(), ...withLocalTestConfig(),
invokerNode: await fixture(html` invokerNode: await fixture(html`<button>Invoker</button>`),
<button>Invoker</button>
`),
}); });
expect(ctrl._renderTarget).to.be.undefined; expect(ctrl._renderTarget).to.be.undefined;
expect(ctrl.content).to.equal(ctrl.invokerNode.nextElementSibling); expect(ctrl.content).to.equal(ctrl.invokerNode.nextElementSibling);
@ -226,9 +220,7 @@ describe('OverlayController', () => {
}); });
await ctrl.show(); await ctrl.show();
const elOutside = await fixture(html` const elOutside = await fixture(html`<button>click me</button>`);
<button>click me</button>
`);
const input1 = ctrl.contentNode.querySelectorAll('input')[0]; const input1 = ctrl.contentNode.querySelectorAll('input')[0];
const input2 = ctrl.contentNode.querySelectorAll('input')[1]; const input2 = ctrl.contentNode.querySelectorAll('input')[1];
@ -243,9 +235,7 @@ describe('OverlayController', () => {
}); });
it('allows to move the focus outside of the overlay if trapsKeyboardFocus is disabled', async () => { it('allows to move the focus outside of the overlay if trapsKeyboardFocus is disabled', async () => {
const contentNode = await fixture(html` const contentNode = await fixture(html`<div><input /></div>`);
<div><input /></div>
`);
const ctrl = new OverlayController({ const ctrl = new OverlayController({
...withGlobalTestConfig(), ...withGlobalTestConfig(),
@ -253,14 +243,10 @@ describe('OverlayController', () => {
trapsKeyboardFocus: true, trapsKeyboardFocus: true,
}); });
// add element to dom to allow focus // add element to dom to allow focus
await fixture(html` await fixture(html` ${ctrl.content} `);
${ctrl.content}
`);
await ctrl.show(); await ctrl.show();
const elOutside = await fixture(html` const elOutside = await fixture(html`<input />`);
<input />
`);
const input = ctrl.contentNode.querySelector('input'); const input = ctrl.contentNode.querySelector('input');
input.focus(); input.focus();
@ -416,10 +402,7 @@ describe('OverlayController', () => {
await ctrl.show(); await ctrl.show();
// Don't hide on inside shadowDom click // Don't hide on inside shadowDom click
ctrl.contentNode ctrl.contentNode.querySelector(tagString).shadowRoot.querySelector('button').click();
.querySelector(tagString)
.shadowRoot.querySelector('button')
.click();
await aTimeout(); await aTimeout();
expect(ctrl.isShown).to.be.true; expect(ctrl.isShown).to.be.true;
@ -468,9 +451,7 @@ describe('OverlayController', () => {
}); });
it('works with 3rd party code using "event.stopPropagation()" on capture phase', async () => { it('works with 3rd party code using "event.stopPropagation()" on capture phase', async () => {
const invokerNode = await fixture(html` const invokerNode = await fixture(html`<div role="button">Invoker</div>`);
<div role="button">Invoker</div>
`);
const contentNode = await fixture('<div>Content</div>'); const contentNode = await fixture('<div>Content</div>');
const ctrl = new OverlayController({ const ctrl = new OverlayController({
...withLocalTestConfig(), ...withLocalTestConfig(),
@ -957,11 +938,7 @@ describe('OverlayController', () => {
it('reinitializes content', async () => { it('reinitializes content', async () => {
const ctrl = new OverlayController({ const ctrl = new OverlayController({
...withLocalTestConfig(), ...withLocalTestConfig(),
contentNode: await fixture( contentNode: await fixture(html`<div>content1</div>`),
html`
<div>content1</div>
`,
),
}); });
await ctrl.show(); // Popper adds inline styles await ctrl.show(); // Popper adds inline styles
expect(ctrl.content.style.transform).not.to.be.undefined; expect(ctrl.content.style.transform).not.to.be.undefined;
@ -969,19 +946,13 @@ describe('OverlayController', () => {
ctrl.updateConfig({ ctrl.updateConfig({
placementMode: 'local', placementMode: 'local',
contentNode: await fixture( contentNode: await fixture(html`<div>content2</div>`),
html`
<div>content2</div>
`,
),
}); });
expect(ctrl.contentNode.textContent).to.include('content2'); expect(ctrl.contentNode.textContent).to.include('content2');
}); });
it('respects the initial config provided to new OverlayController(initialConfig)', async () => { it('respects the initial config provided to new OverlayController(initialConfig)', async () => {
const contentNode = fixtureSync(html` const contentNode = fixtureSync(html`<div>my content</div>`);
<div>my content</div>
`);
const ctrl = new OverlayController({ const ctrl = new OverlayController({
// This is the shared config // This is the shared config
@ -1001,9 +972,7 @@ describe('OverlayController', () => {
// Currently not working, enable again when we fix updateConfig // Currently not working, enable again when we fix updateConfig
it.skip('allows for updating viewport config placement only, while keeping the content shown', async () => { it.skip('allows for updating viewport config placement only, while keeping the content shown', async () => {
const contentNode = fixtureSync(html` const contentNode = fixtureSync(html`<div>my content</div>`);
<div>my content</div>
`);
const ctrl = new OverlayController({ const ctrl = new OverlayController({
// This is the shared config // This is the shared config

8
packages/overlays/test/OverlaysManager.test.js
View file

@ -1,15 +1,13 @@
import { expect, html, fixture } from '@open-wc/testing'; import { expect, fixture, html } from '@open-wc/testing';
import { OverlaysManager } from '../src/OverlaysManager.js';
import { OverlayController } from '../src/OverlayController.js'; import { OverlayController } from '../src/OverlayController.js';
import { OverlaysManager } from '../src/OverlaysManager.js';
describe('OverlaysManager', () => { describe('OverlaysManager', () => {
let defaultOptions; let defaultOptions;
let mngr; let mngr;
before(async () => { before(async () => {
const contentNode = await fixture(html` const contentNode = await fixture(html`<p>my content</p>`);
<p>my content</p>
`);
defaultOptions = { defaultOptions = {
placementMode: 'global', placementMode: 'global',

4
packages/overlays/test/global-positioning.test.js
View file

@ -5,9 +5,7 @@ import { overlays } from '../src/overlays.js';
const withDefaultGlobalConfig = () => ({ const withDefaultGlobalConfig = () => ({
placementMode: 'global', placementMode: 'global',
contentNode: fixtureSync(html` contentNode: fixtureSync(html`<p>my content</p>`),
<p>my content</p>
`),
}); });
describe('Global Positioning', () => { describe('Global Positioning', () => {

32
packages/overlays/test/local-positioning.test.js
View file

@ -5,9 +5,7 @@ import { normalizeTransformStyle } from '../test-helpers/local-positioning-helpe
const withLocalTestConfig = () => ({ const withLocalTestConfig = () => ({
placementMode: 'local', placementMode: 'local',
contentNode: fixtureSync(html` contentNode: fixtureSync(html`<div>my content</div>`),
<div>my content</div>
`),
invokerNode: fixtureSync(html` invokerNode: fixtureSync(html`
<div role="button" style="width: 100px; height: 20px;">Invoker</div> <div role="button" style="width: 100px; height: 20px;">Invoker</div>
`), `),
@ -56,9 +54,7 @@ describe('Local Positioning', () => {
it('uses top as the default placement', async () => { it('uses top as the default placement', async () => {
const ctrl = new OverlayController({ const ctrl = new OverlayController({
...withLocalTestConfig(), ...withLocalTestConfig(),
contentNode: fixtureSync(html` contentNode: fixtureSync(html`<div style="width: 80px; height: 20px;"></div>`),
<div style="width: 80px; height: 20px;"></div>
`),
invokerNode: fixtureSync(html` invokerNode: fixtureSync(html`
<div role="button" style="width: 100px; height: 20px;" @click=${() => ctrl.show()}></div> <div role="button" style="width: 100px; height: 20px;" @click=${() => ctrl.show()}></div>
`), `),
@ -75,9 +71,7 @@ describe('Local Positioning', () => {
it('positions to preferred place if placement is set and space is available', async () => { it('positions to preferred place if placement is set and space is available', async () => {
const ctrl = new OverlayController({ const ctrl = new OverlayController({
...withLocalTestConfig(), ...withLocalTestConfig(),
contentNode: fixtureSync(html` contentNode: fixtureSync(html`<div style="width: 80px; height: 20px;"></div>`),
<div style="width: 80px; height: 20px;"></div>
`),
invokerNode: fixtureSync(html` invokerNode: fixtureSync(html`
<div role="button" style="width: 100px; height: 20px;" @click=${() => ctrl.show()}></div> <div role="button" style="width: 100px; height: 20px;" @click=${() => ctrl.show()}></div>
`), `),
@ -98,9 +92,7 @@ describe('Local Positioning', () => {
it('positions to different place if placement is set and no space is available', async () => { it('positions to different place if placement is set and no space is available', async () => {
const ctrl = new OverlayController({ const ctrl = new OverlayController({
...withLocalTestConfig(), ...withLocalTestConfig(),
contentNode: fixtureSync(html` contentNode: fixtureSync(html`<div style="width: 80px; height: 20px;">invoker</div>`),
<div style="width: 80px; height: 20px;">invoker</div>
`),
invokerNode: fixtureSync(html` invokerNode: fixtureSync(html`
<div role="button" style="width: 100px; height: 20px;" @click=${() => ctrl.show()}> <div role="button" style="width: 100px; height: 20px;" @click=${() => ctrl.show()}>
content content
@ -123,9 +115,7 @@ describe('Local Positioning', () => {
it('allows the user to override default Popper modifiers', async () => { it('allows the user to override default Popper modifiers', async () => {
const ctrl = new OverlayController({ const ctrl = new OverlayController({
...withLocalTestConfig(), ...withLocalTestConfig(),
contentNode: fixtureSync(html` contentNode: fixtureSync(html`<div style="width: 80px; height: 20px;"></div>`),
<div style="width: 80px; height: 20px;"></div>
`),
invokerNode: fixtureSync(html` invokerNode: fixtureSync(html`
<div role="button" style="width: 100px; height: 20px;" @click=${() => ctrl.show()}></div> <div role="button" style="width: 100px; height: 20px;" @click=${() => ctrl.show()}></div>
`), `),
@ -158,9 +148,7 @@ describe('Local Positioning', () => {
it('positions the Popper element correctly on show', async () => { it('positions the Popper element correctly on show', async () => {
const ctrl = new OverlayController({ const ctrl = new OverlayController({
...withLocalTestConfig(), ...withLocalTestConfig(),
contentNode: fixtureSync(html` contentNode: fixtureSync(html`<div style="width: 80px; height: 20px;"></div>`),
<div style="width: 80px; height: 20px;"></div>
`),
invokerNode: fixtureSync(html` invokerNode: fixtureSync(html`
<div role="button" style="width: 100px; height: 20px;" @click=${() => ctrl.show()}></div> <div role="button" style="width: 100px; height: 20px;" @click=${() => ctrl.show()}></div>
`), `),
@ -191,9 +179,7 @@ describe('Local Positioning', () => {
it.skip('updates placement properly even during hidden state', async () => { it.skip('updates placement properly even during hidden state', async () => {
const ctrl = new OverlayController({ const ctrl = new OverlayController({
...withLocalTestConfig(), ...withLocalTestConfig(),
contentNode: fixtureSync(html` contentNode: fixtureSync(html`<div style="width: 80px; height: 20px;"></div>`),
<div style="width: 80px; height: 20px;"></div>
`),
invokerNode: fixtureSync(html` invokerNode: fixtureSync(html`
<div role="button" style="width: 100px; height: 20px;" @click=${() => ctrl.show()}></div> <div role="button" style="width: 100px; height: 20px;" @click=${() => ctrl.show()}></div>
`), `),
@ -242,9 +228,7 @@ describe('Local Positioning', () => {
it.skip('updates positioning correctly during shown state when config gets updated', async () => { it.skip('updates positioning correctly during shown state when config gets updated', async () => {
const ctrl = new OverlayController({ const ctrl = new OverlayController({
...withLocalTestConfig(), ...withLocalTestConfig(),
contentNode: fixtureSync(html` contentNode: fixtureSync(html`<div style="width: 80px; height: 20px;"></div>`),
<div style="width: 80px; height: 20px;"></div>
`),
invokerNode: fixtureSync(html` invokerNode: fixtureSync(html`
<div role="button" style="width: 100px; height: 20px;" @click=${() => ctrl.show()}> <div role="button" style="width: 100px; height: 20px;" @click=${() => ctrl.show()}>
Invoker Invoker

5
packages/remark-extend/README.md
View file

@ -20,10 +20,7 @@ const { remarkExtend } = require('remark-extend');
const sourceMd = '# Headline'; const sourceMd = '# Headline';
const extendMd = 'extending instructions'; const extendMd = 'extending instructions';
const parser = unified() const parser = unified().use(markdown).use(remarkExtend, { extendMd }).use(mdStringify);
.use(markdown)
.use(remarkExtend, { extendMd })
.use(mdStringify);
const result = await parser.process(sourceMd); const result = await parser.process(sourceMd);
``` ```

5
packages/remark-extend/test-node/remark-extend.test.js
View file

@ -242,10 +242,7 @@ describe('remarkExtend', () => {
'```', '```',
].join('\n'); ].join('\n');
const parser = unified() const parser = unified().use(markdown).use(remarkExtend, { extendMd }).use(mdStringify);
.use(markdown)
.use(remarkExtend, { extendMd })
.use(mdStringify);
await expectThrowsAsync( await expectThrowsAsync(
() => parser.process(input), () => parser.process(input),

8
packages/select-rich/src/LionSelectInvoker.js
View file

@ -98,12 +98,6 @@ export class LionSelectInvoker extends LionButton {
// eslint-disable-next-line class-methods-use-this // eslint-disable-next-line class-methods-use-this
_afterTemplate() { _afterTemplate() {
return html` return html`${!this.singleOption ? html`<slot name="after"></slot>` : ''}`;
${!this.singleOption
? html`
<slot name="after"></slot>
`
: ''}
`;
} }
} }

4
packages/select-rich/src/LionSelectRich.js
View file

@ -8,9 +8,7 @@ import './differentKeyNamesShimIE.js';
import { LionSelectInvoker } from './LionSelectInvoker.js'; import { LionSelectInvoker } from './LionSelectInvoker.js';
function uuid() { function uuid() {
return Math.random() return Math.random().toString(36).substr(2, 10);
.toString(36)
.substr(2, 10);
} }
function detectInteractionMode() { function detectInteractionMode() {

2
packages/select-rich/src/differentKeyNamesShimIE.js
View file

@ -23,7 +23,7 @@ if (descriptor) {
}; };
Object.defineProperty(event, 'key', { Object.defineProperty(event, 'key', {
// eslint-disable-next-line object-shorthand, func-names // eslint-disable-next-line object-shorthand, func-names
get: function() { get: function () {
const key = descriptor.get.call(this); const key = descriptor.get.call(this);
// eslint-disable-next-line no-prototype-builtins // eslint-disable-next-line no-prototype-builtins

35
packages/select-rich/test/lion-option.test.js
View file

@ -1,39 +1,28 @@
import { expect, fixture, html } from '@open-wc/testing'; import { expect, fixture, html } from '@open-wc/testing';
import sinon from 'sinon'; import sinon from 'sinon';
import '../lion-option.js'; import '../lion-option.js';
describe('lion-option', () => { describe('lion-option', () => {
describe('Values', () => { describe('Values', () => {
it('has a modelValue', async () => { it('has a modelValue', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-option .choiceValue=${10}></lion-option>`);
<lion-option .choiceValue=${10}></lion-option>
`);
expect(el.modelValue).to.deep.equal({ value: 10, checked: false }); expect(el.modelValue).to.deep.equal({ value: 10, checked: false });
}); });
it('can be checked', async () => { it('can be checked', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-option .choiceValue=${10} checked></lion-option>`);
<lion-option .choiceValue=${10} checked></lion-option>
`);
expect(el.modelValue).to.deep.equal({ value: 10, checked: true }); expect(el.modelValue).to.deep.equal({ value: 10, checked: true });
}); });
it('is hidden when attribute hidden is true', async () => { it('is hidden when attribute hidden is true', async () => {
const el = await fixture( const el = await fixture(html`<lion-option .choiceValue=${10} hidden></lion-option>`);
html`
<lion-option .choiceValue=${10} hidden></lion-option>
`,
);
expect(el).not.to.be.displayed; expect(el).not.to.be.displayed;
}); });
}); });
describe('Accessibility', () => { describe('Accessibility', () => {
it('has the "option" role', async () => { it('has the "option" role', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-option></lion-option>`);
<lion-option></lion-option>
`);
expect(el.getAttribute('role')).to.equal('option'); expect(el.getAttribute('role')).to.equal('option');
}); });
@ -70,9 +59,7 @@ describe('lion-option', () => {
describe('State reflection', () => { describe('State reflection', () => {
it('asynchronously adds the attribute "active" when active', async () => { it('asynchronously adds the attribute "active" when active', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-option .choiceValue=${10}></lion-option>`);
<lion-option .choiceValue=${10}></lion-option>
`);
expect(el.active).to.equal(false); expect(el.active).to.equal(false);
expect(el.hasAttribute('active')).to.be.false; expect(el.hasAttribute('active')).to.be.false;
@ -90,9 +77,7 @@ describe('lion-option', () => {
}); });
it('does become checked on [click]', async () => { it('does become checked on [click]', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-option .choiceValue=${10}></lion-option>`);
<lion-option .choiceValue=${10}></lion-option>
`);
expect(el.checked).to.be.false; expect(el.checked).to.be.false;
el.click(); el.click();
await el.updateComplete; await el.updateComplete;
@ -112,18 +97,14 @@ describe('lion-option', () => {
describe('Disabled', () => { describe('Disabled', () => {
it('does not becomes active on [mouseenter]', async () => { it('does not becomes active on [mouseenter]', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-option .choiceValue=${10} disabled></lion-option>`);
<lion-option .choiceValue=${10} disabled></lion-option>
`);
expect(el.active).to.be.false; expect(el.active).to.be.false;
el.dispatchEvent(new Event('mouseenter')); el.dispatchEvent(new Event('mouseenter'));
expect(el.active).to.be.false; expect(el.active).to.be.false;
}); });
it('does not become checked on [click]', async () => { it('does not become checked on [click]', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-option .choiceValue=${10} disabled></lion-option>`);
<lion-option .choiceValue=${10} disabled></lion-option>
`);
expect(el.checked).to.be.false; expect(el.checked).to.be.false;
el.click(); el.click();
await el.updateComplete; await el.updateComplete;

29
packages/select-rich/test/lion-select-invoker.test.js
View file

@ -1,21 +1,16 @@
import { expect, fixture, html, defineCE } from '@open-wc/testing';
import { LionButton } from '@lion/button'; import { LionButton } from '@lion/button';
import { LionSelectInvoker } from '../src/LionSelectInvoker.js'; import { defineCE, expect, fixture, html } from '@open-wc/testing';
import '../lion-select-invoker.js'; import '../lion-select-invoker.js';
import { LionSelectInvoker } from '../src/LionSelectInvoker.js';
describe('lion-select-invoker', () => { describe('lion-select-invoker', () => {
it('should behave as a button', async () => { it('should behave as a button', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-select-invoker></lion-select-invoker>`);
<lion-select-invoker></lion-select-invoker>
`);
expect(el instanceof LionButton).to.be.true; expect(el instanceof LionButton).to.be.true;
}); });
it('renders invoker info based on selectedElement child elements', async () => { it('renders invoker info based on selectedElement child elements', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-select-invoker></lion-select-invoker>`);
<lion-select-invoker></lion-select-invoker>
`);
el.selectedElement = await fixture(`<div class="option"><h2>I am</h2><p>2 lines</p></div>`); el.selectedElement = await fixture(`<div class="option"><h2>I am</h2><p>2 lines</p></div>`);
await el.updateComplete; await el.updateComplete;
@ -31,9 +26,7 @@ describe('lion-select-invoker', () => {
}); });
it('renders invoker info based on selectedElement textContent', async () => { it('renders invoker info based on selectedElement textContent', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-select-invoker></lion-select-invoker>`);
<lion-select-invoker></lion-select-invoker>
`);
el.selectedElement = await fixture(`<div class="option">just textContent</div>`); el.selectedElement = await fixture(`<div class="option">just textContent</div>`);
await el.updateComplete; await el.updateComplete;
@ -41,9 +34,7 @@ describe('lion-select-invoker', () => {
}); });
it('has tabindex="0"', async () => { it('has tabindex="0"', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-select-invoker></lion-select-invoker>`);
<lion-select-invoker></lion-select-invoker>
`);
expect(el.tabIndex).to.equal(0); expect(el.tabIndex).to.equal(0);
expect(el.getAttribute('tabindex')).to.equal('0'); expect(el.getAttribute('tabindex')).to.equal('0');
}); });
@ -57,9 +48,7 @@ describe('lion-select-invoker', () => {
}); });
it('should render after slot when singleOption is not true', async () => { it('should render after slot when singleOption is not true', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-select-invoker></lion-select-invoker>`);
<lion-select-invoker></lion-select-invoker>
`);
expect(el.shadowRoot.querySelector('slot[name="after"]')).to.exist; expect(el.shadowRoot.querySelector('slot[name="after"]')).to.exist;
}); });
@ -70,9 +59,7 @@ describe('lion-select-invoker', () => {
class extends LionSelectInvoker { class extends LionSelectInvoker {
_contentTemplate() { _contentTemplate() {
if (this.selectedElement && this.selectedElement.textContent === 'cat') { if (this.selectedElement && this.selectedElement.textContent === 'cat') {
return html` return html`cat selected `;
cat selected
`;
} }
return `no valid selection`; return `no valid selection`;
} }

12
packages/select-rich/test/lion-select-rich.test.js
View file

@ -37,9 +37,7 @@ describe('lion-select-rich', () => {
expect(el.formElements[0].name).to.equal('foo'); expect(el.formElements[0].name).to.equal('foo');
expect(el.formElements[1].name).to.equal('foo'); expect(el.formElements[1].name).to.equal('foo');
const validChild = await fixture(html` const validChild = await fixture(html`<lion-option .choiceValue=${30}>Item 3</lion-option>`);
<lion-option .choiceValue=${30}>Item 3</lion-option>
`);
el.appendChild(validChild); el.appendChild(validChild);
expect(el.formElements[2].name).to.equal('foo'); expect(el.formElements[2].name).to.equal('foo');
@ -56,9 +54,7 @@ describe('lion-select-rich', () => {
`); `);
await nextFrame(); await nextFrame();
const invalidChild = await fixture(html` const invalidChild = await fixture(html`<lion-option .modelValue=${'Lara'}></lion-option>`);
<lion-option .modelValue=${'Lara'}></lion-option>
`);
expect(() => { expect(() => {
el.addFormElement(invalidChild); el.addFormElement(invalidChild);
@ -816,9 +812,7 @@ describe('lion-select-rich', () => {
const invokerTagName = defineCE( const invokerTagName = defineCE(
class extends LionSelectInvoker { class extends LionSelectInvoker {
_noSelectionTemplate() { _noSelectionTemplate() {
return html` return html`Please select an option..`;
Please select an option..
`;
} }
}, },
); );

6
packages/steps/src/LionStep.js
View file

@ -1,4 +1,4 @@
import { LitElement, html, css } from '@lion/core'; import { css, html, LitElement } from '@lion/core';
/** /**
* `LionStep` is one of many in a LionSteps Controller * `LionStep` is one of many in a LionSteps Controller
@ -96,9 +96,7 @@ export class LionStep extends LitElement {
} }
render() { render() {
return html` return html`<slot></slot>`;
<slot></slot>
`;
} }
firstUpdated() { firstUpdated() {

6
packages/steps/src/LionSteps.js
View file

@ -1,4 +1,4 @@
import { LitElement, html, css } from '@lion/core'; import { css, html, LitElement } from '@lion/core';
/** /**
* `LionSteps` is a controller for a multi step system. * `LionSteps` is a controller for a multi step system.
@ -63,9 +63,7 @@ export class LionSteps extends LitElement {
} }
render() { render() {
return html` return html`<slot></slot>`;
<slot></slot>
`;
} }
firstUpdated() { firstUpdated() {

15
packages/steps/test/lion-steps.test.js
View file

@ -1,8 +1,7 @@
import { expect, fixture, html, nextFrame, oneEvent } from '@open-wc/testing';
import sinon from 'sinon'; import sinon from 'sinon';
import { expect, fixture, html, oneEvent, nextFrame } from '@open-wc/testing';
import '../lion-steps.js';
import '../lion-step.js'; import '../lion-step.js';
import '../lion-steps.js';
async function checkWorkflow(steps, expected) { async function checkWorkflow(steps, expected) {
return new Promise(resolve => { return new Promise(resolve => {
@ -28,18 +27,12 @@ async function checkWorkflow(steps, expected) {
describe('lion-steps', () => { describe('lion-steps', () => {
it('can be instantiated', async () => { it('can be instantiated', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-steps> </lion-steps>`);
<lion-steps> </lion-steps>
`);
expect(el).to.be.a('HTMLElement'); expect(el).to.be.a('HTMLElement');
}); });
it('is hidden when attribute hidden is true', async () => { it('is hidden when attribute hidden is true', async () => {
const el = await fixture( const el = await fixture(html`<lion-steps hidden> </lion-steps>`);
html`
<lion-steps hidden> </lion-steps>
`,
);
expect(el).not.to.be.displayed; expect(el).not.to.be.displayed;
}); });

12
packages/switch/src/LionSwitch.js
View file

@ -1,6 +1,6 @@
import { html, css, ScopedElementsMixin } from '@lion/core';
import { LionField } from '@lion/field';
import { ChoiceInputMixin } from '@lion/choice-input'; import { ChoiceInputMixin } from '@lion/choice-input';
import { css, html, ScopedElementsMixin } from '@lion/core';
import { LionField } from '@lion/field';
import { LionSwitchButton } from './LionSwitchButton.js'; import { LionSwitchButton } from './LionSwitchButton.js';
export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField)) { export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField)) {
@ -49,15 +49,11 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField))
} }
_groupOneTemplate() { _groupOneTemplate() {
return html` return html`${this._labelTemplate()} ${this._helpTextTemplate()} ${this._feedbackTemplate()}`;
${this._labelTemplate()} ${this._helpTextTemplate()} ${this._feedbackTemplate()}
`;
} }
_groupTwoTemplate() { _groupTwoTemplate() {
return html` return html`${this._inputGroupTemplate()}`;
${this._inputGroupTemplate()}
`;
} }
connectedCallback() { connectedCallback() {

5
packages/switch/test/lion-switch-button.test.js
View file

@ -1,14 +1,11 @@
import { expect, fixture, html } from '@open-wc/testing'; import { expect, fixture, html } from '@open-wc/testing';
import sinon from 'sinon'; import sinon from 'sinon';
import '../lion-switch-button.js'; import '../lion-switch-button.js';
describe('lion-switch-button', () => { describe('lion-switch-button', () => {
let el; let el;
beforeEach(async () => { beforeEach(async () => {
el = await fixture(html` el = await fixture(html`<lion-switch-button></lion-switch-button>`);
<lion-switch-button></lion-switch-button>
`);
}); });
it('should be focusable', () => { it('should be focusable', () => {

35
packages/switch/test/lion-switch.test.js
View file

@ -1,19 +1,14 @@
import { expect, fixture, html } from '@open-wc/testing'; import { expect, fixture, html } from '@open-wc/testing';
import '../lion-switch.js'; import '../lion-switch.js';
describe('lion-switch', () => { describe('lion-switch', () => {
it('should have default "input" element', async () => { it('should have default "input" element', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-switch></lion-switch>`);
<lion-switch></lion-switch>
`);
expect(Array.from(el.children).find(child => child.slot === 'input')).not.to.be.false; expect(Array.from(el.children).find(child => child.slot === 'input')).not.to.be.false;
}); });
it('should sync its "disabled" state to child button', async () => { it('should sync its "disabled" state to child button', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-switch disabled></lion-switch>`);
<lion-switch disabled></lion-switch>
`);
expect(el._inputNode.disabled).to.be.true; expect(el._inputNode.disabled).to.be.true;
expect(el._inputNode.hasAttribute('disabled')).to.be.true; expect(el._inputNode.hasAttribute('disabled')).to.be.true;
el.disabled = false; el.disabled = false;
@ -23,21 +18,13 @@ describe('lion-switch', () => {
}); });
it('is hidden when attribute hidden is true', async () => { it('is hidden when attribute hidden is true', async () => {
const el = await fixture( const el = await fixture(html`<lion-switch hidden></lion-switch>`);
html`
<lion-switch hidden></lion-switch>
`,
);
expect(el).not.to.be.displayed; expect(el).not.to.be.displayed;
}); });
it('should sync its "checked" state to child button', async () => { it('should sync its "checked" state to child button', async () => {
const uncheckedEl = await fixture(html` const uncheckedEl = await fixture(html`<lion-switch></lion-switch>`);
<lion-switch></lion-switch> const checkedEl = await fixture(html`<lion-switch checked></lion-switch>`);
`);
const checkedEl = await fixture(html`
<lion-switch checked></lion-switch>
`);
expect(uncheckedEl._inputNode.checked).to.be.false; expect(uncheckedEl._inputNode.checked).to.be.false;
expect(checkedEl._inputNode.checked).to.be.true; expect(checkedEl._inputNode.checked).to.be.true;
uncheckedEl.checked = true; uncheckedEl.checked = true;
@ -49,9 +36,7 @@ describe('lion-switch', () => {
}); });
it('should sync "checked" state received from child button', async () => { it('should sync "checked" state received from child button', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-switch></lion-switch>`);
<lion-switch></lion-switch>
`);
const button = el._inputNode; const button = el._inputNode;
expect(el.checked).to.be.false; expect(el.checked).to.be.false;
button.click(); button.click();
@ -61,9 +46,7 @@ describe('lion-switch', () => {
}); });
it('synchronizes modelValue to checked state and vice versa', async () => { it('synchronizes modelValue to checked state and vice versa', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-switch .choiceValue=${'foo'}></lion-switch>`);
<lion-switch .choiceValue=${'foo'}></lion-switch>
`);
expect(el.checked).to.be.false; expect(el.checked).to.be.false;
expect(el.modelValue).to.deep.equal({ expect(el.modelValue).to.deep.equal({
checked: false, checked: false,
@ -78,9 +61,7 @@ describe('lion-switch', () => {
}); });
it('is submitted by default', async () => { it('is submitted by default', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-switch></lion-switch>`);
<lion-switch></lion-switch>
`);
expect(el.submitted).to.be.true; expect(el.submitted).to.be.true;
}); });
}); });

7
packages/tabs/src/LionTabs.js
View file

@ -1,9 +1,6 @@
import { LitElement, css, html } from '@lion/core'; import { css, html, LitElement } from '@lion/core';
const uuid = () => const uuid = () => Math.random().toString(36).substr(2, 10);
Math.random()
.toString(36)
.substr(2, 10);
const setupPanel = ({ element, uid }) => { const setupPanel = ({ element, uid }) => {
element.setAttribute('id', `panel-${uid}`); element.setAttribute('id', `panel-${uid}`);

19
packages/textarea/test/lion-textarea.test.js
View file

@ -1,5 +1,4 @@
import { expect, fixture, html } from '@open-wc/testing'; import { expect, fixture, html } from '@open-wc/testing';
import '../lion-textarea.js'; import '../lion-textarea.js';
function hasBrowserResizeSupport() { function hasBrowserResizeSupport() {
@ -58,9 +57,7 @@ describe('<lion-textarea>', () => {
it('supports initial modelValue', async () => { it('supports initial modelValue', async () => {
const el = await fixture( const el = await fixture(
html` html`<lion-textarea .modelValue="${'From value attribute'}"></lion-textarea>`,
<lion-textarea .modelValue="${'From value attribute'}"></lion-textarea>
`,
); );
expect(el.querySelector('textarea').value).to.equal('From value attribute'); expect(el.querySelector('textarea').value).to.equal('From value attribute');
}); });
@ -101,11 +98,7 @@ describe('<lion-textarea>', () => {
}); });
it('stops growing after property "maxRows" is reached when there was an initial value', async () => { it('stops growing after property "maxRows" is reached when there was an initial value', async () => {
const el = await fixture( const el = await fixture(html`<lion-textarea .modelValue="${'1\n2\n3'}"></lion-textarea>`);
html`
<lion-textarea .modelValue="${'1\n2\n3'}"></lion-textarea>
`,
);
return [4, 5, 6, 7, 8].reduce(async (heightPromise, i) => { return [4, 5, 6, 7, 8].reduce(async (heightPromise, i) => {
const oldHeight = await heightPromise; const oldHeight = await heightPromise;
@ -126,18 +119,14 @@ describe('<lion-textarea>', () => {
}); });
it('stops shrinking after property "rows" is reached', async () => { it('stops shrinking after property "rows" is reached', async () => {
const el = await fixture(html` const el = await fixture(html`<lion-textarea rows="1" max-rows="3"></lion-textarea>`);
<lion-textarea rows="1" max-rows="3"></lion-textarea>
`);
expect(el.scrollHeight).to.be.equal(el.clientHeight); expect(el.scrollHeight).to.be.equal(el.clientHeight);
const oneRowHeight = el.clientHeight; const oneRowHeight = el.clientHeight;
el.rows = 3; el.rows = 3;
el.resizeTextarea(); el.resizeTextarea();
await el.updateComplete; await el.updateComplete;
expect(oneRowHeight) expect(oneRowHeight).to.be.below(el.clientHeight).and.to.be.below(el.scrollHeight);
.to.be.below(el.clientHeight)
.and.to.be.below(el.scrollHeight);
}); });
it('has an attribute that can be used to set the placeholder text of the textarea', async () => { it('has an attribute that can be used to set the placeholder text of the textarea', async () => {

10
packages/validate/src/LionValidationFeedback.js
View file

@ -42,11 +42,11 @@ export class LionValidationFeedback extends LitElement {
render() { render() {
return html` return html`
${this.feedbackData && ${this.feedbackData &&
this.feedbackData.map( this.feedbackData.map(
({ message, type, validator }) => html` ({ message, type, validator }) => html`
${this._messageTemplate({ message, type, validator })} ${this._messageTemplate({ message, type, validator })}
`, `,
)} )}
`; `;
} }
} }

11
packages/validate/test-suites/ValidateMixinFeedbackPart.suite.js
View file

@ -1,12 +1,11 @@
import { expect, fixture, html, unsafeStatic, defineCE } from '@open-wc/testing';
import sinon from 'sinon';
import { LitElement } from '@lion/core'; import { LitElement } from '@lion/core';
import { localize } from '@lion/localize'; import { localize } from '@lion/localize';
import { localizeTearDown } from '@lion/localize/test-helpers.js'; import { localizeTearDown } from '@lion/localize/test-helpers.js';
import { defineCE, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
import sinon from 'sinon';
import { DefaultSuccess, MinLength, Required, ValidateMixin, Validator } from '../index.js';
import { AlwaysInvalid } from '../test-helpers.js'; import { AlwaysInvalid } from '../test-helpers.js';
import { Validator, Required, MinLength, DefaultSuccess, ValidateMixin } from '../index.js';
export function runValidateMixinFeedbackPart() { export function runValidateMixinFeedbackPart() {
describe('Validity Feedback', () => { describe('Validity Feedback', () => {
let tagString; let tagString;
@ -241,9 +240,7 @@ export function runValidateMixinFeedbackPart() {
} }
render() { render() {
return html` return html`Custom for ${this.feedbackData[0].validator.constructor.name}`;
Custom for ${this.feedbackData[0].validator.constructor.name}
`;
} }
}, },
); );

26
packages/validate/test/lion-validation-feedback.test.js
View file

@ -1,16 +1,12 @@
/* eslint-disable no-unused-vars, no-param-reassign */ /* eslint-disable no-unused-vars, no-param-reassign */
import { expect, fixture, html } from '@open-wc/testing';
import sinon from 'sinon'; import sinon from 'sinon';
import { fixture, html, expect } from '@open-wc/testing';
import '../lion-validation-feedback.js'; import '../lion-validation-feedback.js';
import { AlwaysInvalid, AlwaysValid } from '../test-helpers.js'; import { AlwaysInvalid, AlwaysValid } from '../test-helpers.js';
describe('lion-validation-feedback', () => { describe('lion-validation-feedback', () => {
it('renders a validation message', async () => { it('renders a validation message', async () => {
const el = await fixture( const el = await fixture(html`<lion-validation-feedback></lion-validation-feedback>`);
html`
<lion-validation-feedback></lion-validation-feedback>
`,
);
expect(el).shadowDom.to.equal(''); expect(el).shadowDom.to.equal('');
el.feedbackData = [{ message: 'hello', type: 'error', validator: new AlwaysInvalid() }]; el.feedbackData = [{ message: 'hello', type: 'error', validator: new AlwaysInvalid() }];
await el.updateComplete; await el.updateComplete;
@ -18,11 +14,7 @@ describe('lion-validation-feedback', () => {
}); });
it('renders the validation type attribute', async () => { it('renders the validation type attribute', async () => {
const el = await fixture( const el = await fixture(html`<lion-validation-feedback></lion-validation-feedback>`);
html`
<lion-validation-feedback></lion-validation-feedback>
`,
);
el.feedbackData = [{ message: 'hello', type: 'error', validator: new AlwaysInvalid() }]; el.feedbackData = [{ message: 'hello', type: 'error', validator: new AlwaysInvalid() }];
await el.updateComplete; await el.updateComplete;
expect(el.getAttribute('type')).to.equal('error'); expect(el.getAttribute('type')).to.equal('error');
@ -33,11 +25,7 @@ describe('lion-validation-feedback', () => {
}); });
it('success message clears after 3s', async () => { it('success message clears after 3s', async () => {
const el = await fixture( const el = await fixture(html`<lion-validation-feedback></lion-validation-feedback>`);
html`
<lion-validation-feedback></lion-validation-feedback>
`,
);
const clock = sinon.useFakeTimers(); const clock = sinon.useFakeTimers();
@ -57,11 +45,7 @@ describe('lion-validation-feedback', () => {
}); });
it('does not clear error messages', async () => { it('does not clear error messages', async () => {
const el = await fixture( const el = await fixture(html`<lion-validation-feedback></lion-validation-feedback>`);
html`
<lion-validation-feedback></lion-validation-feedback>
`,
);
const clock = sinon.useFakeTimers(); const clock = sinon.useFakeTimers();