From 0036576ca422da39fe51bf38da4d49f6d3c09965 Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Mon, 9 Oct 2023 16:21:02 +0200 Subject: [PATCH 01/12] refactor: sbb-timetable-barrier-free --- .../sbb-timetable-barrier-free.e2e.ts | 14 +++--- .../sbb-timetable-barrier-free.spec.ts | 25 ++++++---- .../sbb-timetable-barrier-free.stories.tsx | 3 +- .../sbb-timetable-barrier-free.tsx | 50 +++++++++++-------- tsconfig.json | 1 + 5 files changed, 52 insertions(+), 41 deletions(-) diff --git a/src/components/sbb-timetable-barrier-free/sbb-timetable-barrier-free.e2e.ts b/src/components/sbb-timetable-barrier-free/sbb-timetable-barrier-free.e2e.ts index 7cf763d975..76fcbb3188 100644 --- a/src/components/sbb-timetable-barrier-free/sbb-timetable-barrier-free.e2e.ts +++ b/src/components/sbb-timetable-barrier-free/sbb-timetable-barrier-free.e2e.ts @@ -1,18 +1,18 @@ -import { newE2EPage } from '@stencil/core/testing'; import sampleData from './sbb-timetable-barrier-free.sample-data'; +import { assert, fixture } from '@open-wc/testing'; +import { html } from 'lit/static-html.js'; +import { SbbTimetableBarrierFree } from './sbb-timetable-barrier-free'; const config = JSON.stringify(sampleData[0]); describe('sbb-timetable-barrier-free', () => { - let element, page; + let element: SbbTimetableBarrierFree; it('renders', async () => { - page = await newE2EPage(); - await page.setContent( - ``, + element = await fixture( + html``, ); - element = await page.find('sbb-timetable-barrier-free'); - expect(element).toHaveClass('hydrated'); + assert.instanceOf(element, SbbTimetableBarrierFree); }); }); diff --git a/src/components/sbb-timetable-barrier-free/sbb-timetable-barrier-free.spec.ts b/src/components/sbb-timetable-barrier-free/sbb-timetable-barrier-free.spec.ts index 20395d7988..4f474700f8 100644 --- a/src/components/sbb-timetable-barrier-free/sbb-timetable-barrier-free.spec.ts +++ b/src/components/sbb-timetable-barrier-free/sbb-timetable-barrier-free.spec.ts @@ -1,21 +1,25 @@ -import { SbbTimetableBarrierFree } from './sbb-timetable-barrier-free'; -import { newSpecPage } from '@stencil/core/testing'; import sampleData from './sbb-timetable-barrier-free.sample-data'; +import { expect, fixture } from '@open-wc/testing'; +import { html } from 'lit/static-html.js'; +import './sbb-timetable-barrier-free'; const config = JSON.stringify(sampleData[0]); describe('sbb-timetable-barrier-free', () => { it('renders', async () => { - const { root } = await newSpecPage({ - components: [SbbTimetableBarrierFree], - html: ``, - }); + const root = await fixture(html``); - expect(root).toEqualHtml(` + expect(root).dom.to.be.equal( + ` - + + + `, + ); + expect(root).shadowDom.to.be.equal( + `

{ Independent boarding/alighting possible.

- - - `); + `, + ); }); }); diff --git a/src/components/sbb-timetable-barrier-free/sbb-timetable-barrier-free.stories.tsx b/src/components/sbb-timetable-barrier-free/sbb-timetable-barrier-free.stories.tsx index 6082d0599b..7046619659 100644 --- a/src/components/sbb-timetable-barrier-free/sbb-timetable-barrier-free.stories.tsx +++ b/src/components/sbb-timetable-barrier-free/sbb-timetable-barrier-free.stories.tsx @@ -2,7 +2,8 @@ import { h, JSX } from 'jsx-dom'; import readme from './readme.md?raw'; import sampleData from './sbb-timetable-barrier-free.sample-data'; -import type { Meta, StoryObj, Args } from '@storybook/html'; +import type { Meta, StoryObj, Args } from '@storybook/web-components'; +import './sbb-timetable-barrier-free'; const Template = (args): JSX.Element => ( diff --git a/src/components/sbb-timetable-barrier-free/sbb-timetable-barrier-free.tsx b/src/components/sbb-timetable-barrier-free/sbb-timetable-barrier-free.tsx index a608162b7b..7342a660bd 100644 --- a/src/components/sbb-timetable-barrier-free/sbb-timetable-barrier-free.tsx +++ b/src/components/sbb-timetable-barrier-free/sbb-timetable-barrier-free.tsx @@ -1,5 +1,3 @@ -import { Component, Element, h, JSX, Prop, State } from '@stencil/core'; - import icons from '../../global/timetable/icons.json'; import { i18nBarrierFreeTravel } from '../../global/i18n'; import { @@ -7,52 +5,60 @@ import { HandlerRepository, languageChangeHandlerAspect, } from '../../global/eventing'; +import { CSSResult, html, LitElement, TemplateResult } from 'lit'; +import { customElement, property, state } from 'lit/decorators.js'; +import Style from './sbb-timetable-barrier-free.scss?lit&inline'; + +@customElement('sbb-timetable-barrier-free') +export class SbbTimetableBarrierFree extends LitElement { + public static override styles: CSSResult = Style; -@Component({ - shadow: true, - styleUrl: 'sbb-timetable-barrier-free.scss', - tag: 'sbb-timetable-barrier-free', -}) -export class SbbTimetableBarrierFree { /** * Stringified JSON which defines most of the * content of the component. Please check the * individual stories to get an idea of the * structure. */ - @Prop() public config!: string; - - @State() private _currentLanguage = documentLanguage(); + @property() public config!: string; - @Element() private _element!: HTMLElement; + @state() private _currentLanguage = documentLanguage(); private _handlerRepository = new HandlerRepository( - this._element, + this, languageChangeHandlerAspect((l) => (this._currentLanguage = l)), ); - public connectedCallback(): void { + public override connectedCallback(): void { + super.connectedCallback(); this._handlerRepository.connect(); } - public disconnectedCallback(): void { + public override disconnectedCallback(): void { + super.disconnectedCallback(); this._handlerRepository.disconnect(); } - public render(): JSX.Element { + protected override render(): TemplateResult { const config = JSON.parse(this.config); const a11yLabel = `${i18nBarrierFreeTravel[this._currentLanguage]} ${config.text}`; const appearanceClass = ' barrier-free--second-level'; - return ( -

- {a11yLabel} + return html` +

+ ${a11yLabel}

- ); + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + // eslint-disable-next-line @typescript-eslint/naming-convention + 'sbb-timetable-barrier-free': SbbTimetableBarrierFree; } } diff --git a/tsconfig.json b/tsconfig.json index 557d718528..4db9e099aa 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -15,6 +15,7 @@ "experimentalDecorators": true, "jsx": "react", "jsxFactory": "h", + "resolveJsonModule": true, /** linting **/ "allowSyntheticDefaultImports": true, From 0c3888ee73998d6fd82e0f3f58dd5855837db01b Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Mon, 9 Oct 2023 16:24:16 +0200 Subject: [PATCH 02/12] refactor: sbb-timetable-duration --- .../sbb-timetable-duration.e2e.ts | 15 +++--- .../sbb-timetable-duration.spec.ts | 26 +++++----- .../sbb-timetable-duration.stories.tsx | 3 +- .../sbb-timetable-duration.tsx | 47 +++++++++++-------- 4 files changed, 52 insertions(+), 39 deletions(-) diff --git a/src/components/sbb-timetable-duration/sbb-timetable-duration.e2e.ts b/src/components/sbb-timetable-duration/sbb-timetable-duration.e2e.ts index 16456bcbdb..b8593522f6 100644 --- a/src/components/sbb-timetable-duration/sbb-timetable-duration.e2e.ts +++ b/src/components/sbb-timetable-duration/sbb-timetable-duration.e2e.ts @@ -1,16 +1,17 @@ -import { newE2EPage } from '@stencil/core/testing'; import sampleData from './sbb-timetable-duration.sample-data'; +import { assert, fixture } from '@open-wc/testing'; +import { html } from 'lit/static-html.js'; +import { SbbTimetableDuration } from './sbb-timetable-duration'; const config = JSON.stringify(sampleData[0]); describe('sbb-timetable-duration', () => { - let element, page; + let element: SbbTimetableDuration; it('renders', async () => { - page = await newE2EPage(); - await page.setContent(``); - - element = await page.find('sbb-timetable-duration'); - expect(element).toHaveClass('hydrated'); + element = await fixture( + html``, + ); + assert.instanceOf(element, SbbTimetableDuration); }); }); diff --git a/src/components/sbb-timetable-duration/sbb-timetable-duration.spec.ts b/src/components/sbb-timetable-duration/sbb-timetable-duration.spec.ts index 795e610051..9ced57b63f 100644 --- a/src/components/sbb-timetable-duration/sbb-timetable-duration.spec.ts +++ b/src/components/sbb-timetable-duration/sbb-timetable-duration.spec.ts @@ -1,21 +1,26 @@ -import { SbbTimetableDuration } from './sbb-timetable-duration'; -import { newSpecPage } from '@stencil/core/testing'; import sampleData from './sbb-timetable-duration.sample-data'; +import { expect, fixture } from '@open-wc/testing'; +import { html } from 'lit/static-html.js'; + +import './sbb-timetable-duration'; const config = JSON.stringify(sampleData[0]); describe('sbb-timetable-duration', () => { it('renders', async () => { - const { root } = await newSpecPage({ - components: [SbbTimetableDuration], - html: ``, - }); + const root = await fixture(html``); - expect(root).toEqualHtml(` + expect(root).dom.to.be.equal( + ` - + + + `, + ); + expect(root).shadowDom.to.be.equal( + `

{ 37 Minutes.

- - - `); + `, + ); }); }); diff --git a/src/components/sbb-timetable-duration/sbb-timetable-duration.stories.tsx b/src/components/sbb-timetable-duration/sbb-timetable-duration.stories.tsx index f4bda436a0..a933ed9dba 100644 --- a/src/components/sbb-timetable-duration/sbb-timetable-duration.stories.tsx +++ b/src/components/sbb-timetable-duration/sbb-timetable-duration.stories.tsx @@ -2,7 +2,8 @@ import { h, JSX } from 'jsx-dom'; import readme from './readme.md?raw'; import sampleData from './sbb-timetable-duration.sample-data'; -import type { Meta, StoryObj, Args } from '@storybook/html'; +import type { Meta, StoryObj, Args } from '@storybook/web-components'; +import './sbb-timetable-duration'; const Template = (args): JSX.Element => ( diff --git a/src/components/sbb-timetable-duration/sbb-timetable-duration.tsx b/src/components/sbb-timetable-duration/sbb-timetable-duration.tsx index 0de9eab854..a9c1ccaadc 100644 --- a/src/components/sbb-timetable-duration/sbb-timetable-duration.tsx +++ b/src/components/sbb-timetable-duration/sbb-timetable-duration.tsx @@ -1,43 +1,43 @@ -import { Component, Element, h, JSX, Prop, State } from '@stencil/core'; import { i18nDurationHour, i18nDurationMinute } from '../../global/i18n'; import { documentLanguage, HandlerRepository, languageChangeHandlerAspect, } from '../../global/eventing'; +import { CSSResult, html, LitElement, TemplateResult } from 'lit'; +import { customElement, property, state } from 'lit/decorators.js'; +import Style from './sbb-timetable-duration.scss?lit&inline'; + +@customElement('sbb-timetable-duration') +export class SbbTimetableDuration extends LitElement { + public static override styles: CSSResult = Style; -@Component({ - shadow: true, - styleUrl: 'sbb-timetable-duration.scss', - tag: 'sbb-timetable-duration', -}) -export class SbbTimetableDuration { /** * Stringified JSON which defines most of the * content of the component. Please check the * individual stories to get an idea of the * structure. */ - @Prop() public config!: string; - - @State() private _currentLanguage = documentLanguage(); + @property() public config!: string; - @Element() private _element!: HTMLElement; + @state() private _currentLanguage = documentLanguage(); private _handlerRepository = new HandlerRepository( - this._element, + this, languageChangeHandlerAspect((l) => (this._currentLanguage = l)), ); - public connectedCallback(): void { + public override connectedCallback(): void { + super.connectedCallback(); this._handlerRepository.connect(); } - public disconnectedCallback(): void { + public override disconnectedCallback(): void { + super.disconnectedCallback(); this._handlerRepository.disconnect(); } - public render(): JSX.Element { + protected override render(): TemplateResult { const config = JSON.parse(this.config); const hoursLabelShort = i18nDurationHour.multiple.short[this._currentLanguage]; @@ -65,13 +65,20 @@ export class SbbTimetableDuration { visualText += ` ${config.minutes} ${minutesLabelShort}`; a11yLabel += ` ${config.minutes} ${minutesLabelLong}.`; - return ( -

+ return html` +

- {a11yLabel} + ${a11yLabel}

- ); + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + // eslint-disable-next-line @typescript-eslint/naming-convention + 'sbb-timetable-duration': SbbTimetableDuration; } } From 02e374cdba7a0c3472d0e51c09c7083303d06239 Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Mon, 9 Oct 2023 16:27:03 +0200 Subject: [PATCH 03/12] refactor: sbb-timetable-occupancy --- .../sbb-timetable-occupancy.e2e.ts | 15 ++-- .../sbb-timetable-occupancy.spec.ts | 25 ++++--- .../sbb-timetable-occupancy.stories.tsx | 3 +- .../sbb-timetable-occupancy.tsx | 71 ++++++++++--------- 4 files changed, 62 insertions(+), 52 deletions(-) diff --git a/src/components/sbb-timetable-occupancy/sbb-timetable-occupancy.e2e.ts b/src/components/sbb-timetable-occupancy/sbb-timetable-occupancy.e2e.ts index 0198562d3e..f6b455a11d 100644 --- a/src/components/sbb-timetable-occupancy/sbb-timetable-occupancy.e2e.ts +++ b/src/components/sbb-timetable-occupancy/sbb-timetable-occupancy.e2e.ts @@ -1,16 +1,17 @@ -import { newE2EPage } from '@stencil/core/testing'; import sampleData from './sbb-timetable-occupancy.sample-data'; +import { assert, fixture } from '@open-wc/testing'; +import { html } from 'lit/static-html.js'; +import { SbbTimetableOccupancy } from './sbb-timetable-occupancy'; const config = JSON.stringify(sampleData[3]); describe('sbb-timetable-occupancy', () => { - let element, page; + let element: SbbTimetableOccupancy; it('renders', async () => { - page = await newE2EPage(); - await page.setContent(``); - - element = await page.find('sbb-timetable-occupancy'); - expect(element).toHaveClass('hydrated'); + element = await fixture( + html``, + ); + assert.instanceOf(element, SbbTimetableOccupancy); }); }); diff --git a/src/components/sbb-timetable-occupancy/sbb-timetable-occupancy.spec.ts b/src/components/sbb-timetable-occupancy/sbb-timetable-occupancy.spec.ts index 6c479f7375..1ec60f87b9 100644 --- a/src/components/sbb-timetable-occupancy/sbb-timetable-occupancy.spec.ts +++ b/src/components/sbb-timetable-occupancy/sbb-timetable-occupancy.spec.ts @@ -1,21 +1,25 @@ -import { SbbTimetableOccupancy } from './sbb-timetable-occupancy'; -import { newSpecPage } from '@stencil/core/testing'; import sampleData from './sbb-timetable-occupancy.sample-data'; +import { expect, fixture } from '@open-wc/testing'; +import { html } from 'lit/static-html.js'; +import './sbb-timetable-occupancy'; const config = JSON.stringify(sampleData[3]); describe('sbb-timetable-occupancy', () => { it('renders', async () => { - const { root } = await newSpecPage({ - components: [SbbTimetableOccupancy], - html: ``, - }); + const root = await fixture(html``); - expect(root).toEqualHtml(` + expect(root).dom.to.be.equal( + ` - + + + `, + ); + expect(root).shadowDom.to.be.equal( + `
    {
- - - `); + `, + ); }); }); diff --git a/src/components/sbb-timetable-occupancy/sbb-timetable-occupancy.stories.tsx b/src/components/sbb-timetable-occupancy/sbb-timetable-occupancy.stories.tsx index 7827f5ef7b..5c93140f3d 100644 --- a/src/components/sbb-timetable-occupancy/sbb-timetable-occupancy.stories.tsx +++ b/src/components/sbb-timetable-occupancy/sbb-timetable-occupancy.stories.tsx @@ -2,7 +2,8 @@ import { h, JSX } from 'jsx-dom'; import readme from './readme.md?raw'; import sampleData from './sbb-timetable-occupancy.sample-data'; -import type { Meta, StoryObj, Args } from '@storybook/html'; +import type { Meta, StoryObj, Args } from '@storybook/web-components'; +import './sbb-timetable-occupancy'; const Template = (args): JSX.Element => ( diff --git a/src/components/sbb-timetable-occupancy/sbb-timetable-occupancy.tsx b/src/components/sbb-timetable-occupancy/sbb-timetable-occupancy.tsx index f62d6fbe7c..d7c95707ce 100644 --- a/src/components/sbb-timetable-occupancy/sbb-timetable-occupancy.tsx +++ b/src/components/sbb-timetable-occupancy/sbb-timetable-occupancy.tsx @@ -1,4 +1,3 @@ -import { Component, Element, h, JSX, Prop, State } from '@stencil/core'; import icons from '../../global/timetable/icons.json'; import { i18nClass, i18nOccupancy } from '../../global/i18n'; import { @@ -6,68 +5,74 @@ import { HandlerRepository, languageChangeHandlerAspect, } from '../../global/eventing'; +import { CSSResult, html, LitElement, TemplateResult } from 'lit'; +import { customElement, property, state } from 'lit/decorators.js'; +import Style from './sbb-timetable-occupancy.scss?lit&inline'; + +@customElement('sbb-timetable-occupancy') +export class SbbTimetableOccupancy extends LitElement { + public static override styles: CSSResult = Style; -@Component({ - shadow: true, - styleUrl: 'sbb-timetable-occupancy.scss', - tag: 'sbb-timetable-occupancy', -}) -export class SbbTimetableOccupancy { /** * Stringified JSON which defines most of the * content of the component. Please check the * individual stories to get an idea of the * structure. */ - @Prop() public config!: string; - - @State() private _currentLanguage = documentLanguage(); + @property() public config!: string; - @Element() private _element!: HTMLElement; + @state() private _currentLanguage = documentLanguage(); private _handlerRepository = new HandlerRepository( - this._element, + this, languageChangeHandlerAspect((l) => (this._currentLanguage = l)), ); - public connectedCallback(): void { + public override connectedCallback(): void { + super.connectedCallback(); this._handlerRepository.connect(); } - public disconnectedCallback(): void { + public override disconnectedCallback(): void { + super.disconnectedCallback(); this._handlerRepository.disconnect(); } - public render(): JSX.Element { + protected override render(): TemplateResult { const { occupancyItems } = JSON.parse(this.config); - return ( + return html`
    - {occupancyItems.map((occupancyItem) => { + ${occupancyItems.map((occupancyItem) => { const occupancyText = i18nOccupancy[occupancyItem.occupancy][this._currentLanguage]; const classText = occupancyItem.class === '1' ? 'first' : 'second'; const a11yLabel = `${i18nClass[classText][this._currentLanguage]}. ${occupancyText}.`; - return ( -
  • - - - {a11yLabel} + return html`
  • + + - -
    • - ); + ${a11yLabel} + + + `; })}
- ); + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + // eslint-disable-next-line @typescript-eslint/naming-convention + 'sbb-timetable-occupancy': SbbTimetableOccupancy; } } From 5ab0c9bb9e52143fbc4932ff979c8ad08e387d28 Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Mon, 9 Oct 2023 16:28:57 +0200 Subject: [PATCH 04/12] refactor: sbb-timetable-park-and-rail --- .../sbb-timetable-park-and-rail.e2e.ts | 15 +++--- .../sbb-timetable-park-and-rail.spec.ts | 25 +++++---- .../sbb-timetable-park-and-rail.stories.tsx | 3 +- .../sbb-timetable-park-and-rail.tsx | 52 +++++++++++-------- 4 files changed, 52 insertions(+), 43 deletions(-) diff --git a/src/components/sbb-timetable-park-and-rail/sbb-timetable-park-and-rail.e2e.ts b/src/components/sbb-timetable-park-and-rail/sbb-timetable-park-and-rail.e2e.ts index 95b0870e25..6e4f25b1f8 100644 --- a/src/components/sbb-timetable-park-and-rail/sbb-timetable-park-and-rail.e2e.ts +++ b/src/components/sbb-timetable-park-and-rail/sbb-timetable-park-and-rail.e2e.ts @@ -1,18 +1,17 @@ -import { newE2EPage } from '@stencil/core/testing'; import sampleData from './sbb-timetable-park-and-rail.sample-data'; +import { assert, fixture } from '@open-wc/testing'; +import { html } from 'lit/static-html.js'; +import { SbbTimetableParkAndRail } from './sbb-timetable-park-and-rail'; const config = JSON.stringify(sampleData[0]); describe('sbb-timetable-park-and-rail', () => { - let element, page; + let element: SbbTimetableParkAndRail; it('renders', async () => { - page = await newE2EPage(); - await page.setContent( - ``, + element = await fixture( + html``, ); - - element = await page.find('sbb-timetable-park-and-rail'); - expect(element).toHaveClass('hydrated'); + assert.instanceOf(element, SbbTimetableParkAndRail); }); }); diff --git a/src/components/sbb-timetable-park-and-rail/sbb-timetable-park-and-rail.spec.ts b/src/components/sbb-timetable-park-and-rail/sbb-timetable-park-and-rail.spec.ts index 6d0ed51b8a..5bf907bdbb 100644 --- a/src/components/sbb-timetable-park-and-rail/sbb-timetable-park-and-rail.spec.ts +++ b/src/components/sbb-timetable-park-and-rail/sbb-timetable-park-and-rail.spec.ts @@ -1,21 +1,25 @@ -import { SbbTimetableParkAndRail } from './sbb-timetable-park-and-rail'; -import { newSpecPage } from '@stencil/core/testing'; import sampleData from './sbb-timetable-park-and-rail.sample-data'; +import { expect, fixture } from '@open-wc/testing'; +import { html } from 'lit/static-html.js'; +import './sbb-timetable-park-and-rail'; const config = JSON.stringify(sampleData[0]); describe('sbb-timetable-park-and-rail', () => { it('renders', async () => { - const { root } = await newSpecPage({ - components: [SbbTimetableParkAndRail], - html: ``, - }); + const root = await fixture(html``); - expect(root).toEqualHtml(` + expect(root).dom.to.be.equal( + ` - + + + `, + ); + expect(root).shadowDom.to.be.equal( + `
{
- - - `); + `, + ); }); }); diff --git a/src/components/sbb-timetable-park-and-rail/sbb-timetable-park-and-rail.stories.tsx b/src/components/sbb-timetable-park-and-rail/sbb-timetable-park-and-rail.stories.tsx index 310c42ef3d..ca8fb3dcf9 100644 --- a/src/components/sbb-timetable-park-and-rail/sbb-timetable-park-and-rail.stories.tsx +++ b/src/components/sbb-timetable-park-and-rail/sbb-timetable-park-and-rail.stories.tsx @@ -2,8 +2,9 @@ import { h, JSX } from 'jsx-dom'; import readme from './readme.md?raw'; import sampleData from './sbb-timetable-park-and-rail.sample-data'; -import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/html'; +import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components'; import type { InputType } from '@storybook/types'; +import './sbb-timetable-park-and-rail'; const Template = (args): JSX.Element => ( (this._currentLanguage = l)), ); - public connectedCallback(): void { + public override connectedCallback(): void { + super.connectedCallback(); this._handlerRepository.connect(); } - public disconnectedCallback(): void { + public override disconnectedCallback(): void { + super.disconnectedCallback(); this._handlerRepository.disconnect(); } - public render(): JSX.Element { + protected override render(): TemplateResult { const config = JSON.parse(this.config); let a11yMeters = i18nDistanceMeter.multiple.long[this._currentLanguage]; @@ -71,16 +70,23 @@ export class SbbTimetableParkAndRail { const appearanceClass = ` park-and-rail--${this.appearance}`; - return ( -
+ return html` +
- ); + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + // eslint-disable-next-line @typescript-eslint/naming-convention + 'sbb-timetable-park-and-rail': SbbTimetableParkAndRail; } } From d720a83c2472172a3dd39be37ba2fcd3d8c04700 Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Mon, 9 Oct 2023 16:31:29 +0200 Subject: [PATCH 05/12] refactor: sbb-timetable-row-column-headers --- .../sbb-timetable-row-column-headers.e2e.ts | 17 ++++----- .../sbb-timetable-row-column-headers.spec.ts | 25 +++++++------ ...b-timetable-row-column-headers.stories.tsx | 3 +- .../sbb-timetable-row-column-headers.tsx | 35 +++++++++++-------- 4 files changed, 46 insertions(+), 34 deletions(-) diff --git a/src/components/sbb-timetable-row-column-headers/sbb-timetable-row-column-headers.e2e.ts b/src/components/sbb-timetable-row-column-headers/sbb-timetable-row-column-headers.e2e.ts index 9d15c59f87..7d2d1379f5 100644 --- a/src/components/sbb-timetable-row-column-headers/sbb-timetable-row-column-headers.e2e.ts +++ b/src/components/sbb-timetable-row-column-headers/sbb-timetable-row-column-headers.e2e.ts @@ -1,18 +1,19 @@ -import { newE2EPage } from '@stencil/core/testing'; import sampleData from './sbb-timetable-row-column-headers.sample-data'; +import { assert, fixture } from '@open-wc/testing'; +import { html } from 'lit/static-html.js'; +import { SbbTimetableRowColumnHeaders } from './sbb-timetable-row-column-headers'; const config = JSON.stringify(sampleData); describe('sbb-timetable-row-column-headers', () => { - let element, page; + let element: SbbTimetableRowColumnHeaders; it('renders', async () => { - page = await newE2EPage(); - await page.setContent( - ``, + element = await fixture( + html``, ); - - element = await page.find('sbb-timetable-row-column-headers'); - expect(element).toHaveClass('hydrated'); + assert.instanceOf(element, SbbTimetableRowColumnHeaders); }); }); diff --git a/src/components/sbb-timetable-row-column-headers/sbb-timetable-row-column-headers.spec.ts b/src/components/sbb-timetable-row-column-headers/sbb-timetable-row-column-headers.spec.ts index 6f37581a71..c4b630ffcd 100644 --- a/src/components/sbb-timetable-row-column-headers/sbb-timetable-row-column-headers.spec.ts +++ b/src/components/sbb-timetable-row-column-headers/sbb-timetable-row-column-headers.spec.ts @@ -1,21 +1,25 @@ -import { SbbTimetableRowColumnHeaders } from './sbb-timetable-row-column-headers'; -import { newSpecPage } from '@stencil/core/testing'; import sampleData from './sbb-timetable-row-column-headers.sample-data'; +import { expect, fixture } from '@open-wc/testing'; +import { html } from 'lit/static-html.js'; +import './sbb-timetable-row-column-headers'; const config = JSON.stringify(sampleData); describe('sbb-timetable-row-column-headers', () => { it('renders', async () => { - const { root } = await newSpecPage({ - components: [SbbTimetableRowColumnHeaders], - html: ``, - }); + const root = await fixture(html``); - expect(root).toEqualHtml(` + expect(root).dom.to.be.equal( + ` - + + + `, + ); + expect(root).shadowDom.to.be.equal( + `
Short Infos
Summary
@@ -26,8 +30,7 @@ describe('sbb-timetable-row-column-headers', () => {
Duration
Real time information
- - - `); + `, + ); }); }); diff --git a/src/components/sbb-timetable-row-column-headers/sbb-timetable-row-column-headers.stories.tsx b/src/components/sbb-timetable-row-column-headers/sbb-timetable-row-column-headers.stories.tsx index 47e2f6fed7..22286c532d 100644 --- a/src/components/sbb-timetable-row-column-headers/sbb-timetable-row-column-headers.stories.tsx +++ b/src/components/sbb-timetable-row-column-headers/sbb-timetable-row-column-headers.stories.tsx @@ -3,7 +3,8 @@ import { h, JSX } from 'jsx-dom'; import readme from './readme.md?raw'; import sampleData from './sbb-timetable-row-column-headers.sample-data'; -import type { Meta, StoryObj, Args } from '@storybook/html'; +import type { Meta, StoryObj, Args } from '@storybook/web-components'; +import './sbb-timetable-row-column-headers'; const Template = (args): JSX.Element => ( - {columnHeaders.map((columnHeader) => ( -
{columnHeader}
- ))} + ${columnHeaders.map( + (columnHeader) => html`
${columnHeader}
`, + )}
- ); + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + // eslint-disable-next-line @typescript-eslint/naming-convention + 'sbb-timetable-row-column-headers': SbbTimetableRowColumnHeaders; } } From 0c08e6a47b8aa8116b2b3b06ebf1a73db13c7cdc Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Mon, 9 Oct 2023 16:33:43 +0200 Subject: [PATCH 06/12] refactor: sbb-timetable-row-day-change --- .../sbb-timetable-row-day-change.e2e.ts | 15 +++--- .../sbb-timetable-row-day-change.spec.ts | 25 +++++---- .../sbb-timetable-row-day-change.stories.tsx | 3 +- .../sbb-timetable-row-day-change.tsx | 53 ++++++++++--------- 4 files changed, 51 insertions(+), 45 deletions(-) diff --git a/src/components/sbb-timetable-row-day-change/sbb-timetable-row-day-change.e2e.ts b/src/components/sbb-timetable-row-day-change/sbb-timetable-row-day-change.e2e.ts index bd3d00955c..f9ccafe0d9 100644 --- a/src/components/sbb-timetable-row-day-change/sbb-timetable-row-day-change.e2e.ts +++ b/src/components/sbb-timetable-row-day-change/sbb-timetable-row-day-change.e2e.ts @@ -1,18 +1,17 @@ -import { newE2EPage } from '@stencil/core/testing'; import sampleData from './sbb-timetable-row-day-change.sample-data'; +import { assert, fixture } from '@open-wc/testing'; +import { html } from 'lit/static-html.js'; +import { SbbTimetableRowDayChange } from './sbb-timetable-row-day-change'; const config = JSON.stringify(sampleData[1]); describe('sbb-timetable-row-day-change', () => { - let element, page; + let element: SbbTimetableRowDayChange; it('renders', async () => { - page = await newE2EPage(); - await page.setContent( - ``, + element = await fixture( + html``, ); - - element = await page.find('sbb-timetable-row-day-change'); - expect(element).toHaveClass('hydrated'); + assert.instanceOf(element, SbbTimetableRowDayChange); }); }); diff --git a/src/components/sbb-timetable-row-day-change/sbb-timetable-row-day-change.spec.ts b/src/components/sbb-timetable-row-day-change/sbb-timetable-row-day-change.spec.ts index a833bb4d6c..5cce26d918 100644 --- a/src/components/sbb-timetable-row-day-change/sbb-timetable-row-day-change.spec.ts +++ b/src/components/sbb-timetable-row-day-change/sbb-timetable-row-day-change.spec.ts @@ -1,21 +1,25 @@ -import { SbbTimetableRowDayChange } from './sbb-timetable-row-day-change'; -import { newSpecPage } from '@stencil/core/testing'; import sampleData from './sbb-timetable-row-day-change.sample-data'; +import { expect, fixture } from '@open-wc/testing'; +import { html } from 'lit/static-html.js'; +import './sbb-timetable-row-day-change'; const config = JSON.stringify(sampleData[1]); describe('sbb-timetable-row-day-change', () => { it('renders', async () => { - const { root } = await newSpecPage({ - components: [SbbTimetableRowDayChange], - html: ``, - }); + const root = await fixture(html``); - expect(root).toEqualHtml(` + expect(root).dom.to.be.equal( + ` - + + + `, + ); + expect(root).shadowDom.to.be.equal( + `
{
- - - `); + `, + ); }); }); diff --git a/src/components/sbb-timetable-row-day-change/sbb-timetable-row-day-change.stories.tsx b/src/components/sbb-timetable-row-day-change/sbb-timetable-row-day-change.stories.tsx index 2afde8adfc..7fa637aae1 100644 --- a/src/components/sbb-timetable-row-day-change/sbb-timetable-row-day-change.stories.tsx +++ b/src/components/sbb-timetable-row-day-change/sbb-timetable-row-day-change.stories.tsx @@ -2,7 +2,8 @@ import { h, JSX } from 'jsx-dom'; import readme from './readme.md?raw'; import sampleData from './sbb-timetable-row-day-change.sample-data'; -import type { Meta, StoryObj, Args } from '@storybook/html'; +import type { Meta, StoryObj, Args } from '@storybook/web-components'; +import './sbb-timetable-row-day-change'; const Template = (args): JSX.Element => ( diff --git a/src/components/sbb-timetable-row-day-change/sbb-timetable-row-day-change.tsx b/src/components/sbb-timetable-row-day-change/sbb-timetable-row-day-change.tsx index a3c2bcb4e1..860424af3c 100644 --- a/src/components/sbb-timetable-row-day-change/sbb-timetable-row-day-change.tsx +++ b/src/components/sbb-timetable-row-day-change/sbb-timetable-row-day-change.tsx @@ -1,43 +1,43 @@ -import { Component, Element, h, JSX, Prop, State } from '@stencil/core'; import { i18nAttention, i18nConnectionsDepartOn, i18nDayChange } from '../../global/i18n'; import { documentLanguage, HandlerRepository, languageChangeHandlerAspect, } from '../../global/eventing'; +import { CSSResult, html, LitElement, TemplateResult } from 'lit'; +import { customElement, property, state } from 'lit/decorators.js'; +import Style from './sbb-timetable-row-day-change.scss?lit&inline'; + +@customElement('sbb-timetable-row-day-change') +export class SbbTimetableRowDayChange extends LitElement { + public static override styles: CSSResult = Style; -@Component({ - shadow: true, - styleUrl: 'sbb-timetable-row-day-change.scss', - tag: 'sbb-timetable-row-day-change', -}) -export class SbbTimetableRowDayChange { /** * Stringified JSON which defines most of the * content of the component. Please check the * individual stories to get an idea of the * structure. */ - @Prop() public config!: string; - - @State() private _currentLanguage = documentLanguage(); + @property() public config!: string; - @Element() private _element!: HTMLElement; + @state() private _currentLanguage = documentLanguage(); private _handlerRepository = new HandlerRepository( - this._element, + this, languageChangeHandlerAspect((l) => (this._currentLanguage = l)), ); - public connectedCallback(): void { + public override connectedCallback(): void { + super.connectedCallback(); this._handlerRepository.connect(); } - public disconnectedCallback(): void { + public override disconnectedCallback(): void { + super.disconnectedCallback(); this._handlerRepository.disconnect(); } - public render(): JSX.Element { + protected override render(): TemplateResult { const config = JSON.parse(this.config); let attention = ''; @@ -58,21 +58,24 @@ export class SbbTimetableRowDayChange { const visualText = `${config.day}, ${config.date}`; const a11yLabel = `${dayChange}${attention}${departsOn}${config.day}, ${config.date}`; - return ( -
+ return html` +

- - {dayChange} {attention} {departsOn} {config.day}, {config.date} + + ${dayChange} ${attention} ${departsOn} ${config.day}, ${config.date}

- ); + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + // eslint-disable-next-line @typescript-eslint/naming-convention + 'sbb-timetable-row-day-change': SbbTimetableRowDayChange; } } From 203b40983fc32414b3fc7685483a64eb3478d73c Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Mon, 9 Oct 2023 16:35:21 +0200 Subject: [PATCH 07/12] refactor: sbb-timetable-row-header --- .../sbb-timetable-row-header.e2e.ts | 14 ++++---- .../sbb-timetable-row-header.spec.ts | 27 ++++++++------- .../sbb-timetable-row-header.stories.tsx | 3 +- .../sbb-timetable-row-header.tsx | 33 ++++++++++--------- 4 files changed, 43 insertions(+), 34 deletions(-) diff --git a/src/components/sbb-timetable-row-header/sbb-timetable-row-header.e2e.ts b/src/components/sbb-timetable-row-header/sbb-timetable-row-header.e2e.ts index dbd77b86b3..da62e5defb 100644 --- a/src/components/sbb-timetable-row-header/sbb-timetable-row-header.e2e.ts +++ b/src/components/sbb-timetable-row-header/sbb-timetable-row-header.e2e.ts @@ -1,18 +1,18 @@ -import { newE2EPage } from '@stencil/core/testing'; import sampleData from './sbb-timetable-row-header.sample-data'; +import { assert, fixture } from '@open-wc/testing'; +import { html } from 'lit/static-html.js'; +import { SbbTimetableRowHeader } from './sbb-timetable-row-header'; const config = JSON.stringify(sampleData[0]); describe('sbb-timetable-row-header', () => { - let element, page; + let element: SbbTimetableRowHeader; it('renders', async () => { - page = await newE2EPage(); - await page.setContent( - ``, + element = await fixture( + html``, ); - element = await page.find('sbb-timetable-row-header'); - expect(element).toHaveClass('hydrated'); + assert.instanceOf(element, SbbTimetableRowHeader); }); }); diff --git a/src/components/sbb-timetable-row-header/sbb-timetable-row-header.spec.ts b/src/components/sbb-timetable-row-header/sbb-timetable-row-header.spec.ts index 70777ee5c4..467b7d3f94 100644 --- a/src/components/sbb-timetable-row-header/sbb-timetable-row-header.spec.ts +++ b/src/components/sbb-timetable-row-header/sbb-timetable-row-header.spec.ts @@ -1,25 +1,30 @@ -import { SbbTimetableRowHeader } from './sbb-timetable-row-header'; -import { newSpecPage } from '@stencil/core/testing'; import sampleData from './sbb-timetable-row-header.sample-data'; +import { expect, fixture } from '@open-wc/testing'; +import { html } from 'lit/static-html.js'; +import './sbb-timetable-row-header'; const config = JSON.stringify(sampleData[0]); describe('sbb-timetable-row-header', () => { it('renders', async () => { - const { root } = await newSpecPage({ - components: [SbbTimetableRowHeader], - html: ``, - }); + const root = await fixture( + html``, + ); - expect(root).toEqualHtml(` + expect(root).dom.to.be.equal( + ` - -

15:14 IC 8 Direction Romanshorn.

- + - `); + `, + ); + expect(root).shadowDom.to.be.equal( + ` +

15:14 IC 8 Direction Romanshorn.

+ `, + ); }); }); diff --git a/src/components/sbb-timetable-row-header/sbb-timetable-row-header.stories.tsx b/src/components/sbb-timetable-row-header/sbb-timetable-row-header.stories.tsx index 0f34049d6f..27acd91482 100644 --- a/src/components/sbb-timetable-row-header/sbb-timetable-row-header.stories.tsx +++ b/src/components/sbb-timetable-row-header/sbb-timetable-row-header.stories.tsx @@ -2,7 +2,8 @@ import { h, JSX } from 'jsx-dom'; import readme from './readme.md?raw'; import sampleData from './sbb-timetable-row-header.sample-data'; -import type { Meta, StoryObj, Args } from '@storybook/html'; +import type { Meta, StoryObj, Args } from '@storybook/web-components'; +import './sbb-timetable-row-header'; const Template = (args): JSX.Element => ( diff --git a/src/components/sbb-timetable-row-header/sbb-timetable-row-header.tsx b/src/components/sbb-timetable-row-header/sbb-timetable-row-header.tsx index 9ba0373fc8..30ed27c0ae 100644 --- a/src/components/sbb-timetable-row-header/sbb-timetable-row-header.tsx +++ b/src/components/sbb-timetable-row-header/sbb-timetable-row-header.tsx @@ -1,14 +1,14 @@ -import { Component, h, JSX, Prop } from '@stencil/core'; +import { CSSResult, html, LitElement, TemplateResult } from 'lit'; +import { customElement, property } from 'lit/decorators.js'; +import Style from './sbb-timetable-row-header.scss?lit&inline'; -@Component({ - shadow: true, - styleUrl: 'sbb-timetable-row-header.scss', - tag: 'sbb-timetable-row-header', -}) -export class SbbTimetableRowHeader { - @Prop() public config!: string; +@customElement('sbb-timetable-row-header') +export class SbbTimetableRowHeader extends LitElement { + public static override styles: CSSResult = Style; - public render(): JSX.Element { + @property() public config!: string; + + protected override render(): TemplateResult { /** * Stringified JSON which defines most of the * content of the component. Please check the @@ -17,11 +17,14 @@ export class SbbTimetableRowHeader { */ const config = JSON.parse(this.config); - return ( -

- {config.departure.time} {config.departure.productText}{' '} - {config.departure.productMarketingName} {config.departure.direction}. -

- ); + const output = `${config.departure.time} ${config.departure.productText} ${config.departure.productMarketingName} ${config.departure.direction}.`; + return html`

${output}

`; + } +} + +declare global { + interface HTMLElementTagNameMap { + // eslint-disable-next-line @typescript-eslint/naming-convention + 'sbb-timetable-row-header': SbbTimetableRowHeader; } } From 13309223a0839edf95f7f0de0f42344fe1d81f30 Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Mon, 9 Oct 2023 16:39:13 +0200 Subject: [PATCH 08/12] refactor: sbb-timetable-transportation-number --- ...sbb-timetable-transportation-number.e2e.ts | 17 +++--- ...bb-timetable-transportation-number.spec.ts | 25 +++++---- ...imetable-transportation-number.stories.tsx | 3 +- .../sbb-timetable-transportation-number.tsx | 54 ++++++++++--------- 4 files changed, 54 insertions(+), 45 deletions(-) diff --git a/src/components/sbb-timetable-transportation-number/sbb-timetable-transportation-number.e2e.ts b/src/components/sbb-timetable-transportation-number/sbb-timetable-transportation-number.e2e.ts index 0b76b37813..cf30c983ad 100644 --- a/src/components/sbb-timetable-transportation-number/sbb-timetable-transportation-number.e2e.ts +++ b/src/components/sbb-timetable-transportation-number/sbb-timetable-transportation-number.e2e.ts @@ -1,18 +1,19 @@ -import { newE2EPage } from '@stencil/core/testing'; import sampleData from './sbb-timetable-transportation-number.sample-data'; +import { assert, fixture } from '@open-wc/testing'; +import { html } from 'lit/static-html.js'; +import { SbbTimetableTransportationNumber } from './sbb-timetable-transportation-number'; const config = JSON.stringify(sampleData.bus); describe('sbb-timetable-transportation-number', () => { - let element, page; + let element: SbbTimetableTransportationNumber; it('renders', async () => { - page = await newE2EPage(); - await page.setContent( - ``, + element = await fixture( + html``, ); - - element = await page.find('sbb-timetable-transportation-number'); - expect(element).toHaveClass('hydrated'); + assert.instanceOf(element, SbbTimetableTransportationNumber); }); }); diff --git a/src/components/sbb-timetable-transportation-number/sbb-timetable-transportation-number.spec.ts b/src/components/sbb-timetable-transportation-number/sbb-timetable-transportation-number.spec.ts index d9d7614b73..f06c8531b0 100644 --- a/src/components/sbb-timetable-transportation-number/sbb-timetable-transportation-number.spec.ts +++ b/src/components/sbb-timetable-transportation-number/sbb-timetable-transportation-number.spec.ts @@ -1,21 +1,25 @@ -import { SbbTimetableTransportationNumber } from './sbb-timetable-transportation-number'; -import { newSpecPage } from '@stencil/core/testing'; import sampleData from './sbb-timetable-transportation-number.sample-data'; +import { expect, fixture } from '@open-wc/testing'; +import { html } from 'lit/static-html.js'; +import './sbb-timetable-transportation-number'; const config = JSON.stringify(sampleData.bus); describe('sbb-timetable-transportation-number', () => { it('renders', async () => { - const { root } = await newSpecPage({ - components: [SbbTimetableTransportationNumber], - html: ``, - }); + const root = await fixture(html``); - expect(root).toEqualHtml(` + expect(root).dom.to.be.equal( + ` - + + + `, + ); + expect(root).shadowDom.to.be.equal( + `

{ Bus B 20 Richtung Bern Wankdorf, Bahnhof

- - - `); + `, + ); }); }); diff --git a/src/components/sbb-timetable-transportation-number/sbb-timetable-transportation-number.stories.tsx b/src/components/sbb-timetable-transportation-number/sbb-timetable-transportation-number.stories.tsx index 6fc87beace..ec82a25522 100644 --- a/src/components/sbb-timetable-transportation-number/sbb-timetable-transportation-number.stories.tsx +++ b/src/components/sbb-timetable-transportation-number/sbb-timetable-transportation-number.stories.tsx @@ -2,8 +2,9 @@ import { h, JSX } from 'jsx-dom'; import readme from './readme.md?raw'; import sampleData from './sbb-timetable-transportation-number.sample-data'; -import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/html'; +import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components'; import type { InputType } from '@storybook/types'; +import './sbb-timetable-transportation-number'; const Template = (args): JSX.Element => ( + return html` +

- {a11yLabel} + ${a11yLabel}

- ); + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + // eslint-disable-next-line @typescript-eslint/naming-convention + 'sbb-timetable-transportation-number': SbbTimetableTransportationNumber; } } From 584f8f74bc0b41a9367d204ad607e2e72192b7b8 Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Mon, 9 Oct 2023 16:40:41 +0200 Subject: [PATCH 09/12] refactor: sbb-timetable-transportation-time --- .../sbb-timetable-transportation-time.e2e.ts | 17 ++++--- .../sbb-timetable-transportation-time.spec.ts | 25 +++++---- ...-timetable-transportation-time.stories.tsx | 3 +- .../sbb-timetable-transportation-time.tsx | 51 ++++++++++--------- 4 files changed, 53 insertions(+), 43 deletions(-) diff --git a/src/components/sbb-timetable-transportation-time/sbb-timetable-transportation-time.e2e.ts b/src/components/sbb-timetable-transportation-time/sbb-timetable-transportation-time.e2e.ts index 83c4439d65..b352232334 100644 --- a/src/components/sbb-timetable-transportation-time/sbb-timetable-transportation-time.e2e.ts +++ b/src/components/sbb-timetable-transportation-time/sbb-timetable-transportation-time.e2e.ts @@ -1,18 +1,19 @@ -import { newE2EPage } from '@stencil/core/testing'; import sampleData from './sbb-timetable-transportation-time.sample-data'; +import { assert, fixture } from '@open-wc/testing'; +import { html } from 'lit/static-html.js'; +import { SbbTimetableTransportationTime } from './sbb-timetable-transportation-time'; const config = JSON.stringify(sampleData[0]); describe('sbb-timetable-transportation-time', () => { - let element, page; + let element: SbbTimetableTransportationTime; it('renders', async () => { - page = await newE2EPage(); - await page.setContent( - ``, + element = await fixture( + html``, ); - - element = await page.find('sbb-timetable-transportation-time'); - expect(element).toHaveClass('hydrated'); + assert.instanceOf(element, SbbTimetableTransportationTime); }); }); diff --git a/src/components/sbb-timetable-transportation-time/sbb-timetable-transportation-time.spec.ts b/src/components/sbb-timetable-transportation-time/sbb-timetable-transportation-time.spec.ts index 7e75776635..56a50134db 100644 --- a/src/components/sbb-timetable-transportation-time/sbb-timetable-transportation-time.spec.ts +++ b/src/components/sbb-timetable-transportation-time/sbb-timetable-transportation-time.spec.ts @@ -1,21 +1,25 @@ -import { SbbTimetableTransportationTime } from './sbb-timetable-transportation-time'; -import { newSpecPage } from '@stencil/core/testing'; import sampleData from './sbb-timetable-transportation-time.sample-data'; +import { expect, fixture } from '@open-wc/testing'; +import { html } from 'lit/static-html.js'; +import './sbb-timetable-transportation-time'; const config = JSON.stringify(sampleData[0]); describe('sbb-timetable-transportation-time', () => { it('renders', async () => { - const { root } = await newSpecPage({ - components: [SbbTimetableTransportationTime], - html: ``, - }); + const root = await fixture(html``); - expect(root).toEqualHtml(` + expect(root).dom.to.be.equal( + ` - + + + `, + ); + expect(root).shadowDom.to.be.equal( + `

{ Departure 15:14.

- - - `); + `, + ); }); }); diff --git a/src/components/sbb-timetable-transportation-time/sbb-timetable-transportation-time.stories.tsx b/src/components/sbb-timetable-transportation-time/sbb-timetable-transportation-time.stories.tsx index fc3c575ce5..235f55063e 100644 --- a/src/components/sbb-timetable-transportation-time/sbb-timetable-transportation-time.stories.tsx +++ b/src/components/sbb-timetable-transportation-time/sbb-timetable-transportation-time.stories.tsx @@ -2,8 +2,9 @@ import { h, JSX } from 'jsx-dom'; import readme from './readme.md?raw'; import sampleData from './sbb-timetable-transportation-time.sample-data'; -import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/html'; +import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components'; import type { InputType } from '@storybook/types'; +import './sbb-timetable-transportation-time'; const Template = (args): JSX.Element => ( (this._currentLanguage = l)), ); - public connectedCallback(): void { + public override connectedCallback(): void { + super.connectedCallback(); this._handlerRepository.connect(); } - public disconnectedCallback(): void { + public override disconnectedCallback(): void { + super.disconnectedCallback(); this._handlerRepository.disconnect(); } - public render(): JSX.Element { + protected override render(): TemplateResult { const config = JSON.parse(this.config); let a11yLabel = `${i18nArrival[this._currentLanguage]} ${config.time}.`; @@ -57,13 +57,18 @@ export class SbbTimetableTransportationTime { const appearanceClasses = ` time--${this.appearance} time--${config.type}`; - return ( -

- - {a11yLabel} + return html` +

+ + ${a11yLabel}

- ); + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + // eslint-disable-next-line @typescript-eslint/naming-convention + 'sbb-timetable-transportation-time': SbbTimetableTransportationTime; } } From 9fa90b7e1d1b387b93f2c2b0e67a780df0491575 Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Mon, 9 Oct 2023 16:43:00 +0200 Subject: [PATCH 10/12] refactor: sbb-timetable-travel-hints --- .../sbb-timetable-travel-hints.e2e.ts | 15 ++-- .../sbb-timetable-travel-hints.spec.ts | 27 +++--- .../sbb-timetable-travel-hints.stories.tsx | 3 +- .../sbb-timetable-travel-hints.tsx | 86 ++++++++++--------- 4 files changed, 72 insertions(+), 59 deletions(-) diff --git a/src/components/sbb-timetable-travel-hints/sbb-timetable-travel-hints.e2e.ts b/src/components/sbb-timetable-travel-hints/sbb-timetable-travel-hints.e2e.ts index 2b22e8ace0..96af3a0f1b 100644 --- a/src/components/sbb-timetable-travel-hints/sbb-timetable-travel-hints.e2e.ts +++ b/src/components/sbb-timetable-travel-hints/sbb-timetable-travel-hints.e2e.ts @@ -1,18 +1,17 @@ -import { newE2EPage } from '@stencil/core/testing'; import sampleData from './sbb-timetable-travel-hints.sample-data'; +import { assert, fixture } from '@open-wc/testing'; +import { html } from 'lit/static-html.js'; +import { SbbTimetableTravelHints } from './sbb-timetable-travel-hints'; const config = JSON.stringify(sampleData[0]); describe('sbb-timetable-travel-hints', () => { - let element, page; + let element: SbbTimetableTravelHints; it('renders', async () => { - page = await newE2EPage(); - await page.setContent( - ``, + element = await fixture( + html``, ); - - element = await page.find('sbb-timetable-travel-hints'); - expect(element).toHaveClass('hydrated'); + assert.instanceOf(element, SbbTimetableTravelHints); }); }); diff --git a/src/components/sbb-timetable-travel-hints/sbb-timetable-travel-hints.spec.ts b/src/components/sbb-timetable-travel-hints/sbb-timetable-travel-hints.spec.ts index 0e07da394c..85bc4992d9 100644 --- a/src/components/sbb-timetable-travel-hints/sbb-timetable-travel-hints.spec.ts +++ b/src/components/sbb-timetable-travel-hints/sbb-timetable-travel-hints.spec.ts @@ -1,22 +1,28 @@ -import { SbbTimetableTravelHints } from './sbb-timetable-travel-hints'; -import { newSpecPage } from '@stencil/core/testing'; import sampleData from './sbb-timetable-travel-hints.sample-data'; +import { expect, fixture } from '@open-wc/testing'; +import { html } from 'lit/static-html.js'; +import './sbb-timetable-travel-hints'; const config = JSON.stringify(sampleData[0]); describe('sbb-timetable-travel-hints', () => { it('renders', async () => { - const { root } = await newSpecPage({ - components: [SbbTimetableTravelHints], - html: ``, - }); + const root = await fixture( + html``, + ); - expect(root).toEqualHtml(` + expect(root).dom.to.be.equal( + ` - + + + `, + ); + expect(root).shadowDom.to.be.equal( + `
    {
- - - `); + `, + ); }); }); diff --git a/src/components/sbb-timetable-travel-hints/sbb-timetable-travel-hints.stories.tsx b/src/components/sbb-timetable-travel-hints/sbb-timetable-travel-hints.stories.tsx index a569c16f28..9c3e4a81d7 100644 --- a/src/components/sbb-timetable-travel-hints/sbb-timetable-travel-hints.stories.tsx +++ b/src/components/sbb-timetable-travel-hints/sbb-timetable-travel-hints.stories.tsx @@ -2,8 +2,9 @@ import { h, JSX } from 'jsx-dom'; import readme from './readme.md?raw'; import sampleData from './sbb-timetable-travel-hints.sample-data'; -import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/html'; +import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components'; import type { InputType } from '@storybook/types'; +import './sbb-timetable-travel-hints'; const Template = (args): JSX.Element => ( (this._currentLanguage = l)), ); - public connectedCallback(): void { + public override connectedCallback(): void { + super.connectedCallback(); this._handlerRepository.connect(); } - public disconnectedCallback(): void { + public override disconnectedCallback(): void { + super.disconnectedCallback(); this._handlerRepository.disconnect(); } - public render(): JSX.Element { + protected override render(): TemplateResult { const { travelHintsItems } = JSON.parse(this.config); const a11yLabel = i18nNone[this._currentLanguage]; @@ -54,28 +55,35 @@ export class SbbTimetableTravelHints { const hostClass = travelHintsItems.length === 0 ? 'visually-empty' : ''; - return ( - -
- {travelHintsItems.length > 0 ? ( -
    - {travelHintsItems.map((travelHintItem) => ( -
  • - -
    • - ))} -
- ) : ( - {a11yLabel} - )} -
- - ); + setAttribute(this, 'class', hostClass); + + return html` +
+ ${travelHintsItems.length > 0 + ? html`
    + ${travelHintsItems.map( + (travelHintItem) => html` +
  • + +
    • + `, + )} +
` + : html`${a11yLabel}`} +
+ `; + } +} + +declare global { + interface HTMLElementTagNameMap { + // eslint-disable-next-line @typescript-eslint/naming-convention + 'sbb-timetable-travel-hints': SbbTimetableTravelHints; } } From a7127117082c79592d6aba0caac2be25ded03239 Mon Sep 17 00:00:00 2001 From: Jeremias Peier Date: Tue, 10 Oct 2023 08:49:52 +0200 Subject: [PATCH 11/12] fix: occupation icons --- .../sbb-timetable-occupancy.sample-data.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/sbb-timetable-occupancy/sbb-timetable-occupancy.sample-data.js b/src/components/sbb-timetable-occupancy/sbb-timetable-occupancy.sample-data.js index dfb94fe50d..2bfff0975b 100644 --- a/src/components/sbb-timetable-occupancy/sbb-timetable-occupancy.sample-data.js +++ b/src/components/sbb-timetable-occupancy/sbb-timetable-occupancy.sample-data.js @@ -4,12 +4,12 @@ export default [ { class: '1', icon: 'utilization-none', - occupancy: 'none', + occupancy: 'unknown', }, { class: '2', icon: 'utilization-none', - occupancy: 'none', + occupancy: 'unknown', }, ], }, @@ -18,7 +18,7 @@ export default [ { class: '1', icon: 'utilization-none', - occupancy: 'none', + occupancy: 'unknown', }, { class: '2', From 4d5a2cee177c28320270afe3a17b6613a3ac747e Mon Sep 17 00:00:00 2001 From: Jeri Peier Date: Tue, 10 Oct 2023 10:40:25 +0200 Subject: [PATCH 12/12] fix: review Co-authored-by: Tommmaso Menga --- .../sbb-timetable-park-and-rail.spec.ts | 2 +- .../sbb-timetable-row-column-headers.spec.ts | 2 +- .../sbb-timetable-row-day-change.spec.ts | 2 +- .../sbb-timetable-row-day-change.tsx | 2 +- .../sbb-timetable-row-header/sbb-timetable-row-header.spec.ts | 2 +- .../sbb-timetable-travel-hints.spec.ts | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/sbb-timetable-park-and-rail/sbb-timetable-park-and-rail.spec.ts b/src/components/sbb-timetable-park-and-rail/sbb-timetable-park-and-rail.spec.ts index 5bf907bdbb..0f2537161b 100644 --- a/src/components/sbb-timetable-park-and-rail/sbb-timetable-park-and-rail.spec.ts +++ b/src/components/sbb-timetable-park-and-rail/sbb-timetable-park-and-rail.spec.ts @@ -7,7 +7,7 @@ const config = JSON.stringify(sampleData[0]); describe('sbb-timetable-park-and-rail', () => { it('renders', async () => { - const root = await fixture(html``); + const root = await fixture(html``); expect(root).dom.to.be.equal( ` diff --git a/src/components/sbb-timetable-row-column-headers/sbb-timetable-row-column-headers.spec.ts b/src/components/sbb-timetable-row-column-headers/sbb-timetable-row-column-headers.spec.ts index c4b630ffcd..48c11f032e 100644 --- a/src/components/sbb-timetable-row-column-headers/sbb-timetable-row-column-headers.spec.ts +++ b/src/components/sbb-timetable-row-column-headers/sbb-timetable-row-column-headers.spec.ts @@ -7,7 +7,7 @@ const config = JSON.stringify(sampleData); describe('sbb-timetable-row-column-headers', () => { it('renders', async () => { - const root = await fixture(html``); + const root = await fixture(html``); expect(root).dom.to.be.equal( ` diff --git a/src/components/sbb-timetable-row-day-change/sbb-timetable-row-day-change.spec.ts b/src/components/sbb-timetable-row-day-change/sbb-timetable-row-day-change.spec.ts index 5cce26d918..15e6c0415c 100644 --- a/src/components/sbb-timetable-row-day-change/sbb-timetable-row-day-change.spec.ts +++ b/src/components/sbb-timetable-row-day-change/sbb-timetable-row-day-change.spec.ts @@ -7,7 +7,7 @@ const config = JSON.stringify(sampleData[1]); describe('sbb-timetable-row-day-change', () => { it('renders', async () => { - const root = await fixture(html``); + const root = await fixture(html``); expect(root).dom.to.be.equal( ` diff --git a/src/components/sbb-timetable-row-day-change/sbb-timetable-row-day-change.tsx b/src/components/sbb-timetable-row-day-change/sbb-timetable-row-day-change.tsx index 860424af3c..74ab847a05 100644 --- a/src/components/sbb-timetable-row-day-change/sbb-timetable-row-day-change.tsx +++ b/src/components/sbb-timetable-row-day-change/sbb-timetable-row-day-change.tsx @@ -59,7 +59,7 @@ export class SbbTimetableRowDayChange extends LitElement { const a11yLabel = `${dayChange}${attention}${departsOn}${config.day}, ${config.date}`; return html` -
+