signal-desktop/ts/components/MyStoryButton.stories.tsx

149 lines
3.8 KiB
TypeScript
Raw Normal View History

2022-07-01 00:52:03 +00:00
// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import type { Meta, ReactFramework, Story } from '@storybook/react';
import type { PlayFunction } from '@storybook/csf';
import React from 'react';
import { expect } from '@storybook/jest';
import { within, userEvent } from '@storybook/testing-library';
import type { PropsType } from './MyStoryButton';
2022-07-01 00:52:03 +00:00
import enMessages from '../../_locales/en/messages.json';
import { MyStoryButton } from './MyStoryButton';
2022-07-01 00:52:03 +00:00
import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
2022-11-16 22:10:11 +00:00
import { getFakeMyStory } from '../test-both/helpers/getFakeStory';
2022-07-01 00:52:03 +00:00
import { setupI18n } from '../util/setupI18n';
import { SendStatus } from '../messages/MessageSendState';
2022-11-16 22:10:11 +00:00
import { ResolvedSendStatus } from '../types/Stories';
2022-07-01 00:52:03 +00:00
const i18n = setupI18n('en', enMessages);
export default {
title: 'Components/MyStoriesButton',
component: MyStoryButton,
2022-07-01 00:52:03 +00:00
argTypes: {
i18n: {
defaultValue: i18n,
},
me: {
defaultValue: getDefaultConversation(),
},
2022-11-16 22:10:11 +00:00
myStories: {
defaultValue: [getFakeMyStory()],
2022-07-01 00:52:03 +00:00
},
onAddStory: { action: true },
onClick: { action: true },
queueStoryDownload: { action: true },
2022-08-19 18:36:47 +00:00
showToast: { action: true },
2022-07-01 00:52:03 +00:00
},
} as Meta;
2022-11-18 00:45:19 +00:00
// eslint-disable-next-line react/function-component-definition
const Template: Story<PropsType> = args => <MyStoryButton {...args} />;
2022-07-01 00:52:03 +00:00
const interactionTest: PlayFunction<ReactFramework, PropsType> = async ({
args,
canvasElement,
}) => {
const canvas = within(canvasElement);
const btnAddStory = canvas.getByLabelText('Add a story');
await userEvent.click(btnAddStory);
const textStory = canvas.getByText('Text story');
await userEvent.click(textStory);
await expect(args.onAddStory).toHaveBeenCalled();
const btnStory = canvas.getByText('My Stories');
2022-07-01 00:52:03 +00:00
await userEvent.click(btnStory);
await expect(args.onClick).toHaveBeenCalled();
};
export const NoStory = Template.bind({});
NoStory.args = {
2022-11-16 22:10:11 +00:00
myStories: [],
2022-07-01 00:52:03 +00:00
};
NoStory.story = {
name: 'No Story',
};
NoStory.play = interactionTest;
export const OneStory = Template.bind({});
OneStory.args = {};
OneStory.story = {
name: 'One Story',
};
OneStory.play = interactionTest;
export const ManyStories = Template.bind({});
ManyStories.args = {
2022-11-16 22:10:11 +00:00
myStories: [getFakeMyStory(), getFakeMyStory()],
2022-07-01 00:52:03 +00:00
};
ManyStories.story = {
name: 'Many Stories',
};
ManyStories.play = interactionTest;
export const SendingStory = Template.bind({});
SendingStory.story = {
name: 'Sending Story',
};
2022-11-16 22:10:11 +00:00
{
const myStory = getFakeMyStory();
SendingStory.args = {
myStories: [
{
2022-11-16 22:10:11 +00:00
...myStory,
reducedSendStatus: ResolvedSendStatus.Sending,
stories: myStory.stories.map((story, index) => {
if (index === 0) {
return {
...story,
sendState: [
{
status: SendStatus.Pending,
recipient: getDefaultConversation(),
},
],
};
}
return story;
}),
},
2022-11-16 22:10:11 +00:00
getFakeMyStory(),
],
2022-11-16 22:10:11 +00:00
};
}
SendingStory.play = interactionTest;
export const FailedSendStory = Template.bind({});
FailedSendStory.story = {
name: 'Failed Send Story',
};
2022-11-16 22:10:11 +00:00
{
const myStory = getFakeMyStory();
FailedSendStory.args = {
myStories: [
{
2022-11-16 22:10:11 +00:00
...myStory,
reducedSendStatus: ResolvedSendStatus.Failed,
stories: myStory.stories.map((story, index) => {
if (index === 0) {
return {
...story,
sendState: [
{
status: SendStatus.Failed,
recipient: getDefaultConversation(),
},
],
};
}
return story;
}),
},
2022-11-16 22:10:11 +00:00
getFakeMyStory(),
],
2022-11-16 22:10:11 +00:00
};
}
FailedSendStory.play = interactionTest;