From 8b39e53e49d2520e2d5c864d81ec43181d313542 Mon Sep 17 00:00:00 2001 From: bosiraphael <71827178+bosiraphael@users.noreply.github.com> Date: Mon, 26 Feb 2024 21:54:29 +0100 Subject: [PATCH] 4026 create storybook tests for blocklist components (#4185) * Add SettingsAccountsEmailsBlocklistInput story * Add SettingsAccountsEmailsBlocklistSection story * Add SettingsAccountsEmailsBlocklistTable story * Add SettingsAccountsEmailsBlocklistTableRow story * wip * add play * add play * add delete from blocklist test * wip * wip * done --- ...gsAccountsEmailsBlocklistInput.stories.tsx | 58 ++++++++++++++++ ...AccountsEmailsBlocklistSection.stories.tsx | 17 +++++ ...gsAccountsEmailsBlocklistTable.stories.tsx | 67 +++++++++++++++++++ ...ccountsEmailsBlocklistTableRow.stories.tsx | 67 +++++++++++++++++++ .../components/__stories__/mockedBlocklist.ts | 28 ++++++++ 5 files changed, 237 insertions(+) create mode 100644 packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsEmailsBlocklistInput.stories.tsx create mode 100644 packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsEmailsBlocklistSection.stories.tsx create mode 100644 packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsEmailsBlocklistTable.stories.tsx create mode 100644 packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsEmailsBlocklistTableRow.stories.tsx create mode 100644 packages/twenty-front/src/modules/settings/accounts/components/__stories__/mockedBlocklist.ts diff --git a/packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsEmailsBlocklistInput.stories.tsx b/packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsEmailsBlocklistInput.stories.tsx new file mode 100644 index 000000000..7a7a85aa3 --- /dev/null +++ b/packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsEmailsBlocklistInput.stories.tsx @@ -0,0 +1,58 @@ +import { Decorator, Meta, StoryObj } from '@storybook/react'; +import { expect, fn, userEvent, within } from '@storybook/test'; + +import { SettingsAccountsEmailsBlocklistInput } from '@/settings/accounts/components/SettingsAccountsEmailsBlocklistInput'; +import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; + +const updateBlockedEmailListJestFn = fn(); + +const ClearMocksDecorator: Decorator = (Story, context) => { + if (context.parameters.clearMocks) { + updateBlockedEmailListJestFn.mockClear(); + } + return ; +}; + +const meta: Meta = { + title: + 'Modules/Settings/Accounts/Blocklist/SettingsAccountsEmailsBlocklistInput', + component: SettingsAccountsEmailsBlocklistInput, + decorators: [ComponentDecorator, ClearMocksDecorator], + args: { + updateBlockedEmailList: updateBlockedEmailListJestFn, + }, + argTypes: { + updateBlockedEmailList: { control: false }, + }, + parameters: { + clearMocks: true, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; + +export const AddToBlocklist: Story = { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + + expect(updateBlockedEmailListJestFn).toHaveBeenCalledTimes(0); + + const addToBlocklistInput = canvas.getByRole('textbox'); + + await userEvent.type(addToBlocklistInput, 'test@twenty.com'); + + const addToBlocklistButton = canvas.getByRole('button', { + name: /add to blocklist/i, + }); + + await userEvent.click(addToBlocklistButton); + + expect(updateBlockedEmailListJestFn).toHaveBeenCalledTimes(1); + expect(updateBlockedEmailListJestFn).toHaveBeenCalledWith( + 'test@twenty.com', + ); + }, +}; diff --git a/packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsEmailsBlocklistSection.stories.tsx b/packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsEmailsBlocklistSection.stories.tsx new file mode 100644 index 000000000..e92ad0334 --- /dev/null +++ b/packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsEmailsBlocklistSection.stories.tsx @@ -0,0 +1,17 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { SettingsAccountsEmailsBlocklistInput } from '@/settings/accounts/components/SettingsAccountsEmailsBlocklistInput'; +import { SettingsAccountsEmailsBlocklistSection } from '@/settings/accounts/components/SettingsAccountsEmailsBlocklistSection'; +import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; + +const meta: Meta = { + title: + 'Modules/Settings/Accounts/Blocklist/SettingsAccountsEmailsBlocklistSection', + component: SettingsAccountsEmailsBlocklistInput, + decorators: [ComponentDecorator], +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = {}; diff --git a/packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsEmailsBlocklistTable.stories.tsx b/packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsEmailsBlocklistTable.stories.tsx new file mode 100644 index 000000000..1d3f718d3 --- /dev/null +++ b/packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsEmailsBlocklistTable.stories.tsx @@ -0,0 +1,67 @@ +import { Decorator, Meta, StoryObj } from '@storybook/react'; +import { expect, fn, userEvent, within } from '@storybook/test'; + +import { mockedBlocklist } from '@/settings/accounts/components/__stories__/mockedBlocklist'; +import { SettingsAccountsEmailsBlocklistTable } from '@/settings/accounts/components/SettingsAccountsEmailsBlocklistTable'; +import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; +import { formatToHumanReadableDate } from '~/utils'; + +const handleBlockedEmailRemoveJestFn = fn(); + +const ClearMocksDecorator: Decorator = (Story, context) => { + if (context.parameters.clearMocks) { + handleBlockedEmailRemoveJestFn.mockClear(); + } + return ; +}; + +const meta: Meta = { + title: + 'Modules/Settings/Accounts/Blocklist/SettingsAccountsEmailsBlocklistTable', + component: SettingsAccountsEmailsBlocklistTable, + decorators: [ComponentDecorator, ClearMocksDecorator], + args: { + blocklist: mockedBlocklist, + handleBlockedEmailRemove: handleBlockedEmailRemoveJestFn, + }, + argTypes: { + blocklist: { control: false }, + handleBlockedEmailRemove: { control: false }, + }, + parameters: { + clearMocks: true, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + + for (const blocklistItem of mockedBlocklist) { + expect(await canvas.findByText(blocklistItem.handle)).toBeInTheDocument(); + expect( + await canvas.findByText( + formatToHumanReadableDate(blocklistItem.createdAt), + ), + ).toBeInTheDocument(); + } + }, +}; + +export const DeleteFirstElementFromBlocklist: Story = { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + + expect(handleBlockedEmailRemoveJestFn).toHaveBeenCalledTimes(0); + + const removeFromBlocklistButton = canvas.getAllByRole('button')[0]; + + await userEvent.click(removeFromBlocklistButton); + + expect(handleBlockedEmailRemoveJestFn).toHaveBeenCalledTimes(1); + expect(handleBlockedEmailRemoveJestFn).toHaveBeenCalledWith('1'); + }, +}; diff --git a/packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsEmailsBlocklistTableRow.stories.tsx b/packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsEmailsBlocklistTableRow.stories.tsx new file mode 100644 index 000000000..5b8d42b18 --- /dev/null +++ b/packages/twenty-front/src/modules/settings/accounts/components/__stories__/SettingsAccountsEmailsBlocklistTableRow.stories.tsx @@ -0,0 +1,67 @@ +import { Decorator, Meta, StoryObj } from '@storybook/react'; +import { expect, fn, userEvent, within } from '@storybook/test'; + +import { mockedBlocklist } from '@/settings/accounts/components/__stories__/mockedBlocklist'; +import { SettingsAccountsEmailsBlocklistTableRow } from '@/settings/accounts/components/SettingsAccountsEmailsBlocklistTableRow'; +import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator'; +import { formatToHumanReadableDate } from '~/utils'; + +const onRemoveJestFn = fn(); + +const ClearMocksDecorator: Decorator = (Story, context) => { + if (context.parameters.clearMocks) { + onRemoveJestFn.mockClear(); + } + return ; +}; + +const meta: Meta = { + title: + 'Modules/Settings/Accounts/Blocklist/SettingsAccountsEmailsBlocklistTableRow', + component: SettingsAccountsEmailsBlocklistTableRow, + decorators: [ComponentDecorator, ClearMocksDecorator], + args: { + blocklistItem: mockedBlocklist[0], + onRemove: onRemoveJestFn, + }, + argTypes: { + blocklistItem: { control: false }, + onRemove: { control: false }, + }, + parameters: { + clearMocks: true, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + + expect( + await canvas.findByText(mockedBlocklist[0].handle), + ).toBeInTheDocument(); + expect( + await canvas.findByText( + formatToHumanReadableDate(mockedBlocklist[0].createdAt), + ), + ).toBeInTheDocument(); + }, +}; + +export const DeleteFirstElementFromBlocklist: Story = { + play: async ({ canvasElement }) => { + const canvas = within(canvasElement); + + expect(onRemoveJestFn).toHaveBeenCalledTimes(0); + + const removeFromBlocklistButton = canvas.getAllByRole('button')[0]; + + await userEvent.click(removeFromBlocklistButton); + + expect(onRemoveJestFn).toHaveBeenCalledTimes(1); + expect(onRemoveJestFn).toHaveBeenCalledWith('1'); + }, +}; diff --git a/packages/twenty-front/src/modules/settings/accounts/components/__stories__/mockedBlocklist.ts b/packages/twenty-front/src/modules/settings/accounts/components/__stories__/mockedBlocklist.ts new file mode 100644 index 000000000..b6aef1c48 --- /dev/null +++ b/packages/twenty-front/src/modules/settings/accounts/components/__stories__/mockedBlocklist.ts @@ -0,0 +1,28 @@ +import { DateTime } from 'luxon'; + +export const mockedBlocklist = [ + { + id: '1', + handle: 'test1@twenty.com', + workspaceMemberId: '1', + createdAt: DateTime.now().minus({ hours: 2 }).toISO() ?? '', + }, + { + id: '2', + handle: 'test2@twenty.com', + workspaceMemberId: '1', + createdAt: DateTime.now().minus({ days: 2 }).toISO() ?? '', + }, + { + id: '3', + handle: 'test3@twenty.com', + workspaceMemberId: '1', + createdAt: DateTime.now().minus({ days: 3 }).toISO() ?? '', + }, + { + id: '4', + handle: '@twenty.com', + workspaceMemberId: '1', + createdAt: DateTime.now().minus({ days: 4 }).toISO() ?? '', + }, +];