Design tweaks to add-story-button hover
This commit is contained in:
parent
810cbb5fe5
commit
2278bf2994
6 changed files with 26 additions and 12 deletions
119
ts/components/MyStoryButton.stories.tsx
Normal file
119
ts/components/MyStoryButton.stories.tsx
Normal file
|
@ -0,0 +1,119 @@
|
|||
// 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';
|
||||
import enMessages from '../../_locales/en/messages.json';
|
||||
import { MyStoryButton } from './MyStoryButton';
|
||||
import { getDefaultConversation } from '../test-both/helpers/getDefaultConversation';
|
||||
import { getFakeStoryView } from '../test-both/helpers/getFakeStory';
|
||||
import { setupI18n } from '../util/setupI18n';
|
||||
import { SendStatus } from '../messages/MessageSendState';
|
||||
|
||||
const i18n = setupI18n('en', enMessages);
|
||||
|
||||
export default {
|
||||
title: 'Components/MyStoriesButton',
|
||||
component: MyStoryButton,
|
||||
argTypes: {
|
||||
hasMultiple: {
|
||||
control: 'checkbox',
|
||||
defaultValue: false,
|
||||
},
|
||||
i18n: {
|
||||
defaultValue: i18n,
|
||||
},
|
||||
me: {
|
||||
defaultValue: getDefaultConversation(),
|
||||
},
|
||||
newestStory: {
|
||||
defaultValue: getFakeStoryView(),
|
||||
},
|
||||
onAddStory: { action: true },
|
||||
onClick: { action: true },
|
||||
queueStoryDownload: { action: true },
|
||||
showToast: { action: true },
|
||||
},
|
||||
} as Meta;
|
||||
|
||||
const Template: Story<PropsType> = args => <MyStoryButton {...args} />;
|
||||
|
||||
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');
|
||||
await userEvent.click(btnStory);
|
||||
await expect(args.onClick).toHaveBeenCalled();
|
||||
};
|
||||
|
||||
export const NoStory = Template.bind({});
|
||||
NoStory.args = {
|
||||
hasMultiple: false,
|
||||
newestStory: undefined,
|
||||
};
|
||||
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 = {
|
||||
hasMultiple: true,
|
||||
};
|
||||
ManyStories.story = {
|
||||
name: 'Many Stories',
|
||||
};
|
||||
ManyStories.play = interactionTest;
|
||||
|
||||
export const SendingStory = Template.bind({});
|
||||
SendingStory.story = {
|
||||
name: 'Sending Story',
|
||||
};
|
||||
SendingStory.args = {
|
||||
newestStory: {
|
||||
...getFakeStoryView(),
|
||||
sendState: [
|
||||
{
|
||||
status: SendStatus.Pending,
|
||||
recipient: getDefaultConversation(),
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
SendingStory.play = interactionTest;
|
||||
|
||||
export const FailedSendStory = Template.bind({});
|
||||
FailedSendStory.story = {
|
||||
name: 'Failed Send Story',
|
||||
};
|
||||
FailedSendStory.args = {
|
||||
newestStory: {
|
||||
...getFakeStoryView(),
|
||||
sendState: [
|
||||
{
|
||||
status: SendStatus.Failed,
|
||||
recipient: getDefaultConversation(),
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
FailedSendStory.play = interactionTest;
|
Loading…
Add table
Add a link
Reference in a new issue