Skip to content

Commit e2744c6

Browse files
MudaafiHHHindawyHossam Hindawy
authored
Merge to Main (#87)
* [NOCSL] Update hook, component props to only take the fields they need (#83) * Update hook, component props to only take the fields they need * Fix useSearchResult Stoy * Lint * [CI-3676] PLP leftovers (#84) * ci-3676 spec files re-structure * ci-3676 make search reducer more generic * ci-3676 TODO comments * ci-3676 destructure --------- Co-authored-by: Hossam Hindawy <hossam.hindawy@hossam.hindawy-Q7M9F6QK6G> * Ci 3649 mvp os UI plp hook create a usecioplp hook that calls and (#85) * Create useCioPlp hook * UseCioPlp Storybook docs * Server tests * PR Comments * Update test implementation * Patch Diffend flagged vuln of axios --------- Co-authored-by: Hossam Hassan Hindawy <7ossam9063@gmail.com> Co-authored-by: Hossam Hindawy <hossam.hindawy@hossam.hindawy-Q7M9F6QK6G>
1 parent fabd467 commit e2744c6

File tree

63 files changed

+1056
-586
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

63 files changed

+1056
-586
lines changed

‎package-lock.json‎

Lines changed: 8 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎spec/CioPlp/CioPlp.server.test.jsx‎ renamed to ‎spec/components/CioPlp/CioPlp.server.test.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React from 'react';
22
import ReactDOMServer from 'react-dom/server';
3-
import CioPlp from '../../src/components/CioPlp';
4-
import { useCioPlpContext } from '../../src/hooks/useCioPlpContext';
5-
import { DEMO_API_KEY } from '../../src/constants';
3+
import CioPlp from '../../../src/components/CioPlp';
4+
import { useCioPlpContext } from '../../../src/hooks/useCioPlpContext';
5+
import { DEMO_API_KEY } from '../../../src/constants';
66

77
describe('CioPlp React Server-Side Rendering', () => {
88
it("throws an error if apiKey isn't provided", () => {

‎spec/CioPlp/CioPlp.test.jsx‎ renamed to ‎spec/components/CioPlp/CioPlp.test.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import React from 'react';
22
import { render } from '@testing-library/react';
3-
import CioPlp from '../../src/components/CioPlp';
4-
import { useCioPlpContext } from '../../src/hooks/useCioPlpContext';
5-
import { DEMO_API_KEY } from '../../src/constants';
3+
import CioPlp from '../../../src/components/CioPlp';
4+
import { useCioPlpContext } from '../../../src/hooks/useCioPlpContext';
5+
import { DEMO_API_KEY } from '../../../src/constants';
66
import '@testing-library/jest-dom';
7-
import { mockConstructorIOClient } from '../test-utils';
7+
import { mockConstructorIOClient } from '../../test-utils';
88

99
const originalWindowLocation = window.location;
1010

‎spec/CioPlpGrid.server.test.jsx‎ renamed to ‎spec/components/CioPlpGrid/CioPlpGrid.server.test.jsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import React from 'react';
22
import { renderToString } from 'react-dom/server';
3-
import CioPlpGrid from '../src/components/CioPlpGrid';
4-
import CioPlp from '../src/components/CioPlp';
5-
import { DEMO_API_KEY } from '../src/constants';
6-
import { transformSearchResponse } from '../src/utils/transformers';
7-
import mockSearchResponse from './local_examples/apiSearchResponse.json';
8-
import { RequestStatus } from '../src/components/CioPlpGrid/reducer';
3+
import CioPlpGrid from '../../../src/components/CioPlpGrid';
4+
import CioPlp from '../../../src/components/CioPlp';
5+
import { DEMO_API_KEY } from '../../../src/constants';
6+
import { transformSearchResponse } from '../../../src/utils/transformers';
7+
import mockSearchResponse from '../../local_examples/apiSearchResponse.json';
8+
import { RequestStatus } from '../../../src/components/CioPlpGrid/reducer';
99

10-
jest.mock('../src/styles.css', () => ({}));
11-
jest.mock('../src/hooks/useSearchResults');
12-
jest.mock('../src/hooks/useRequestConfigs', () => ({
10+
jest.mock('../../../src/styles.css', () => ({}));
11+
jest.mock('../../../src/hooks/useSearchResults');
12+
jest.mock('../../../src/hooks/useRequestConfigs', () => ({
1313
__esModule: true,
1414
default: jest.fn(() => ({ requestConfigs: { query: 'red' } })),
1515
}));
@@ -29,7 +29,7 @@ describe('Testing Component on the server: CioPlpGrid', () => {
2929
});
3030

3131
it('Should render loading state while fetching data', () => {
32-
const mockUseSearchResults = require('../src/hooks/useSearchResults').default;
32+
const mockUseSearchResults = require('../../../src/hooks/useSearchResults').default;
3333
mockUseSearchResults.mockReturnValue({ status: RequestStatus.FETCHING });
3434

3535
const html = renderToString(
@@ -42,11 +42,11 @@ describe('Testing Component on the server: CioPlpGrid', () => {
4242
});
4343

4444
it('Should render title and search results when data is fetched', () => {
45-
const mockData = transformSearchResponse(mockSearchResponse);
46-
const mockUseSearchResults = require('../src/hooks/useSearchResults').default;
45+
const mockSearchData = transformSearchResponse(mockSearchResponse);
46+
const mockUseSearchResults = require('../../../src/hooks/useSearchResults').default;
4747
mockUseSearchResults.mockReturnValue({
4848
status: RequestStatus.SUCCESS,
49-
data: { response: { ...mockData } },
49+
data: { response: mockSearchData.response },
5050
});
5151

5252
const html = renderToString(
@@ -55,18 +55,18 @@ describe('Testing Component on the server: CioPlpGrid', () => {
5555
</CioPlp>,
5656
);
5757

58-
expect(html).toContain(mockData.results[0].itemName);
58+
expect(html).toContain(mockSearchData.response.results[0].itemName);
5959
});
6060

6161
it('Should render title and search results when when provided initialSearchResponse', async () => {
62-
const initialSearchResponse = transformSearchResponse(mockSearchResponse);
62+
const mockSearchData = transformSearchResponse(mockSearchResponse);
6363

6464
const html = renderToString(
6565
<CioPlp apiKey={DEMO_API_KEY}>
66-
<CioPlpGrid initialSearchResponse={initialSearchResponse} />
66+
<CioPlpGrid initialSearchResponse={mockSearchResponse} />
6767
</CioPlp>,
6868
);
6969

70-
expect(html).toContain(initialSearchResponse.results[0].itemName);
70+
expect(html).toContain(mockSearchData.response.results[0].itemName);
7171
});
7272
});

‎spec/CioPlpGrid.test.jsx‎ renamed to ‎spec/components/CioPlpGrid/CioPlpGrid.test.jsx‎

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import React from 'react';
22
import { render, waitFor } from '@testing-library/react';
3-
import CioPlpGrid from '../src/components/CioPlpGrid';
4-
import CioPlp from '../src/components/CioPlp';
5-
import { DEMO_API_KEY } from '../src/constants';
3+
import CioPlpGrid from '../../../src/components/CioPlpGrid';
4+
import CioPlp from '../../../src/components/CioPlp';
5+
import { DEMO_API_KEY } from '../../../src/constants';
66
import '@testing-library/jest-dom';
7-
import { transformSearchResponse } from '../src/utils/transformers';
8-
import mockSearchResponse from './local_examples/apiSearchResponse.json';
9-
import { RequestStatus } from '../src/components/CioPlpGrid/reducer';
7+
import { transformSearchResponse } from '../../../src/utils/transformers';
8+
import mockSearchResponse from '../../local_examples/apiSearchResponse.json';
9+
import { RequestStatus } from '../../../src/components/CioPlpGrid/reducer';
1010

11-
jest.mock('../src/styles.css', () => ({}));
12-
jest.mock('../src/hooks/useSearchResults');
13-
jest.mock('../src/hooks/useRequestConfigs', () => ({
11+
jest.mock('../../../src/styles.css', () => ({}));
12+
jest.mock('../../../src/hooks/useSearchResults');
13+
jest.mock('../../../src/hooks/useRequestConfigs', () => ({
1414
__esModule: true,
1515
default: jest.fn(() => ({ requestConfigs: { query: 'red' }, setRequestConfigs: jest.fn() })),
1616
}));
@@ -39,7 +39,7 @@ describe('Testing Component: CioPlpGrid', () => {
3939
});
4040

4141
it('Should render spinner while fetching data', async () => {
42-
const mockUseSearchResults = require('../src/hooks/useSearchResults').default;
42+
const mockUseSearchResults = require('../../../src/hooks/useSearchResults').default;
4343
mockUseSearchResults.mockReturnValue({ status: RequestStatus.FETCHING });
4444

4545
const { getByTestId } = render(
@@ -52,11 +52,11 @@ describe('Testing Component: CioPlpGrid', () => {
5252
});
5353

5454
it('Should not render spinner if data has been fetched', async () => {
55-
const mockData = transformSearchResponse(mockSearchResponse);
56-
const mockUseSearchResults = require('../src/hooks/useSearchResults').default;
55+
const mockSearchData = transformSearchResponse(mockSearchResponse);
56+
const mockUseSearchResults = require('../../../src/hooks/useSearchResults').default;
5757
mockUseSearchResults.mockReturnValue({
5858
status: RequestStatus.SUCCESS,
59-
data: { response: { ...mockData } },
59+
data: { response: mockSearchData.response },
6060
});
6161

6262
const { queryByTestId } = render(
@@ -69,7 +69,7 @@ describe('Testing Component: CioPlpGrid', () => {
6969
});
7070

7171
it('Should not render spinner if there has been an error while fetching data', async () => {
72-
const mockUseSearchResults = require('../src/hooks/useSearchResults').default;
72+
const mockUseSearchResults = require('../../../src/hooks/useSearchResults').default;
7373
mockUseSearchResults.mockReturnValue({
7474
status: RequestStatus.ERROR,
7575
data: {
@@ -87,7 +87,7 @@ describe('Testing Component: CioPlpGrid', () => {
8787
});
8888

8989
it('Should not render custom spinner if there has been an error while fetching data', async () => {
90-
const mockUseSearchResults = require('../src/hooks/useSearchResults').default;
90+
const mockUseSearchResults = require('../../../src/hooks/useSearchResults').default;
9191
mockUseSearchResults.mockReturnValue({
9292
status: RequestStatus.ERROR,
9393
data: {
@@ -105,11 +105,11 @@ describe('Testing Component: CioPlpGrid', () => {
105105
});
106106

107107
it('Should not render custom spinner if data has been fetched', async () => {
108-
const mockData = transformSearchResponse(mockSearchResponse);
109-
const mockUseSearchResults = require('../src/hooks/useSearchResults').default;
108+
const mockSearchData = transformSearchResponse(mockSearchResponse);
109+
const mockUseSearchResults = require('../../../src/hooks/useSearchResults').default;
110110
mockUseSearchResults.mockReturnValue({
111111
status: RequestStatus.SUCCESS,
112-
data: { response: { ...mockData } },
112+
data: { response: mockSearchData.response },
113113
});
114114

115115
const { queryByText } = render(
@@ -122,7 +122,7 @@ describe('Testing Component: CioPlpGrid', () => {
122122
});
123123

124124
it('Should render custom spinner while fetching data if provided', async () => {
125-
const mockUseSearchResults = require('../src/hooks/useSearchResults').default;
125+
const mockUseSearchResults = require('../../../src/hooks/useSearchResults').default;
126126
mockUseSearchResults.mockReturnValue({ status: RequestStatus.FETCHING });
127127

128128
const { getByText, queryByTestId } = render(
@@ -138,11 +138,11 @@ describe('Testing Component: CioPlpGrid', () => {
138138
});
139139

140140
it('Should render results when data is fetched', async () => {
141-
const mockData = transformSearchResponse(mockSearchResponse);
142-
const mockUseSearchResults = require('../src/hooks/useSearchResults').default;
141+
const mockSearchData = transformSearchResponse(mockSearchResponse);
142+
const mockUseSearchResults = require('../../../src/hooks/useSearchResults').default;
143143
mockUseSearchResults.mockReturnValue({
144144
status: RequestStatus.SUCCESS,
145-
data: { response: { ...mockData } },
145+
data: { response: mockSearchData.response },
146146
});
147147

148148
const { getByText } = render(
@@ -151,20 +151,22 @@ describe('Testing Component: CioPlpGrid', () => {
151151
</CioPlp>,
152152
);
153153

154-
await waitFor(() => expect(getByText(mockData.results[0].itemName)).toBeInTheDocument());
154+
await waitFor(() =>
155+
expect(getByText(mockSearchData.response.results[0].itemName)).toBeInTheDocument(),
156+
);
155157
});
156158

157159
it('Should render results when provided with initialSearchResponse', async () => {
158-
const initialSearchResponse = transformSearchResponse(mockSearchResponse);
160+
const mockSearchData = transformSearchResponse(mockSearchResponse);
159161

160162
const { getByText } = render(
161163
<CioPlp apiKey={DEMO_API_KEY}>
162-
<CioPlpGrid initialSearchResponse={initialSearchResponse} />
164+
<CioPlpGrid initialSearchResponse={mockSearchResponse} />
163165
</CioPlp>,
164166
);
165167

166168
await waitFor(() =>
167-
expect(getByText(initialSearchResponse.results[0].itemName)).toBeInTheDocument(),
169+
expect(getByText(mockSearchData.response.results[0].itemName)).toBeInTheDocument(),
168170
);
169171
});
170172
});

‎spec/Filters.server.test.jsx‎ renamed to ‎spec/components/Filters/Filters.server.test.jsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React from 'react';
22
import { renderToString } from 'react-dom/server';
33
import '@testing-library/jest-dom';
4-
import { DEMO_API_KEY } from '../src/constants';
5-
import CioPlp from '../src/components/CioPlp';
6-
import Filters from '../src/components/Filters';
7-
import mockTransformedFacets from './local_examples/sampleFacets.json';
4+
import { DEMO_API_KEY } from '../../../src/constants';
5+
import CioPlp from '../../../src/components/CioPlp';
6+
import Filters from '../../../src/components/Filters';
7+
import mockTransformedFacets from '../../local_examples/sampleFacets.json';
88

9-
const mockSearchOrBrowseResponse = { facets: mockTransformedFacets };
9+
const filterProps = { facets: mockTransformedFacets };
1010

1111
describe('Testing Component on the server: Filters', () => {
1212
beforeEach(() => {
@@ -20,13 +20,13 @@ describe('Testing Component on the server: Filters', () => {
2020
});
2121

2222
it('Should throw error if used outside the CioPlp', () => {
23-
expect(() => renderToString(<Filters facets={mockTransformedFacets} />)).toThrow();
23+
expect(() => renderToString(<Filters {...filterProps} />)).toThrow();
2424
});
2525

2626
it('Should render filters based on search or browse response', async () => {
2727
const html = renderToString(
2828
<CioPlp apiKey={DEMO_API_KEY}>
29-
<Filters response={mockSearchOrBrowseResponse} />
29+
<Filters {...filterProps} />
3030
</CioPlp>,
3131
);
3232

@@ -38,14 +38,14 @@ describe('Testing Component on the server: Filters', () => {
3838
it('Should render correctly with render props', () => {
3939
const mockChildren = jest.fn().mockReturnValue(<div>Custom Filters</div>);
4040

41-
const filterProps = {
42-
response: mockSearchOrBrowseResponse,
41+
const filterPropsWithChildren = {
42+
...filterProps,
4343
children: mockChildren,
4444
};
4545

4646
const html = renderToString(
4747
<CioPlp apiKey={DEMO_API_KEY}>
48-
<Filters {...filterProps} />
48+
<Filters {...filterPropsWithChildren} />
4949
</CioPlp>,
5050
);
5151
expect(mockChildren).toHaveBeenCalled();

‎spec/Filters.test.jsx‎ renamed to ‎spec/components/Filters/Filters.test.jsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import React, { useEffect, useState } from 'react';
22
import { render, waitFor, fireEvent } from '@testing-library/react';
33
import '@testing-library/jest-dom';
4-
import { DEMO_API_KEY } from '../src/constants';
5-
import CioPlp from '../src/components/CioPlp';
6-
import Filters from '../src/components/Filters';
7-
import mockTransformedFacets from './local_examples/sampleFacets.json';
8-
import testJsonEncodedUrl from './local_examples/testJsonEncodedUrl.json';
9-
import { getStateFromUrl } from '../src/utils/urlHelpers';
4+
import { DEMO_API_KEY } from '../../../src/constants';
5+
import CioPlp from '../../../src/components/CioPlp';
6+
import Filters from '../../../src/components/Filters';
7+
import mockTransformedFacets from '../../local_examples/sampleFacets.json';
8+
import testJsonEncodedUrl from '../../local_examples/testJsonEncodedUrl.json';
9+
import { getStateFromUrl } from '../../../src/utils/urlHelpers';
1010

11-
const mockSearchOrBrowseResponse = { facets: mockTransformedFacets };
11+
const filterProps = { facets: mockTransformedFacets };
1212

1313
describe('Testing Component: Filters', () => {
1414
const originalWindowLocation = window.location;
@@ -38,7 +38,7 @@ describe('Testing Component: Filters', () => {
3838
it('Should render filters based on list of facets', async () => {
3939
const { getByText, container } = render(
4040
<CioPlp apiKey={DEMO_API_KEY}>
41-
<Filters response={mockSearchOrBrowseResponse} />
41+
<Filters {...filterProps} />
4242
</CioPlp>,
4343
);
4444

@@ -63,7 +63,7 @@ describe('Testing Component: Filters', () => {
6363
const initialNumOptions = 2;
6464
const { getByText } = render(
6565
<CioPlp apiKey={DEMO_API_KEY}>
66-
<Filters response={mockSearchOrBrowseResponse} initialNumOptions={initialNumOptions} />
66+
<Filters {...filterProps} initialNumOptions={initialNumOptions} />
6767
</CioPlp>,
6868
);
6969

@@ -83,7 +83,7 @@ describe('Testing Component: Filters', () => {
8383
it('Should mark options if selected', async () => {
8484
const { container, getByText } = render(
8585
<CioPlp apiKey={DEMO_API_KEY}>
86-
<Filters response={mockSearchOrBrowseResponse} />
86+
<Filters {...filterProps} />
8787
</CioPlp>,
8888
);
8989

@@ -103,14 +103,14 @@ describe('Testing Component: Filters', () => {
103103
it('Should render correctly with render props', () => {
104104
const mockChildren = jest.fn().mockReturnValue(<div>Custom Filters</div>);
105105

106-
const filtersProps = {
107-
response: mockSearchOrBrowseResponse,
106+
const filtersPropsWithChildren = {
107+
...filterProps,
108108
children: mockChildren,
109109
};
110110

111111
const { getByText } = render(
112112
<CioPlp apiKey={DEMO_API_KEY}>
113-
<Filters {...filtersProps} />
113+
<Filters {...filtersPropsWithChildren} />
114114
</CioPlp>,
115115
);
116116
expect(mockChildren).toHaveBeenCalled();
@@ -134,7 +134,7 @@ describe('Testing Component: Filters', () => {
134134
<CioPlp
135135
apiKey={DEMO_API_KEY}
136136
urlHelpers={{ setUrl: setCurrentUrl, getUrl: () => currentUrl }}>
137-
<Filters response={mockSearchOrBrowseResponse} />
137+
<Filters {...filterProps} />
138138
<div id='request-filters'>{filters}</div>;
139139
</CioPlp>
140140
);

0 commit comments

Comments
 (0)