From 6ed0752727825a589db6f2d4f94bc07b04cd8188 Mon Sep 17 00:00:00 2001 From: Jeri Peier Date: Thu, 8 Aug 2024 08:48:41 +0200 Subject: [PATCH] test(sbb-form-field): add forced colors tests (#2993) --- .../form-field/form-field.stories.ts | 11 +- .../form-field/form-field.visual.spec.ts | 366 ++++++++++-------- 2 files changed, 206 insertions(+), 171 deletions(-) diff --git a/src/elements/form-field/form-field/form-field.stories.ts b/src/elements/form-field/form-field/form-field.stories.ts index 7b74794852..13c9cd57a0 100644 --- a/src/elements/form-field/form-field/form-field.stories.ts +++ b/src/elements/form-field/form-field/form-field.stories.ts @@ -7,6 +7,7 @@ import { styleMap } from 'lit/directives/style-map.js'; import type { SbbFormErrorElement } from '../../form-error.js'; import readme from './readme.md?raw'; + import './form-field.js'; import '../form-field-clear.js'; import '../../button/mini-button.js'; @@ -103,9 +104,8 @@ const TemplateBasicTextarea = ({ placeholder=${placeholder} ?disabled=${disabled} ?readonly=${readonly} - > -${value}`; + .value=${value || nothing} + >`; const TemplateInput = (args: Args): TemplateResult => formField(args, TemplateBasicInput(args)); @@ -262,9 +262,8 @@ const TemplateTextareaWithErrorSpace = (args: Args): TemplateResult => { placeholder=${args.placeholder} ?disabled=${args.disabled} ?readonly=${args.readonly} - > -${args.value} + .value=${args.value || nothing} + > ${sbbFormError}`, )} diff --git a/src/elements/form-field/form-field/form-field.visual.spec.ts b/src/elements/form-field/form-field/form-field.visual.spec.ts index 2f64b8d570..02c54a7383 100644 --- a/src/elements/form-field/form-field/form-field.visual.spec.ts +++ b/src/elements/form-field/form-field/form-field.visual.spec.ts @@ -91,9 +91,8 @@ describe(`sbb-form-field`, () => { placeholder=${placeholder} ?disabled=${disabled} ?readonly=${readonly} - > -${value}`; + .value=${value || nothing} + >`; const icons: TemplateResult = html` @@ -155,183 +154,220 @@ ${value} { - // visual states - for (const [name, template] of component.entries()) { - for (const negative of [false, true]) { - const args = { ...basicArgs, negative }; + // As there are so many special styles for forced color, we apply forcedColors to every case. + for (const forcedColors of [false, true]) { + describe(`forcedColors=${forcedColors}`, () => { + for (const [name, template] of component.entries()) { + describe(`input=${name}`, () => { + // visual states + for (const negative of [false, true]) { + const args = { ...basicArgs, negative }; - for (const visualDiffState of [visualDiffDefault, visualDiffFocus, visualDiffActive]) { - it( - `slot=none negative=${negative} ${name} ${visualDiffState.name}`, - visualDiffState.with(async (setup) => { - await setup.withFixture(html`${formField(args, template(args))}`, { - backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, - }); - }), - ); + describe(`negative=${negative}`, () => { + for (const visualDiffState of [ + visualDiffDefault, + visualDiffFocus, + visualDiffActive, + ]) { + it( + `slot=none ${visualDiffState.name}`, + visualDiffState.with(async (setup) => { + await setup.withFixture(html`${formField(args, template(args))}`, { + backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + forcedColors, + }); + }), + ); + + it( + `slot=icons ${visualDiffState.name}`, + visualDiffState.with(async (setup) => { + const templateResult: TemplateResult = html`${template(args)} ${icons}`; + await setup.withFixture(html`${formField(args, templateResult)}`, { + backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + forcedColors, + }); + }), + ); + } + + it( + `slot=buttons ${visualDiffDefault.name}`, + visualDiffDefault.with(async (setup) => { + const templateResult: TemplateResult = html`${template(args)} + ${buttonsAndPopover(args)}`; + await setup.withFixture(html`${formField(args, templateResult)}`, { + backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + forcedColors, + }); + }), + ); - it( - `slot=icons negative=${negative} ${name} ${visualDiffState.name}`, - visualDiffState.with(async (setup) => { - const templateResult: TemplateResult = html`${template(args)} ${icons}`; - await setup.withFixture(html`${formField(args, templateResult)}`, { - backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + it( + `slot=buttons ${visualDiffActive.name}`, + visualDiffActive.with(async (setup) => { + const templateResult: TemplateResult = html`${template(args)} + ${buttonsAndPopover(args)}`; + await setup.withFixture(html`${formField(args, templateResult)}`, { + backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + forcedColors, + }); + }), + ); + + it( + `slot=buttons focus`, + visualDiffDefault.with(async (setup) => { + const templateResult: TemplateResult = html`${template(args)} + ${buttonsAndPopover(args)}`; + await setup.withFixture(html`${formField(args, templateResult)}`, { + backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + forcedColors, + }); + ( + setup.snapshotElement.querySelector(name)! + .nextElementSibling as SbbMiniButtonElement + ).focus(); + await sendKeys({ press: tabKey }); + }), + ); }); - }), - ); - } + } - it( - `slot=buttons negative=${negative} ${name} ${visualDiffDefault.name}`, - visualDiffDefault.with(async (setup) => { - const templateResult: TemplateResult = html`${template(args)} ${buttonsAndPopover(args)}`; - await setup.withFixture(html`${formField(args, templateResult)}`, { - backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, - }); - }), - ); - it( - `slot=buttons negative=${negative} ${name} ${visualDiffActive.name}`, - visualDiffActive.with(async (setup) => { - const templateResult: TemplateResult = html`${template(args)} ${buttonsAndPopover(args)}`; - await setup.withFixture(html`${formField(args, templateResult)}`, { - backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, - }); - }), - ); - it( - `slot=buttons negative=${negative} ${name} focus`, - visualDiffDefault.with(async (setup) => { - const templateResult: TemplateResult = html`${template(args)} ${buttonsAndPopover(args)}`; - await setup.withFixture(html`${formField(args, templateResult)}`, { - backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, - }); - ( - setup.snapshotElement.querySelector(name)!.nextElementSibling as SbbMiniButtonElement - ).focus(); - await sendKeys({ press: tabKey }); - }), - ); - } - } + // disabled and readonly states + describeEach(states, ({ negative, state }) => { + const args = { + ...basicArgs, + negative, + disabled: state.disabled, + readonly: state.readonly, + }; - // disabled and readonly states - describeEach(states, ({ negative, state }) => { - const args = { - ...basicArgs, - negative, - disabled: state.disabled, - readonly: state.readonly, - }; + it( + `slot=none`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture(html`${formField(args, template(args))}`, { + backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + forcedColors, + }); + }), + ); - for (const [name, template] of component.entries()) { - it( - `slot=none ${name} ${visualDiffDefault.name}`, - visualDiffDefault.with(async (setup) => { - await setup.withFixture(html`${formField(args, template(args))}`, { - backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + it( + `slot=buttons`, + visualDiffDefault.with(async (setup) => { + const templateResult: TemplateResult = html`${template(args)} + ${buttonsAndPopover(args)}`; + await setup.withFixture(html`${formField(args, templateResult)}`, { + backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + forcedColors, + }); + }), + ); }); - }), - ); - it( - `slot=buttons ${name} ${visualDiffDefault.name}`, - visualDiffDefault.with(async (setup) => { - const templateResult: TemplateResult = html`${template(args)} ${buttonsAndPopover(args)}`; - await setup.withFixture(html`${formField(args, templateResult)}`, { - backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, - }); - }), - ); - } - }); + // labels + it( + `label=undefined`, + visualDiffDefault.with(async (setup) => { + const noLabel = { ...basicArgs, label: undefined }; + await setup.withFixture(html`${formField(noLabel, template(noLabel))}`, { + forcedColors, + }); + }), + ); - for (const [name, template] of component.entries()) { - // labels - it( - `label=undefined ${name} ${visualDiffDefault.name}`, - visualDiffDefault.with(async (setup) => { - const noLabel = { ...basicArgs, label: undefined }; - await setup.withFixture(html`${formField(noLabel, template(noLabel))}`); - }), - ); + it( + `label=hidden`, + visualDiffDefault.with(async (setup) => { + const hiddenLabel = { ...basicArgs, 'hidden-label': true }; + await setup.withFixture(html`${formField(hiddenLabel, template(hiddenLabel))}`, { + forcedColors, + }); + }), + ); - it( - `label=hidden ${name} ${visualDiffDefault.name}`, - visualDiffDefault.with(async (setup) => { - const hiddenLabel = { ...basicArgs, 'hidden-label': true }; - await setup.withFixture(html`${formField(hiddenLabel, template(hiddenLabel))}`); - }), - ); + it( + `label=slotted`, + visualDiffDefault.with(async (setup) => { + const slottedLabel = { ...basicArgs, 'slotted-label': true }; + await setup.withFixture(html`${formField(slottedLabel, template(slottedLabel))}`, { + forcedColors, + }); + }), + ); - it( - `label=slotted ${name} ${visualDiffDefault.name}`, - visualDiffDefault.with(async (setup) => { - const slottedLabel = { ...basicArgs, 'slotted-label': true }; - await setup.withFixture(html`${formField(slottedLabel, template(slottedLabel))}`); - }), - ); + it( + `label=floating`, + visualDiffDefault.with(async (setup) => { + const hiddenLabel = { + ...basicArgs, + 'floating-label': true, + value: undefined, + selectNullValue: true, + }; + await setup.withFixture(html`${formField(hiddenLabel, template(hiddenLabel))}`, { + forcedColors, + }); + }), + ); - it( - `label=floating ${name} ${visualDiffDefault.name}`, - visualDiffDefault.with(async (setup) => { - const hiddenLabel = { - ...basicArgs, - 'floating-label': true, - value: undefined, - selectNullValue: true, - }; - await setup.withFixture(html`${formField(hiddenLabel, template(hiddenLabel))}`); - }), - ); + it( + `label=ellipsis`, + visualDiffDefault.with(async (setup) => { + const hiddenLabel = { + ...basicArgs, + label: 'This label name is so long that it needs ellipsis to fit', + }; + await setup.withFixture(html`${formField(hiddenLabel, template(hiddenLabel))}`, { + forcedColors, + }); + }), + ); - it( - `label=ellipsis ${name} ${visualDiffDefault.name}`, - visualDiffDefault.with(async (setup) => { - const hiddenLabel = { - ...basicArgs, - label: 'This label name is so long that it needs ellipsis to fit', - }; - await setup.withFixture(html`${formField(hiddenLabel, template(hiddenLabel))}`); - }), - ); + // optional + it( + `optional=true`, + visualDiffDefault.with(async (setup) => { + const noLabel = { ...basicArgs, optional: true }; + await setup.withFixture(html`${formField(noLabel, template(noLabel))}`, { + forcedColors, + }); + }), + ); - // optional - it( - `optional=true ${name} ${visualDiffDefault.name}`, - visualDiffDefault.with(async (setup) => { - const noLabel = { ...basicArgs, optional: true }; - await setup.withFixture(html`${formField(noLabel, template(noLabel))}`); - }), - ); + // borderless + it( + `borderless=true`, + visualDiffDefault.with(async (setup) => { + const noLabel = { ...basicArgs, borderless: true }; + await setup.withFixture(html`${formField(noLabel, template(noLabel))}`, { + forcedColors, + }); + }), + ); - // borderless - it( - `borderless=true ${name} ${visualDiffDefault.name}`, - visualDiffDefault.with(async (setup) => { - const noLabel = { ...basicArgs, borderless: true }; - await setup.withFixture(html`${formField(noLabel, template(noLabel))}`); - }), - ); + // visual + describeEach(visualProp, ({ size, width, errorText }) => { + it( + visualDiffDefault.name, + visualDiffDefault.with(async (setup) => { + const args = { + ...basicArgs, + size, + width, + errorText, + cssClass: errorText ? 'sbb-invalid' : '', + }; + await setup.withFixture(html`${formField(args, template(args))}`, { + forcedColors, + }); + }), + ); + }); + }); + } + }); } - - // visual - describeEach(visualProp, ({ size, width, errorText }) => { - for (const [name, template] of component.entries()) { - it( - `${name} ${visualDiffDefault.name}`, - visualDiffDefault.with(async (setup) => { - const args = { - ...basicArgs, - size, - width, - errorText, - cssClass: errorText ? 'sbb-invalid' : '', - }; - await setup.withFixture(html`${formField(args, template(args))}`); - }), - ); - } - }); }); });