From fc56e2b8988ae51ab60e751d654626071310b3e0 Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Mon, 26 Aug 2024 10:53:25 +0200 Subject: [PATCH] fix: add describe to avoid long labels in it --- .../autocomplete-grid.visual.spec.ts | 259 +++++++++--------- .../autocomplete/autocomplete.visual.spec.ts | 259 +++++++++--------- 2 files changed, 270 insertions(+), 248 deletions(-) diff --git a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.visual.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.visual.spec.ts index 98a4e86339..0d1fd0966a 100644 --- a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.visual.spec.ts +++ b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.visual.spec.ts @@ -160,166 +160,177 @@ describe('sbb-autocomplete-grid', () => { describeViewports({ viewports: ['zero', 'medium'], viewportHeight: 500 }, () => { for (const negative of [false, true]) { - for (const borderless of [false, true]) { + describe(`negative=${negative}`, () => { for (const visualDiffState of [visualDiffDefault, visualDiffFocus]) { - it( - `negative=${negative} state=above-${visualDiffState.name} borderless=${borderless}`, - visualDiffState.with(async (setup) => { - await setup.withFixture( - html` -
- ${template({ ...defaultArgs, negative, borderless })} -
- `, - { - minHeight: '500px', - backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, - }, + describe(`state=above-${visualDiffState.name}`, () => { + for (const borderless of [false, true]) { + it( + `borderless=${borderless}`, + visualDiffState.with(async (setup) => { + await setup.withFixture( + html` +
+ ${template({ ...defaultArgs, negative, borderless })} +
+ `, + { + minHeight: '500px', + backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + }, + ); + setup.withPostSetupAction(() => openAutocomplete(setup)); + }), ); - setup.withPostSetupAction(() => openAutocomplete(setup)); - }), - ); + } + }); } - } + }); } }); describeViewports({ viewports: ['zero', 'medium'] }, () => { for (const negative of [false, true]) { - const style = { - minHeight: '400px', - backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, - }; + describe(`negative=${negative}`, () => { + const style = { + minHeight: '400px', + backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + }; - for (const size of ['m', 's']) { - for (const visualDiffState of [visualDiffDefault, visualDiffFocus]) { - it( - `negative=${negative} state=${visualDiffState.name} size=${size}`, - visualDiffState.with(async (setup) => { - await setup.withFixture(template({ ...defaultArgs, negative, size }), style); - }), - ); + for (const size of ['m', 's']) { + for (const visualDiffState of [visualDiffDefault, visualDiffFocus]) { + it( + `state=${visualDiffState.name} size=${size}`, + visualDiffState.with(async (setup) => { + await setup.withFixture(template({ ...defaultArgs, negative, size }), style); + }), + ); + } } - } - - it( - `negative=${negative} state=required`, - visualDiffDefault.with(async (setup) => { - await setup.withFixture(template({ ...defaultArgs, negative, required: true }), style); - }), - ); - - it( - `negative=${negative} state=disabled`, - visualDiffDefault.with(async (setup) => { - await setup.withFixture(template({ ...defaultArgs, negative, disabled: true }), style); - }), - ); - - it( - `negative=${negative} state=readonly`, - visualDiffDefault.with(async (setup) => { - await setup.withFixture(template({ ...defaultArgs, negative, readonly: true }), style); - }), - ); - it( - `negative=${negative} state=borderless`, - visualDiffDefault.with(async (setup) => { - await setup.withFixture(template({ ...defaultArgs, negative, borderless: true }), style); - }), - ); - - it( - `negative=${negative} state=noIcon`, - visualDiffDefault.with(async (setup) => { - await setup.withFixture(template({ ...defaultArgs, negative, withIcon: false }), style); - setup.withPostSetupAction(() => openAutocomplete(setup)); - }), - ); + it( + `state=required`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture(template({ ...defaultArgs, negative, required: true }), style); + }), + ); - for (const withIcon of [false, true]) { it( - `negative=${negative} state=noSpace withIcon=${withIcon}`, + `state=disabled`, visualDiffDefault.with(async (setup) => { - await setup.withFixture( - template({ ...defaultArgs, negative, withIcon, preserveIconSpace: false }), - style, - ); - setup.withPostSetupAction(() => openAutocomplete(setup)); + await setup.withFixture(template({ ...defaultArgs, negative, disabled: true }), style); }), ); - } - for (const withGroup of [false, true]) { - const wrapperStyle = { - minHeight: withGroup ? '800px' : '400px', - backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, - }; + it( + `state=readonly`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture(template({ ...defaultArgs, negative, readonly: true }), style); + }), + ); it( - `negative=${negative} withGroup=${withGroup}`, + `state=borderless`, visualDiffDefault.with(async (setup) => { await setup.withFixture( - template({ ...defaultArgs, negative, withGroup }), - wrapperStyle, + template({ ...defaultArgs, negative, borderless: true }), + style, ); - setup.withPostSetupAction(() => openAutocomplete(setup)); }), ); it( - `negative=${negative} withGroup=${withGroup} disableOption=true`, + `state=noIcon`, visualDiffDefault.with(async (setup) => { - await setup.withFixture( - template({ ...defaultArgs, negative, withGroup, disableOption: true }), - wrapperStyle, - ); + await setup.withFixture(template({ ...defaultArgs, negative, withIcon: false }), style); setup.withPostSetupAction(() => openAutocomplete(setup)); }), ); - } - it( - `negative=${negative} withGroup=true disableGroup=true`, - visualDiffDefault.with(async (setup) => { - await setup.withFixture( - template({ - ...defaultArgs, - negative, - disableGroup: true, - withGroup: true, + for (const withIcon of [false, true]) { + it( + `state=noSpace withIcon=${withIcon}`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture( + template({ ...defaultArgs, negative, withIcon, preserveIconSpace: false }), + style, + ); + setup.withPostSetupAction(() => openAutocomplete(setup)); }), - { - minHeight: '800px', - backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, - }, ); - setup.withPostSetupAction(() => openAutocomplete(setup)); - }), - ); + } - for (const size of ['m', 's']) { - it( - `negative=${negative} withGroup=true size=${size} withMixedOptionAndGroup=true`, - visualDiffDefault.with(async (setup) => { - await setup.withFixture( - template({ - ...defaultArgs, - negative, - size, - withGroup: true, - withMixedOptionAndGroup: true, + for (const withGroup of [false, true]) { + const wrapperStyle = { + minHeight: withGroup ? '800px' : '400px', + backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + }; + + it( + `withGroup=${withGroup}`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture( + template({ ...defaultArgs, negative, withGroup }), + wrapperStyle, + ); + setup.withPostSetupAction(() => openAutocomplete(setup)); + }), + ); + + it( + `withGroup=${withGroup} disableOption=true`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture( + template({ ...defaultArgs, negative, withGroup, disableOption: true }), + wrapperStyle, + ); + setup.withPostSetupAction(() => openAutocomplete(setup)); + }), + ); + } + + describe('withGroup=true', () => { + it( + `disableGroup=true`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture( + template({ + ...defaultArgs, + negative, + disableGroup: true, + withGroup: true, + }), + { + minHeight: '800px', + backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + }, + ); + setup.withPostSetupAction(() => openAutocomplete(setup)); + }), + ); + + for (const size of ['m', 's']) { + it( + `size=${size} withMixedOptionAndGroup=true`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture( + template({ + ...defaultArgs, + negative, + size, + withGroup: true, + withMixedOptionAndGroup: true, + }), + { + minHeight: '800px', + backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + }, + ); + setup.withPostSetupAction(() => openAutocomplete(setup)); }), - { - minHeight: '800px', - backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, - }, ); - setup.withPostSetupAction(() => openAutocomplete(setup)); - }), - ); - } + } + }); + }); } }); }); diff --git a/src/elements/autocomplete/autocomplete.visual.spec.ts b/src/elements/autocomplete/autocomplete.visual.spec.ts index b75231ac08..2a52cdaad9 100644 --- a/src/elements/autocomplete/autocomplete.visual.spec.ts +++ b/src/elements/autocomplete/autocomplete.visual.spec.ts @@ -119,166 +119,177 @@ describe('sbb-autocomplete', () => { describeViewports({ viewports: ['zero', 'medium'], viewportHeight: 500 }, () => { for (const negative of [false, true]) { - for (const borderless of [false, true]) { + describe(`negative=${negative}`, () => { for (const visualDiffState of [visualDiffDefault, visualDiffFocus]) { - it( - `negative=${negative} state=above-${visualDiffState.name} borderless=${borderless}`, - visualDiffState.with(async (setup) => { - await setup.withFixture( - html` -
- ${template({ ...defaultArgs, negative, borderless })} -
- `, - { - minHeight: '500px', - backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, - }, + describe(`state=above-${visualDiffState.name}`, () => { + for (const borderless of [false, true]) { + it( + `borderless=${borderless}`, + visualDiffState.with(async (setup) => { + await setup.withFixture( + html` +
+ ${template({ ...defaultArgs, negative, borderless })} +
+ `, + { + minHeight: '500px', + backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + }, + ); + setup.withPostSetupAction(() => openAutocomplete(setup)); + }), ); - setup.withPostSetupAction(() => openAutocomplete(setup)); - }), - ); + } + }); } - } + }); } }); describeViewports({ viewports: ['zero', 'medium'] }, () => { for (const negative of [false, true]) { - const style = { - minHeight: '400px', - backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, - }; + describe(`negative=${negative}`, () => { + const style = { + minHeight: '400px', + backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + }; - for (const size of ['m', 's']) { - for (const visualDiffState of [visualDiffDefault, visualDiffFocus]) { - it( - `negative=${negative} state=${visualDiffState.name} size=${size}`, - visualDiffState.with(async (setup) => { - await setup.withFixture(template({ ...defaultArgs, negative, size }), style); - }), - ); + for (const size of ['m', 's']) { + for (const visualDiffState of [visualDiffDefault, visualDiffFocus]) { + it( + `state=${visualDiffState.name} size=${size}`, + visualDiffState.with(async (setup) => { + await setup.withFixture(template({ ...defaultArgs, negative, size }), style); + }), + ); + } } - } - - it( - `negative=${negative} state=required`, - visualDiffDefault.with(async (setup) => { - await setup.withFixture(template({ ...defaultArgs, negative, required: true }), style); - }), - ); - - it( - `negative=${negative} state=disabled`, - visualDiffDefault.with(async (setup) => { - await setup.withFixture(template({ ...defaultArgs, negative, disabled: true }), style); - }), - ); - - it( - `negative=${negative} state=readonly`, - visualDiffDefault.with(async (setup) => { - await setup.withFixture(template({ ...defaultArgs, negative, readonly: true }), style); - }), - ); - it( - `negative=${negative} state=borderless`, - visualDiffDefault.with(async (setup) => { - await setup.withFixture(template({ ...defaultArgs, negative, borderless: true }), style); - }), - ); - - it( - `negative=${negative} state=noIcon`, - visualDiffDefault.with(async (setup) => { - await setup.withFixture(template({ ...defaultArgs, negative, withIcon: false }), style); - setup.withPostSetupAction(() => openAutocomplete(setup)); - }), - ); + it( + `state=required`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture(template({ ...defaultArgs, negative, required: true }), style); + }), + ); - for (const withIcon of [false, true]) { it( - `negative=${negative} state=noSpace withIcon=${withIcon}`, + `state=disabled`, visualDiffDefault.with(async (setup) => { - await setup.withFixture( - template({ ...defaultArgs, negative, withIcon, preserveIconSpace: false }), - style, - ); - setup.withPostSetupAction(() => openAutocomplete(setup)); + await setup.withFixture(template({ ...defaultArgs, negative, disabled: true }), style); }), ); - } - for (const withGroup of [false, true]) { - const wrapperStyle = { - minHeight: withGroup ? '800px' : '400px', - backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, - }; + it( + `state=readonly`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture(template({ ...defaultArgs, negative, readonly: true }), style); + }), + ); it( - `negative=${negative} withGroup=${withGroup}`, + `state=borderless`, visualDiffDefault.with(async (setup) => { await setup.withFixture( - template({ ...defaultArgs, negative, withGroup }), - wrapperStyle, + template({ ...defaultArgs, negative, borderless: true }), + style, ); - setup.withPostSetupAction(() => openAutocomplete(setup)); }), ); it( - `negative=${negative} withGroup=${withGroup} disableOption=true`, + `state=noIcon`, visualDiffDefault.with(async (setup) => { - await setup.withFixture( - template({ ...defaultArgs, negative, withGroup, disableOption: true }), - wrapperStyle, - ); + await setup.withFixture(template({ ...defaultArgs, negative, withIcon: false }), style); setup.withPostSetupAction(() => openAutocomplete(setup)); }), ); - } - it( - `negative=${negative} withGroup=true disableGroup=true`, - visualDiffDefault.with(async (setup) => { - await setup.withFixture( - template({ - ...defaultArgs, - negative, - disableGroup: true, - withGroup: true, + for (const withIcon of [false, true]) { + it( + `state=noSpace withIcon=${withIcon}`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture( + template({ ...defaultArgs, negative, withIcon, preserveIconSpace: false }), + style, + ); + setup.withPostSetupAction(() => openAutocomplete(setup)); }), - { - minHeight: '800px', - backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, - }, ); - setup.withPostSetupAction(() => openAutocomplete(setup)); - }), - ); + } - for (const size of ['m', 's']) { - it( - `negative=${negative} withGroup=true size=${size} withMixedOptionAndGroup=true`, - visualDiffDefault.with(async (setup) => { - await setup.withFixture( - template({ - ...defaultArgs, - negative, - size, - withGroup: true, - withMixedOptionAndGroup: true, + for (const withGroup of [false, true]) { + const wrapperStyle = { + minHeight: withGroup ? '800px' : '400px', + backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + }; + + it( + `withGroup=${withGroup}`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture( + template({ ...defaultArgs, negative, withGroup }), + wrapperStyle, + ); + setup.withPostSetupAction(() => openAutocomplete(setup)); + }), + ); + + it( + `withGroup=${withGroup} disableOption=true`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture( + template({ ...defaultArgs, negative, withGroup, disableOption: true }), + wrapperStyle, + ); + setup.withPostSetupAction(() => openAutocomplete(setup)); + }), + ); + } + + describe('withGroup=true ', () => { + it( + `disableGroup=true`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture( + template({ + ...defaultArgs, + negative, + disableGroup: true, + withGroup: true, + }), + { + minHeight: '800px', + backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + }, + ); + setup.withPostSetupAction(() => openAutocomplete(setup)); + }), + ); + + for (const size of ['m', 's']) { + it( + `size=${size} withMixedOptionAndGroup=true`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture( + template({ + ...defaultArgs, + negative, + size, + withGroup: true, + withMixedOptionAndGroup: true, + }), + { + minHeight: '800px', + backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + }, + ); + setup.withPostSetupAction(() => openAutocomplete(setup)); }), - { - minHeight: '800px', - backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, - }, ); - setup.withPostSetupAction(() => openAutocomplete(setup)); - }), - ); - } + } + }); + }); } }); });