From eb683814d9100078a94a384422246d75ed4e6421 Mon Sep 17 00:00:00 2001 From: Mario Castigliano Date: Mon, 1 Jul 2024 17:32:43 +0200 Subject: [PATCH 1/3] test: implement visual spec for title --- src/elements/title/title.visual.spec.ts | 35 +++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 src/elements/title/title.visual.spec.ts diff --git a/src/elements/title/title.visual.spec.ts b/src/elements/title/title.visual.spec.ts new file mode 100644 index 0000000000..692479feb5 --- /dev/null +++ b/src/elements/title/title.visual.spec.ts @@ -0,0 +1,35 @@ +import { html } from 'lit'; + +import { describeViewports, visualDiffDefault } from '../core/testing/private.js'; + +import '../title.js'; + +describe(`sbb-title`, () => { + describeViewports({ viewports: ['zero', 'small', 'large', 'ultra'] }, () => { + for (const level of ['1', '2', '3', '4', '5', '6']) { + it( + `visual level ${level}`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture( + html` + Data without insights are trivial, and insights without action are pointless + `, + ); + }), + ); + } + + it( + 'negative', + visualDiffDefault.with(async (setup) => { + await setup.withFixture( + html`
+ + Data without insights are trivial, and insights without action are pointless + +
`, + ); + }), + ); + }); +}); From ad4fe3174252b64dff2508ffd8eedd34c2edb838 Mon Sep 17 00:00:00 2001 From: Mario Castigliano Date: Tue, 2 Jul 2024 10:06:41 +0200 Subject: [PATCH 2/3] fix: review comments --- src/elements/title/title.visual.spec.ts | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/src/elements/title/title.visual.spec.ts b/src/elements/title/title.visual.spec.ts index 692479feb5..fcf7a01e94 100644 --- a/src/elements/title/title.visual.spec.ts +++ b/src/elements/title/title.visual.spec.ts @@ -5,15 +5,21 @@ import { describeViewports, visualDiffDefault } from '../core/testing/private.js import '../title.js'; describe(`sbb-title`, () => { - describeViewports({ viewports: ['zero', 'small', 'large', 'ultra'] }, () => { + describeViewports({ viewports: ['zero', 'small', 'medium', 'large', 'ultra'] }, () => { for (const level of ['1', '2', '3', '4', '5', '6']) { it( - `visual level ${level}`, + `level=${level}`, visualDiffDefault.with(async (setup) => { await setup.withFixture( html` - Data without insights are trivial, and insights without action are pointless - `, + Data without insights are trivial, and insights without action are pointless + +
+ Diam maecenas ultricies mi eget mauris pharetra et ultrices neque ornare aenean + euismod elementum nisi quis eleifend quam adipiscing vitae proin sagittis nisl + rhoncus mattis rhoncus urna neque viverra justo nec ultrices dui sapien eget mi + proin sed libero enim sed faucibus turpis in eu mi bibendum neque egestas congue. +
`, ); }), ); @@ -23,11 +29,12 @@ describe(`sbb-title`, () => { 'negative', visualDiffDefault.with(async (setup) => { await setup.withFixture( - html`
+ html` Data without insights are trivial, and insights without action are pointless -
`, + `, + { backgroundColor: 'var(--sbb-color-charcoal)' }, ); }), ); From 9802846d17690539696762568e2c9e690fd15fc6 Mon Sep 17 00:00:00 2001 From: Mario Castigliano Date: Tue, 2 Jul 2024 14:19:33 +0200 Subject: [PATCH 3/3] fix: snapshot spec refactoring --- .../__snapshots__/title.snapshot.spec.snap.js | 23 ++++++++++++++ src/elements/title/title.snapshot.spec.ts | 31 +++++++++++-------- 2 files changed, 41 insertions(+), 13 deletions(-) diff --git a/src/elements/title/__snapshots__/title.snapshot.spec.snap.js b/src/elements/title/__snapshots__/title.snapshot.spec.snap.js index 2867e1dfc6..db2c2e7177 100644 --- a/src/elements/title/__snapshots__/title.snapshot.spec.snap.js +++ b/src/elements/title/__snapshots__/title.snapshot.spec.snap.js @@ -1,6 +1,29 @@ /* @web/test-runner snapshot v1 */ export const snapshots = {}; +snapshots["sbb-title renders DOM"] = +` + Sample Title Text + +`; +/* end snapshot sbb-title renders DOM */ + +snapshots["sbb-title renders Shadow DOM"] = +`

+ + +

+`; +/* end snapshot sbb-title renders Shadow DOM */ + snapshots["sbb-title A11y tree Chrome"] = `

{ diff --git a/src/elements/title/title.snapshot.spec.ts b/src/elements/title/title.snapshot.spec.ts index 463da21937..88c218907d 100644 --- a/src/elements/title/title.snapshot.spec.ts +++ b/src/elements/title/title.snapshot.spec.ts @@ -3,22 +3,27 @@ import { html } from 'lit/static-html.js'; import { fixture, testA11yTreeSnapshot } from '../core/testing/private.js'; +import type { SbbTitleElement } from './title.js'; + import './title.js'; describe(`sbb-title`, () => { - it('renders', async () => { - const root = await fixture( - html`Sample Title Text`, - ); - - expect(root).dom.to.be.equal(` - - Sample Title Text - - `); - expect(root).shadowDom.to.be.equal(` -

- `); + describe('renders', async () => { + let element: SbbTitleElement; + + beforeEach(async () => { + element = await fixture( + html`Sample Title Text`, + ); + }); + + it('DOM', async () => { + await expect(element).dom.to.be.equalSnapshot(); + }); + + it('Shadow DOM', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); + }); }); testA11yTreeSnapshot(html`Sample Title Text`);