Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(sbb-image): lit migration #2029

Merged
merged 3 commits into from
Oct 2, 2023
Merged

refactor(sbb-image): lit migration #2029

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c79cbca
refactor(sbb-image): migration to Lit
dauriamarco Sep 28, 2023
259e483
fix: handle boolean porperties
dauriamarco Sep 29, 2023
4fa426d
fix: review
dauriamarco Oct 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions src/components/sbb-image/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './sbb-image';
53 changes: 26 additions & 27 deletions src/components/sbb-image/sbb-image.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,39 +1,38 @@
import { aTimeout, assert, expect, fixture } from '@open-wc/testing';
import { html } from 'lit/static-html.js';
import { SbbImage } from './sbb-image';
import images from '../../global/images';
import { E2EElement, E2EPage, newE2EPage } from '@stencil/core/testing';

describe('sbb-image', () => {
let element: E2EElement, page: E2EPage;
let element: SbbImage;

it('renders', async () => {
const url = images[0];
element = await fixture(html`<sbb-image image-src="${url}"></sbb-image>`);

page = await newE2EPage();
await page.setContent(`<sbb-image image-src="${url}"></sbb-image>`);
element = await page.find('sbb-image');
expect(element).toHaveClass('hydrated');

await page.waitForChanges();
assert.instanceOf(element, SbbImage);
await element.updateComplete;
// Wait five seconds in hope the image will successfully be loaded
// TODO: Find more reliable solution
await new Promise((res) => setTimeout(res, 5000));
await page.waitForChanges();
await aTimeout(2000);
await element.updateComplete;

expect(element).dom.to.be.equal(`
<sbb-image image-src="${url}"></sbb-image>
`);

expect(element).toEqualHtml(`
<sbb-image image-src="${url}" class="hydrated">
<mock:shadow-root>
<figure class="image__figure image__figure--loaded image__figure--ratio-16-9">
<div class="image__wrapper">
<img alt="" class="image__blur-hash" decoding="auto" height="562" loading="eager" src="${url}?blur=100&amp;w=100&amp;h=56" width="1000">
<picture>
<source media="(min-width: 64rem)" sizes="1200px" srcset="${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=1200&amp;h=675&amp;q=45 1200w, ${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=2400&amp;h=1350&amp;q=20 2400w">
<source media="(min-width: 37.5rem)" sizes="976px" srcset="${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=976&amp;h=549&amp;q=45 976w, ${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=1952&amp;h=1098&amp;q=20 1952w">
<source media="(max-width: 37.4375rem)" sizes="320px" srcset="${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=320&amp;h=180&amp;q=45 320w, ${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=640&amp;h=360&amp;q=20 640w">
<img class="image__img" decoding="auto" height="562" importance="high" loading="eager" src="${url}" width="1000">
</picture>
</div>
</figure>
</mock:shadow-root>
</sbb-image>
`);
expect(element).shadowDom.to.be.equal(`
<figure class="image__figure image__figure--loaded image__figure--ratio-16-9">
<div class="image__wrapper">
<img alt="" class="image__blur-hash" decoding="auto" height="562" loading="eager" src="${url}?blur=100&amp;w=100&amp;h=56" width="1000">
<picture>
<source media="(min-width: 64rem)" sizes="1200px" srcset="${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=1200&amp;h=675&amp;q=45 1200w, ${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=2400&amp;h=1350&amp;q=20 2400w">
<source media="(min-width: 37.5rem)" sizes="976px" srcset="${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=976&amp;h=549&amp;q=45 976w, ${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=1952&amp;h=1098&amp;q=20 1952w">
<source media="(max-width: 37.4375rem)" sizes="320px" srcset="${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=320&amp;h=180&amp;q=45 320w, ${url}?auto=format%2Ccompress%2Ccs%3Dtinysrgb&amp;w=640&amp;h=360&amp;q=20 640w">
<img class="image__img" decoding="auto" height="562" importance="high" loading="eager" src="${url}" width="1000">
</picture>
</div>
</figure>
`);
});
});
22 changes: 11 additions & 11 deletions src/components/sbb-image/sbb-image.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
/** @jsx h */
import { h, JSX } from 'jsx-dom';
import images from '../../global/images';
import readme from './readme.md';
import readme from './readme.md?raw';
import isChromatic from 'chromatic';
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-image';

const Template = (args): JSX.Element => <sbb-image {...args} />;

Expand All @@ -15,11 +16,10 @@ const imageSrc: InputType = {
options: images,
};

const borderRadius: InputType = {
const noBorderRadius: InputType = {
control: {
type: 'select',
type: 'boolean',
},
options: ['true', 'false'],
};

const aspectRatio: InputType = {
Expand Down Expand Up @@ -92,7 +92,7 @@ const loading: InputType = {
},
};

const lqip: InputType = {
const skipLqip: InputType = {
control: {
type: 'boolean',
},
Expand All @@ -119,7 +119,7 @@ const disableAnimation: InputType = {
const defaultArgTypes: ArgTypes = {
alt: {},
caption: {},
'border-radius': borderRadius,
'no-border-radius': noBorderRadius,
'aspect-ratio': aspectRatio,
copyright,
'copyright-holder': copyrightHolder,
Expand All @@ -129,7 +129,7 @@ const defaultArgTypes: ArgTypes = {
'focal-point-y': focalPointY,
'image-src': imageSrc,
loading,
lqip,
'skip-lqip': skipLqip,
'performance-mark': performanceMark,
'disable-animation': disableAnimation,
};
Expand All @@ -138,7 +138,7 @@ const defaultArgs: Args = {
alt: '',
caption: undefined,
// we need a string and not boolean, otherwise storybook add/remove the attribute but don't write the value
'border-radius': 'true',
'no-border-radius': false,
'aspect-ratio': aspectRatio.options[0],
copyright: '',
'copyright-holder': copyrightHolder.options[0],
Expand All @@ -148,7 +148,7 @@ const defaultArgs: Args = {
'focal-point-y': '',
'image-src': imageSrc.options[0],
loading: loading.options[1],
lqip: true,
'skip-lqip': false,
'performance-mark': '',
'disable-animation': isChromatic(),
};
Expand Down Expand Up @@ -177,7 +177,7 @@ export const NoCaptionNoRadius: StoryObj = {
argTypes: defaultArgTypes,
args: {
...defaultArgs,
'border-radius': 'false',
'no-border-radius': true,
},
};

Expand Down
Loading