fix: right drawer top bar story, adding some decorator and state setter (#7580)

# Context
Fixes #7496 
Changed the title to `RightDrawerTopBar` instead of
`RightDrawerActivityTopBar`, following the component name.
Add some missing decorator, and add state setter effect.

# Screenshot

![image](https://github.com/user-attachments/assets/0c6ae774-4602-45ef-8b46-457b7c549ba0)

Missing coverages screenshot.
This commit is contained in:
Rizdar
2024-10-11 14:43:23 +07:00
committed by GitHub
parent 650c401433
commit 3ecf9552a5

View File

@@ -1,27 +1,56 @@
import { expect } from '@storybook/jest';
import { Meta, StoryObj } from '@storybook/react';
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
import { graphqlMocks } from '~/testing/graphqlMocks';
import { RightDrawerTopBar } from '../RightDrawerTopBar';
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
import { ObjectMetadataItemsDecorator } from '~/testing/decorators/ObjectMetadataItemsDecorator';
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
import { useSetRecoilState } from 'recoil';
import { rightDrawerPageState } from '@/ui/layout/right-drawer/states/rightDrawerPageState';
import { isRightDrawerMinimizedState } from '@/ui/layout/right-drawer/states/isRightDrawerMinimizedState';
import { useEffect } from 'react';
import { RightDrawerPages } from '@/ui/layout/right-drawer/types/RightDrawerPages';
import { IconsProviderDecorator } from '~/testing/decorators/IconsProviderDecorator';
import { within } from '@storybook/test';
const RightDrawerTopBarStateSetterEffect = () => {
const setRightDrawerPage = useSetRecoilState(rightDrawerPageState);
const setIsRightDrawerMinimizedState = useSetRecoilState(
isRightDrawerMinimizedState,
);
useEffect(() => {
setRightDrawerPage(RightDrawerPages.ViewRecord);
setIsRightDrawerMinimizedState(false);
}, [setIsRightDrawerMinimizedState, setRightDrawerPage]);
return null;
};
const meta: Meta<typeof RightDrawerTopBar> = {
title: 'Modules/Activities/RightDrawer/RightDrawerActivityTopBar',
title: 'Modules/Activities/RightDrawer/RightDrawerTopBar',
component: RightDrawerTopBar,
decorators: [
(Story) => (
<div style={{ width: '500px' }}>
<Story />
<RightDrawerTopBarStateSetterEffect />
</div>
),
IconsProviderDecorator,
ComponentWithRouterDecorator,
ObjectMetadataItemsDecorator,
SnackBarDecorator,
],
parameters: {
msw: graphqlMocks,
},
};
export default meta;
type Story = StoryObj<typeof RightDrawerTopBar>;
export const Default: Story = {};
export const Default: Story = {
play: async () => {
const canvas = within(document.body);
expect(await canvas.findByText('Company')).toBeInTheDocument();
},
};