diff --git a/demo/src/LeaTab.js b/demo/src/LeaTab.js index 30dab7bef..1cd7e5ece 100644 --- a/demo/src/LeaTab.js +++ b/demo/src/LeaTab.js @@ -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` - - `; + return html``; } } diff --git a/packages/button/src/LionButton.js b/packages/button/src/LionButton.js index e11e2f0e4..34a96e786 100644 --- a/packages/button/src/LionButton.js +++ b/packages/button/src/LionButton.js @@ -34,12 +34,8 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
${this._beforeTemplate()} ${browserDetection.isIE11 - ? html` -
- ` - : html` - - `} + ? html`
` + : html``} ${this._afterTemplate()} @@ -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)); } } diff --git a/packages/button/test/lion-button.test.js b/packages/button/test/lion-button.test.js index 0c4d09571..b46279605 100644 --- a/packages/button/test/lion-button.test.js +++ b/packages/button/test/lion-button.test.js @@ -389,11 +389,7 @@ describe('lion-button', () => { describe('click event', () => { it('is fired once', async () => { const clickSpy = sinon.spy(); - const el = await fixture( - html` - foo - `, - ); + const el = await fixture(html`foo`); getTopElement(el).click(); diff --git a/packages/calendar/test/lion-calendar.test.js b/packages/calendar/test/lion-calendar.test.js index 438edddb2..d86c404e4 100644 --- a/packages/calendar/test/lion-calendar.test.js +++ b/packages/calendar/test/lion-calendar.test.js @@ -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('', () => { beforeEach(() => { @@ -18,11 +15,7 @@ describe('', () => { describe('Structure', () => { it('implements BEM structure', async () => { - const el = await fixture( - html` - - `, - ); + const el = await fixture(html``); expect(el.shadowRoot.querySelector('.calendar')).to.exist; expect(el.shadowRoot.querySelector('.calendar__header')).to.exist; @@ -35,11 +28,7 @@ describe('', () => { it('has heading with month and year', async () => { const clock = sinon.useFakeTimers({ now: new Date('2000/12/01').getTime() }); - const el = await fixture( - html` - - `, - ); + const el = await fixture(html``); expect(el.shadowRoot.querySelector('.calendar__month-heading')).dom.to.equal(`

', () => { it('has previous month button', async () => { const el = await fixture( - html` - - `, + html``, ); expect(el.shadowRoot.querySelector('.calendar__previous-month-button')).dom.to.equal(` @@ -67,9 +54,7 @@ describe('', () => { it('has next month button', async () => { const el = await fixture( - html` - - `, + html``, ); expect(el.shadowRoot.querySelector('.calendar__next-month-button')).dom.to.equal(` @@ -90,9 +75,7 @@ describe('', () => { it('sets "centralDate" to today by default', async () => { const clock = sinon.useFakeTimers({ now: new Date('2013/03/15').getTime() }); - const el = await fixture(html` - - `); + const el = await fixture(html``); 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('', () => { }); it('does not set "selectedDate" by default', async () => { - const el = await fixture(html` - - `); + const el = await fixture(html``); const elObj = new CalendarObject(el); const today = new Date(); expect(el.selectedDate).to.equal(undefined); @@ -236,9 +217,7 @@ describe('', () => { }); it('has a focusDate() method to focus an arbitrary date', async () => { - const el = await fixture(html` - - `); + const el = await fixture(html``); 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('', () => { return d.getHours() === 0 && d.getMinutes() === 0 && d.getSeconds() === 0; } - const el = await fixture( - html` - - `, - ); + const el = await fixture(html``); // 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('', () => { describe('Title', () => { it('contains secondary title displaying the current month and year in focus', async () => { const el = await fixture( - html` - - `, + html``, ); const elObj = new CalendarObject(el); expect(elObj.activeMonthAndYear).to.equal('December 2000'); @@ -416,9 +389,7 @@ describe('', () => { it('updates the secondary title when the displayed month/year changes', async () => { const el = await fixture( - html` - - `, + html``, ); const elObj = new CalendarObject(el); el.centralDate = new Date('1999/10/12'); @@ -428,13 +399,7 @@ describe('', () => { describe('Accessibility', () => { it('has aria-atomic="true" set on the secondary title', async () => { - const elObj = new CalendarObject( - await fixture( - html` - - `, - ), - ); + const elObj = new CalendarObject(await fixture(html``)); expect(elObj.monthHeadingEl.getAttribute('aria-atomic')).to.equal('true'); }); }); @@ -443,9 +408,7 @@ describe('', () => { describe('Navigation', () => { it('has a button for navigation to previous month', async () => { const el = await fixture( - html` - - `, + html``, ); const elObj = new CalendarObject(el); expect(elObj.previousMonthButtonEl).not.to.equal(null); @@ -462,9 +425,7 @@ describe('', () => { it('has a button for navigation to next month', async () => { const el = await fixture( - html` - - `, + html``, ); const elObj = new CalendarObject(el); expect(elObj.nextMonthButtonEl).not.to.equal(null); @@ -507,9 +468,7 @@ describe('', () => { 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` - - `); + const el = await fixture(html``); const elObj = new CalendarObject(el); expect(elObj.activeMonthAndYear).to.equal('December 2000'); @@ -530,9 +489,7 @@ describe('', () => { 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` - - `); + const el = await fixture(html``); const elObj = new CalendarObject(el); expect(elObj.activeMonthAndYear).to.equal('December 2000'); @@ -601,9 +558,7 @@ describe('', () => { describe('Calendar body (months view)', () => { it('renders the days of the week as table headers', async () => { const el = await fixture( - html` - - `, + html``, ); const elObj = new CalendarObject(el); expect(elObj.weekdayHeaderEls.map(h => h.textContent.trim())).to.deep.equal([ @@ -621,11 +576,7 @@ describe('', () => { 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` - - `, - ); + const el = await fixture(html``); const elObj = new CalendarObject(el); expect(elObj.getDayEl(15).hasAttribute('today')).to.be.true; @@ -636,9 +587,7 @@ describe('', () => { it('adds "selected" attribute to the selected date', async () => { const el = await fixture( - html` - - `, + html``, ); const elObj = new CalendarObject(el); expect(elObj.checkForAllDayObjs(obj => obj.el.hasAttribute('selected'), [12])).to.equal( @@ -929,9 +878,7 @@ describe('', () => { 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` - - `); + const el = await fixture(html``); const elObj = new CalendarObject(el); expect(elObj.centralDayObj.monthday).to.equal(15); @@ -1021,37 +968,19 @@ describe('', () => { // 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` - - `, - ), - ); + const elObj = new CalendarObject(await fixture(html``)); 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` - - `, - ), - ); + const elObj = new CalendarObject(await fixture(html``)); 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` - - `, - ), - ); + const elObj = new CalendarObject(await fixture(html``)); expect(elObj.weekdayHeaderEls.map(h => h.getAttribute('aria-label'))).to.eql([ 'Sunday', 'Monday', @@ -1064,13 +993,7 @@ describe('', () => { }); it('renders each day as a button inside a table cell', async () => { - const elObj = new CalendarObject( - await fixture( - html` - - `, - ), - ); + const elObj = new CalendarObject(await fixture(html``)); const hasBtn = d => d.el.tagName === 'BUTTON'; expect(elObj.checkForAllDayObjs(hasBtn)).to.equal(true); }); @@ -1099,13 +1022,7 @@ describe('', () => { }); it('sets aria-current="date" to todays button', async () => { - const elObj = new CalendarObject( - await fixture( - html` - - `, - ), - ); + const elObj = new CalendarObject(await fixture(html``)); 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('', () => { describe('Accessibility', () => { it('is accessible', async () => { - const el = await fixture( - html` - - `, - ); + const el = await fixture(html``); await expect(el).to.be.accessible(); }); @@ -1259,9 +1172,7 @@ describe('', () => { const today = new Date(); const selectedDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1); const el = await fixture( - html` - - `, + html``, ); await expect(el).to.be.accessible(); }); @@ -1278,11 +1189,7 @@ describe('', () => { }); it('is hidden when attribute hidden is true', async () => { - const el = await fixture( - html` - - `, - ); + const el = await fixture(html``); expect(el).not.to.be.displayed; }); }); diff --git a/packages/checkbox-group/test/lion-checkbox-group.test.js b/packages/checkbox-group/test/lion-checkbox-group.test.js index 7763faa59..515c4a973 100644 --- a/packages/checkbox-group/test/lion-checkbox-group.test.js +++ b/packages/checkbox-group/test/lion-checkbox-group.test.js @@ -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('', () => { }); it("should throw exception if name doesn't end in []", async () => { - const el = await fixture( - html` - - `, - ); + const el = await fixture(html``); el.name = 'woof'; let err; try { diff --git a/packages/choice-input/test/ChoiceGroupMixin.test.js b/packages/choice-input/test/ChoiceGroupMixin.test.js index ad7dd0901..9dcbed50b 100644 --- a/packages/choice-input/test/ChoiceGroupMixin.test.js +++ b/packages/choice-input/test/ChoiceGroupMixin.test.js @@ -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'; diff --git a/packages/choice-input/test/ChoiceInputMixin.test.js b/packages/choice-input/test/ChoiceInputMixin.test.js index 099fe04fe..7df052f10 100644 --- a/packages/choice-input/test/ChoiceInputMixin.test.js +++ b/packages/choice-input/test/ChoiceInputMixin.test.js @@ -17,16 +17,12 @@ describe('ChoiceInputMixin', () => { }); it('is hidden when attribute hidden is true', async () => { - const el = await fixture(html` - - `); + const el = await fixture(html``); expect(el).not.to.be.displayed; }); it('has choiceValue', async () => { - const el = await fixture(html` - - `); + const el = await fixture(html``); 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` - - `); + const el = await fixture(html``); 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` - - `); + const el = await fixture(html``); 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` - - `); + const el = await fixture(html``); 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` - - `); + const el = await fixture(html``); 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` - - `); + const el = await fixture(html``); expect(el.prefilled).equal(true, 'checked element not considered prefilled'); const elUnchecked = await fixture(``); diff --git a/packages/core/src/differentKeyEventNamesShimIE.js b/packages/core/src/differentKeyEventNamesShimIE.js index ad27b941c..f67a28ae9 100644 --- a/packages/core/src/differentKeyEventNamesShimIE.js +++ b/packages/core/src/differentKeyEventNamesShimIE.js @@ -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 diff --git a/packages/core/test/DelegateMixin.test.js b/packages/core/test/DelegateMixin.test.js index f23c27194..09191b15e 100644 --- a/packages/core/test/DelegateMixin.test.js +++ b/packages/core/test/DelegateMixin.test.js @@ -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` - - `; + return html``; } }, ); @@ -46,9 +43,7 @@ describe('DelegateMixin', () => { } render() { - return html` - - `; + return html``; } }, ); @@ -107,9 +102,7 @@ describe('DelegateMixin', () => { } render() { - return html` - - `; + return html``; } foo() { @@ -136,9 +129,7 @@ describe('DelegateMixin', () => { } render() { - return html` - - `; + return html``; } }, ); @@ -173,9 +164,7 @@ describe('DelegateMixin', () => { } render() { - return html` - - `; + return html``; } }, ); @@ -199,9 +188,7 @@ describe('DelegateMixin', () => { } render() { - return html` - - `; + return html``; } }, ); @@ -224,9 +211,7 @@ describe('DelegateMixin', () => { } render() { - return html` - - `; + return html``; } }, ); @@ -252,9 +237,7 @@ describe('DelegateMixin', () => { } render() { - return html` - - `; + return html``; } }, ); @@ -277,9 +260,7 @@ describe('DelegateMixin', () => { } render() { - return html` - - `; + return html``; } }, ); @@ -300,9 +281,7 @@ describe('DelegateMixin', () => { } render() { - return html` - - `; + return html``; } }, ); @@ -404,9 +383,7 @@ describe('DelegateMixin', () => { } render() { - return html` -
- `; + return html`
`; } }, ); @@ -431,9 +408,7 @@ describe('DelegateMixin', () => { } render() { - return html` -
- `; + return html`
`; } }, ); diff --git a/packages/core/test/DisabledMixin.test.js b/packages/core/test/DisabledMixin.test.js index cbd4389d5..c9bcf11a7 100644 --- a/packages/core/test/DisabledMixin.test.js +++ b/packages/core/test/DisabledMixin.test.js @@ -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` - - `); + const el = await fixture(html``); 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` - - `); + const el = await fixture(html``); 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` - - `); + const el = await fixture(html``); 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` - - `); + const el = await fixture(html``); 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` - - `); + const el = await fixture(html``); 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` - - `); + const el = await fixture(html``); 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` - - `); + const el = await fixture(html``); el.makeRequestToBeDisabled(); el.disabled = true; el.retractRequestToBeDisabled(); diff --git a/packages/core/test/UpdateStylesMixin.test.js b/packages/core/test/UpdateStylesMixin.test.js index 1f16d5a5b..c8c99f307 100644 --- a/packages/core/test/UpdateStylesMixin.test.js +++ b/packages/core/test/UpdateStylesMixin.test.js @@ -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` -

hey

- `; + return html`

hey

`; } }, ); @@ -65,9 +62,7 @@ describe('UpdateStylesMixin', () => { } render() { - return html` -

hey

- `; + return html`

hey

`; } }, ); diff --git a/packages/field/src/FormControlMixin.js b/packages/field/src/FormControlMixin.js index 24b179416..fbb111578 100644 --- a/packages/field/src/FormControlMixin.js +++ b/packages/field/src/FormControlMixin.js @@ -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 diff --git a/packages/field/test-suites/FormRegistrationMixins.suite.js b/packages/field/test-suites/FormRegistrationMixins.suite.js index 6d06949d9..9ea46f962 100644 --- a/packages/field/test-suites/FormRegistrationMixins.suite.js +++ b/packages/field/test-suites/FormRegistrationMixins.suite.js @@ -90,9 +90,7 @@ export const runRegistrationSuite = customConfig => { } render() { - return html` - - `; + return html``; } }, ); @@ -245,9 +243,7 @@ export const runRegistrationSuite = customConfig => { <${childTag}> `); - const otherPlace = await fixture(html` -
- `); + const otherPlace = await fixture(html`
`); otherPlace.appendChild(portal); const newField = await fixture(html` <${childTag}> @@ -271,9 +267,7 @@ export const runRegistrationSuite = customConfig => { } render() { - return html` - - `; + return html``; } }, ); diff --git a/packages/field/test-suites/FormatMixin.suite.js b/packages/field/test-suites/FormatMixin.suite.js index 1f19b6b7f..20fd885d0 100644 --- a/packages/field/test-suites/FormatMixin.suite.js +++ b/packages/field/test-suites/FormatMixin.suite.js @@ -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` - - `; + return html``; } set value(newValue) { diff --git a/packages/field/test/FocusMixin.test.js b/packages/field/test/FocusMixin.test.js index 329c9ff19..c22446087 100644 --- a/packages/field/test/FocusMixin.test.js +++ b/packages/field/test/FocusMixin.test.js @@ -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` - - `; + return html``; } get _inputNode() { diff --git a/packages/field/test/FormRegistrationMixins.test.js b/packages/field/test/FormRegistrationMixins.test.js index 932d7d6b8..6d926eeea 100644 --- a/packages/field/test/FormRegistrationMixins.test.js +++ b/packages/field/test/FormRegistrationMixins.test.js @@ -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` - - `; + return html``; } }, }); diff --git a/packages/fieldset/test/lion-fieldset.test.js b/packages/fieldset/test/lion-fieldset.test.js index 53e7d1562..26bc9956c 100644 --- a/packages/fieldset/test/lion-fieldset.test.js +++ b/packages/fieldset/test/lion-fieldset.test.js @@ -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('', () => { await triggerFocusFor( fieldset.formElements['hobbies[]'][fieldset.formElements['gender[]'].length - 1]._inputNode, ); - const el = await fixture(html` - - `); + const el = await fixture(html``); el.focus(); expect(fieldset.touched).to.be.true; @@ -540,9 +538,7 @@ describe('', () => { `); await nextFrame(); - const outside = await fixture(html` - - `); + const outside = await fixture(html``); outside.click(); expect(el.touched, 'unfocused fieldset should stay untouched').to.be.false; @@ -569,9 +565,7 @@ describe('', () => { } } - const outSideButton = await fixture(html` - - `); + const outSideButton = await fixture(html``); const el = await fixture(html` <${tag} .validators=${[new Input1IsTen()]}> <${childTag} name="input1" .validators=${[new IsNumber()]}> @@ -599,9 +593,7 @@ describe('', () => { return hasError; } } - const outSideButton = await fixture(html` - - `); + const outSideButton = await fixture(html``); const el = await fixture(html` <${tag} .validators=${[new Input1IsTen()]}> <${childTag} name="input1" .validators=${[new IsNumber()]}> diff --git a/packages/form-system/stories/helper-wc/h-output.js b/packages/form-system/stories/helper-wc/h-output.js index ee09355cb..9f1428f7a 100644 --- a/packages/form-system/stories/helper-wc/h-output.js +++ b/packages/form-system/stories/helper-wc/h-output.js @@ -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 - ${this.show.map( - prop => html` - ${prop} - `, - )} + ${this.show.map(prop => html`${prop}`)} - ${this.show.map( - prop => html` - ${this.__renderProp(field[prop])} - `, - )} + ${this.show.map(prop => html`${this.__renderProp(field[prop])}`)} `; diff --git a/packages/form-system/test/form-integrations.test.js b/packages/form-system/test/form-integrations.test.js index 6db704d3d..f49390d21 100644 --- a/packages/form-system/test/form-integrations.test.js +++ b/packages/form-system/test/form-integrations.test.js @@ -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` - - `, - ); + const el = await fixture(html``); const formEl = el._lionFormNode; expect(formEl.serializedValue).to.eql({ bio: '', diff --git a/packages/form-system/test/model-value-event.test.js b/packages/form-system/test/model-value-event.test.js index 6308b8cba..345f65e18 100644 --- a/packages/form-system/test/model-value-event.test.js +++ b/packages/form-system/test/model-value-event.test.js @@ -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` - - `); + const input = await fixture(html``); 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` - - `); + const input = await fixture(html``); 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` - - `, - ); + const el = await fixture(html``); el.addEventListener('model-value-changed', spy); el.modelValue = 'foo'; // eslint-disable-next-line prefer-destructuring diff --git a/packages/helpers/sb-action-logger/test/sb-action-logger.test.js b/packages/helpers/sb-action-logger/test/sb-action-logger.test.js index 3f7681ea4..754173145 100644 --- a/packages/helpers/sb-action-logger/test/sb-action-logger.test.js +++ b/packages/helpers/sb-action-logger/test/sb-action-logger.test.js @@ -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` - - `); + const el = await fixture(html``); 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` - - `); + const el = await fixture(html``); 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` - - `); + const el = await fixture(html``); 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` - - `); + const el = await fixture(html``); 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` - - `); + const el = await fixture(html``); 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` - - `); + const el = await fixture(html``); 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` - - `); + const el = await fixture(html``); 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` - - `); + const el = await fixture(html``); 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` - - `); + const el = await fixture(html``); expect(el).to.be.true; }); }); diff --git a/packages/icon/src/LionIcon.js b/packages/icon/src/LionIcon.js index 546d9c0b0..ea86a4eeb 100644 --- a/packages/icon/src/LionIcon.js +++ b/packages/icon/src/LionIcon.js @@ -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` - - `; + return html``; } connectedCallback() { diff --git a/packages/icon/test/lion-icon.test.js b/packages/icon/test/lion-icon.test.js index bc2d5d0d9..cea89e5fa 100644 --- a/packages/icon/test/lion-icon.test.js +++ b/packages/icon/test/lion-icon.test.js @@ -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``; - const el = await fixture( - html` - - `, - ); + const el = await fixture(html``); expect(el.children[0].getAttribute('data-test-id')).to.equal('svg'); }); it('is hidden when attribute hidden is true', async () => { const iconFunction = tag => tag``; - const el = await fixture( - html` - - `, - ); + const el = await fixture(html``); expect(el).not.to.be.displayed; }); it('supports svg icon as a lit-html template', async () => { - const icon = html` - - `; - const el = await fixture( - html` - - `, - ); + const icon = html``; + const el = await fixture(html``); 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`...`"'; expect(() => { - fixtureSync( - html` - '}> - `, - ); + fixtureSync(html`'}>`); }).to.throw(Error, errorMessage); expect(() => { - fixtureSync( - html` - ''}> - `, - ); + fixtureSync(html` ''}>`); }).to.throw(Error, errorMessage); }); it('displays an svg icon with an aria label attribute', async () => { - const el = await fixture( - html` - - `, - ); + const el = await fixture(html``); 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` - - `, - ); + const el = await fixture(html``); 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` - - `, - ); + const el = await fixture(html``); await expect(el).to.be.accessible(); }); it('is accessible without an aria label', async () => { - const el = await fixture( - html` - - `, - ); + const el = await fixture(html``); 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` - - `, - ); + const icon = await fixture(html``); expect(icon.children[0].getAttribute('focusable')).to.equal('false'); }); it('can change the displayed icon', async () => { - const el = await fixture( - html` - - `, - ); + const el = await fixture(html``); 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` - - `, - ); - const elHammer = await fixture( - html` - - `, - ); + const el = await fixture(html``); + const elHammer = await fixture(html``); // 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` - - `, - ); + const el = await fixture(html``); 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` - - `, - ); + const el = await fixture(html``); 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` - - `, - ); + const el = await fixture(html``); 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` - - `, - ); + const el = await fixture(html``); 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` - - `, - ); + const el = await fixture(html``); await el.updateComplete; el.iconId = 'bar:lorem:ipsum'; diff --git a/packages/input-amount/test/lion-input-amount.test.js b/packages/input-amount/test/lion-input-amount.test.js index 197b06f03..730cc0ad4 100644 --- a/packages/input-amount/test/lion-input-amount.test.js +++ b/packages/input-amount/test/lion-input-amount.test.js @@ -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('', () => { beforeEach(() => { @@ -21,9 +20,7 @@ describe('', () => { // JOD displays 3 fraction digits by default localize.locale = 'fr-FR'; const el = await fixture( - html` - - `, + html``, ); expect(el.formattedValue).to.equal('123,000'); }); diff --git a/packages/input-date/test/lion-input-date.test.js b/packages/input-date/test/lion-input-date.test.js index f84908605..35fee1cfb 100644 --- a/packages/input-date/test/lion-input-date.test.js +++ b/packages/input-date/test/lion-input-date.test.js @@ -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('', () => { @@ -13,23 +11,17 @@ describe('', () => { }); it('returns undefined when value is empty string', async () => { - const el = await fixture(html` - - `); + const el = await fixture(html``); 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` - - `); + const el = await fixture(html``); expect(el._inputNode.type).to.equal('text'); }); it('has validator "isDate" applied by default', async () => { - const el = await fixture(html` - - `); + const el = await fixture(html``); el.modelValue = '2005/11/10'; expect(el.hasFeedbackFor).to.include('error'); expect(el.validationStates).to.have.a.property('error'); @@ -42,9 +34,7 @@ describe('', () => { }); it("does not throw on invalid dates like new Date('foo')", async () => { - const el = await fixture(html` - - `); + const el = await fixture(html``); expect(() => { el.modelValue = new Date('foo'); }).to.not.throw(); diff --git a/packages/input-datepicker/src/LionInputDatepicker.js b/packages/input-datepicker/src/LionInputDatepicker.js index edab0c613..0092cff45 100644 --- a/packages/input-datepicker/src/LionInputDatepicker.js +++ b/packages/input-datepicker/src/LionInputDatepicker.js @@ -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) { diff --git a/packages/input-datepicker/test/lion-input-datepicker.test.js b/packages/input-datepicker/test/lion-input-datepicker.test.js index c2034ae91..a138b7027 100644 --- a/packages/input-datepicker/test/lion-input-datepicker.test.js +++ b/packages/input-datepicker/test/lion-input-datepicker.test.js @@ -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('', () => { describe('Calendar Overlay', () => { it('implements calendar-overlay Style component', async () => { - const el = await fixture(html` - - `); + const el = await fixture(html``); const elObj = new DatepickerInputObject(el); await elObj.openCalendar(); @@ -30,9 +28,7 @@ describe('', () => { }); it('has a close button, with a tooltip "Close"', async () => { - const el = await fixture(html` - - `); + const el = await fixture(html``); 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('', () => { }); it('closes the calendar on [esc] key', async () => { - const el = await fixture(html` - - `); + const el = await fixture(html``); const elObj = new DatepickerInputObject(el); await elObj.openCalendar(); expect(elObj.overlayController.isShown).to.equal(true); @@ -83,9 +77,7 @@ describe('', () => { }); it('closes the calendar via close button', async () => { - const el = await fixture(html` - - `); + const el = await fixture(html``); const elObj = new DatepickerInputObject(el); await elObj.openCalendar(); expect(elObj.overlayController.isShown).to.equal(true); @@ -95,9 +87,7 @@ describe('', () => { }); it('closes the calendar via outside click', async () => { - const el = await fixture(html` - - `); + const el = await fixture(html``); const elObj = new DatepickerInputObject(el); await elObj.openCalendar(); expect(elObj.overlayController.isShown).to.equal(true); @@ -115,9 +105,7 @@ describe('', () => { describe('Calendar Invoker', () => { it('adds invoker button that toggles the overlay on click in suffix slot ', async () => { - const el = await fixture(html` - - `); + const el = await fixture(html``); const elObj = new DatepickerInputObject(el); expect(elObj.invokerEl).not.to.equal(null); expect(elObj.overlayController.isShown).to.be.false; @@ -126,9 +114,7 @@ describe('', () => { }); it('delegates disabled state of host input', async () => { - const el = await fixture(html` - - `); + const el = await fixture(html``); const elObj = new DatepickerInputObject(el); expect(elObj.overlayController.isShown).to.equal(false); await elObj.openCalendar(); @@ -139,9 +125,7 @@ describe('', () => { }); it('disables invoker when host input is readonly', async () => { - const el = await fixture(html` - - `); + const el = await fixture(html``); const elObj = new DatepickerInputObject(el); expect(elObj.overlayController.isShown).to.equal(false); await elObj.openCalendar(); @@ -167,9 +151,7 @@ describe('', () => { }); it('closes the calendar overlay on "user-selected-date-changed"', async () => { - const el = await fixture(html` - - `); + const el = await fixture(html``); const elObj = new DatepickerInputObject(el); // Make sure the calendar overlay is opened await elObj.openCalendar(); @@ -190,9 +172,7 @@ describe('', () => { }); it('focuses central date on opening of calendar if no date selected', async () => { - const el = await fixture(html` - - `); + const el = await fixture(html``); const elObj = new DatepickerInputObject(el); await elObj.openCalendar(); expect(isSameDate(elObj.calendarEl.focusedDate, elObj.calendarEl.centralDate)).to.be.true; @@ -280,9 +260,7 @@ describe('', () => { }); it('adds accessible label to invoker button', async () => { - const el = await fixture(html` - - `); + const el = await fixture(html``); const elObj = new DatepickerInputObject(el); await elObj.openCalendar(); @@ -291,9 +269,7 @@ describe('', () => { }); it('adds [aria-expanded] to invoker button', async () => { - const el = await fixture(html` - - `); + const el = await fixture(html``); const elObj = new DatepickerInputObject(el); expect(elObj.invokerEl.getAttribute('aria-expanded')).to.equal('false'); @@ -304,9 +280,7 @@ describe('', () => { }); it('is accessible when closed', async () => { - const el = await fixture(html` - - `); + const el = await fixture(html``); const elObj = new DatepickerInputObject(el); await expect(elObj.invokerEl).to.be.accessible(); @@ -314,9 +288,7 @@ describe('', () => { }); it('is accessible when open', async () => { - const el = await fixture(html` - - `); + const el = await fixture(html``); const elObj = new DatepickerInputObject(el); await elObj.openCalendar(); @@ -325,9 +297,7 @@ describe('', () => { }); it('has accessible invoker when open', async () => { - const el = await fixture(html` - - `); + const el = await fixture(html``); const elObj = new DatepickerInputObject(el); await elObj.openCalendar(); @@ -355,9 +325,7 @@ describe('', () => { class extends LionInputDatepicker { /** @override */ _invokerTemplate() { - return html` - Pick my date - `; + return html`Pick my date`; } }, ); @@ -415,9 +383,7 @@ describe('', () => { const myTag = defineCE( class extends LionInputDatepicker { _calendarTemplate() { - return html` - - `; + return html``; } }, ); @@ -515,9 +481,7 @@ describe('', () => { }); it('is hidden when attribute hidden is true', async () => { - const el = await fixture(html` - - `); + const el = await fixture(html``); await el.updateComplete; const myElObj = new DatepickerInputObject(el); diff --git a/packages/localize/test/LocalizeMixin.test.js b/packages/localize/test/LocalizeMixin.test.js index b2705f60e..72317a4be 100644 --- a/packages/localize/test/LocalizeMixin.test.js +++ b/packages/localize/test/LocalizeMixin.test.js @@ -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` -

${this.msgLit('my-element:greeting')}

- `; + return html`

${this.msgLit('my-element:greeting')}

`; } }, ); @@ -333,9 +329,7 @@ describe('LocalizeMixin', () => { } render() { - return html` -

${this.msgLit('my-element:greeting')}

- `; + return html`

${this.msgLit('my-element:greeting')}

`; } }, ); @@ -369,9 +363,7 @@ describe('LocalizeMixin', () => { } render() { - return html` -

${this.msgLit('my-element:greeting')}

- `; + return html`

${this.msgLit('my-element:greeting')}

`; } }, ); diff --git a/packages/overlays/src/OverlayController.js b/packages/overlays/src/OverlayController.js index 74c504ea3..963a268f8 100644 --- a/packages/overlays/src/OverlayController.js +++ b/packages/overlays/src/OverlayController.js @@ -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); diff --git a/packages/overlays/test/OverlayController.test.js b/packages/overlays/test/OverlayController.test.js index b4a3feccd..530ca0f73 100644 --- a/packages/overlays/test/OverlayController.test.js +++ b/packages/overlays/test/OverlayController.test.js @@ -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` -
my content
- `), + contentNode: fixtureSync(html`
my content
`), }); const withLocalTestConfig = () => ({ placementMode: 'local', - contentNode: fixtureSync(html` -
my content
- `), + contentNode: fixtureSync(html`
my content
`), invokerNode: fixtureSync(html`
Invoker
`), @@ -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` - - `), + invokerNode: await fixture(html``), }); 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` - - `); + const elOutside = await fixture(html``); 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` -
- `); + const contentNode = await fixture(html`
`); 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` - - `); + const elOutside = await fixture(html``); 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` -
Invoker
- `); + const invokerNode = await fixture(html`
Invoker
`); const contentNode = await fixture('
Content
'); const ctrl = new OverlayController({ ...withLocalTestConfig(), @@ -957,11 +938,7 @@ describe('OverlayController', () => { it('reinitializes content', async () => { const ctrl = new OverlayController({ ...withLocalTestConfig(), - contentNode: await fixture( - html` -
content1
- `, - ), + contentNode: await fixture(html`
content1
`), }); 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` -
content2
- `, - ), + contentNode: await fixture(html`
content2
`), }); expect(ctrl.contentNode.textContent).to.include('content2'); }); it('respects the initial config provided to new OverlayController(initialConfig)', async () => { - const contentNode = fixtureSync(html` -
my content
- `); + const contentNode = fixtureSync(html`
my content
`); 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` -
my content
- `); + const contentNode = fixtureSync(html`
my content
`); const ctrl = new OverlayController({ // This is the shared config diff --git a/packages/overlays/test/OverlaysManager.test.js b/packages/overlays/test/OverlaysManager.test.js index b6ef2a017..4078e7798 100644 --- a/packages/overlays/test/OverlaysManager.test.js +++ b/packages/overlays/test/OverlaysManager.test.js @@ -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` -

my content

- `); + const contentNode = await fixture(html`

my content

`); defaultOptions = { placementMode: 'global', diff --git a/packages/overlays/test/global-positioning.test.js b/packages/overlays/test/global-positioning.test.js index 8ea8a41b7..149c5c3b8 100644 --- a/packages/overlays/test/global-positioning.test.js +++ b/packages/overlays/test/global-positioning.test.js @@ -5,9 +5,7 @@ import { overlays } from '../src/overlays.js'; const withDefaultGlobalConfig = () => ({ placementMode: 'global', - contentNode: fixtureSync(html` -

my content

- `), + contentNode: fixtureSync(html`

my content

`), }); describe('Global Positioning', () => { diff --git a/packages/overlays/test/local-positioning.test.js b/packages/overlays/test/local-positioning.test.js index 9b52fdbd5..3a75ab076 100644 --- a/packages/overlays/test/local-positioning.test.js +++ b/packages/overlays/test/local-positioning.test.js @@ -5,9 +5,7 @@ import { normalizeTransformStyle } from '../test-helpers/local-positioning-helpe const withLocalTestConfig = () => ({ placementMode: 'local', - contentNode: fixtureSync(html` -
my content
- `), + contentNode: fixtureSync(html`
my content
`), invokerNode: fixtureSync(html`
Invoker
`), @@ -56,9 +54,7 @@ describe('Local Positioning', () => { it('uses top as the default placement', async () => { const ctrl = new OverlayController({ ...withLocalTestConfig(), - contentNode: fixtureSync(html` -
- `), + contentNode: fixtureSync(html`
`), invokerNode: fixtureSync(html`
ctrl.show()}>
`), @@ -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` -
- `), + contentNode: fixtureSync(html`
`), invokerNode: fixtureSync(html`
ctrl.show()}>
`), @@ -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` -
invoker
- `), + contentNode: fixtureSync(html`
invoker
`), invokerNode: fixtureSync(html`
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` -
- `), + contentNode: fixtureSync(html`
`), invokerNode: fixtureSync(html`
ctrl.show()}>
`), @@ -158,9 +148,7 @@ describe('Local Positioning', () => { it('positions the Popper element correctly on show', async () => { const ctrl = new OverlayController({ ...withLocalTestConfig(), - contentNode: fixtureSync(html` -
- `), + contentNode: fixtureSync(html`
`), invokerNode: fixtureSync(html`
ctrl.show()}>
`), @@ -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` -
- `), + contentNode: fixtureSync(html`
`), invokerNode: fixtureSync(html`
ctrl.show()}>
`), @@ -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` -
- `), + contentNode: fixtureSync(html`
`), invokerNode: fixtureSync(html`
ctrl.show()}> Invoker diff --git a/packages/remark-extend/README.md b/packages/remark-extend/README.md index 0200fa995..5df0eb463 100644 --- a/packages/remark-extend/README.md +++ b/packages/remark-extend/README.md @@ -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); ``` diff --git a/packages/remark-extend/test-node/remark-extend.test.js b/packages/remark-extend/test-node/remark-extend.test.js index a4bf19035..bb2d664c3 100644 --- a/packages/remark-extend/test-node/remark-extend.test.js +++ b/packages/remark-extend/test-node/remark-extend.test.js @@ -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), diff --git a/packages/select-rich/src/LionSelectInvoker.js b/packages/select-rich/src/LionSelectInvoker.js index 8dcbbe54f..7afd95f36 100644 --- a/packages/select-rich/src/LionSelectInvoker.js +++ b/packages/select-rich/src/LionSelectInvoker.js @@ -98,12 +98,6 @@ export class LionSelectInvoker extends LionButton { // eslint-disable-next-line class-methods-use-this _afterTemplate() { - return html` - ${!this.singleOption - ? html` - - ` - : ''} - `; + return html`${!this.singleOption ? html`` : ''}`; } } diff --git a/packages/select-rich/src/LionSelectRich.js b/packages/select-rich/src/LionSelectRich.js index cfc60262f..bf711cffb 100644 --- a/packages/select-rich/src/LionSelectRich.js +++ b/packages/select-rich/src/LionSelectRich.js @@ -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() { diff --git a/packages/select-rich/src/differentKeyNamesShimIE.js b/packages/select-rich/src/differentKeyNamesShimIE.js index 65b6d49d1..d03a623c6 100644 --- a/packages/select-rich/src/differentKeyNamesShimIE.js +++ b/packages/select-rich/src/differentKeyNamesShimIE.js @@ -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 diff --git a/packages/select-rich/test/lion-option.test.js b/packages/select-rich/test/lion-option.test.js index b9c3539e7..e049db09e 100644 --- a/packages/select-rich/test/lion-option.test.js +++ b/packages/select-rich/test/lion-option.test.js @@ -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` - - `); + const el = await fixture(html``); expect(el.modelValue).to.deep.equal({ value: 10, checked: false }); }); it('can be checked', async () => { - const el = await fixture(html` - - `); + const el = await fixture(html``); expect(el.modelValue).to.deep.equal({ value: 10, checked: true }); }); it('is hidden when attribute hidden is true', async () => { - const el = await fixture( - html` - - `, - ); + const el = await fixture(html``); expect(el).not.to.be.displayed; }); }); describe('Accessibility', () => { it('has the "option" role', async () => { - const el = await fixture(html` - - `); + const el = await fixture(html``); 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` - - `); + const el = await fixture(html``); 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` - - `); + const el = await fixture(html``); 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` - - `); + const el = await fixture(html``); 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` - - `); + const el = await fixture(html``); expect(el.checked).to.be.false; el.click(); await el.updateComplete; diff --git a/packages/select-rich/test/lion-select-invoker.test.js b/packages/select-rich/test/lion-select-invoker.test.js index 4f1df75f4..d2277fbf0 100644 --- a/packages/select-rich/test/lion-select-invoker.test.js +++ b/packages/select-rich/test/lion-select-invoker.test.js @@ -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` - - `); + const el = await fixture(html``); expect(el instanceof LionButton).to.be.true; }); it('renders invoker info based on selectedElement child elements', async () => { - const el = await fixture(html` - - `); + const el = await fixture(html``); el.selectedElement = await fixture(`

I am

2 lines

`); 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` - - `); + const el = await fixture(html``); el.selectedElement = await fixture(`
just textContent
`); await el.updateComplete; @@ -41,9 +34,7 @@ describe('lion-select-invoker', () => { }); it('has tabindex="0"', async () => { - const el = await fixture(html` - - `); + const el = await fixture(html``); 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` - - `); + const el = await fixture(html``); 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`; } diff --git a/packages/select-rich/test/lion-select-rich.test.js b/packages/select-rich/test/lion-select-rich.test.js index 27d3a2d56..d6d10a45a 100644 --- a/packages/select-rich/test/lion-select-rich.test.js +++ b/packages/select-rich/test/lion-select-rich.test.js @@ -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` - Item 3 - `); + const validChild = await fixture(html`Item 3`); 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` - - `); + const invalidChild = await fixture(html``); 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..`; } }, ); diff --git a/packages/steps/src/LionStep.js b/packages/steps/src/LionStep.js index 9982d361e..c961cdd2d 100644 --- a/packages/steps/src/LionStep.js +++ b/packages/steps/src/LionStep.js @@ -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` - - `; + return html``; } firstUpdated() { diff --git a/packages/steps/src/LionSteps.js b/packages/steps/src/LionSteps.js index c50802e88..0ba25ff69 100644 --- a/packages/steps/src/LionSteps.js +++ b/packages/steps/src/LionSteps.js @@ -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` - - `; + return html``; } firstUpdated() { diff --git a/packages/steps/test/lion-steps.test.js b/packages/steps/test/lion-steps.test.js index cd3aef18f..1ee6ac696 100644 --- a/packages/steps/test/lion-steps.test.js +++ b/packages/steps/test/lion-steps.test.js @@ -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` - - `); + const el = await fixture(html` `); expect(el).to.be.a('HTMLElement'); }); it('is hidden when attribute hidden is true', async () => { - const el = await fixture( - html` - - `, - ); + const el = await fixture(html``); expect(el).not.to.be.displayed; }); diff --git a/packages/switch/src/LionSwitch.js b/packages/switch/src/LionSwitch.js index b5f388cf5..c91eb6741 100644 --- a/packages/switch/src/LionSwitch.js +++ b/packages/switch/src/LionSwitch.js @@ -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() { diff --git a/packages/switch/test/lion-switch-button.test.js b/packages/switch/test/lion-switch-button.test.js index cfdd43af4..c02beca11 100644 --- a/packages/switch/test/lion-switch-button.test.js +++ b/packages/switch/test/lion-switch-button.test.js @@ -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` - - `); + el = await fixture(html``); }); it('should be focusable', () => { diff --git a/packages/switch/test/lion-switch.test.js b/packages/switch/test/lion-switch.test.js index 62e2e95a4..0c3982728 100644 --- a/packages/switch/test/lion-switch.test.js +++ b/packages/switch/test/lion-switch.test.js @@ -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` - - `); + const el = await fixture(html``); 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` - - `); + const el = await fixture(html``); 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` - - `, - ); + const el = await fixture(html``); expect(el).not.to.be.displayed; }); it('should sync its "checked" state to child button', async () => { - const uncheckedEl = await fixture(html` - - `); - const checkedEl = await fixture(html` - - `); + const uncheckedEl = await fixture(html``); + const checkedEl = await fixture(html``); 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` - - `); + const el = await fixture(html``); 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` - - `); + const el = await fixture(html``); 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` - - `); + const el = await fixture(html``); expect(el.submitted).to.be.true; }); }); diff --git a/packages/tabs/src/LionTabs.js b/packages/tabs/src/LionTabs.js index c879881cb..d861c82e1 100644 --- a/packages/tabs/src/LionTabs.js +++ b/packages/tabs/src/LionTabs.js @@ -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}`); diff --git a/packages/textarea/test/lion-textarea.test.js b/packages/textarea/test/lion-textarea.test.js index e87b52724..72abcbb75 100644 --- a/packages/textarea/test/lion-textarea.test.js +++ b/packages/textarea/test/lion-textarea.test.js @@ -1,5 +1,4 @@ import { expect, fixture, html } from '@open-wc/testing'; - import '../lion-textarea.js'; function hasBrowserResizeSupport() { @@ -58,9 +57,7 @@ describe('', () => { it('supports initial modelValue', async () => { const el = await fixture( - html` - - `, + html``, ); expect(el.querySelector('textarea').value).to.equal('From value attribute'); }); @@ -101,11 +98,7 @@ describe('', () => { }); it('stops growing after property "maxRows" is reached when there was an initial value', async () => { - const el = await fixture( - html` - - `, - ); + const el = await fixture(html``); return [4, 5, 6, 7, 8].reduce(async (heightPromise, i) => { const oldHeight = await heightPromise; @@ -126,18 +119,14 @@ describe('', () => { }); it('stops shrinking after property "rows" is reached', async () => { - const el = await fixture(html` - - `); + const el = await fixture(html``); 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 () => { diff --git a/packages/validate/src/LionValidationFeedback.js b/packages/validate/src/LionValidationFeedback.js index ea175630a..bf767a040 100644 --- a/packages/validate/src/LionValidationFeedback.js +++ b/packages/validate/src/LionValidationFeedback.js @@ -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 })} + `, + )} `; } } diff --git a/packages/validate/test-suites/ValidateMixinFeedbackPart.suite.js b/packages/validate/test-suites/ValidateMixinFeedbackPart.suite.js index fc845fe8e..1091e2f7d 100644 --- a/packages/validate/test-suites/ValidateMixinFeedbackPart.suite.js +++ b/packages/validate/test-suites/ValidateMixinFeedbackPart.suite.js @@ -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}`; } }, ); diff --git a/packages/validate/test/lion-validation-feedback.test.js b/packages/validate/test/lion-validation-feedback.test.js index 46374359c..0a5deab26 100644 --- a/packages/validate/test/lion-validation-feedback.test.js +++ b/packages/validate/test/lion-validation-feedback.test.js @@ -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` - - `, - ); + const el = await fixture(html``); 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` - - `, - ); + const el = await fixture(html``); 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` - - `, - ); + const el = await fixture(html``); const clock = sinon.useFakeTimers(); @@ -57,11 +45,7 @@ describe('lion-validation-feedback', () => { }); it('does not clear error messages', async () => { - const el = await fixture( - html` - - `, - ); + const el = await fixture(html``); const clock = sinon.useFakeTimers();