admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

added stories RawLink, SocialLink, and ContactLink and deleted story … (#1957)

Browse Source 
* added stories RawLink, SocialLink, and ContactLink and deleted story for PrimaryLink

* add play function to link tests

---------

Co-authored-by: bosiraphael <raphael.bosi@gmail.com>
This commit is contained in:
rsato10
2023-10-10 05:58:07 -07:00
committed by GitHub
parent 612bd57d5b
commit 5dddd77eb3
6 changed files with 144 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
front/src/modules/ui/link/components/PrimaryLink.tsx
View File

@ -1,29 +0,0 @@
import React from 'react';
import { Link as ReactLink } from 'react-router-dom';
import styled from '@emotion/styled';
type PrimaryLinkProps = {
children: React.ReactNode;
href: string;
onClick?: () => void;
fullWidth?: boolean;
};
const StyledClickable = styled.div`
display: flex;
a {
color: ${({ theme }) => theme.font.color.tertiary};
font-size: ${({ theme }) => theme.font.size.sm};
overflow: hidden;
text-decoration: underline;
text-overflow: ellipsis;
}
`;
export const PrimaryLink = ({ href, children, onClick }: PrimaryLinkProps) => (
<StyledClickable>
<ReactLink onClick={onClick} to={href}>
{children}
</ReactLink>
</StyledClickable>
);

36
front/src/modules/ui/link/components/__stories__/ContactLink.stories.tsx Normal file
View File

@ -0,0 +1,36 @@
import { jest } from '@storybook/jest';
import { Meta, StoryObj } from '@storybook/react';
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
import { ContactLink } from '../ContactLink';
const meta: Meta<typeof ContactLink> = {
title: 'UI/Links/ContactLink',
component: ContactLink,
decorators: [ComponentWithRouterDecorator],
args: {
className: 'ContactLink',
href: '/test',
children: 'Contact Link',
},
};
export default meta;
type Story = StoryObj<typeof ContactLink>;
const clickJestFn = jest.fn();
export const Email: Story = {
args: {
href: `mailto:${'email@example.com'}`,
children: 'email@example.com',
onClick: clickJestFn,
},
};
export const Phone: Story = {
args: {
children: '11111111111',
onClick: clickJestFn,
},
};

39
front/src/modules/ui/link/components/__stories__/PrimaryLink.stories.tsx
View File

@ -1,39 +0,0 @@
import { MemoryRouter } from 'react-router-dom';
import { expect, jest } from '@storybook/jest';
import { Meta, StoryObj } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
import { PrimaryLink } from '../PrimaryLink';
const meta: Meta<typeof PrimaryLink> = {
title: 'UI/Links/PrimaryLink',
component: PrimaryLink,
decorators: [
(Story) => (
<MemoryRouter>
<Story />
</MemoryRouter>
),
ComponentDecorator,
],
};
export default meta;
type Story = StoryObj<typeof PrimaryLink>;
const clickJestFn = jest.fn();
export const Default: Story = {
args: { href: '/test', onClick: clickJestFn, children: 'A primary link' },
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
expect(clickJestFn).toHaveBeenCalledTimes(0);
const link = canvas.getByRole('link');
await userEvent.click(link);
expect(clickJestFn).toHaveBeenCalledTimes(1);
},
};

38
front/src/modules/ui/link/components/__stories__/RawLink.stories.tsx Normal file
View File

@ -0,0 +1,38 @@
import { expect } from '@storybook/jest';
import { jest } from '@storybook/jest';
import { Meta, StoryObj } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
import { RawLink } from '../RawLink';
const meta: Meta<typeof RawLink> = {
title: 'UI/Links/RawLink',
component: RawLink,
decorators: [ComponentWithRouterDecorator],
args: {
className: 'RawLink',
href: '/test',
children: 'Raw Link',
},
};
export default meta;
type Story = StoryObj<typeof RawLink>;
const clickJestFn = jest.fn();
export const Default: Story = {
args: {
onClick: clickJestFn,
},
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await expect(clickJestFn).toHaveBeenCalledTimes(0);
const link = canvas.getByRole('link');
await userEvent.click(link);
await expect(clickJestFn).toHaveBeenCalledTimes(1);
},
};

19
front/src/modules/ui/link/components/__stories__/RoundedLink.stories.tsx
View File

@ -1,4 +1,7 @@
import { expect } from '@storybook/jest';
import { jest } from '@storybook/jest';
import { Meta, StoryObj } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
@ -16,5 +19,19 @@ const meta: Meta<typeof RoundedLink> = {
export default meta;
type Story = StoryObj<typeof RoundedLink>;
const clickJestFn = jest.fn();
export const Default: Story = {};
export const Default: Story = {
args: {
onClick: clickJestFn,
},
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await expect(clickJestFn).toHaveBeenCalledTimes(0);
const link = canvas.getByRole('link');
await userEvent.click(link);
await expect(clickJestFn).toHaveBeenCalledTimes(1);
},
};

52
front/src/modules/ui/link/components/__stories__/SocialLink.stories.tsx Normal file
View File

@ -0,0 +1,52 @@
import { expect } from '@storybook/jest';
import { jest } from '@storybook/jest';
import { Meta, StoryObj } from '@storybook/react';
import { userEvent, within } from '@storybook/testing-library';
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
import { LinkType, SocialLink } from '../SocialLink';
const meta: Meta<typeof SocialLink> = {
title: 'UI/Links/SocialLink',
component: SocialLink,
decorators: [ComponentWithRouterDecorator],
args: {
href: '/test',
children: 'Social Link',
},
};
export default meta;
type Story = StoryObj<typeof SocialLink>;
const clickJestFn = jest.fn();
const linkedin: LinkType = LinkType.LinkedIn;
const twitter: LinkType = LinkType.Twitter;
export const LinkedIn: Story = {
args: {
href: '/LinkedIn',
children: 'LinkedIn',
onClick: clickJestFn,
type: linkedin,
},
};
export const Twitter: Story = {
args: {
href: '/Twitter',
children: 'Twitter',
onClick: clickJestFn,
type: twitter,
},
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
await expect(clickJestFn).toHaveBeenCalledTimes(0);
const link = canvas.getByRole('link');
await userEvent.click(link);
await expect(clickJestFn).toHaveBeenCalledTimes(1);
},
};