Skip to content

Commit

Permalink
Merge branch 'refs/heads/main' into feat/migration-notification
Browse files Browse the repository at this point in the history
  • Loading branch information
jeripeierSBB committed Jul 2, 2024
2 parents e1680a2 + f172738 commit 0bdfd92
Show file tree
Hide file tree
Showing 14 changed files with 557 additions and 159 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@
"chromatic": "11.5.4",
"custom-elements-manifest": "2.1.0",
"date-fns": "3.6.0",
"esbuild": "0.22.0",
"esbuild": "0.23.0",
"esbuild-sass-plugin": "3.3.1",
"eslint": "9.6.0",
"eslint-config-prettier": "9.1.0",
Expand Down
2 changes: 1 addition & 1 deletion src/elements/core/testing/private/fixture.ts
Original file line number Diff line number Diff line change
Expand Up @@ -90,8 +90,8 @@ export async function visualRegressionFixture<T extends HTMLElement>(
focusOutlineDark?: boolean;
padding?: string;
minHeight?: string;
forcedColors?: boolean;
maxWidth?: string;
forcedColors?: boolean;
},
): Promise<T> {
const base = tryFindBase(new Error().stack!);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* @web/test-runner snapshot v1 */
export const snapshots = {};

snapshots["sbb-menu-button renders Light DOM"] =
snapshots["sbb-menu-button renders DOM"] =
`<sbb-menu-button
aria-label="a11y label"
data-action=""
Expand All @@ -18,7 +18,7 @@ snapshots["sbb-menu-button renders Light DOM"] =
</span>
</sbb-menu-button>
`;
/* end snapshot sbb-menu-button renders Light DOM */
/* end snapshot sbb-menu-button renders DOM */

snapshots["sbb-menu-button renders Shadow DOM"] =
`<span class="sbb-action-base sbb-menu-button">
Expand All @@ -36,23 +36,7 @@ snapshots["sbb-menu-button renders Shadow DOM"] =
`;
/* end snapshot sbb-menu-button renders Shadow DOM */

snapshots["sbb-menu-button renders A11y tree Chrome"] =
`<p>
{
"role": "WebArea",
"name": "",
"children": [
{
"role": "button",
"name": "a11y label"
}
]
}
</p>
`;
/* end snapshot sbb-menu-button renders A11y tree Chrome */

snapshots["sbb-menu-button renders component with icon and amount Light DOM"] =
snapshots["sbb-menu-button renders component with icon and amount DOM"] =
`<sbb-menu-button
amount="123456"
data-action=""
Expand All @@ -67,7 +51,7 @@ snapshots["sbb-menu-button renders component with icon and amount Light DOM"] =
</span>
</sbb-menu-button>
`;
/* end snapshot sbb-menu-button renders component with icon and amount Light DOM */
/* end snapshot sbb-menu-button renders component with icon and amount DOM */

snapshots["sbb-menu-button renders component with icon and amount Shadow DOM"] =
`<span class="sbb-action-base sbb-menu-button">
Expand Down Expand Up @@ -95,19 +79,35 @@ snapshots["sbb-menu-button renders component with icon and amount Shadow DOM"] =
`;
/* end snapshot sbb-menu-button renders component with icon and amount Shadow DOM */

snapshots["sbb-menu-button renders A11y tree Firefox"] =
snapshots["sbb-menu-button renders component with icon and amount A11y tree Chrome"] =
`<p>
{
"role": "WebArea",
"name": "",
"children": [
{
"role": "button",
"name": "Action 123456"
}
]
}
</p>
`;
/* end snapshot sbb-menu-button renders component with icon and amount A11y tree Chrome */

snapshots["sbb-menu-button renders component with icon and amount A11y tree Firefox"] =
`<p>
{
"role": "document",
"name": "",
"children": [
{
"role": "button",
"name": "a11y label"
"name": "Action 123456"
}
]
}
</p>
`;
/* end snapshot sbb-menu-button renders A11y tree Firefox */
/* end snapshot sbb-menu-button renders component with icon and amount A11y tree Firefox */

8 changes: 4 additions & 4 deletions src/elements/menu/menu-button/menu-button.snapshot.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,15 +19,13 @@ describe(`sbb-menu-button`, () => {
`);
});

it('Light DOM', async () => {
it('DOM', async () => {
await expect(element).dom.to.be.equalSnapshot();
});

it('Shadow DOM', async () => {
await expect(element).shadowDom.to.be.equalSnapshot();
});

testA11yTreeSnapshot();
});

describe('renders component with icon and amount', () => {
Expand All @@ -41,12 +39,14 @@ describe(`sbb-menu-button`, () => {
`);
});

it('Light DOM', async () => {
it('DOM', async () => {
await expect(element).dom.to.be.equalSnapshot();
});

it('Shadow DOM', async () => {
await expect(element).shadowDom.to.be.equalSnapshot();
});

testA11yTreeSnapshot();
});
});
1 change: 0 additions & 1 deletion src/elements/menu/menu-button/menu-button.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import { sbbSpread } from '../../../storybook/helpers/spread.js';

import readme from './readme.md?raw';
import './menu-button.js';
import '../../icon.js';

const getBasicTemplate = (
{ text, ...args }: Args,
Expand Down
95 changes: 95 additions & 0 deletions src/elements/menu/menu-button/menu-button.visual.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
import { html, nothing, type TemplateResult } from 'lit';
import { repeat } from 'lit/directives/repeat.js';

import type { visualRegressionFixture } from '../../core/testing/private.js';
import {
describeEach,
describeViewports,
visualDiffDefault,
visualDiffFocus,
visualDiffHover,
} from '../../core/testing/private.js';

import './menu-button.js';

describe(`sbb-menu-button`, () => {
const defaultArgs = {
amount: 123 as number | undefined,
iconName: 'tick-small',
label: 'Button',
disabled: false,
slottedIcon: false,
};

const template = ({
amount,
iconName,
label,
disabled,
slottedIcon,
}: typeof defaultArgs): TemplateResult => html`
${repeat(
new Array(3),
(_, index) => html`
<sbb-menu-button
amount=${amount || nothing}
icon-name=${iconName || nothing}
?disabled=${disabled}
>
${label} ${index}
${slottedIcon ? html`<sbb-icon slot="icon" name="pie-small"></sbb-icon>` : nothing}
</sbb-menu-button>
`,
)}
`;

const state = {
amount: [undefined, 123],
slottedIcon: [false, true],
};

const wrapperStyles: Parameters<typeof visualRegressionFixture>[1] = {
backgroundColor: 'var(--sbb-color-black)',
maxWidth: '256px',
};

describeViewports({ viewports: ['zero', 'medium'] }, () => {
for (const visualDiffState of [visualDiffDefault, visualDiffHover, visualDiffFocus]) {
it(
visualDiffState.name,
visualDiffState.with(async (setup) => {
await setup.withFixture(template(defaultArgs), wrapperStyles);
}),
);

it(
`disabled ${visualDiffState.name}`,
visualDiffState.with(async (setup) => {
await setup.withFixture(template({ ...defaultArgs, disabled: true }), wrapperStyles);
}),
);

it(
`long label ${visualDiffState.name}`,
visualDiffState.with(async (setup) => {
await setup.withFixture(
template({
...defaultArgs,
label: 'Button lorem ipsum dolor sit amet, consectetur adipiscing elit',
}),
wrapperStyles,
);
}),
);
}

describeEach(state, ({ amount, slottedIcon }) => {
it(
visualDiffDefault.name,
visualDiffDefault.with(async (setup) => {
await setup.withFixture(template({ ...defaultArgs, amount, slottedIcon }), wrapperStyles);
}),
);
});
});
});
Original file line number Diff line number Diff line change
@@ -1,7 +1,48 @@
/* @web/test-runner snapshot v1 */
export const snapshots = {};

snapshots["sbb-menu-link renders component with icon and amount Light DOM"] =
snapshots["sbb-menu-link renders DOM"] =
`<sbb-menu-link
accessibility-label="a11y label"
data-action=""
data-link=""
dir="ltr"
href="https://github.com/sbb-design-systems/lyne-components"
target="_blank"
>
<span>
Action
</span>
</sbb-menu-link>
`;
/* end snapshot sbb-menu-link renders DOM */

snapshots["sbb-menu-link renders Shadow DOM"] =
`<a
aria-label="a11y label"
class="sbb-action-base sbb-menu-link"
href="https://github.com/sbb-design-systems/lyne-components"
rel="external noopener nofollow"
target="_blank"
>
<span class="sbb-menu-action__content">
<span class="sbb-menu-action__icon">
<slot name="icon">
</slot>
</span>
<span class="sbb-menu-action__label">
<slot>
</slot>
</span>
</span>
<sbb-screen-reader-only>
. Link target opens in a new window.
</sbb-screen-reader-only>
</a>
`;
/* end snapshot sbb-menu-link renders Shadow DOM */

snapshots["sbb-menu-link renders component with icon and amount DOM"] =
`<sbb-menu-link
accessibility-label="a11y label"
amount="123456"
Expand All @@ -17,7 +58,7 @@ snapshots["sbb-menu-link renders component with icon and amount Light DOM"] =
</span>
</sbb-menu-link>
`;
/* end snapshot sbb-menu-link renders component with icon and amount Light DOM */
/* end snapshot sbb-menu-link renders component with icon and amount DOM */

snapshots["sbb-menu-link renders component with icon and amount Shadow DOM"] =
`<a
Expand Down
26 changes: 25 additions & 1 deletion src/elements/menu/menu-link/menu-link.snapshot.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,30 @@ import type { SbbMenuLinkElement } from './menu-link.js';
import './menu-link.js';

describe(`sbb-menu-link`, () => {
describe('renders', () => {
let element: SbbMenuLinkElement;

beforeEach(async () => {
element = await fixture(html`
<sbb-menu-link
href="https://github.com/sbb-design-systems/lyne-components"
target="_blank"
accessibility-label="a11y label"
>
<span>Action</span>
</sbb-menu-link>
`);
});

it('DOM', async () => {
await expect(element).dom.to.be.equalSnapshot();
});

it('Shadow DOM', async () => {
await expect(element).shadowDom.to.be.equalSnapshot();
});
});

describe('renders component with icon and amount', () => {
let element: SbbMenuLinkElement;

Expand All @@ -25,7 +49,7 @@ describe(`sbb-menu-link`, () => {
`);
});

it('Light DOM', async () => {
it('DOM', async () => {
await expect(element).dom.to.be.equalSnapshot();
});

Expand Down
1 change: 0 additions & 1 deletion src/elements/menu/menu-link/menu-link.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import { sbbSpread } from '../../../storybook/helpers/spread.js';

import readme from './readme.md?raw';
import './menu-link.js';
import '../../icon.js';

const getBasicTemplate = (
{ text, ...args }: Args,
Expand Down
Loading

0 comments on commit 0bdfd92

Please sign in to comment.