mirror of
https://github.com/lingble/twenty.git
synced 2025-11-01 21:27:58 +00:00
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  Missing coverages screenshot.
This commit is contained in:
@@ -1,27 +1,56 @@
|
|||||||
|
import { expect } from '@storybook/jest';
|
||||||
import { Meta, StoryObj } from '@storybook/react';
|
import { Meta, StoryObj } from '@storybook/react';
|
||||||
|
|
||||||
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
|
|
||||||
import { graphqlMocks } from '~/testing/graphqlMocks';
|
|
||||||
|
|
||||||
import { RightDrawerTopBar } from '../RightDrawerTopBar';
|
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> = {
|
const meta: Meta<typeof RightDrawerTopBar> = {
|
||||||
title: 'Modules/Activities/RightDrawer/RightDrawerActivityTopBar',
|
title: 'Modules/Activities/RightDrawer/RightDrawerTopBar',
|
||||||
component: RightDrawerTopBar,
|
component: RightDrawerTopBar,
|
||||||
decorators: [
|
decorators: [
|
||||||
(Story) => (
|
(Story) => (
|
||||||
<div style={{ width: '500px' }}>
|
<div style={{ width: '500px' }}>
|
||||||
<Story />
|
<Story />
|
||||||
|
<RightDrawerTopBarStateSetterEffect />
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
|
IconsProviderDecorator,
|
||||||
ComponentWithRouterDecorator,
|
ComponentWithRouterDecorator,
|
||||||
|
ObjectMetadataItemsDecorator,
|
||||||
|
SnackBarDecorator,
|
||||||
],
|
],
|
||||||
parameters: {
|
|
||||||
msw: graphqlMocks,
|
|
||||||
},
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default meta;
|
export default meta;
|
||||||
type Story = StoryObj<typeof RightDrawerTopBar>;
|
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();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user