Re-write test with storybook testing library (#150)
* Re-write test with storybook testing library * Update CI
This commit is contained in:
Charles Bochet
@@ -1,17 +0,0 @@
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import RequireAuth from '../RequireAuth';
|
||||
|
||||
const component = {
|
||||
title: 'RequireAuth',
|
||||
component: RequireAuth,
|
||||
};
|
||||
|
||||
export default component;
|
||||
|
||||
export const RequireAuthWithHelloChild = () => (
|
||||
<MemoryRouter>
|
||||
<RequireAuth>
|
||||
<div>Hello</div>
|
||||
</RequireAuth>
|
||||
</MemoryRouter>
|
||||
);
|
||||
@@ -1,9 +0,0 @@
|
||||
import { render } from '@testing-library/react';
|
||||
|
||||
import { RequireAuthWithHelloChild } from '../__stories__/RequireAuth.stories';
|
||||
|
||||
it('Checks the Require Auth renders', () => {
|
||||
const { getAllByText } = render(<RequireAuthWithHelloChild />);
|
||||
|
||||
expect(getAllByText('Hello')).toBeTruthy();
|
||||
});
|
||||
@@ -1,26 +0,0 @@
|
||||
import CompanyChip from '../CompanyChip';
|
||||
import { ThemeProvider } from '@emotion/react';
|
||||
import { lightTheme } from '../../../layout/styles/themes';
|
||||
|
||||
const component = {
|
||||
title: 'CompanyChip',
|
||||
component: CompanyChip,
|
||||
};
|
||||
|
||||
export default component;
|
||||
|
||||
export const RegularCompanyChip = () => {
|
||||
return (
|
||||
<ThemeProvider theme={lightTheme}>
|
||||
<CompanyChip name="selected-company-1" />
|
||||
</ThemeProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export const RegularCompanyChipWithImage = () => {
|
||||
return (
|
||||
<ThemeProvider theme={lightTheme}>
|
||||
<CompanyChip name="selected-company-1" picture="coucou.fr" />
|
||||
</ThemeProvider>
|
||||
);
|
||||
};
|
||||
@@ -1,26 +0,0 @@
|
||||
import { ThemeProvider } from '@emotion/react';
|
||||
import { lightTheme } from '../../../layout/styles/themes';
|
||||
import PersonChip from '../PersonChip';
|
||||
|
||||
const component = {
|
||||
title: 'PersonChip',
|
||||
component: PersonChip,
|
||||
};
|
||||
|
||||
export default component;
|
||||
|
||||
export const RegularPersonChip = () => {
|
||||
return (
|
||||
<ThemeProvider theme={lightTheme}>
|
||||
<PersonChip name="selected-company-1" />
|
||||
</ThemeProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export const RegularPersonChipWithImage = () => {
|
||||
return (
|
||||
<ThemeProvider theme={lightTheme}>
|
||||
<PersonChip name="selected-company-1" picture="coucou.fr" />
|
||||
</ThemeProvider>
|
||||
);
|
||||
};
|
||||
@@ -1,18 +0,0 @@
|
||||
import { render } from '@testing-library/react';
|
||||
|
||||
import {
|
||||
RegularCompanyChip,
|
||||
RegularCompanyChipWithImage,
|
||||
} from '../__stories__/CompanyChip.stories';
|
||||
|
||||
it('Checks the CompanyChip renders', () => {
|
||||
const { getByText } = render(<RegularCompanyChip />);
|
||||
|
||||
expect(getByText('selected-company-1')).toBeDefined();
|
||||
});
|
||||
|
||||
it('Checks the CompanyChip img renders', () => {
|
||||
const { getByTestId } = render(<RegularCompanyChipWithImage />);
|
||||
|
||||
expect(getByTestId('company-chip-image')).toHaveAttribute('src', 'coucou.fr');
|
||||
});
|
||||
@@ -1,22 +0,0 @@
|
||||
import { render } from '@testing-library/react';
|
||||
|
||||
import {
|
||||
RegularPersonChip,
|
||||
RegularPersonChipWithImage,
|
||||
} from '../__stories__/PersonChip.stories';
|
||||
|
||||
it('Checks the PersonChip renders', () => {
|
||||
const { getByText, getByTestId } = render(<RegularPersonChip />);
|
||||
|
||||
expect(getByText('selected-company-1')).toBeDefined();
|
||||
expect(getByTestId('person-chip-image')).toHaveAttribute(
|
||||
'src',
|
||||
'person-placeholder.png',
|
||||
);
|
||||
});
|
||||
|
||||
it('Checks the PersonChip img renders', () => {
|
||||
const { getByTestId } = render(<RegularPersonChipWithImage />);
|
||||
|
||||
expect(getByTestId('person-chip-image')).toHaveAttribute('src', 'coucou.fr');
|
||||
});
|
||||
@@ -1,33 +0,0 @@
|
||||
import EditableChip, { EditableChipProps } from '../EditableChip';
|
||||
import { ThemeProvider } from '@emotion/react';
|
||||
import { lightTheme } from '../../../layout/styles/themes';
|
||||
import { StoryFn } from '@storybook/react';
|
||||
import CompanyChip from '../../chips/CompanyChip';
|
||||
|
||||
const component = {
|
||||
title: 'EditableChip',
|
||||
component: EditableChip,
|
||||
};
|
||||
|
||||
export default component;
|
||||
|
||||
const Template: StoryFn<typeof EditableChip> = (args: EditableChipProps) => {
|
||||
return (
|
||||
<ThemeProvider theme={lightTheme}>
|
||||
<div data-testid="content-editable-parent">
|
||||
<EditableChip {...args} />
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export const EditableChipStory = Template.bind({});
|
||||
EditableChipStory.args = {
|
||||
ChipComponent: CompanyChip,
|
||||
placeholder: 'Test',
|
||||
value: 'Test',
|
||||
picture: 'https://picsum.photos/200',
|
||||
changeHandler: () => {
|
||||
console.log('changed');
|
||||
},
|
||||
};
|
||||
@@ -1,29 +0,0 @@
|
||||
import EditableDate, { EditableDateProps } from '../EditableDate';
|
||||
import { ThemeProvider } from '@emotion/react';
|
||||
import { lightTheme } from '../../../layout/styles/themes';
|
||||
import { StoryFn } from '@storybook/react';
|
||||
|
||||
const component = {
|
||||
title: 'EditableDate',
|
||||
component: EditableDate,
|
||||
};
|
||||
|
||||
export default component;
|
||||
|
||||
const Template: StoryFn<typeof EditableDate> = (args: EditableDateProps) => {
|
||||
return (
|
||||
<ThemeProvider theme={lightTheme}>
|
||||
<div data-testid="content-editable-parent">
|
||||
<EditableDate {...args} />
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export const EditableDateStory = Template.bind({});
|
||||
EditableDateStory.args = {
|
||||
value: new Date(),
|
||||
changeHandler: () => {
|
||||
console.log('changed');
|
||||
},
|
||||
};
|
||||
@@ -1,39 +0,0 @@
|
||||
import { EditablePeopleFullName } from '../../people/EditablePeopleFullName';
|
||||
import { ThemeProvider } from '@emotion/react';
|
||||
import { lightTheme } from '../../../layout/styles/themes';
|
||||
import { StoryFn } from '@storybook/react';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
|
||||
const component = {
|
||||
title: 'EditableFullName',
|
||||
component: EditablePeopleFullName,
|
||||
};
|
||||
|
||||
type OwnProps = {
|
||||
firstname: string;
|
||||
lastname: string;
|
||||
onChange: (firstname: string, lastname: string) => void;
|
||||
};
|
||||
|
||||
export default component;
|
||||
|
||||
const Template: StoryFn<typeof EditablePeopleFullName> = (args: OwnProps) => {
|
||||
return (
|
||||
<MemoryRouter>
|
||||
<ThemeProvider theme={lightTheme}>
|
||||
<div data-testid="content-editable-parent">
|
||||
<EditablePeopleFullName {...args} />
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
</MemoryRouter>
|
||||
);
|
||||
};
|
||||
|
||||
export const EditableFullNameStory = Template.bind({});
|
||||
EditableFullNameStory.args = {
|
||||
firstname: 'John',
|
||||
lastname: 'Doe',
|
||||
onChange: () => {
|
||||
console.log('validated');
|
||||
},
|
||||
};
|
||||
@@ -1,38 +0,0 @@
|
||||
import EditablePhone from '../EditablePhone';
|
||||
import { ThemeProvider } from '@emotion/react';
|
||||
import { lightTheme } from '../../../layout/styles/themes';
|
||||
import { StoryFn } from '@storybook/react';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
|
||||
const component = {
|
||||
title: 'EditablePhone',
|
||||
component: EditablePhone,
|
||||
};
|
||||
|
||||
type OwnProps = {
|
||||
value: string;
|
||||
changeHandler: (updated: string) => void;
|
||||
};
|
||||
|
||||
export default component;
|
||||
|
||||
const Template: StoryFn<typeof EditablePhone> = (args: OwnProps) => {
|
||||
return (
|
||||
<MemoryRouter>
|
||||
<ThemeProvider theme={lightTheme}>
|
||||
<div data-testid="content-editable-parent">
|
||||
<EditablePhone {...args} />
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
</MemoryRouter>
|
||||
);
|
||||
};
|
||||
|
||||
export const EditablePhoneStory = Template.bind({});
|
||||
EditablePhoneStory.args = {
|
||||
placeholder: 'Test placeholder',
|
||||
value: '+33657646543',
|
||||
changeHandler: () => {
|
||||
console.log('changed');
|
||||
},
|
||||
};
|
||||
@@ -1,103 +0,0 @@
|
||||
import EditableRelation, { EditableRelationProps } from '../EditableRelation';
|
||||
import { ThemeProvider } from '@emotion/react';
|
||||
import { lightTheme } from '../../../layout/styles/themes';
|
||||
import { StoryFn } from '@storybook/react';
|
||||
import CompanyChip, { CompanyChipPropsType } from '../../chips/CompanyChip';
|
||||
import {
|
||||
Company,
|
||||
mapToCompany,
|
||||
} from '../../../interfaces/entities/company.interface';
|
||||
import { MockedProvider } from '@apollo/client/testing';
|
||||
import { SEARCH_COMPANY_QUERY } from '../../../services/api/search/search';
|
||||
import styled from '@emotion/styled';
|
||||
import { SearchConfigType } from '../../../interfaces/search/interface';
|
||||
import { QueryMode } from '../../../generated/graphql';
|
||||
|
||||
const component = {
|
||||
title: 'editable-cell/EditableRelation',
|
||||
component: EditableRelation,
|
||||
};
|
||||
|
||||
export default component;
|
||||
|
||||
const StyledParent = styled.div`
|
||||
height: 400px;
|
||||
`;
|
||||
|
||||
const mocks = [
|
||||
{
|
||||
request: {
|
||||
query: SEARCH_COMPANY_QUERY,
|
||||
variables: {
|
||||
where: undefined,
|
||||
},
|
||||
},
|
||||
result: {
|
||||
data: {
|
||||
companies: [],
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
request: {
|
||||
query: SEARCH_COMPANY_QUERY,
|
||||
variables: {
|
||||
where: { name: { contains: '%%', mode: QueryMode.Insensitive } },
|
||||
limit: 5,
|
||||
},
|
||||
},
|
||||
result: {
|
||||
data: {
|
||||
searchResults: [
|
||||
{ id: 'abnb', name: 'Airbnb', domain_name: 'abnb.com' },
|
||||
],
|
||||
},
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const Template: StoryFn<
|
||||
typeof EditableRelation<Company, CompanyChipPropsType>
|
||||
> = (args: EditableRelationProps<Company, CompanyChipPropsType>) => {
|
||||
return (
|
||||
<MockedProvider mocks={mocks}>
|
||||
<ThemeProvider theme={lightTheme}>
|
||||
<StyledParent data-testid="content-editable-parent">
|
||||
<EditableRelation<Company, CompanyChipPropsType> {...args} />
|
||||
</StyledParent>
|
||||
</ThemeProvider>
|
||||
</MockedProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export const EditableRelationStory = Template.bind({});
|
||||
EditableRelationStory.args = {
|
||||
relation: {
|
||||
__typename: 'companies',
|
||||
id: '123',
|
||||
name: 'Heroku',
|
||||
domain_name: 'heroku.com',
|
||||
} as Company,
|
||||
ChipComponent: CompanyChip,
|
||||
chipComponentPropsMapper: (company: Company): CompanyChipPropsType => {
|
||||
return {
|
||||
name: company.name || '',
|
||||
picture: company.domainName
|
||||
? `https://www.google.com/s2/favicons?domain=${company.domainName}&sz=256`
|
||||
: undefined,
|
||||
};
|
||||
},
|
||||
onChange: (relation: Company) => {
|
||||
console.log('changed', relation);
|
||||
},
|
||||
searchConfig: {
|
||||
query: SEARCH_COMPANY_QUERY,
|
||||
template: (searchInput: string) => ({
|
||||
name: { contains: `%${searchInput}%`, mode: QueryMode.Insensitive },
|
||||
}),
|
||||
resultMapper: (company) => ({
|
||||
render: (company) => company.name,
|
||||
value: mapToCompany(company),
|
||||
}),
|
||||
} satisfies SearchConfigType<Company>,
|
||||
};
|
||||
@@ -1,35 +0,0 @@
|
||||
import EditableText from '../EditableText';
|
||||
import { ThemeProvider } from '@emotion/react';
|
||||
import { lightTheme } from '../../../layout/styles/themes';
|
||||
import { StoryFn } from '@storybook/react';
|
||||
|
||||
const component = {
|
||||
title: 'EditableText',
|
||||
component: EditableText,
|
||||
};
|
||||
|
||||
type OwnProps = {
|
||||
content: string;
|
||||
changeHandler: (updated: string) => void;
|
||||
};
|
||||
|
||||
export default component;
|
||||
|
||||
const Template: StoryFn<typeof EditableText> = (args: OwnProps) => {
|
||||
return (
|
||||
<ThemeProvider theme={lightTheme}>
|
||||
<div data-testid="content-editable-parent">
|
||||
<EditableText {...args} />
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export const EditableTextStory = Template.bind({});
|
||||
EditableTextStory.args = {
|
||||
placeholder: 'Test placeholder',
|
||||
content: 'Test string',
|
||||
changeHandler: () => {
|
||||
console.log('changed');
|
||||
},
|
||||
};
|
||||
@@ -1,34 +0,0 @@
|
||||
import { fireEvent, render } from '@testing-library/react';
|
||||
|
||||
import { EditableChipStory } from '../__stories__/EditableChip.stories';
|
||||
import CompanyChip from '../../chips/CompanyChip';
|
||||
|
||||
it('Checks the EditableChip editing event bubbles up', async () => {
|
||||
const func = jest.fn(() => null);
|
||||
const { getByTestId } = render(
|
||||
<EditableChipStory
|
||||
value="test"
|
||||
picture="http://"
|
||||
changeHandler={func}
|
||||
ChipComponent={CompanyChip}
|
||||
/>,
|
||||
);
|
||||
|
||||
const parent = getByTestId('content-editable-parent');
|
||||
|
||||
const wrapper = parent.querySelector('div');
|
||||
|
||||
if (!wrapper) {
|
||||
throw new Error('Editable input not found');
|
||||
}
|
||||
fireEvent.click(wrapper);
|
||||
|
||||
const editableInput = parent.querySelector('input');
|
||||
|
||||
if (!editableInput) {
|
||||
throw new Error('Editable input not found');
|
||||
}
|
||||
|
||||
fireEvent.change(editableInput, { target: { value: 'Test' } });
|
||||
expect(func).toBeCalledWith('Test');
|
||||
});
|
||||
@@ -1,36 +0,0 @@
|
||||
import { fireEvent, render, waitFor } from '@testing-library/react';
|
||||
|
||||
import { EditableDateStory } from '../__stories__/EditableDate.stories';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
|
||||
it('Checks the EditableDate editing event bubbles up', async () => {
|
||||
const changeHandler = jest.fn(() => null);
|
||||
const { getByTestId, getByText } = render(
|
||||
<EditableDateStory
|
||||
value={new Date('2021-03-03')}
|
||||
changeHandler={changeHandler}
|
||||
/>,
|
||||
);
|
||||
|
||||
const parent = getByTestId('content-editable-parent');
|
||||
|
||||
const wrapper = parent.querySelector('div');
|
||||
|
||||
if (!wrapper) {
|
||||
throw new Error('Cell Wrapper not found');
|
||||
}
|
||||
|
||||
act(() => {
|
||||
fireEvent.click(wrapper);
|
||||
const dateDisplay = parent.querySelector('div');
|
||||
if (!dateDisplay) {
|
||||
throw new Error('Editable input not found');
|
||||
}
|
||||
});
|
||||
waitFor(() => {
|
||||
expect(getByText('March 2021')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
fireEvent.click(getByText('5'));
|
||||
expect(changeHandler).toHaveBeenCalledWith(new Date('2021-03-05'));
|
||||
});
|
||||
@@ -1,37 +0,0 @@
|
||||
import { fireEvent, render } from '@testing-library/react';
|
||||
|
||||
import { EditableFullNameStory } from '../__stories__/EditableFullName.stories';
|
||||
|
||||
it('Checks the EditableFullName editing event bubbles up', async () => {
|
||||
const func = jest.fn(() => null);
|
||||
const { getByTestId } = render(
|
||||
<EditableFullNameStory firstname="Jone" lastname="Doe" onChange={func} />,
|
||||
);
|
||||
|
||||
const parent = getByTestId('content-editable-parent');
|
||||
|
||||
const wrapper = parent.querySelector('div');
|
||||
|
||||
if (!wrapper) {
|
||||
throw new Error('Editable input not found');
|
||||
}
|
||||
fireEvent.click(wrapper);
|
||||
|
||||
const firstnameInput = parent.querySelector('input:first-child');
|
||||
|
||||
if (!firstnameInput) {
|
||||
throw new Error('Editable input not found');
|
||||
}
|
||||
|
||||
fireEvent.change(firstnameInput, { target: { value: 'Jo' } });
|
||||
expect(func).toBeCalledWith('Jo', 'Doe');
|
||||
|
||||
const lastnameInput = parent.querySelector('input:last-child');
|
||||
|
||||
if (!lastnameInput) {
|
||||
throw new Error('Editable input not found');
|
||||
}
|
||||
|
||||
fireEvent.change(lastnameInput, { target: { value: 'Do' } });
|
||||
expect(func).toBeCalledWith('Jo', 'Do');
|
||||
});
|
||||
@@ -1,28 +0,0 @@
|
||||
import { fireEvent, render } from '@testing-library/react';
|
||||
|
||||
import { EditablePhoneStory } from '../__stories__/EditablePhone.stories';
|
||||
|
||||
it('Checks the EditablePhone editing event bubbles up', async () => {
|
||||
const func = jest.fn(() => null);
|
||||
const { getByTestId } = render(
|
||||
<EditablePhoneStory value="+33786405315" changeHandler={func} />,
|
||||
);
|
||||
|
||||
const parent = getByTestId('content-editable-parent');
|
||||
|
||||
const wrapper = parent.querySelector('div');
|
||||
|
||||
if (!wrapper) {
|
||||
throw new Error('Editable input not found');
|
||||
}
|
||||
fireEvent.click(wrapper);
|
||||
|
||||
const editableInput = parent.querySelector('input');
|
||||
|
||||
if (!editableInput) {
|
||||
throw new Error('Editable input not found');
|
||||
}
|
||||
|
||||
fireEvent.change(editableInput, { target: { value: '23' } });
|
||||
expect(func).toBeCalledWith('23');
|
||||
});
|
||||
@@ -1,64 +0,0 @@
|
||||
import { fireEvent, render, waitFor } from '@testing-library/react';
|
||||
|
||||
import { EditableRelationStory } from '../__stories__/EditableRelation.stories';
|
||||
import { CompanyChipPropsType } from '../../chips/CompanyChip';
|
||||
|
||||
import { EditableRelationProps } from '../EditableRelation';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
import { Company } from '../../../interfaces/company.interface';
|
||||
|
||||
it('Checks the EditableRelation editing event bubbles up', async () => {
|
||||
const func = jest.fn(() => null);
|
||||
const { getByTestId, getByText } = render(
|
||||
<EditableRelationStory
|
||||
{...(EditableRelationStory.args as EditableRelationProps<
|
||||
Company,
|
||||
CompanyChipPropsType
|
||||
>)}
|
||||
onChange={func}
|
||||
/>,
|
||||
);
|
||||
|
||||
const parent = getByTestId('content-editable-parent');
|
||||
|
||||
const wrapper = parent.querySelector('div');
|
||||
|
||||
await waitFor(() => {
|
||||
expect(getByText('Heroku')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
if (!wrapper) {
|
||||
throw new Error('Editable relation not found');
|
||||
}
|
||||
fireEvent.click(wrapper);
|
||||
|
||||
const input = parent.querySelector('input');
|
||||
if (!input) {
|
||||
throw new Error('Search input not found');
|
||||
}
|
||||
act(() => {
|
||||
fireEvent.change(input, { target: { value: 'Ai' } });
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
expect(getByText('Airbnb')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
act(() => {
|
||||
fireEvent.click(getByText('Airbnb'));
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
expect(func).toBeCalledWith({
|
||||
__typename: 'companies',
|
||||
accountOwner: undefined,
|
||||
address: undefined,
|
||||
domainName: 'abnb.com',
|
||||
employees: undefined,
|
||||
creationDate: undefined,
|
||||
id: 'abnb',
|
||||
name: 'Airbnb',
|
||||
pipes: [],
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,28 +0,0 @@
|
||||
import { fireEvent, render } from '@testing-library/react';
|
||||
|
||||
import { EditableTextStory } from '../__stories__/EditableText.stories';
|
||||
|
||||
it('Checks the EditableText editing event bubbles up', async () => {
|
||||
const func = jest.fn(() => null);
|
||||
const { getByTestId } = render(
|
||||
<EditableTextStory content="test" changeHandler={func} />,
|
||||
);
|
||||
|
||||
const parent = getByTestId('content-editable-parent');
|
||||
|
||||
const wrapper = parent.querySelector('div');
|
||||
|
||||
if (!wrapper) {
|
||||
throw new Error('Editable input not found');
|
||||
}
|
||||
fireEvent.click(wrapper);
|
||||
|
||||
const editableInput = parent.querySelector('input');
|
||||
|
||||
if (!editableInput) {
|
||||
throw new Error('Editable input not found');
|
||||
}
|
||||
|
||||
fireEvent.change(editableInput, { target: { value: '23' } });
|
||||
expect(func).toBeCalledWith('23');
|
||||
});
|
||||
@@ -1,18 +0,0 @@
|
||||
import Checkbox from '../Checkbox';
|
||||
import { ThemeProvider } from '@emotion/react';
|
||||
import { lightTheme } from '../../../layout/styles/themes';
|
||||
|
||||
const component = {
|
||||
title: 'Checkbox',
|
||||
component: Checkbox,
|
||||
};
|
||||
|
||||
export default component;
|
||||
|
||||
export const RegularCheckbox = () => {
|
||||
return (
|
||||
<ThemeProvider theme={lightTheme}>
|
||||
<Checkbox name="selected-company-1" id="selected-company--1" />
|
||||
</ThemeProvider>
|
||||
);
|
||||
};
|
||||
@@ -1,36 +0,0 @@
|
||||
import DatePicker, { DatePickerProps } from '../DatePicker';
|
||||
import { ThemeProvider } from '@emotion/react';
|
||||
import { lightTheme } from '../../../layout/styles/themes';
|
||||
import { StoryFn } from '@storybook/react';
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
const component = {
|
||||
title: 'DatePicker',
|
||||
component: DatePicker,
|
||||
};
|
||||
|
||||
export default component;
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
height: 300px;
|
||||
width: 200px;
|
||||
}`;
|
||||
|
||||
const Template: StoryFn<typeof DatePicker> = (args: DatePickerProps) => {
|
||||
return (
|
||||
<ThemeProvider theme={lightTheme}>
|
||||
<StyledContainer>
|
||||
<DatePicker {...args} />
|
||||
</StyledContainer>
|
||||
</ThemeProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export const DatePickerStory = Template.bind({});
|
||||
DatePickerStory.args = {
|
||||
isOpen: true,
|
||||
date: new Date(),
|
||||
onChangeHandler: () => {
|
||||
console.log('changed');
|
||||
},
|
||||
};
|
||||
@@ -1,12 +0,0 @@
|
||||
import { render } from '@testing-library/react';
|
||||
|
||||
import { RegularCheckbox } from '../__stories__/Checkbox.stories';
|
||||
|
||||
it('Checks the Checkbox renders', () => {
|
||||
const { getByTestId } = render(<RegularCheckbox />);
|
||||
|
||||
expect(getByTestId('input-checkbox')).toHaveAttribute(
|
||||
'name',
|
||||
'selected-company-1',
|
||||
);
|
||||
});
|
||||
@@ -1,27 +0,0 @@
|
||||
import { fireEvent, render } from '@testing-library/react';
|
||||
|
||||
import { DatePickerStory } from '../__stories__/Datepicker.stories';
|
||||
import { act } from 'react-dom/test-utils';
|
||||
|
||||
it('Checks the datepicker renders', async () => {
|
||||
const changeHandler = jest.fn();
|
||||
const { getByText } = render(
|
||||
<DatePickerStory
|
||||
date={new Date('2021-03-03')}
|
||||
onChangeHandler={changeHandler}
|
||||
/>,
|
||||
);
|
||||
|
||||
await act(async () => {
|
||||
expect(getByText('Mar 3, 2021')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
act(() => {
|
||||
fireEvent.click(getByText('Mar 3, 2021'));
|
||||
});
|
||||
expect(getByText('March 2021')).toBeInTheDocument();
|
||||
act(() => {
|
||||
fireEvent.click(getByText('5'));
|
||||
});
|
||||
expect(changeHandler).toHaveBeenCalledWith(new Date('2021-03-05'));
|
||||
});
|
||||
@@ -1,102 +0,0 @@
|
||||
import { ThemeProvider } from '@emotion/react';
|
||||
import { lightTheme } from '../../../../layout/styles/themes';
|
||||
import { FilterDropdownButton } from '../FilterDropdownButton';
|
||||
import styled from '@emotion/styled';
|
||||
import { useCallback, useState } from 'react';
|
||||
import { SEARCH_COMPANY_QUERY } from '../../../../services/api/search/search';
|
||||
import { MockedProvider } from '@apollo/client/testing';
|
||||
import { availableFilters } from '../../../../pages/people/people-filters';
|
||||
import { Person } from '../../../../interfaces/entities/person.interface';
|
||||
import {
|
||||
FilterableFieldsType,
|
||||
SelectedFilterType,
|
||||
} from '../../../../interfaces/filters/interface';
|
||||
import { mockCompaniesData } from '../../../../pages/companies/__tests__/__data__/mock-data';
|
||||
import { QueryMode } from '../../../../generated/graphql';
|
||||
|
||||
const component = {
|
||||
title: 'FilterDropdownButton',
|
||||
component: FilterDropdownButton,
|
||||
};
|
||||
|
||||
export default component;
|
||||
|
||||
type OwnProps<FilterProperties extends FilterableFieldsType> = {
|
||||
setFilter: (filters: SelectedFilterType<FilterProperties>) => void;
|
||||
};
|
||||
|
||||
const mocks = [
|
||||
{
|
||||
request: {
|
||||
query: SEARCH_COMPANY_QUERY,
|
||||
variables: {
|
||||
where: { name: { contains: '%%', mode: QueryMode.Insensitive } },
|
||||
limit: 5,
|
||||
},
|
||||
},
|
||||
result: {
|
||||
data: {
|
||||
searchResults: mockCompaniesData,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
request: {
|
||||
query: SEARCH_COMPANY_QUERY,
|
||||
variables: {
|
||||
where: { name: { contains: '%Airc%', mode: QueryMode.Insensitive } },
|
||||
limit: 5,
|
||||
},
|
||||
},
|
||||
result: {
|
||||
data: {
|
||||
searchResults: mockCompaniesData.filter(
|
||||
(company) => company.name === 'Aircall',
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const StyleDiv = styled.div`
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
`;
|
||||
|
||||
const InnerRegularFilterDropdownButton = ({
|
||||
setFilter: setFilters,
|
||||
}: OwnProps<Person>) => {
|
||||
const [, innerSetFilters] = useState<SelectedFilterType<Person>>();
|
||||
|
||||
const outerSetFilters = useCallback(
|
||||
(filter: SelectedFilterType<Person>) => {
|
||||
innerSetFilters(filter);
|
||||
setFilters(filter);
|
||||
},
|
||||
[setFilters],
|
||||
);
|
||||
return (
|
||||
<StyleDiv>
|
||||
<FilterDropdownButton<Person>
|
||||
availableFilters={availableFilters}
|
||||
isFilterSelected={true}
|
||||
onFilterSelect={outerSetFilters}
|
||||
onFilterRemove={(filterId) => {
|
||||
console.log(filterId);
|
||||
}}
|
||||
/>
|
||||
</StyleDiv>
|
||||
);
|
||||
};
|
||||
|
||||
export const RegularFilterDropdownButton = ({
|
||||
setFilter: setFilters,
|
||||
}: OwnProps<Person>) => {
|
||||
return (
|
||||
<MockedProvider mocks={mocks}>
|
||||
<ThemeProvider theme={lightTheme}>
|
||||
<InnerRegularFilterDropdownButton setFilter={setFilters} />
|
||||
</ThemeProvider>
|
||||
</MockedProvider>
|
||||
);
|
||||
};
|
||||
@@ -1,75 +0,0 @@
|
||||
import SortAndFilterBar from '../SortAndFilterBar';
|
||||
import { ThemeProvider } from '@emotion/react';
|
||||
import { lightTheme } from '../../../../layout/styles/themes';
|
||||
import { FaArrowDown } from 'react-icons/fa';
|
||||
import { Person } from '../../../../interfaces/entities/person.interface';
|
||||
import { SelectedFilterType } from '../../../../interfaces/filters/interface';
|
||||
|
||||
const component = {
|
||||
title: 'SortAndFilterBar',
|
||||
component: SortAndFilterBar,
|
||||
};
|
||||
|
||||
export default component;
|
||||
|
||||
type OwnProps = {
|
||||
removeFunction: () => void;
|
||||
cancelFunction: () => void;
|
||||
};
|
||||
|
||||
export const RegularSortAndFilterBar = ({
|
||||
removeFunction,
|
||||
cancelFunction,
|
||||
}: OwnProps) => {
|
||||
const personFilter = {
|
||||
label: 'People',
|
||||
operand: {
|
||||
label: 'Is',
|
||||
id: 'is',
|
||||
whereTemplate: (person: Person) => {
|
||||
return { email: { equals: person.email } };
|
||||
},
|
||||
},
|
||||
key: 'test_filter',
|
||||
icon: <FaArrowDown />,
|
||||
displayValue: 'john@doedoe.com',
|
||||
value: {
|
||||
__typename: 'people',
|
||||
id: 'test',
|
||||
email: 'john@doedoe.com',
|
||||
firstname: 'John',
|
||||
lastname: 'Doe',
|
||||
phone: '123456789',
|
||||
company: null,
|
||||
creationDate: new Date(),
|
||||
pipes: null,
|
||||
city: 'Paris',
|
||||
},
|
||||
} satisfies SelectedFilterType<Person, Person>;
|
||||
return (
|
||||
<ThemeProvider theme={lightTheme}>
|
||||
<SortAndFilterBar
|
||||
sorts={[
|
||||
{
|
||||
label: 'Test sort',
|
||||
order: 'asc',
|
||||
key: 'test_sort',
|
||||
icon: <FaArrowDown />,
|
||||
_type: 'default_sort',
|
||||
},
|
||||
{
|
||||
label: 'Test sort 2',
|
||||
order: 'desc',
|
||||
key: 'test_sort_2',
|
||||
icon: <FaArrowDown />,
|
||||
_type: 'default_sort',
|
||||
},
|
||||
]}
|
||||
onRemoveSort={removeFunction}
|
||||
onRemoveFilter={removeFunction}
|
||||
onCancelClick={cancelFunction}
|
||||
filters={[personFilter] as SelectedFilterType<Person>[]}
|
||||
/>
|
||||
</ThemeProvider>
|
||||
);
|
||||
};
|
||||
@@ -1,88 +0,0 @@
|
||||
import { ThemeProvider } from '@emotion/react';
|
||||
import { lightTheme } from '../../../../layout/styles/themes';
|
||||
import { SortDropdownButton } from '../SortDropdownButton';
|
||||
import styled from '@emotion/styled';
|
||||
import {
|
||||
SortOrder as Order_By,
|
||||
PersonOrderByWithRelationInput as People_Order_By,
|
||||
} from '../../../../generated/graphql';
|
||||
import { SortType } from '../../../../interfaces/sorts/interface';
|
||||
import {
|
||||
TbBuilding,
|
||||
TbCalendar,
|
||||
TbMail,
|
||||
TbMapPin,
|
||||
TbPhone,
|
||||
TbUser,
|
||||
} from 'react-icons/tb';
|
||||
|
||||
const component = {
|
||||
title: 'SortDropdownButton',
|
||||
component: SortDropdownButton,
|
||||
};
|
||||
|
||||
export default component;
|
||||
|
||||
type OwnProps = {
|
||||
setSorts: () => void;
|
||||
};
|
||||
|
||||
const availableSorts = [
|
||||
{
|
||||
key: 'fullname',
|
||||
label: 'People',
|
||||
icon: <TbUser size={16} />,
|
||||
_type: 'custom_sort',
|
||||
orderByTemplates: [() => ({ email: Order_By.Asc })],
|
||||
},
|
||||
{
|
||||
key: 'company_name',
|
||||
label: 'Company',
|
||||
icon: <TbBuilding size={16} />,
|
||||
_type: 'custom_sort',
|
||||
orderByTemplates: [() => ({ email: Order_By.Asc })],
|
||||
},
|
||||
{
|
||||
key: 'email',
|
||||
label: 'Email',
|
||||
icon: <TbMail size={16} />,
|
||||
_type: 'default_sort',
|
||||
},
|
||||
{
|
||||
key: 'phone',
|
||||
label: 'Phone',
|
||||
icon: <TbPhone size={16} />,
|
||||
_type: 'default_sort',
|
||||
},
|
||||
{
|
||||
key: 'createdAt',
|
||||
label: 'Created at',
|
||||
icon: <TbCalendar size={16} />,
|
||||
_type: 'default_sort',
|
||||
},
|
||||
{
|
||||
key: 'city',
|
||||
label: 'City',
|
||||
icon: <TbMapPin size={16} />,
|
||||
_type: 'default_sort',
|
||||
},
|
||||
] satisfies SortType<People_Order_By>[];
|
||||
|
||||
const StyleDiv = styled.div`
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
`;
|
||||
|
||||
export const RegularSortDropdownButton = ({ setSorts }: OwnProps) => {
|
||||
return (
|
||||
<ThemeProvider theme={lightTheme}>
|
||||
<StyleDiv>
|
||||
<SortDropdownButton<People_Order_By>
|
||||
isSortSelected={true}
|
||||
availableSorts={availableSorts}
|
||||
onSortSelect={setSorts}
|
||||
/>
|
||||
</StyleDiv>
|
||||
</ThemeProvider>
|
||||
);
|
||||
};
|
||||
@@ -1,43 +0,0 @@
|
||||
import SortOrFilterChip from '../SortOrFilterChip';
|
||||
import { ThemeProvider } from '@emotion/react';
|
||||
import { lightTheme } from '../../../../layout/styles/themes';
|
||||
import { FaArrowDown } from 'react-icons/fa';
|
||||
import { TbUser } from 'react-icons/tb';
|
||||
|
||||
const component = {
|
||||
title: 'SortOrFilterChip',
|
||||
component: SortOrFilterChip,
|
||||
};
|
||||
|
||||
export default component;
|
||||
|
||||
type OwnProps = {
|
||||
removeFunction: () => void;
|
||||
};
|
||||
|
||||
export const RegularFilterChip = ({ removeFunction }: OwnProps) => {
|
||||
return (
|
||||
<ThemeProvider theme={lightTheme}>
|
||||
<SortOrFilterChip
|
||||
id="test_sort"
|
||||
icon={<TbUser size={16} />}
|
||||
labelKey="Account owner"
|
||||
labelValue="is Charles"
|
||||
onRemove={removeFunction}
|
||||
/>
|
||||
</ThemeProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export const RegularSortChip = ({ removeFunction }: OwnProps) => {
|
||||
return (
|
||||
<ThemeProvider theme={lightTheme}>
|
||||
<SortOrFilterChip
|
||||
id="test_sort"
|
||||
icon={<FaArrowDown />}
|
||||
labelValue="Created at"
|
||||
onRemove={removeFunction}
|
||||
/>
|
||||
</ThemeProvider>
|
||||
);
|
||||
};
|
||||
@@ -1,51 +0,0 @@
|
||||
import TableHeader from '../TableHeader';
|
||||
import { ThemeProvider } from '@emotion/react';
|
||||
import { lightTheme } from '../../../../layout/styles/themes';
|
||||
import { SortType } from '../../../../interfaces/sorts/interface';
|
||||
import { MockedProvider } from '@apollo/client/testing';
|
||||
import { EMPTY_QUERY } from '../../../../services/api/search/search';
|
||||
import { TbBuilding, TbCalendar } from 'react-icons/tb';
|
||||
|
||||
const component = {
|
||||
title: 'TableHeader',
|
||||
component: TableHeader,
|
||||
};
|
||||
const mocks = [
|
||||
{
|
||||
request: {
|
||||
query: EMPTY_QUERY,
|
||||
variables: {
|
||||
where: undefined,
|
||||
},
|
||||
},
|
||||
result: {
|
||||
data: {
|
||||
searchResults: [],
|
||||
},
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
export default component;
|
||||
|
||||
export const RegularTableHeader = () => {
|
||||
const availableSorts: Array<SortType<Record<'created_at', 'asc'>>> = [
|
||||
{
|
||||
key: 'created_at',
|
||||
label: 'Created at',
|
||||
icon: <TbCalendar size={16} />,
|
||||
_type: 'default_sort',
|
||||
},
|
||||
];
|
||||
return (
|
||||
<MockedProvider mocks={mocks}>
|
||||
<ThemeProvider theme={lightTheme}>
|
||||
<TableHeader
|
||||
viewName="Test"
|
||||
viewIcon={<TbBuilding size={16} />}
|
||||
availableSorts={availableSorts}
|
||||
/>
|
||||
</ThemeProvider>
|
||||
</MockedProvider>
|
||||
);
|
||||
};
|
||||
@@ -1,117 +0,0 @@
|
||||
import { fireEvent, render, waitFor } from '@testing-library/react';
|
||||
import { RegularFilterDropdownButton } from '../__stories__/FilterDropdownButton.stories';
|
||||
|
||||
it('Checks the default top option is Is', async () => {
|
||||
const setFilters = jest.fn();
|
||||
const { getByText } = render(
|
||||
<RegularFilterDropdownButton setFilter={setFilters} />,
|
||||
);
|
||||
|
||||
const sortDropdownButton = getByText('Filter');
|
||||
fireEvent.click(sortDropdownButton);
|
||||
|
||||
const filterByCompany = getByText('Company');
|
||||
fireEvent.click(filterByCompany);
|
||||
|
||||
await waitFor(() => {
|
||||
const firstSearchResult = getByText('Airbnb');
|
||||
expect(firstSearchResult).toBeDefined();
|
||||
});
|
||||
|
||||
const filterByAirbnb = getByText('Airbnb');
|
||||
fireEvent.click(filterByAirbnb);
|
||||
|
||||
expect(setFilters).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
displayValue: 'Airbnb',
|
||||
key: 'company_name',
|
||||
label: 'Company',
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
it('Checks the selection of top option for Is Not', async () => {
|
||||
const setFilters = jest.fn();
|
||||
const { getByText } = render(
|
||||
<RegularFilterDropdownButton setFilter={setFilters} />,
|
||||
);
|
||||
|
||||
const sortDropdownButton = getByText('Filter');
|
||||
fireEvent.click(sortDropdownButton);
|
||||
|
||||
const filterByCompany = getByText('Company');
|
||||
fireEvent.click(filterByCompany);
|
||||
|
||||
const openOperandOptions = getByText('Is');
|
||||
fireEvent.click(openOperandOptions);
|
||||
|
||||
const selectOperand = getByText('Is not');
|
||||
fireEvent.click(selectOperand);
|
||||
|
||||
await waitFor(() => {
|
||||
const firstSearchResult = getByText('Airbnb');
|
||||
expect(firstSearchResult).toBeDefined();
|
||||
});
|
||||
|
||||
const filterByAirbnb = getByText('Airbnb');
|
||||
fireEvent.click(filterByAirbnb);
|
||||
|
||||
expect(setFilters).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
displayValue: 'Airbnb',
|
||||
key: 'company_name',
|
||||
label: 'Company',
|
||||
}),
|
||||
);
|
||||
const blueSortDropdownButton = getByText('Filter');
|
||||
await waitFor(() => {
|
||||
expect(blueSortDropdownButton).toHaveAttribute('aria-selected', 'true');
|
||||
});
|
||||
});
|
||||
|
||||
it('Calls the filters when typing a new name', async () => {
|
||||
const setFilters = jest.fn();
|
||||
const { getByText, getByPlaceholderText, queryByText, getByTestId } = render(
|
||||
<RegularFilterDropdownButton setFilter={setFilters} />,
|
||||
);
|
||||
|
||||
const sortDropdownButton = getByText('Filter');
|
||||
fireEvent.click(sortDropdownButton);
|
||||
|
||||
const filterByCompany = getByText('Company');
|
||||
fireEvent.click(filterByCompany);
|
||||
|
||||
const filterSearch = getByPlaceholderText('Company');
|
||||
fireEvent.click(filterSearch);
|
||||
|
||||
fireEvent.change(filterSearch, { target: { value: 'Airc' } });
|
||||
|
||||
await waitFor(() => {
|
||||
const loadingDiv = getByTestId('loading-search-results');
|
||||
expect(loadingDiv).toBeDefined();
|
||||
});
|
||||
|
||||
await waitFor(() => {
|
||||
const firstSearchResult = getByText('Aircall');
|
||||
expect(firstSearchResult).toBeDefined();
|
||||
|
||||
const airbnbResult = queryByText('Airbnb');
|
||||
expect(airbnbResult).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
const filterByAircall = getByText('Aircall');
|
||||
|
||||
fireEvent.click(filterByAircall);
|
||||
|
||||
expect(setFilters).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
key: 'company_name',
|
||||
displayValue: 'Aircall',
|
||||
label: 'Company',
|
||||
}),
|
||||
);
|
||||
const blueSortDropdownButton = getByText('Filter');
|
||||
await waitFor(() => {
|
||||
expect(blueSortDropdownButton).toHaveAttribute('aria-selected', 'true');
|
||||
});
|
||||
});
|
||||
@@ -1,36 +0,0 @@
|
||||
import { fireEvent, render } from '@testing-library/react';
|
||||
|
||||
import { RegularSortAndFilterBar } from '../__stories__/SortAndFilterBar.stories';
|
||||
|
||||
it('Checks the SortAndFilterBar renders', async () => {
|
||||
const removeFunction = jest.fn();
|
||||
const cancelFunction = jest.fn();
|
||||
|
||||
const { getByText, getByTestId } = render(
|
||||
<RegularSortAndFilterBar
|
||||
removeFunction={removeFunction}
|
||||
cancelFunction={cancelFunction}
|
||||
/>,
|
||||
);
|
||||
expect(getByText('Test sort')).toBeDefined();
|
||||
|
||||
const removeIcon = getByTestId('remove-icon-test_sort');
|
||||
fireEvent.click(removeIcon);
|
||||
|
||||
expect(removeFunction).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('Removes sorts when cancel is pressed', async () => {
|
||||
const removeFunction = jest.fn();
|
||||
const cancelFunction = jest.fn();
|
||||
const { getByTestId } = render(
|
||||
<RegularSortAndFilterBar
|
||||
removeFunction={removeFunction}
|
||||
cancelFunction={cancelFunction}
|
||||
/>,
|
||||
);
|
||||
const cancel = getByTestId('cancel-button');
|
||||
fireEvent.click(cancel);
|
||||
|
||||
expect(cancelFunction).toHaveBeenCalled();
|
||||
});
|
||||
@@ -1,74 +0,0 @@
|
||||
import { fireEvent, render } from '@testing-library/react';
|
||||
import { RegularSortDropdownButton } from '../__stories__/SortDropdownButton.stories';
|
||||
import { TbBuilding, TbMail } from 'react-icons/tb';
|
||||
|
||||
it('Checks the default top option is Ascending', async () => {
|
||||
const setSorts = jest.fn();
|
||||
const { getByText } = render(
|
||||
<RegularSortDropdownButton setSorts={setSorts} />,
|
||||
);
|
||||
|
||||
const sortDropdownButton = getByText('Sort');
|
||||
fireEvent.click(sortDropdownButton);
|
||||
|
||||
const sortByEmail = getByText('Email');
|
||||
fireEvent.click(sortByEmail);
|
||||
|
||||
expect(setSorts).toHaveBeenCalledWith({
|
||||
label: 'Email',
|
||||
key: 'email',
|
||||
icon: <TbMail size={16} />,
|
||||
order: 'asc',
|
||||
_type: 'default_sort',
|
||||
});
|
||||
});
|
||||
|
||||
it('Checks the selection of Descending', async () => {
|
||||
const setSorts = jest.fn();
|
||||
const { getByText } = render(
|
||||
<RegularSortDropdownButton setSorts={setSorts} />,
|
||||
);
|
||||
|
||||
const sortDropdownButton = getByText('Sort');
|
||||
fireEvent.click(sortDropdownButton);
|
||||
|
||||
const openTopOption = getByText('Ascending');
|
||||
fireEvent.click(openTopOption);
|
||||
|
||||
const selectDescending = getByText('Descending');
|
||||
fireEvent.click(selectDescending);
|
||||
|
||||
const sortByEmail = getByText('Email');
|
||||
fireEvent.click(sortByEmail);
|
||||
|
||||
expect(setSorts).toHaveBeenCalledWith({
|
||||
label: 'Email',
|
||||
key: 'email',
|
||||
icon: <TbMail size={16} />,
|
||||
order: 'desc',
|
||||
_type: 'default_sort',
|
||||
});
|
||||
});
|
||||
|
||||
it('Checks custom_sort is working', async () => {
|
||||
const setSorts = jest.fn();
|
||||
const { getByText } = render(
|
||||
<RegularSortDropdownButton setSorts={setSorts} />,
|
||||
);
|
||||
|
||||
const sortDropdownButton = getByText('Sort');
|
||||
fireEvent.click(sortDropdownButton);
|
||||
|
||||
const sortByCompany = getByText('Company');
|
||||
fireEvent.click(sortByCompany);
|
||||
|
||||
expect(setSorts).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
key: 'company_name',
|
||||
label: 'Company',
|
||||
icon: <TbBuilding size={16} />,
|
||||
_type: 'custom_sort',
|
||||
order: 'asc',
|
||||
}),
|
||||
);
|
||||
});
|
||||
@@ -1,32 +0,0 @@
|
||||
import { fireEvent, render } from '@testing-library/react';
|
||||
|
||||
import {
|
||||
RegularFilterChip,
|
||||
RegularSortChip,
|
||||
} from '../__stories__/SortOrFilterChip.stories';
|
||||
|
||||
const removeFunction = jest.fn();
|
||||
|
||||
it('Checks the filter chip renders', async () => {
|
||||
const { getByText, getByTestId } = render(
|
||||
<RegularFilterChip removeFunction={removeFunction} />,
|
||||
);
|
||||
expect(getByText('Account owner:')).toBeDefined();
|
||||
|
||||
const removeIcon = getByTestId('remove-icon-test_sort');
|
||||
fireEvent.click(removeIcon);
|
||||
|
||||
expect(removeFunction).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('Checks the sort chip renders', async () => {
|
||||
const { getByText, getByTestId } = render(
|
||||
<RegularSortChip removeFunction={removeFunction} />,
|
||||
);
|
||||
expect(getByText('Created at')).toBeDefined();
|
||||
|
||||
const removeIcon = getByTestId('remove-icon-test_sort');
|
||||
fireEvent.click(removeIcon);
|
||||
|
||||
expect(removeFunction).toHaveBeenCalled();
|
||||
});
|
||||
@@ -1,20 +0,0 @@
|
||||
import { fireEvent, render } from '@testing-library/react';
|
||||
|
||||
import { RegularTableHeader } from '../__stories__/TableHeader.stories';
|
||||
|
||||
it('Checks the TableHeader renders', async () => {
|
||||
const { getByText, queryByText } = render(<RegularTableHeader />);
|
||||
|
||||
const sortDropdownButton = getByText('Sort');
|
||||
fireEvent.click(sortDropdownButton);
|
||||
|
||||
const sortByCreatedAt = getByText('Created at');
|
||||
fireEvent.click(sortByCreatedAt);
|
||||
|
||||
expect(getByText('Created at')).toBeDefined();
|
||||
|
||||
const cancelButton = getByText('Cancel');
|
||||
fireEvent.click(cancelButton);
|
||||
|
||||
expect(queryByText('Created at')).toBeNull();
|
||||
});
|
||||
Reference in New Issue
Block a user