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

Refactor Filter type to accept Is, Is Not, Contains, Does not Contain (#128)

Browse Source 
* Refactor Filter type to accept Is, Is Not, Contains, Does not Contain

* Remove any and add tests
This commit is contained in:
Charles Bochet
2023-05-18 15:32:57 +02:00
committed by GitHub
parent 4211d5872b
commit 5286dfd695
20 changed files with 241 additions and 336 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
front/src/pages/companies/__stories__/Companies.stories.tsx
View File

@ -3,10 +3,8 @@ import Companies from '../Companies';
import { ThemeProvider } from '@emotion/react';
import { lightTheme } from '../../../layout/styles/themes';
import { GET_COMPANIES } from '../../../services/api/companies';
import { mockData } from '../__tests__/__data__/mock-data';
import { mockCompaniesData } from '../__tests__/__data__/mock-data';
import { MockedProvider } from '@apollo/client/testing';
import { SEARCH_COMPANY_QUERY } from '../../../services/api/search/search';
import { mockCompanySearchData } from '../../../services/api/search/__data__/mock-search-data';
const component = {
title: 'Companies',
@ -26,7 +24,7 @@ const mocks = [
},
result: {
data: {
companies: mockData,
companies: mockCompaniesData,
},
},
},
@ -40,28 +38,24 @@ const mocks = [
},
result: {
data: {
companies: mockData,
companies: mockCompaniesData,
},
},
},
{
request: {
query: SEARCH_COMPANY_QUERY,
variables: { where: { name: { _ilike: '%%' } }, limit: 5 },
},
result: mockCompanySearchData,
},
{
request: {
query: GET_COMPANIES,
variables: {
orderBy: [{ created_at: 'desc' }],
where: { domain_name: { _eq: 'linkedin-searched.com' } },
where: { domain_name: { _ilike: '%aircal%' } },
},
},
result: {
data: {
companies: mockData,
companies: mockCompaniesData.filter(
(company) =>
company.domain_name && company.domain_name.includes('aircal'),
),
},
},
},

16
front/src/pages/companies/__tests__/Companies.test.tsx
View File

@ -138,7 +138,9 @@ it('Checks insert data is appending a new line', async () => {
});
it('Checks filters are working', async () => {
const { getByText } = render(<CompaniesDefault />);
const { getByText, queryByText, getByPlaceholderText } = render(
<CompaniesDefault />,
);
await waitFor(() => {
expect(getByText('Airbnb')).toBeDefined();
@ -154,10 +156,12 @@ it('Checks filters are working', async () => {
const urlFilter = getByText('Url');
fireEvent.click(urlFilter);
await waitFor(() => {
expect(getByText('linkedin-searched.com')).toBeDefined();
});
const filterSearch = getByPlaceholderText('Url');
fireEvent.change(filterSearch, { target: { value: 'aircal' } });
const filterByLinkedinOption = getByText('linkedin-searched.com');
fireEvent.click(filterByLinkedinOption);
await waitFor(() => {
expect(getByText('aircall.io')).toBeDefined();
const airbnbResult = queryByText('Airbnb');
expect(airbnbResult).not.toBeInTheDocument();
});
});

4
front/src/pages/companies/__tests__/__data__/mock-data.ts
View File

@ -1,6 +1,6 @@
import { GraphqlQueryCompany } from '../../../../interfaces/company.interface';
import { GraphqlQueryCompany } from '../../../../interfaces/entities/company.interface';
export const mockData: Array<GraphqlQueryCompany> = [
export const mockCompaniesData: Array<GraphqlQueryCompany> = [
{
id: '89bb825c-171e-4bcc-9cf7-43448d6fb278',
domain_name: 'airbnb.com',

64
front/src/pages/companies/companies-filters.tsx
View File

@ -1,9 +1,5 @@
import {
Company,
mapToCompany,
} from '../../interfaces/entities/company.interface';
import { Company } from '../../interfaces/entities/company.interface';
import { FaLink, FaBuilding } from 'react-icons/fa';
import { SEARCH_COMPANY_QUERY } from '../../services/api/search/search';
import { FilterConfigType } from '../../interfaces/filters/interface';
export const availableFilters = [
@ -11,64 +7,42 @@ export const availableFilters = [
key: 'company_name',
label: 'Company',
icon: <FaBuilding />,
searchConfig: {
query: SEARCH_COMPANY_QUERY,
template: (searchInput) => ({
name: { _ilike: `%${searchInput}%` },
}),
resultMapper: (company) => ({
render: (company) => company.name,
value: mapToCompany(company),
}),
},
selectedValueRender: (company) => company.name || '',
operands: [
{
label: 'Equal',
id: 'equal',
whereTemplate: (company) => ({
name: { _eq: company.name },
label: 'Contains',
id: 'like',
whereTemplate: (searchString) => ({
name: { _ilike: `%${searchString}%` },
}),
},
{
label: 'Not equal',
id: 'not-equal',
whereTemplate: (company) => ({
_not: { name: { _eq: company.name } },
label: 'Does not contain',
id: 'not_like',
whereTemplate: (searchString) => ({
_not: { name: { _ilike: `%${searchString}%` } },
}),
},
],
} satisfies FilterConfigType<Company, Company>,
} satisfies FilterConfigType<Company, string>,
{
key: 'company_domain_name',
label: 'Url',
icon: <FaLink />,
searchConfig: {
query: SEARCH_COMPANY_QUERY,
template: (searchInput) => ({
name: { _ilike: `%${searchInput}%` },
}),
resultMapper: (company) => ({
render: (company) => company.domainName,
value: mapToCompany(company),
}),
},
selectedValueRender: (company) => company.domainName || '',
operands: [
{
label: 'Equal',
id: 'equal',
whereTemplate: (company) => ({
domain_name: { _eq: company.domainName },
label: 'Contains',
id: 'like',
whereTemplate: (searchString) => ({
domain_name: { _ilike: `%${searchString}%` },
}),
},
{
label: 'Not equal',
id: 'not-equal',
whereTemplate: (company) => ({
_not: { domain_name: { _eq: company.domainName } },
label: 'Does not contain',
id: 'not_like',
whereTemplate: (searchString) => ({
_not: { domain_name: { _ilike: `%${searchString}%` } },
}),
},
],
} satisfies FilterConfigType<Company, Company>,
} satisfies FilterConfigType<Company, string>,
];