Skip to content

chore(vr-tests-v9): Convert Avatar VR tests to CSF #31910

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

Merged
dmytrokirpa merged 3 commits into from
Jul 4, 2024
Merged

chore(vr-tests-v9): Convert Avatar VR tests to CSF #31910

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a964c58
chore(vr-tests-v9): Convert Avatar VR tests to CSF
dmytrokirpa Jul 3, 2024
d220a66
Merge branch 'master' into avatar-to-csf
dmytrokirpa Jul 4, 2024
3bd283d
review comments
dmytrokirpa Jul 4, 2024
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
173 changes: 97 additions & 76 deletions apps/vr-tests-react-components/src/stories/Avatar.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { storiesOf } from '@storybook/react';
import type { Meta, StoryFn } from '@storybook/react';
import * as React from 'react';
import { Steps, StoryWright } from 'storywright';
import { Avatar, AvatarProps } from '@fluentui/react-avatar';
import { tokens } from '@fluentui/react-theme';
import { PeopleRegular, PersonCallRegular } from '@fluentui/react-icons';
import { DARK_MODE, HIGH_CONTRAST, RTL, getStoryVariant } from '../utilities';

const imageRoot = 'http://fabricweb.azureedge.net/fabric-website/assets/images/avatar';

Expand Down Expand Up @@ -185,81 +186,101 @@ const AvatarColors: React.FC<Pick<AvatarProps, 'active' | 'activeAppearance'>> =
);
};

storiesOf('Avatar Converged', module)
.addDecorator(story => (
<div style={{ display: 'flex' }}>
<div className="testWrapper" style={{ maxWidth: '750px' }}>
{story()}
</div>
</div>
))
.addDecorator(story => (
<StoryWright steps={new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
))
.addStory(
'basic',
() => (
<div style={{ display: 'flex', gap: '24px', padding: '24px' }}>
<Avatar />
<Avatar name="First Last" />
<Avatar name="Three Word Name" />
<Avatar name="One" />
<Avatar name="(111)-555-1234" icon={<PersonCallRegular />} />
<Avatar icon={<PeopleRegular />} shape="square" />
<Avatar name="Group" icon={<PeopleRegular />} shape="square" />
<Avatar image={{ src: examples.image[14] }} badge={{ status: 'away' }} />
<Avatar name={examples.name[7]} image={{ src: examples.image[7] }} badge={{ status: 'available' }} />
export default {
title: 'Avatar Converged',
component: Avatar,
decorators: [
story => (
<div style={{ display: 'flex' }}>
<div className="testWrapper" style={{ maxWidth: '750px' }}>
{story()}
</div>
</div>
),
{ includeRtl: true, includeHighContrast: true, includeDarkMode: true },
)
.addStory('size+name', () => <AvatarList names={examples.name} />)
.addStory('size+icon+badge+square', () => <AvatarList badge={{ status: 'out-of-office' }} shape="square" />)
.addStory('size+image+badge', () => <AvatarList images={examples.image} badge={{ status: 'do-not-disturb' }} />)
.addStory('size+inactive+badge', () => (
<AvatarList images={examples.image} active="inactive" badge={{ status: 'offline' }} />
))

/* Temporarily disable these stories as these cause noise with storywright
The issue is raised against playwright. Till it gets fixed we disabled these. https://github.com/microsoft/playwright/issues/18373
.addStory('size+active+badge', () => (
<AvatarList images={examples.image} active="active" badge={{ status: 'available' }} />
))
.addStory('size+active+shadow', () => (
<AvatarList images={examples.image} active="active" activeAppearance="shadow" />
))
.addStory('size+active+ring-shadow', () => (
<AvatarList images={examples.image} active="active" activeAppearance="ring-shadow" />
))*/
.addStory(
'badgeMask',
() => (
<div
style={{
backgroundSize: '32px 32px',
backgroundImage:
`repeating-conic-gradient(` +
`${tokens.colorBrandBackground} 0% 25%, ` +
`${tokens.colorBrandBackgroundSelected} 0% 50%)`,
}}
>
<AvatarList images={examples.image} color="marigold" active="active" badge={{ status: 'available' }} />
</div>
story => (
<StoryWright steps={new Steps().snapshot('normal', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
),
{ includeRtl: true },
)
.addStory('customSize+image', () => <AvatarCustomSizeList images={examples.image} />)
.addStory('customSize+name+badge', () => (
<AvatarCustomSizeList names={examples.name} badge={{ status: 'available' }} />
))
.addStory('customSize+icon+active', () => <AvatarCustomSizeList active="active" badge={{ status: 'available' }} />)
.addStory('color', () => <AvatarColors />, {
includeHighContrast: true,
includeDarkMode: true,
})
.addStory('color+active', () => <AvatarColors active="active" />, {
includeHighContrast: true,
includeDarkMode: true,
})
.addStory('image-bad-url', () => <Avatar name="Broken Image" image={{ src: `${imageRoot}/bad_image_url.jpg` }} />)
.addStory('image-bad-url+icon', () => <Avatar image={{ src: `${imageRoot}/bad_image_url.jpg` }} />);
],
} satisfies Meta<typeof Avatar>;

type Story = StoryFn<typeof Avatar>;

export const Basic: Story = () => (
<div style={{ display: 'flex', gap: '24px', padding: '24px' }}>
<Avatar />
<Avatar name="First Last" />
<Avatar name="Three Word Name" />
<Avatar name="One" />
<Avatar name="(111)-555-1234" icon={<PersonCallRegular />} />
<Avatar icon={<PeopleRegular />} shape="square" />
<Avatar name="Group" icon={<PeopleRegular />} shape="square" />
<Avatar image={{ src: examples.image[14] }} badge={{ status: 'away' }} />
<Avatar name={examples.name[7]} image={{ src: examples.image[7] }} badge={{ status: 'available' }} />
</div>
);
Basic.storyName = 'basic';

export const BasicRTL = getStoryVariant(Basic, RTL);
export const BasicDarkMode = getStoryVariant(Basic, DARK_MODE);
export const BasicHighContrast = getStoryVariant(Basic, HIGH_CONTRAST);

export const SizeName: Story = () => <AvatarList names={examples.name} />;
SizeName.storyName = 'size+name';

export const SizeIconBadgeSquare: Story = () => <AvatarList badge={{ status: 'out-of-office' }} shape="square" />;
SizeIconBadgeSquare.storyName = 'size+icon+badge+square';

export const SizeImageBadge: Story = () => <AvatarList images={examples.image} badge={{ status: 'do-not-disturb' }} />;
SizeImageBadge.storyName = 'size+image+badge';

export const SizeInactiveBadge: Story = () => (
<AvatarList images={examples.image} active="inactive" badge={{ status: 'offline' }} />
);
SizeInactiveBadge.storyName = 'size+inactive+badge';

export const BadgeMask: Story = () => (
<div
style={{
backgroundSize: '32px 32px',
backgroundImage: `repeating-conic-gradient(${tokens.colorBrandBackground} 0% 25%, ${tokens.colorBrandBackgroundSelected} 0% 50%)`,
}}
>
<AvatarList images={examples.image} color="marigold" active="active" badge={{ status: 'available' }} />
</div>
);
BadgeMask.storyName = 'badgeMask';

export const BadgeMaskRTL = getStoryVariant(BadgeMask, RTL);

export const CustomSizeImage: Story = () => <AvatarCustomSizeList images={examples.image} />;
CustomSizeImage.storyName = 'customSize+image';

export const CustomSizeNameBadge: Story = () => (
<AvatarCustomSizeList names={examples.name} badge={{ status: 'available' }} />
);
CustomSizeNameBadge.storyName = 'customSize+name+badge';

export const CustomSizeIconActive: Story = () => (
<AvatarCustomSizeList active="active" badge={{ status: 'available' }} />
);
CustomSizeIconActive.storyName = 'customSize+icon+active';

export const Color: Story = () => <AvatarColors />;
Color.storyName = 'color';

export const ColorHighContrast = getStoryVariant(Color, HIGH_CONTRAST);
export const ColorDarkMode = getStoryVariant(Color, DARK_MODE);

export const ColorActive: Story = () => <AvatarColors active="active" />;
ColorActive.storyName = 'color+active';

export const ColorActiveHighContrast = getStoryVariant(ColorActive, HIGH_CONTRAST);
export const ColorActiveDarkMode = getStoryVariant(ColorActive, DARK_MODE);

export const ImageBadUrl: Story = () => (
<Avatar name="Broken Image" image={{ src: `${imageRoot}/bad_image_url.jpg` }} />
);
ImageBadUrl.storyName = 'image-bad-url';

export const ImageBadUrlIcon: Story = () => <Avatar image={{ src: `${imageRoot}/bad_image_url.jpg` }} />;
ImageBadUrlIcon.storyName = 'image-bad-url+icon';