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 {
static get styles() {
@ -38,8 +38,6 @@ export class LeaTab extends LitElement {
}
render() {
return html`
<slot></slot>
`;
return html`<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>
${this._beforeTemplate()}
${browserDetection.isIE11
? html`
<div id="${this._buttonId}"><slot></slot></div>
`
: html`
<slot></slot>
`}
? html`<div id="${this._buttonId}"><slot></slot></div>`
: html`<slot></slot>`}
${this._afterTemplate()}
<slot name="_button"></slot>
</div>
@ -165,9 +161,7 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
this.__setupDelegationInConstructor();
if (browserDetection.isIE11) {
this._buttonId = `button-${Math.random()
.toString(36)
.substr(2, 10)}`;
this._buttonId = `button-${Math.random().toString(36).substr(2, 10)}`;
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', () => {
it('is fired once', async () => {
const clickSpy = sinon.spy();
const el = await fixture(
html`
<lion-button @click="${clickSpy}">foo</lion-button>
`,
);
const el = await fixture(html`<lion-button @click="${clickSpy}">foo</lion-button>`);
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 '@lion/core/test-helpers/keyboardEventShimIE.js';
import { localize } from '@lion/localize';
import { localizeTearDown } from '@lion/localize/test-helpers.js';
import { CalendarObject, DayObject } from '../test-helpers.js';
import { isSameDate } from '../src/utils/isSameDate.js';
import { expect, fixture } from '@open-wc/testing';
import sinon from 'sinon';
import '../lion-calendar.js';
import { isSameDate } from '../src/utils/isSameDate.js';
import { CalendarObject, DayObject } from '../test-helpers.js';
describe('<lion-calendar>', () => {
beforeEach(() => {
@ -18,11 +15,7 @@ describe('<lion-calendar>', () => {
describe('Structure', () => {
it('implements BEM structure', async () => {
const el = await fixture(
html`
<lion-calendar></lion-calendar>
`,
);
const el = await fixture(html`<lion-calendar></lion-calendar>`);
expect(el.shadowRoot.querySelector('.calendar')).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 () => {
const clock = sinon.useFakeTimers({ now: new Date('2000/12/01').getTime() });
const el = await fixture(
html`
<lion-calendar></lion-calendar>
`,
);
const el = await fixture(html`<lion-calendar></lion-calendar>`);
expect(el.shadowRoot.querySelector('.calendar__month-heading')).dom.to.equal(`
<h2
@ -56,9 +45,7 @@ describe('<lion-calendar>', () => {
it('has previous month button', async () => {
const el = await fixture(
html`
<lion-calendar .centralDate=${new Date('2019/11/20')}></lion-calendar>
`,
html`<lion-calendar .centralDate=${new Date('2019/11/20')}></lion-calendar>`,
);
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>
@ -67,9 +54,7 @@ describe('<lion-calendar>', () => {
it('has next month button', async () => {
const el = await fixture(
html`
<lion-calendar .centralDate=${new Date('2019/11/20')}></lion-calendar>
`,
html`<lion-calendar .centralDate=${new Date('2019/11/20')}></lion-calendar>`,
);
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>
@ -90,9 +75,7 @@ describe('<lion-calendar>', () => {
it('sets "centralDate" to today by default', async () => {
const clock = sinon.useFakeTimers({ now: new Date('2013/03/15').getTime() });
const el = await fixture(html`
<lion-calendar></lion-calendar>
`);
const el = await fixture(html`<lion-calendar></lion-calendar>`);
const elObj = new CalendarObject(el);
expect(isSameDate(el.centralDate, new Date())).to.be.true;
expect(elObj.activeMonthAndYear).to.equal('March 2013');
@ -172,9 +155,7 @@ describe('<lion-calendar>', () => {
});
it('does not set "selectedDate" by default', async () => {
const el = await fixture(html`
<lion-calendar></lion-calendar>
`);
const el = await fixture(html`<lion-calendar></lion-calendar>`);
const elObj = new CalendarObject(el);
const today = new Date();
expect(el.selectedDate).to.equal(undefined);
@ -236,9 +217,7 @@ describe('<lion-calendar>', () => {
});
it('has a focusDate() method to focus an arbitrary date', async () => {
const el = await fixture(html`
<lion-calendar></lion-calendar>
`);
const el = await fixture(html`<lion-calendar></lion-calendar>`);
const elObj = new CalendarObject(el);
await el.focusDate(new Date('2016/06/10'));
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;
}
const el = await fixture(
html`
<lion-calendar></lion-calendar>
`,
);
const el = await fixture(html`<lion-calendar></lion-calendar>`);
// The central date will be today's date: it's the date all other
// dates in the month view will be derived from.
expect(isNormalizedDate(el.centralDate)).to.be.true;
@ -406,9 +381,7 @@ describe('<lion-calendar>', () => {
describe('Title', () => {
it('contains secondary title displaying the current month and year in focus', async () => {
const el = await fixture(
html`
<lion-calendar .selectedDate="${new Date('2000/12/12')}"></lion-calendar>
`,
html`<lion-calendar .selectedDate="${new Date('2000/12/12')}"></lion-calendar>`,
);
const elObj = new CalendarObject(el);
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 () => {
const el = await fixture(
html`
<lion-calendar .centralDate="${new Date('2000/12/12')}"></lion-calendar>
`,
html`<lion-calendar .centralDate="${new Date('2000/12/12')}"></lion-calendar>`,
);
const elObj = new CalendarObject(el);
el.centralDate = new Date('1999/10/12');
@ -428,13 +399,7 @@ describe('<lion-calendar>', () => {
describe('Accessibility', () => {
it('has aria-atomic="true" set on the secondary title', async () => {
const elObj = new CalendarObject(
await fixture(
html`
<lion-calendar></lion-calendar>
`,
),
);
const elObj = new CalendarObject(await fixture(html`<lion-calendar></lion-calendar>`));
expect(elObj.monthHeadingEl.getAttribute('aria-atomic')).to.equal('true');
});
});
@ -443,9 +408,7 @@ describe('<lion-calendar>', () => {
describe('Navigation', () => {
it('has a button for navigation to previous month', async () => {
const el = await fixture(
html`
<lion-calendar .selectedDate="${new Date('2001/01/01')}"></lion-calendar>
`,
html`<lion-calendar .selectedDate="${new Date('2001/01/01')}"></lion-calendar>`,
);
const elObj = new CalendarObject(el);
expect(elObj.previousMonthButtonEl).not.to.equal(null);
@ -462,9 +425,7 @@ describe('<lion-calendar>', () => {
it('has a button for navigation to next month', async () => {
const el = await fixture(
html`
<lion-calendar .selectedDate="${new Date('2000/12/12')}"></lion-calendar>
`,
html`<lion-calendar .selectedDate="${new Date('2000/12/12')}"></lion-calendar>`,
);
const elObj = new CalendarObject(el);
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 () => {
const clock = sinon.useFakeTimers({ now: new Date('2000/12/15').getTime() });
const el = await fixture(html`
<lion-calendar></lion-calendar>
`);
const el = await fixture(html`<lion-calendar></lion-calendar>`);
const elObj = new CalendarObject(el);
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 () => {
const clock = sinon.useFakeTimers({ now: new Date('2000/12/15').getTime() });
const el = await fixture(html`
<lion-calendar></lion-calendar>
`);
const el = await fixture(html`<lion-calendar></lion-calendar>`);
const elObj = new CalendarObject(el);
expect(elObj.activeMonthAndYear).to.equal('December 2000');
@ -601,9 +558,7 @@ describe('<lion-calendar>', () => {
describe('Calendar body (months view)', () => {
it('renders the days of the week as table headers', async () => {
const el = await fixture(
html`
<lion-calendar .selectedDate="${new Date('2000/12/12')}"></lion-calendar>
`,
html`<lion-calendar .selectedDate="${new Date('2000/12/12')}"></lion-calendar>`,
);
const elObj = new CalendarObject(el);
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 () => {
const clock = sinon.useFakeTimers({ now: new Date('2000/12/15').getTime() });
const el = await fixture(
html`
<lion-calendar></lion-calendar>
`,
);
const el = await fixture(html`<lion-calendar></lion-calendar>`);
const elObj = new CalendarObject(el);
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 () => {
const el = await fixture(
html`
<lion-calendar .selectedDate="${new Date('2000/12/12')}"></lion-calendar>
`,
html`<lion-calendar .selectedDate="${new Date('2000/12/12')}"></lion-calendar>`,
);
const elObj = new CalendarObject(el);
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 () => {
const clock = sinon.useFakeTimers({ now: new Date('2000/12/15').getTime() });
const el = await fixture(html`
<lion-calendar></lion-calendar>
`);
const el = await fixture(html`<lion-calendar></lion-calendar>`);
const elObj = new CalendarObject(el);
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
// next/previous month.
it('has role="application" to activate keyboard navigation', async () => {
const elObj = new CalendarObject(
await fixture(
html`
<lion-calendar></lion-calendar>
`,
),
);
const elObj = new CalendarObject(await fixture(html`<lion-calendar></lion-calendar>`));
expect(elObj.rootEl.getAttribute('role')).to.equal('application');
});
it(`renders the calendar as a table element with role="grid", aria-readonly="true" and
a caption (month + year)`, async () => {
const elObj = new CalendarObject(
await fixture(
html`
<lion-calendar></lion-calendar>
`,
),
);
const elObj = new CalendarObject(await fixture(html`<lion-calendar></lion-calendar>`));
expect(elObj.gridEl.getAttribute('role')).to.equal('grid');
expect(elObj.gridEl.getAttribute('aria-readonly')).to.equal('true');
});
it('adds aria-labels to the weekday table headers', async () => {
const elObj = new CalendarObject(
await fixture(
html`
<lion-calendar></lion-calendar>
`,
),
);
const elObj = new CalendarObject(await fixture(html`<lion-calendar></lion-calendar>`));
expect(elObj.weekdayHeaderEls.map(h => h.getAttribute('aria-label'))).to.eql([
'Sunday',
'Monday',
@ -1064,13 +993,7 @@ describe('<lion-calendar>', () => {
});
it('renders each day as a button inside a table cell', async () => {
const elObj = new CalendarObject(
await fixture(
html`
<lion-calendar></lion-calendar>
`,
),
);
const elObj = new CalendarObject(await fixture(html`<lion-calendar></lion-calendar>`));
const hasBtn = d => d.el.tagName === 'BUTTON';
expect(elObj.checkForAllDayObjs(hasBtn)).to.equal(true);
});
@ -1099,13 +1022,7 @@ describe('<lion-calendar>', () => {
});
it('sets aria-current="date" to todays button', async () => {
const elObj = new CalendarObject(
await fixture(
html`
<lion-calendar></lion-calendar>
`,
),
);
const elObj = new CalendarObject(await fixture(html`<lion-calendar></lion-calendar>`));
const hasAriaCurrent = d => d.buttonEl.getAttribute('aria-current') === 'date';
const monthday = new Date().getDate();
expect(elObj.checkForAllDayObjs(hasAriaCurrent, [monthday])).to.equal(true);
@ -1247,11 +1164,7 @@ describe('<lion-calendar>', () => {
describe('Accessibility', () => {
it('is accessible', async () => {
const el = await fixture(
html`
<lion-calendar></lion-calendar>
`,
);
const el = await fixture(html`<lion-calendar></lion-calendar>`);
await expect(el).to.be.accessible();
});
@ -1259,9 +1172,7 @@ describe('<lion-calendar>', () => {
const today = new Date();
const selectedDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
const el = await fixture(
html`
<lion-calendar .selectedDate="${selectedDate}"></lion-calendar>
`,
html`<lion-calendar .selectedDate="${selectedDate}"></lion-calendar>`,
);
await expect(el).to.be.accessible();
});
@ -1278,11 +1189,7 @@ describe('<lion-calendar>', () => {
});
it('is hidden when attribute hidden is true', async () => {
const el = await fixture(
html`
<lion-calendar hidden></lion-calendar>
`,
);
const el = await fixture(html`<lion-calendar hidden></lion-calendar>`);
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 { expect, fixture, html } from '@open-wc/testing';
import '../lion-checkbox-group.js';
import '../lion-checkbox.js';
@ -56,11 +55,7 @@ describe('<lion-checkbox-group>', () => {
});
it("should throw exception if name doesn't end in []", async () => {
const el = await fixture(
html`
<lion-checkbox-group name="woof[]"></lion-checkbox-group>
`,
);
const el = await fixture(html`<lion-checkbox-group name="woof[]"></lion-checkbox-group>`);
el.name = 'woof';
let err;
try {

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

@ -1,10 +1,10 @@
import { html, LitElement } from '@lion/core';
import { formFixture as fixture } from '@lion/field/test-helpers.js';
import { FormGroupMixin } from '@lion/fieldset';
import '@lion/fieldset/lion-fieldset.js';
import { LionInput } from '@lion/input';
import { Required } from '@lion/validate';
import { expect, nextFrame } from '@open-wc/testing';
import { formFixture as fixture } from '@lion/field/test-helpers.js';
import { ChoiceGroupMixin } from '../src/ChoiceGroupMixin.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 () => {
const el = await fixture(html`
<choice-input hidden></choice-input>
`);
const el = await fixture(html`<choice-input hidden></choice-input>`);
expect(el).not.to.be.displayed;
});
it('has choiceValue', async () => {
const el = await fixture(html`
<choice-input .choiceValue=${'foo'}></choice-input>
`);
const el = await fixture(html`<choice-input .choiceValue=${'foo'}></choice-input>`);
expect(el.choiceValue).to.equal('foo');
expect(el.modelValue).to.deep.equal({
@ -38,9 +34,7 @@ describe('ChoiceInputMixin', () => {
it('can handle complex data via choiceValue', async () => {
const date = new Date(2018, 11, 24, 10, 33, 30, 0);
const el = await fixture(html`
<choice-input .choiceValue=${date}></choice-input>
`);
const el = await fixture(html`<choice-input .choiceValue=${date}></choice-input>`);
expect(el.choiceValue).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 () => {
const el = await fixture(html`
<choice-input .choiceValue=${'foo'}></choice-input>
`);
const el = await fixture(html`<choice-input .choiceValue=${'foo'}></choice-input>`);
expect(el.checked).to.be.false;
expect(el.modelValue).to.deep.equal({
checked: false,
@ -153,9 +145,7 @@ describe('ChoiceInputMixin', () => {
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
which can be quite common for these type of connected data */
const el = await fixture(html`
<choice-input .choiceValue=${'foo'}></choice-input>
`);
const el = await fixture(html`<choice-input .choiceValue=${'foo'}></choice-input>`);
expect(el.checked).to.be.false;
const spyModelCheckedToChecked = sinon.spy(el, '__syncModelCheckedToChecked');
@ -224,9 +214,7 @@ describe('ChoiceInputMixin', () => {
describe('Format/parse/serialize loop', () => {
it('creates a modelValue object like { checked: true, value: foo } on init', async () => {
const el = await fixture(html`
<choice-input .choiceValue=${'foo'}></choice-input>
`);
const el = await fixture(html`<choice-input .choiceValue=${'foo'}></choice-input>`);
expect(el.modelValue).deep.equal({ value: 'foo', checked: false });
const elChecked = await fixture(html`
@ -248,9 +236,7 @@ describe('ChoiceInputMixin', () => {
describe('Interaction states', () => {
it('is considered prefilled when checked and not considered prefilled when unchecked', async () => {
const el = await fixture(html`
<choice-input .checked=${true}></choice-input>
`);
const el = await fixture(html`<choice-input .checked=${true}></choice-input>`);
expect(el.prefilled).equal(true, 'checked element not considered prefilled');
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', {
// eslint-disable-next-line object-shorthand, func-names
get: function() {
get: function () {
const key = descriptor.get.call(this);
// 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 { LitElement } from '../index.js';
import { DelegateMixin } from '../src/DelegateMixin.js';
describe('DelegateMixin', () => {
@ -21,9 +20,7 @@ describe('DelegateMixin', () => {
}
render() {
return html`
<button id="button1">with delegation</button>
`;
return html`<button id="button1">with delegation</button>`;
}
},
);
@ -46,9 +43,7 @@ describe('DelegateMixin', () => {
}
render() {
return html`
<button id="button1">with delegation</button>
`;
return html`<button id="button1">with delegation</button>`;
}
},
);
@ -107,9 +102,7 @@ describe('DelegateMixin', () => {
}
render() {
return html`
<button id="button1">with delegation</button>
`;
return html`<button id="button1">with delegation</button>`;
}
foo() {
@ -136,9 +129,7 @@ describe('DelegateMixin', () => {
}
render() {
return html`
<button id="button1">with delegation</button>
`;
return html`<button id="button1">with delegation</button>`;
}
},
);
@ -173,9 +164,7 @@ describe('DelegateMixin', () => {
}
render() {
return html`
<delegate-argument-sub id="sub"></delegate-argument-sub>
`;
return html`<delegate-argument-sub id="sub"></delegate-argument-sub>`;
}
},
);
@ -199,9 +188,7 @@ describe('DelegateMixin', () => {
}
render() {
return html`
<button id="button1">with delegation</button>
`;
return html`<button id="button1">with delegation</button>`;
}
},
);
@ -224,9 +211,7 @@ describe('DelegateMixin', () => {
}
render() {
return html`
<button id="button1">with delegation</button>
`;
return html`<button id="button1">with delegation</button>`;
}
},
);
@ -252,9 +237,7 @@ describe('DelegateMixin', () => {
}
render() {
return html`
<button id="button1">with delegation</button>
`;
return html`<button id="button1">with delegation</button>`;
}
},
);
@ -277,9 +260,7 @@ describe('DelegateMixin', () => {
}
render() {
return html`
<button id="button1">with delegation</button>
`;
return html`<button id="button1">with delegation</button>`;
}
},
);
@ -300,9 +281,7 @@ describe('DelegateMixin', () => {
}
render() {
return html`
<button id="button1">with delegation</button>
`;
return html`<button id="button1">with delegation</button>`;
}
},
);
@ -404,9 +383,7 @@ describe('DelegateMixin', () => {
}
render() {
return html`
<div></div>
`;
return html`<div></div>`;
}
},
);
@ -431,9 +408,7 @@ describe('DelegateMixin', () => {
}
render() {
return html`
<div></div>
`;
return html`<div></div>`;
}
},
);

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

@ -1,5 +1,4 @@
import { expect, fixture, html } from '@open-wc/testing';
import { LitElement } from '../index.js';
import { DisabledMixin } from '../src/DisabledMixin.js';
@ -10,9 +9,7 @@ describe('DisabledMixin', () => {
});
it('reflects disabled to attribute', async () => {
const el = await fixture(html`
<can-be-disabled></can-be-disabled>
`);
const el = await fixture(html`<can-be-disabled></can-be-disabled>`);
expect(el.hasAttribute('disabled')).to.be.false;
el.disabled = true;
await el.updateComplete;
@ -20,9 +17,7 @@ describe('DisabledMixin', () => {
});
it('can be requested to be disabled', async () => {
const el = await fixture(html`
<can-be-disabled></can-be-disabled>
`);
const el = await fixture(html`<can-be-disabled></can-be-disabled>`);
el.makeRequestToBeDisabled();
expect(el.disabled).to.be.true;
await el.updateComplete;
@ -30,9 +25,7 @@ describe('DisabledMixin', () => {
});
it('will not allow to become enabled after makeRequestToBeDisabled()', async () => {
const el = await fixture(html`
<can-be-disabled></can-be-disabled>
`);
const el = await fixture(html`<can-be-disabled></can-be-disabled>`);
el.makeRequestToBeDisabled();
expect(el.disabled).to.be.true;
@ -41,18 +34,14 @@ describe('DisabledMixin', () => {
});
it('will stay disabled after retractRequestToBeDisabled() if it was disabled before', async () => {
const el = await fixture(html`
<can-be-disabled disabled></can-be-disabled>
`);
const el = await fixture(html`<can-be-disabled disabled></can-be-disabled>`);
el.makeRequestToBeDisabled();
el.retractRequestToBeDisabled();
expect(el.disabled).to.be.true;
});
it('will become enabled after retractRequestToBeDisabled() if it was enabled before', async () => {
const el = await fixture(html`
<can-be-disabled></can-be-disabled>
`);
const el = await fixture(html`<can-be-disabled></can-be-disabled>`);
el.makeRequestToBeDisabled();
expect(el.disabled).to.be.true;
el.retractRequestToBeDisabled();
@ -60,9 +49,7 @@ describe('DisabledMixin', () => {
});
it('may allow multiple calls to makeRequestToBeDisabled()', async () => {
const el = await fixture(html`
<can-be-disabled></can-be-disabled>
`);
const el = await fixture(html`<can-be-disabled></can-be-disabled>`);
el.makeRequestToBeDisabled();
el.makeRequestToBeDisabled();
el.retractRequestToBeDisabled();
@ -70,9 +57,7 @@ describe('DisabledMixin', () => {
});
it('will restore last state after retractRequestToBeDisabled()', async () => {
const el = await fixture(html`
<can-be-disabled></can-be-disabled>
`);
const el = await fixture(html`<can-be-disabled></can-be-disabled>`);
el.makeRequestToBeDisabled();
el.disabled = true;
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 { UpdateStylesMixin } from '../src/UpdateStylesMixin.js';
describe('UpdateStylesMixin', () => {
@ -24,9 +23,7 @@ describe('UpdateStylesMixin', () => {
}
render() {
return html`
<h1 id="header">hey</h1>
`;
return html`<h1 id="header">hey</h1>`;
}
},
);
@ -65,9 +62,7 @@ describe('UpdateStylesMixin', () => {
}
render() {
return html`
<h1 id="header">hey</h1>
`;
return html`<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
*/
function uuid(prefix) {
return `${prefix}-${Math.random()
.toString(36)
.substr(2, 10)}`;
return `${prefix}-${Math.random().toString(36).substr(2, 10)}`;
}
/**
@ -304,15 +302,11 @@ export const FormControlMixin = dedupeMixin(
}
_groupOneTemplate() {
return html`
${this._labelTemplate()} ${this._helpTextTemplate()}
`;
return html` ${this._labelTemplate()} ${this._helpTextTemplate()} `;
}
_groupTwoTemplate() {
return html`
${this._inputGroupTemplate()} ${this._feedbackTemplate()}
`;
return html` ${this._inputGroupTemplate()} ${this._feedbackTemplate()} `;
}
// 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() {
return html`
<slot></slot>
`;
return html`<slot></slot>`;
}
},
);
@ -245,9 +243,7 @@ export const runRegistrationSuite = customConfig => {
<${childTag}></${childTag}>
</${portalTag}>
`);
const otherPlace = await fixture(html`
<div></div>
`);
const otherPlace = await fixture(html`<div></div>`);
otherPlace.appendChild(portal);
const newField = await fixture(html`
<${childTag}></${childTag}>
@ -271,9 +267,7 @@ export const runRegistrationSuite = customConfig => {
}
render() {
return html`
<slot></slot>
`;
return html`<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 { 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';
function mimicUserInput(formControl, newViewValue) {
@ -62,9 +61,7 @@ export function runFormatMixinSuite(customConfig) {
cfg.tagString = defineCE(
class extends FormatMixin(LitElement) {
render() {
return html`
<slot name="input"></slot>
`;
return html`<slot name="input"></slot>`;
}
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 { defineCE, expect, fixture, html, oneEvent, unsafeStatic } from '@open-wc/testing';
import { FocusMixin } from '../src/FocusMixin.js';
describe('FocusMixin', () => {
@ -10,9 +9,7 @@ describe('FocusMixin', () => {
const tagString = defineCE(
class extends FocusMixin(LitElement) {
render() {
return html`
<slot name="input"></slot>
`;
return html`<slot name="input"></slot>`;
}
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 { UpdatingElement, LitElement } from '@lion/core';
import { runRegistrationSuite } from '../test-suites/FormRegistrationMixins.suite.js';
runRegistrationSuite({
@ -11,9 +11,7 @@ runRegistrationSuite({
suffix: 'with LitElement, using shadow dom',
baseElement: class ShadowElement extends LitElement {
render() {
return html`
<slot></slot>
`;
return html`<slot></slot>`;
}
},
});

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

@ -1,5 +1,6 @@
import { LionField } from '@lion/field';
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 { IsNumber, Validator } from '@lion/validate';
import {
@ -11,7 +12,6 @@ import {
triggerFocusFor,
unsafeStatic,
} from '@open-wc/testing';
import { formFixture as fixture } from '@lion/field/test-helpers.js';
import sinon from 'sinon';
import '../lion-fieldset.js';
@ -461,9 +461,7 @@ describe('<lion-fieldset>', () => {
await triggerFocusFor(
fieldset.formElements['hobbies[]'][fieldset.formElements['gender[]'].length - 1]._inputNode,
);
const el = await fixture(html`
<button></button>
`);
const el = await fixture(html`<button></button>`);
el.focus();
expect(fieldset.touched).to.be.true;
@ -540,9 +538,7 @@ describe('<lion-fieldset>', () => {
`);
await nextFrame();
const outside = await fixture(html`
<button>outside</button>
`);
const outside = await fixture(html`<button>outside</button>`);
outside.click();
expect(el.touched, 'unfocused fieldset should stay untouched').to.be.false;
@ -569,9 +565,7 @@ describe('<lion-fieldset>', () => {
}
}
const outSideButton = await fixture(html`
<button>outside</button>
`);
const outSideButton = await fixture(html`<button>outside</button>`);
const el = await fixture(html`
<${tag} .validators=${[new Input1IsTen()]}>
<${childTag} name="input1" .validators=${[new IsNumber()]}></${childTag}>
@ -599,9 +593,7 @@ describe('<lion-fieldset>', () => {
return hasError;
}
}
const outSideButton = await fixture(html`
<button>outside</button>
`);
const outSideButton = await fixture(html`<button>outside</button>`);
const el = await fixture(html`
<${tag} .validators=${[new Input1IsTen()]}>
<${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 { LionFieldset } from '@lion/fieldset';
@ -84,19 +84,11 @@ export class HelperOutput extends LitElement {
Interaction States
</caption>
<tr>
${this.show.map(
prop => html`
<th>${prop}</th>
`,
)}
${this.show.map(prop => html`<th>${prop}</th>`)}
</tr>
<tr></tr>
<tr>
${this.show.map(
prop => html`
<td>${this.__renderProp(field[prop])}</td>
`,
)}
${this.show.map(prop => html`<td>${this.__renderProp(field[prop])}</td>`)}
</tr>
</table>
`;

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

@ -4,11 +4,7 @@ import './helpers/umbrella-form.js';
// Test umbrella form
describe('Form Integrations', () => {
it('".serializedValue" returns all non disabled fields based on form structure', async () => {
const el = await fixture(
html`
<umbrella-form></umbrella-form>
`,
);
const el = await fixture(html`<umbrella-form></umbrella-form>`);
const formEl = el._lionFormNode;
expect(formEl.serializedValue).to.eql({
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 '@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
import sinon from 'sinon';
import '@lion/input/lion-input.js';
import '@lion/fieldset/lion-fieldset.js';
describe('model value event', () => {
describe('form path', () => {
it('should be property', async () => {
const spy = sinon.spy();
const input = await fixture(html`
<lion-input></lion-input>
`);
const input = await fixture(html`<lion-input></lion-input>`);
input.addEventListener('model-value-changed', spy);
input.modelValue = 'woof';
const e = spy.firstCall.args[0];
@ -22,9 +18,7 @@ describe('model value event', () => {
it('should contain dispatching field', async () => {
const spy = sinon.spy();
const input = await fixture(html`
<lion-input></lion-input>
`);
const input = await fixture(html`<lion-input></lion-input>`);
input.addEventListener('model-value-changed', spy);
input.modelValue = 'foo';
const e = spy.firstCall.args[0];
@ -90,11 +84,7 @@ describe('model value event', () => {
let e;
beforeEach(async () => {
const spy = sinon.spy();
const el = await fixture(
html`
<lion-input></lion-input>
`,
);
const el = await fixture(html`<lion-input></lion-input>`);
el.addEventListener('model-value-changed', spy);
el.modelValue = 'foo';
// 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', () => {
it('has a default title "Action Logger"', async () => {
const el = await fixture(html`
<sb-action-logger></sb-action-logger>
`);
const el = await fixture(html`<sb-action-logger></sb-action-logger>`);
expect(el.shadowRoot.querySelector('.header__title').innerText).to.equal('Action Logger');
});
@ -24,9 +22,7 @@ describe('sb-action-logger', () => {
describe('Logger behavior', () => {
it('is possible to send something to the logger using the log method', async () => {
const el = await fixture(html`
<sb-action-logger></sb-action-logger>
`);
const el = await fixture(html`<sb-action-logger></sb-action-logger>`);
el.log('Hello, World!');
@ -37,9 +33,7 @@ describe('sb-action-logger', () => {
});
it('appends new logs to the logger', async () => {
const el = await fixture(html`
<sb-action-logger></sb-action-logger>
`);
const el = await fixture(html`<sb-action-logger></sb-action-logger>`);
el.log('Hello, World!');
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 () => {
const el = await fixture(html`
<sb-action-logger></sb-action-logger>
`);
const el = await fixture(html`<sb-action-logger></sb-action-logger>`);
const cueEl = el.shadowRoot.querySelector('.header__log-cue-overlay');
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 () => {
const el = await fixture(html`
<sb-action-logger></sb-action-logger>
`);
const el = await fixture(html`<sb-action-logger></sb-action-logger>`);
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 () => {
const el = await fixture(html`
<sb-action-logger></sb-action-logger>
`);
const el = await fixture(html`<sb-action-logger></sb-action-logger>`);
el.log('Hello, World!');
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 () => {
const el = await fixture(html`
<sb-action-logger></sb-action-logger>
`);
const el = await fixture(html`<sb-action-logger></sb-action-logger>`);
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 () => {
const el = await fixture(html`
<sb-action-logger simple></sb-action-logger>
`);
const el = await fixture(html`<sb-action-logger simple></sb-action-logger>`);
el.log('Hello, World!');
const loggerEl = el.shadowRoot.querySelector('.logger');
@ -138,9 +122,7 @@ describe('sb-action-logger', () => {
describe('Potential Additional Features', () => {
it.skip('fires a sb-action-logged event when something is logged to the logger', async () => {
const el = await fixture(html`
<sb-action-logger></sb-action-logger>
`);
const el = await fixture(html`<sb-action-logger></sb-action-logger>`);
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';
function unwrapSvg(wrappedSvgObject) {
@ -107,9 +107,7 @@ export class LionIcon extends LitElement {
}
render() {
return html`
<slot></slot>
`;
return html`<slot></slot>`;
}
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 { icons } from '../src/icons.js';
import heartSvg from './heart.svg.js';
import hammerSvg from './hammer.svg.js';
import { aTimeout, expect, fixture, fixtureSync, html } from '@open-wc/testing';
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', () => {
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 el = await fixture(
html`
<lion-icon .svg=${iconFunction}></lion-icon>
`,
);
const el = await fixture(html`<lion-icon .svg=${iconFunction}></lion-icon>`);
expect(el.children[0].getAttribute('data-test-id')).to.equal('svg');
});
it('is hidden when attribute hidden is true', async () => {
const iconFunction = tag => tag`<svg data-test-id="svg"></svg>`;
const el = await fixture(
html`
<lion-icon .svg=${iconFunction} hidden></lion-icon>
`,
);
const el = await fixture(html`<lion-icon .svg=${iconFunction} hidden></lion-icon>`);
expect(el).not.to.be.displayed;
});
it('supports svg icon as a lit-html template', async () => {
const icon = html`
<svg data-test-id="svg"></svg>
`;
const el = await fixture(
html`
<lion-icon .svg=${icon}></lion-icon>
`,
);
const icon = html`<svg data-test-id="svg"></svg>`;
const el = await fixture(html`<lion-icon .svg=${icon}></lion-icon>`);
expect(el.children[0].getAttribute('data-test-id')).to.equal('svg');
});
@ -43,27 +28,15 @@ describe('lion-icon', () => {
const errorMessage =
'icon accepts only lit-html templates or functions like "tag => tag`<svg>...</svg>`"';
expect(() => {
fixtureSync(
html`
<lion-icon .svg=${'<svg></svg>'}></lion-icon>
`,
);
fixtureSync(html`<lion-icon .svg=${'<svg></svg>'}></lion-icon>`);
}).to.throw(Error, errorMessage);
expect(() => {
fixtureSync(
html`
<lion-icon .svg=${() => '<svg></svg>'}></lion-icon>
`,
);
fixtureSync(html`<lion-icon .svg=${() => '<svg></svg>'}></lion-icon>`);
}).to.throw(Error, errorMessage);
});
it('displays an svg icon with an aria label attribute', async () => {
const el = await fixture(
html`
<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>
`,
);
const el = await fixture(html`<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>`);
expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-heart');
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 () => {
const el = await fixture(
html`
<lion-icon .svg=${hammerSvg}></lion-icon>
`,
);
const el = await fixture(html`<lion-icon .svg=${hammerSvg}></lion-icon>`);
expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-hammer');
expect(el.getAttribute('aria-hidden')).to.equal('true');
expect(el.hasAttribute('aria-label')).to.equal(false);
});
it('is accessible with an aria label', async () => {
const el = await fixture(
html`
<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>
`,
);
const el = await fixture(html`<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>`);
await expect(el).to.be.accessible();
});
it('is accessible without an aria label', async () => {
const el = await fixture(
html`
<lion-icon .svg=${heartSvg}></lion-icon>
`,
);
const el = await fixture(html`<lion-icon .svg=${heartSvg}></lion-icon>`);
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 () => {
const icon = await fixture(
html`
<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>
`,
);
const icon = await fixture(html`<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>`);
expect(icon.children[0].getAttribute('focusable')).to.equal('false');
});
it('can change the displayed icon', async () => {
const el = await fixture(
html`
<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>
`,
);
const el = await fixture(html`<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>`);
expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-heart');
el.svg = hammerSvg;
await el.updateComplete;
@ -122,16 +75,8 @@ describe('lion-icon', () => {
});
it('can add or remove the aria-label attribute', async () => {
const el = await fixture(
html`
<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>
`,
);
const elHammer = await fixture(
html`
<lion-icon .svg=${hammerSvg}></lion-icon>
`,
);
const el = await fixture(html`<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>`);
const elHammer = await fixture(html`<lion-icon .svg=${hammerSvg}></lion-icon>`);
// verify initial values
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 () => {
const el = await fixture(
html`
<lion-icon .svg=${heartSvg}></lion-icon>
`,
);
const el = await fixture(html`<lion-icon .svg=${heartSvg}></lion-icon>`);
await el.updateComplete;
el.svg = undefined;
await el.updateComplete;
@ -194,11 +135,7 @@ describe('lion-icon', () => {
});
it('does not render "null" if changed from valid input to null', async () => {
const el = await fixture(
html`
<lion-icon .svg=${heartSvg}></lion-icon>
`,
);
const el = await fixture(html`<lion-icon .svg=${heartSvg}></lion-icon>`);
await el.updateComplete;
el.svg = null;
await el.updateComplete;
@ -208,11 +145,7 @@ describe('lion-icon', () => {
it('supports icons using an icon id', async () => {
try {
icons.addIconResolver('foo', () => heartSvg);
const el = await fixture(
html`
<lion-icon icon-id="foo:lorem:ipsum"></lion-icon>
`,
);
const el = await fixture(html`<lion-icon icon-id="foo:lorem:ipsum"></lion-icon>`);
expect(el.children[0].dataset.testId).to.equal('svg-heart');
} finally {
@ -223,11 +156,7 @@ describe('lion-icon', () => {
it('clears rendered icon when icon id is removed', async () => {
try {
icons.addIconResolver('foo', () => heartSvg);
const el = await fixture(
html`
<lion-icon icon-id="foo:lorem:ipsum"></lion-icon>
`,
);
const el = await fixture(html`<lion-icon icon-id="foo:lorem:ipsum"></lion-icon>`);
await el.updateComplete;
el.removeAttribute('icon-id');
await el.updateComplete;
@ -247,11 +176,7 @@ describe('lion-icon', () => {
'bar',
() => new Promise(resolve => setTimeout(() => resolve(hammerSvg), 4)),
);
const el = await fixture(
html`
<lion-icon icon-id="foo:lorem:ipsum"></lion-icon>
`,
);
const el = await fixture(html`<lion-icon icon-id="foo:lorem:ipsum"></lion-icon>`);
await el.updateComplete;
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 { localize } from '@lion/localize';
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 { parseAmount } from '../src/parsers.js';
import '../lion-input-amount.js';
describe('<lion-input-amount>', () => {
beforeEach(() => {
@ -21,9 +20,7 @@ describe('<lion-input-amount>', () => {
// JOD displays 3 fraction digits by default
localize.locale = 'fr-FR';
const el = await fixture(
html`
<lion-input-amount currency="JOD" .modelValue="${123}"></lion-input-amount>
`,
html`<lion-input-amount currency="JOD" .modelValue="${123}"></lion-input-amount>`,
);
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 { localizeTearDown } from '@lion/localize/test-helpers.js';
import { localize } from '@lion/localize';
import { localizeTearDown } from '@lion/localize/test-helpers.js';
import { MaxDate } from '@lion/validate';
import { expect, fixture } from '@open-wc/testing';
import '../lion-input-date.js';
describe('<lion-input-date>', () => {
@ -13,23 +11,17 @@ describe('<lion-input-date>', () => {
});
it('returns undefined when value is empty string', async () => {
const el = await fixture(html`
<lion-input-date></lion-input-date>
`);
const el = await fixture(html`<lion-input-date></lion-input-date>`);
expect(el.parser('')).to.equal(undefined);
});
it('has type="text" to activate default keyboard on mobile with all necessary symbols', async () => {
const el = await fixture(html`
<lion-input-date></lion-input-date>
`);
const el = await fixture(html`<lion-input-date></lion-input-date>`);
expect(el._inputNode.type).to.equal('text');
});
it('has validator "isDate" applied by default', async () => {
const el = await fixture(html`
<lion-input-date></lion-input-date>
`);
const el = await fixture(html`<lion-input-date></lion-input-date>`);
el.modelValue = '2005/11/10';
expect(el.hasFeedbackFor).to.include('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 () => {
const el = await fixture(html`
<lion-input-date></lion-input-date>
`);
const el = await fixture(html`<lion-input-date></lion-input-date>`);
expect(() => {
el.modelValue = new Date('foo');
}).to.not.throw();

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

@ -169,9 +169,7 @@ export class LionInputDatepicker extends ScopedElementsMixin(OverlayMixin(LionIn
}
__createUniqueIdForA11y() {
return `${this.localName}-${Math.random()
.toString(36)
.substr(2, 10)}`;
return `${this.localName}-${Math.random().toString(36).substr(2, 10)}`;
}
_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 { isSameDate } from '@lion/calendar/src/utils/isSameDate.js';
import { DatepickerInputObject } from '../test-helpers.js';
import { LionInputDatepicker } from '../src/LionInputDatepicker.js';
import { html, LitElement } from '@lion/core';
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 { LionInputDatepicker } from '../src/LionInputDatepicker.js';
import { DatepickerInputObject } from '../test-helpers.js';
describe('<lion-input-datepicker>', () => {
describe('Calendar Overlay', () => {
it('implements calendar-overlay Style component', async () => {
const el = await fixture(html`
<lion-input-datepicker></lion-input-datepicker>
`);
const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
const elObj = new DatepickerInputObject(el);
await elObj.openCalendar();
@ -30,9 +28,7 @@ describe('<lion-input-datepicker>', () => {
});
it('has a close button, with a tooltip "Close"', async () => {
const el = await fixture(html`
<lion-input-datepicker></lion-input-datepicker>
`);
const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
const elObj = new DatepickerInputObject(el);
await elObj.openCalendar();
// 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 () => {
const el = await fixture(html`
<lion-input-datepicker></lion-input-datepicker>
`);
const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
const elObj = new DatepickerInputObject(el);
await elObj.openCalendar();
expect(elObj.overlayController.isShown).to.equal(true);
@ -83,9 +77,7 @@ describe('<lion-input-datepicker>', () => {
});
it('closes the calendar via close button', async () => {
const el = await fixture(html`
<lion-input-datepicker></lion-input-datepicker>
`);
const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
const elObj = new DatepickerInputObject(el);
await elObj.openCalendar();
expect(elObj.overlayController.isShown).to.equal(true);
@ -95,9 +87,7 @@ describe('<lion-input-datepicker>', () => {
});
it('closes the calendar via outside click', async () => {
const el = await fixture(html`
<lion-input-datepicker></lion-input-datepicker>
`);
const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
const elObj = new DatepickerInputObject(el);
await elObj.openCalendar();
expect(elObj.overlayController.isShown).to.equal(true);
@ -115,9 +105,7 @@ describe('<lion-input-datepicker>', () => {
describe('Calendar Invoker', () => {
it('adds invoker button that toggles the overlay on click in suffix slot ', async () => {
const el = await fixture(html`
<lion-input-datepicker></lion-input-datepicker>
`);
const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
const elObj = new DatepickerInputObject(el);
expect(elObj.invokerEl).not.to.equal(null);
expect(elObj.overlayController.isShown).to.be.false;
@ -126,9 +114,7 @@ describe('<lion-input-datepicker>', () => {
});
it('delegates disabled state of host input', async () => {
const el = await fixture(html`
<lion-input-datepicker disabled></lion-input-datepicker>
`);
const el = await fixture(html`<lion-input-datepicker disabled></lion-input-datepicker>`);
const elObj = new DatepickerInputObject(el);
expect(elObj.overlayController.isShown).to.equal(false);
await elObj.openCalendar();
@ -139,9 +125,7 @@ describe('<lion-input-datepicker>', () => {
});
it('disables invoker when host input is readonly', async () => {
const el = await fixture(html`
<lion-input-datepicker readonly></lion-input-datepicker>
`);
const el = await fixture(html`<lion-input-datepicker readonly></lion-input-datepicker>`);
const elObj = new DatepickerInputObject(el);
expect(elObj.overlayController.isShown).to.equal(false);
await elObj.openCalendar();
@ -167,9 +151,7 @@ describe('<lion-input-datepicker>', () => {
});
it('closes the calendar overlay on "user-selected-date-changed"', async () => {
const el = await fixture(html`
<lion-input-datepicker></lion-input-datepicker>
`);
const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
const elObj = new DatepickerInputObject(el);
// Make sure the calendar overlay is opened
await elObj.openCalendar();
@ -190,9 +172,7 @@ describe('<lion-input-datepicker>', () => {
});
it('focuses central date on opening of calendar if no date selected', async () => {
const el = await fixture(html`
<lion-input-datepicker></lion-input-datepicker>
`);
const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
const elObj = new DatepickerInputObject(el);
await elObj.openCalendar();
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 () => {
const el = await fixture(html`
<lion-input-datepicker></lion-input-datepicker>
`);
const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
const elObj = new DatepickerInputObject(el);
await elObj.openCalendar();
@ -291,9 +269,7 @@ describe('<lion-input-datepicker>', () => {
});
it('adds [aria-expanded] to invoker button', async () => {
const el = await fixture(html`
<lion-input-datepicker></lion-input-datepicker>
`);
const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
const elObj = new DatepickerInputObject(el);
expect(elObj.invokerEl.getAttribute('aria-expanded')).to.equal('false');
@ -304,9 +280,7 @@ describe('<lion-input-datepicker>', () => {
});
it('is accessible when closed', async () => {
const el = await fixture(html`
<lion-input-datepicker></lion-input-datepicker>
`);
const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
const elObj = new DatepickerInputObject(el);
await expect(elObj.invokerEl).to.be.accessible();
@ -314,9 +288,7 @@ describe('<lion-input-datepicker>', () => {
});
it('is accessible when open', async () => {
const el = await fixture(html`
<lion-input-datepicker></lion-input-datepicker>
`);
const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
const elObj = new DatepickerInputObject(el);
await elObj.openCalendar();
@ -325,9 +297,7 @@ describe('<lion-input-datepicker>', () => {
});
it('has accessible invoker when open', async () => {
const el = await fixture(html`
<lion-input-datepicker></lion-input-datepicker>
`);
const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
const elObj = new DatepickerInputObject(el);
await elObj.openCalendar();
@ -355,9 +325,7 @@ describe('<lion-input-datepicker>', () => {
class extends LionInputDatepicker {
/** @override */
_invokerTemplate() {
return html`
<my-button>Pick my date</my-button>
`;
return html`<my-button>Pick my date</my-button>`;
}
},
);
@ -415,9 +383,7 @@ describe('<lion-input-datepicker>', () => {
const myTag = defineCE(
class extends LionInputDatepicker {
_calendarTemplate() {
return html`
<my-calendar id="calendar"></my-calendar>
`;
return html`<my-calendar id="calendar"></my-calendar>`;
}
},
);
@ -515,9 +481,7 @@ describe('<lion-input-datepicker>', () => {
});
it('is hidden when attribute hidden is true', async () => {
const el = await fixture(html`
<lion-input-datepicker></lion-input-datepicker>
`);
const el = await fixture(html`<lion-input-datepicker></lion-input-datepicker>`);
await el.updateComplete;
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 {
aTimeout,
defineCE,
expect,
fixture,
fixtureSync,
nextFrame,
aTimeout,
defineCE,
html,
nextFrame,
} from '@open-wc/testing';
import sinon from 'sinon';
import { LitElement, isDirective } from '@lion/core';
import { localize } from '../src/localize.js';
import { LocalizeMixin } from '../src/LocalizeMixin.js';
import {
localizeTearDown,
setupEmptyFakeImportsFor,
resetFakeImport,
fakeImport,
localizeTearDown,
resetFakeImport,
setupEmptyFakeImportsFor,
setupFakeImport,
} from '../test-helpers.js';
import { localize } from '../src/localize.js';
import { LocalizeMixin } from '../src/LocalizeMixin.js';
describe('LocalizeMixin', () => {
afterEach(() => {
resetFakeImport();
@ -300,9 +298,7 @@ describe('LocalizeMixin', () => {
}
render() {
return html`
<p>${this.msgLit('my-element:greeting')}</p>
`;
return html`<p>${this.msgLit('my-element:greeting')}</p>`;
}
},
);
@ -333,9 +329,7 @@ describe('LocalizeMixin', () => {
}
render() {
return html`
<p>${this.msgLit('my-element:greeting')}</p>
`;
return html`<p>${this.msgLit('my-element:greeting')}</p>`;
}
},
);
@ -369,9 +363,7 @@ describe('LocalizeMixin', () => {
}
render() {
return html`
<p>${this.msgLit('my-element:greeting')}</p>
`;
return html`<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._contentNodeWrapper = document.createElement('div');
this._contentId = `overlay-content--${Math.random()
.toString(36)
.substr(2, 10)}`;
this._contentId = `overlay-content--${Math.random().toString(36).substr(2, 10)}`;
this.updateConfig(config);

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

@ -1,33 +1,29 @@
/* eslint-disable no-new */
import '@lion/core/test-helpers/keyboardEventShimIE.js';
import {
expect,
html,
fixture,
aTimeout,
defineCE,
unsafeStatic,
expect,
fixture,
html,
nextFrame,
unsafeStatic,
} from '@open-wc/testing';
import { fixtureSync } from '@open-wc/testing-helpers';
import '@lion/core/test-helpers/keyboardEventShimIE.js';
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 { overlays } from '../src/overlays.js';
import { keyCodes } from '../src/utils/key-codes.js';
import { simulateTab } from '../src/utils/simulate-tab.js';
const withGlobalTestConfig = () => ({
placementMode: 'global',
contentNode: fixtureSync(html`
<div>my content</div>
`),
contentNode: fixtureSync(html`<div>my content</div>`),
});
const withLocalTestConfig = () => ({
placementMode: 'local',
contentNode: fixtureSync(html`
<div>my content</div>
`),
contentNode: fixtureSync(html`<div>my content</div>`),
invokerNode: fixtureSync(html`
<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 () => {
const ctrl = new OverlayController({
...withLocalTestConfig(),
invokerNode: await fixture(html`
<button>Invoker</button>
`),
invokerNode: await fixture(html`<button>Invoker</button>`),
});
expect(ctrl._renderTarget).to.be.undefined;
expect(ctrl.content).to.equal(ctrl.invokerNode.nextElementSibling);
@ -226,9 +220,7 @@ describe('OverlayController', () => {
});
await ctrl.show();
const elOutside = await fixture(html`
<button>click me</button>
`);
const elOutside = await fixture(html`<button>click me</button>`);
const input1 = ctrl.contentNode.querySelectorAll('input')[0];
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 () => {
const contentNode = await fixture(html`
<div><input /></div>
`);
const contentNode = await fixture(html`<div><input /></div>`);
const ctrl = new OverlayController({
...withGlobalTestConfig(),
@ -253,14 +243,10 @@ describe('OverlayController', () => {
trapsKeyboardFocus: true,
});
// add element to dom to allow focus
await fixture(html`
${ctrl.content}
`);
await fixture(html` ${ctrl.content} `);
await ctrl.show();
const elOutside = await fixture(html`
<input />
`);
const elOutside = await fixture(html`<input />`);
const input = ctrl.contentNode.querySelector('input');
input.focus();
@ -416,10 +402,7 @@ describe('OverlayController', () => {
await ctrl.show();
// Don't hide on inside shadowDom click
ctrl.contentNode
.querySelector(tagString)
.shadowRoot.querySelector('button')
.click();
ctrl.contentNode.querySelector(tagString).shadowRoot.querySelector('button').click();
await aTimeout();
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 () => {
const invokerNode = await fixture(html`
<div role="button">Invoker</div>
`);
const invokerNode = await fixture(html`<div role="button">Invoker</div>`);
const contentNode = await fixture('<div>Content</div>');
const ctrl = new OverlayController({
...withLocalTestConfig(),
@ -957,11 +938,7 @@ describe('OverlayController', () => {
it('reinitializes content', async () => {
const ctrl = new OverlayController({
...withLocalTestConfig(),
contentNode: await fixture(
html`
<div>content1</div>
`,
),
contentNode: await fixture(html`<div>content1</div>`),
});
await ctrl.show(); // Popper adds inline styles
expect(ctrl.content.style.transform).not.to.be.undefined;
@ -969,19 +946,13 @@ describe('OverlayController', () => {
ctrl.updateConfig({
placementMode: 'local',
contentNode: await fixture(
html`
<div>content2</div>
`,
),
contentNode: await fixture(html`<div>content2</div>`),
});
expect(ctrl.contentNode.textContent).to.include('content2');
});
it('respects the initial config provided to new OverlayController(initialConfig)', async () => {
const contentNode = fixtureSync(html`
<div>my content</div>
`);
const contentNode = fixtureSync(html`<div>my content</div>`);
const ctrl = new OverlayController({
// This is the shared config
@ -1001,9 +972,7 @@ describe('OverlayController', () => {
// Currently not working, enable again when we fix updateConfig
it.skip('allows for updating viewport config placement only, while keeping the content shown', async () => {
const contentNode = fixtureSync(html`
<div>my content</div>
`);
const contentNode = fixtureSync(html`<div>my content</div>`);
const ctrl = new OverlayController({
// 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 { OverlaysManager } from '../src/OverlaysManager.js';
import { expect, fixture, html } from '@open-wc/testing';
import { OverlayController } from '../src/OverlayController.js';
import { OverlaysManager } from '../src/OverlaysManager.js';
describe('OverlaysManager', () => {
let defaultOptions;
let mngr;
before(async () => {
const contentNode = await fixture(html`
<p>my content</p>
`);
const contentNode = await fixture(html`<p>my content</p>`);
defaultOptions = {
placementMode: 'global',

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

@ -5,9 +5,7 @@ import { overlays } from '../src/overlays.js';
const withDefaultGlobalConfig = () => ({
placementMode: 'global',
contentNode: fixtureSync(html`
<p>my content</p>
`),
contentNode: fixtureSync(html`<p>my content</p>`),
});
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 = () => ({
placementMode: 'local',
contentNode: fixtureSync(html`
<div>my content</div>
`),
contentNode: fixtureSync(html`<div>my content</div>`),
invokerNode: fixtureSync(html`
<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 () => {
const ctrl = new OverlayController({
...withLocalTestConfig(),
contentNode: fixtureSync(html`
<div style="width: 80px; height: 20px;"></div>
`),
contentNode: fixtureSync(html`<div style="width: 80px; height: 20px;"></div>`),
invokerNode: fixtureSync(html`
<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 () => {
const ctrl = new OverlayController({
...withLocalTestConfig(),
contentNode: fixtureSync(html`
<div style="width: 80px; height: 20px;"></div>
`),
contentNode: fixtureSync(html`<div style="width: 80px; height: 20px;"></div>`),
invokerNode: fixtureSync(html`
<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 () => {
const ctrl = new OverlayController({
...withLocalTestConfig(),
contentNode: fixtureSync(html`
<div style="width: 80px; height: 20px;">invoker</div>
`),
contentNode: fixtureSync(html`<div style="width: 80px; height: 20px;">invoker</div>`),
invokerNode: fixtureSync(html`
<div role="button" style="width: 100px; height: 20px;" @click=${() => ctrl.show()}>
content
@ -123,9 +115,7 @@ describe('Local Positioning', () => {
it('allows the user to override default Popper modifiers', async () => {
const ctrl = new OverlayController({
...withLocalTestConfig(),
contentNode: fixtureSync(html`
<div style="width: 80px; height: 20px;"></div>
`),
contentNode: fixtureSync(html`<div style="width: 80px; height: 20px;"></div>`),
invokerNode: fixtureSync(html`
<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 () => {
const ctrl = new OverlayController({
...withLocalTestConfig(),
contentNode: fixtureSync(html`
<div style="width: 80px; height: 20px;"></div>
`),
contentNode: fixtureSync(html`<div style="width: 80px; height: 20px;"></div>`),
invokerNode: fixtureSync(html`
<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 () => {
const ctrl = new OverlayController({
...withLocalTestConfig(),
contentNode: fixtureSync(html`
<div style="width: 80px; height: 20px;"></div>
`),
contentNode: fixtureSync(html`<div style="width: 80px; height: 20px;"></div>`),
invokerNode: fixtureSync(html`
<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 () => {
const ctrl = new OverlayController({
...withLocalTestConfig(),
contentNode: fixtureSync(html`
<div style="width: 80px; height: 20px;"></div>
`),
contentNode: fixtureSync(html`<div style="width: 80px; height: 20px;"></div>`),
invokerNode: fixtureSync(html`
<div role="button" style="width: 100px; height: 20px;" @click=${() => ctrl.show()}>
Invoker

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

@ -20,10 +20,7 @@ const { remarkExtend } = require('remark-extend');
const sourceMd = '# Headline';
const extendMd = 'extending instructions';
const parser = unified()
.use(markdown)
.use(remarkExtend, { extendMd })
.use(mdStringify);
const parser = unified().use(markdown).use(remarkExtend, { extendMd }).use(mdStringify);
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');
const parser = unified()
.use(markdown)
.use(remarkExtend, { extendMd })
.use(mdStringify);
const parser = unified().use(markdown).use(remarkExtend, { extendMd }).use(mdStringify);
await expectThrowsAsync(
() => 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
_afterTemplate() {
return html`
${!this.singleOption
? html`
<slot name="after"></slot>
`
: ''}
`;
return html`${!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';
function uuid() {
return Math.random()
.toString(36)
.substr(2, 10);
return Math.random().toString(36).substr(2, 10);
}
function detectInteractionMode() {

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

@ -23,7 +23,7 @@ if (descriptor) {
};
Object.defineProperty(event, 'key', {
// eslint-disable-next-line object-shorthand, func-names
get: function() {
get: function () {
const key = descriptor.get.call(this);
// 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 sinon from 'sinon';
import '../lion-option.js';
describe('lion-option', () => {
describe('Values', () => {
it('has a modelValue', async () => {
const el = await fixture(html`
<lion-option .choiceValue=${10}></lion-option>
`);
const el = await fixture(html`<lion-option .choiceValue=${10}></lion-option>`);
expect(el.modelValue).to.deep.equal({ value: 10, checked: false });
});
it('can be checked', async () => {
const el = await fixture(html`
<lion-option .choiceValue=${10} checked></lion-option>
`);
const el = await fixture(html`<lion-option .choiceValue=${10} checked></lion-option>`);
expect(el.modelValue).to.deep.equal({ value: 10, checked: true });
});
it('is hidden when attribute hidden is true', async () => {
const el = await fixture(
html`
<lion-option .choiceValue=${10} hidden></lion-option>
`,
);
const el = await fixture(html`<lion-option .choiceValue=${10} hidden></lion-option>`);
expect(el).not.to.be.displayed;
});
});
describe('Accessibility', () => {
it('has the "option" role', async () => {
const el = await fixture(html`
<lion-option></lion-option>
`);
const el = await fixture(html`<lion-option></lion-option>`);
expect(el.getAttribute('role')).to.equal('option');
});
@ -70,9 +59,7 @@ describe('lion-option', () => {
describe('State reflection', () => {
it('asynchronously adds the attribute "active" when active', async () => {
const el = await fixture(html`
<lion-option .choiceValue=${10}></lion-option>
`);
const el = await fixture(html`<lion-option .choiceValue=${10}></lion-option>`);
expect(el.active).to.equal(false);
expect(el.hasAttribute('active')).to.be.false;
@ -90,9 +77,7 @@ describe('lion-option', () => {
});
it('does become checked on [click]', async () => {
const el = await fixture(html`
<lion-option .choiceValue=${10}></lion-option>
`);
const el = await fixture(html`<lion-option .choiceValue=${10}></lion-option>`);
expect(el.checked).to.be.false;
el.click();
await el.updateComplete;
@ -112,18 +97,14 @@ describe('lion-option', () => {
describe('Disabled', () => {
it('does not becomes active on [mouseenter]', async () => {
const el = await fixture(html`
<lion-option .choiceValue=${10} disabled></lion-option>
`);
const el = await fixture(html`<lion-option .choiceValue=${10} disabled></lion-option>`);
expect(el.active).to.be.false;
el.dispatchEvent(new Event('mouseenter'));
expect(el.active).to.be.false;
});
it('does not become checked on [click]', async () => {
const el = await fixture(html`
<lion-option .choiceValue=${10} disabled></lion-option>
`);
const el = await fixture(html`<lion-option .choiceValue=${10} disabled></lion-option>`);
expect(el.checked).to.be.false;
el.click();
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 { LionSelectInvoker } from '../src/LionSelectInvoker.js';
import { defineCE, expect, fixture, html } from '@open-wc/testing';
import '../lion-select-invoker.js';
import { LionSelectInvoker } from '../src/LionSelectInvoker.js';
describe('lion-select-invoker', () => {
it('should behave as a button', async () => {
const el = await fixture(html`
<lion-select-invoker></lion-select-invoker>
`);
const el = await fixture(html`<lion-select-invoker></lion-select-invoker>`);
expect(el instanceof LionButton).to.be.true;
});
it('renders invoker info based on selectedElement child elements', async () => {
const el = await fixture(html`
<lion-select-invoker></lion-select-invoker>
`);
const el = await fixture(html`<lion-select-invoker></lion-select-invoker>`);
el.selectedElement = await fixture(`<div class="option"><h2>I am</h2><p>2 lines</p></div>`);
await el.updateComplete;
@ -31,9 +26,7 @@ describe('lion-select-invoker', () => {
});
it('renders invoker info based on selectedElement textContent', async () => {
const el = await fixture(html`
<lion-select-invoker></lion-select-invoker>
`);
const el = await fixture(html`<lion-select-invoker></lion-select-invoker>`);
el.selectedElement = await fixture(`<div class="option">just textContent</div>`);
await el.updateComplete;
@ -41,9 +34,7 @@ describe('lion-select-invoker', () => {
});
it('has tabindex="0"', async () => {
const el = await fixture(html`
<lion-select-invoker></lion-select-invoker>
`);
const el = await fixture(html`<lion-select-invoker></lion-select-invoker>`);
expect(el.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 () => {
const el = await fixture(html`
<lion-select-invoker></lion-select-invoker>
`);
const el = await fixture(html`<lion-select-invoker></lion-select-invoker>`);
expect(el.shadowRoot.querySelector('slot[name="after"]')).to.exist;
});
@ -70,9 +59,7 @@ describe('lion-select-invoker', () => {
class extends LionSelectInvoker {
_contentTemplate() {
if (this.selectedElement && this.selectedElement.textContent === 'cat') {
return html`
cat selected
`;
return html`cat selected `;
}
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[1].name).to.equal('foo');
const validChild = await fixture(html`
<lion-option .choiceValue=${30}>Item 3</lion-option>
`);
const validChild = await fixture(html`<lion-option .choiceValue=${30}>Item 3</lion-option>`);
el.appendChild(validChild);
expect(el.formElements[2].name).to.equal('foo');
@ -56,9 +54,7 @@ describe('lion-select-rich', () => {
`);
await nextFrame();
const invalidChild = await fixture(html`
<lion-option .modelValue=${'Lara'}></lion-option>
`);
const invalidChild = await fixture(html`<lion-option .modelValue=${'Lara'}></lion-option>`);
expect(() => {
el.addFormElement(invalidChild);
@ -816,9 +812,7 @@ describe('lion-select-rich', () => {
const invokerTagName = defineCE(
class extends LionSelectInvoker {
_noSelectionTemplate() {
return html`
Please select an option..
`;
return html`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
@ -96,9 +96,7 @@ export class LionStep extends LitElement {
}
render() {
return html`
<slot></slot>
`;
return html`<slot></slot>`;
}
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.
@ -63,9 +63,7 @@ export class LionSteps extends LitElement {
}
render() {
return html`
<slot></slot>
`;
return html`<slot></slot>`;
}
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 { expect, fixture, html, oneEvent, nextFrame } from '@open-wc/testing';
import '../lion-steps.js';
import '../lion-step.js';
import '../lion-steps.js';
async function checkWorkflow(steps, expected) {
return new Promise(resolve => {
@ -28,18 +27,12 @@ async function checkWorkflow(steps, expected) {
describe('lion-steps', () => {
it('can be instantiated', async () => {
const el = await fixture(html`
<lion-steps> </lion-steps>
`);
const el = await fixture(html`<lion-steps> </lion-steps>`);
expect(el).to.be.a('HTMLElement');
});
it('is hidden when attribute hidden is true', async () => {
const el = await fixture(
html`
<lion-steps hidden> </lion-steps>
`,
);
const el = await fixture(html`<lion-steps hidden> </lion-steps>`);
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 { css, html, ScopedElementsMixin } from '@lion/core';
import { LionField } from '@lion/field';
import { LionSwitchButton } from './LionSwitchButton.js';
export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField)) {
@ -49,15 +49,11 @@ export class LionSwitch extends ScopedElementsMixin(ChoiceInputMixin(LionField))
}
_groupOneTemplate() {
return html`
${this._labelTemplate()} ${this._helpTextTemplate()} ${this._feedbackTemplate()}
`;
return html`${this._labelTemplate()} ${this._helpTextTemplate()} ${this._feedbackTemplate()}`;
}
_groupTwoTemplate() {
return html`
${this._inputGroupTemplate()}
`;
return html`${this._inputGroupTemplate()}`;
}
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 sinon from 'sinon';
import '../lion-switch-button.js';
describe('lion-switch-button', () => {
let el;
beforeEach(async () => {
el = await fixture(html`
<lion-switch-button></lion-switch-button>
`);
el = await fixture(html`<lion-switch-button></lion-switch-button>`);
});
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 '../lion-switch.js';
describe('lion-switch', () => {
it('should have default "input" element', async () => {
const el = await fixture(html`
<lion-switch></lion-switch>
`);
const el = await fixture(html`<lion-switch></lion-switch>`);
expect(Array.from(el.children).find(child => child.slot === 'input')).not.to.be.false;
});
it('should sync its "disabled" state to child button', async () => {
const el = await fixture(html`
<lion-switch disabled></lion-switch>
`);
const el = await fixture(html`<lion-switch disabled></lion-switch>`);
expect(el._inputNode.disabled).to.be.true;
expect(el._inputNode.hasAttribute('disabled')).to.be.true;
el.disabled = false;
@ -23,21 +18,13 @@ describe('lion-switch', () => {
});
it('is hidden when attribute hidden is true', async () => {
const el = await fixture(
html`
<lion-switch hidden></lion-switch>
`,
);
const el = await fixture(html`<lion-switch hidden></lion-switch>`);
expect(el).not.to.be.displayed;
});
it('should sync its "checked" state to child button', async () => {
const uncheckedEl = await fixture(html`
<lion-switch></lion-switch>
`);
const checkedEl = await fixture(html`
<lion-switch checked></lion-switch>
`);
const uncheckedEl = await fixture(html`<lion-switch></lion-switch>`);
const checkedEl = await fixture(html`<lion-switch checked></lion-switch>`);
expect(uncheckedEl._inputNode.checked).to.be.false;
expect(checkedEl._inputNode.checked).to.be.true;
uncheckedEl.checked = true;
@ -49,9 +36,7 @@ describe('lion-switch', () => {
});
it('should sync "checked" state received from child button', async () => {
const el = await fixture(html`
<lion-switch></lion-switch>
`);
const el = await fixture(html`<lion-switch></lion-switch>`);
const button = el._inputNode;
expect(el.checked).to.be.false;
button.click();
@ -61,9 +46,7 @@ describe('lion-switch', () => {
});
it('synchronizes modelValue to checked state and vice versa', async () => {
const el = await fixture(html`
<lion-switch .choiceValue=${'foo'}></lion-switch>
`);
const el = await fixture(html`<lion-switch .choiceValue=${'foo'}></lion-switch>`);
expect(el.checked).to.be.false;
expect(el.modelValue).to.deep.equal({
checked: false,
@ -78,9 +61,7 @@ describe('lion-switch', () => {
});
it('is submitted by default', async () => {
const el = await fixture(html`
<lion-switch></lion-switch>
`);
const el = await fixture(html`<lion-switch></lion-switch>`);
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 = () =>
Math.random()
.toString(36)
.substr(2, 10);
const uuid = () => Math.random().toString(36).substr(2, 10);
const setupPanel = ({ element, 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 '../lion-textarea.js';
function hasBrowserResizeSupport() {
@ -58,9 +57,7 @@ describe('<lion-textarea>', () => {
it('supports initial modelValue', async () => {
const el = await fixture(
html`
<lion-textarea .modelValue="${'From value attribute'}"></lion-textarea>
`,
html`<lion-textarea .modelValue="${'From value attribute'}"></lion-textarea>`,
);
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 () => {
const el = await fixture(
html`
<lion-textarea .modelValue="${'1\n2\n3'}"></lion-textarea>
`,
);
const el = await fixture(html`<lion-textarea .modelValue="${'1\n2\n3'}"></lion-textarea>`);
return [4, 5, 6, 7, 8].reduce(async (heightPromise, i) => {
const oldHeight = await heightPromise;
@ -126,18 +119,14 @@ describe('<lion-textarea>', () => {
});
it('stops shrinking after property "rows" is reached', async () => {
const el = await fixture(html`
<lion-textarea rows="1" max-rows="3"></lion-textarea>
`);
const el = await fixture(html`<lion-textarea rows="1" max-rows="3"></lion-textarea>`);
expect(el.scrollHeight).to.be.equal(el.clientHeight);
const oneRowHeight = el.clientHeight;
el.rows = 3;
el.resizeTextarea();
await el.updateComplete;
expect(oneRowHeight)
.to.be.below(el.clientHeight)
.and.to.be.below(el.scrollHeight);
expect(oneRowHeight).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 () => {

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

@ -42,11 +42,11 @@ export class LionValidationFeedback extends LitElement {
render() {
return html`
${this.feedbackData &&
this.feedbackData.map(
({ message, type, validator }) => html`
${this._messageTemplate({ message, type, validator })}
`,
)}
this.feedbackData.map(
({ message, type, validator }) => html`
${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 { localize } from '@lion/localize';
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 { Validator, Required, MinLength, DefaultSuccess, ValidateMixin } from '../index.js';
export function runValidateMixinFeedbackPart() {
describe('Validity Feedback', () => {
let tagString;
@ -241,9 +240,7 @@ export function runValidateMixinFeedbackPart() {
}
render() {
return html`
Custom for ${this.feedbackData[0].validator.constructor.name}
`;
return html`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 */
import { expect, fixture, html } from '@open-wc/testing';
import sinon from 'sinon';
import { fixture, html, expect } from '@open-wc/testing';
import '../lion-validation-feedback.js';
import { AlwaysInvalid, AlwaysValid } from '../test-helpers.js';
describe('lion-validation-feedback', () => {
it('renders a validation message', async () => {
const el = await fixture(
html`
<lion-validation-feedback></lion-validation-feedback>
`,
);
const el = await fixture(html`<lion-validation-feedback></lion-validation-feedback>`);
expect(el).shadowDom.to.equal('');
el.feedbackData = [{ message: 'hello', type: 'error', validator: new AlwaysInvalid() }];
await el.updateComplete;
@ -18,11 +14,7 @@ describe('lion-validation-feedback', () => {
});
it('renders the validation type attribute', async () => {
const el = await fixture(
html`
<lion-validation-feedback></lion-validation-feedback>
`,
);
const el = await fixture(html`<lion-validation-feedback></lion-validation-feedback>`);
el.feedbackData = [{ message: 'hello', type: 'error', validator: new AlwaysInvalid() }];
await el.updateComplete;
expect(el.getAttribute('type')).to.equal('error');
@ -33,11 +25,7 @@ describe('lion-validation-feedback', () => {
});
it('success message clears after 3s', async () => {
const el = await fixture(
html`
<lion-validation-feedback></lion-validation-feedback>
`,
);
const el = await fixture(html`<lion-validation-feedback></lion-validation-feedback>`);
const clock = sinon.useFakeTimers();
@ -57,11 +45,7 @@ describe('lion-validation-feedback', () => {
});
it('does not clear error messages', async () => {
const el = await fixture(
html`
<lion-validation-feedback></lion-validation-feedback>
`,
);
const el = await fixture(html`<lion-validation-feedback></lion-validation-feedback>`);
const clock = sinon.useFakeTimers();