-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(rendering): Expose createElement (#85)
* feat: return createElement and Fragment * feat: return createElement and Fragment for fallback * feat: use Renderer * feat: add tests * Update packages/recommend-vdom/src/types/FacetsViewProps.ts Co-authored-by: Sarah Dayan <[email protected]> * Update packages/recommend-vdom/src/types/ViewProps.ts Co-authored-by: Sarah Dayan <[email protected]> * fix: missing import * fix: typings * fix: lint * fix: size limit * fix: add more tests * fix: remove useless if * Update packages/recommend-js/src/__tests__/frequentlyBoughtTogether.test.tsx Co-authored-by: Sarah Dayan <[email protected]> * Update packages/recommend-js/src/__tests__/frequentlyBoughtTogether.test.tsx Co-authored-by: Sarah Dayan <[email protected]> * Update packages/recommend-js/src/__tests__/frequentlyBoughtTogether.test.tsx Co-authored-by: Sarah Dayan <[email protected]> * Update packages/recommend-js/src/__tests__/frequentlyBoughtTogether.test.tsx Co-authored-by: Sarah Dayan <[email protected]> * Update packages/recommend-js/src/__tests__/frequentlyBoughtTogether.test.tsx Co-authored-by: Sarah Dayan <[email protected]> * Update packages/recommend-js/src/__tests__/trendingItems.test.tsx Co-authored-by: Sarah Dayan <[email protected]> * Update packages/recommend-js/src/__tests__/trendingItems.test.tsx Co-authored-by: Sarah Dayan <[email protected]> * Update packages/recommend-js/src/__tests__/trendingItems.test.tsx Co-authored-by: Sarah Dayan <[email protected]> * Update packages/recommend-js/src/__tests__/trendingItems.test.tsx Co-authored-by: Sarah Dayan <[email protected]> * Update packages/recommend-js/src/__tests__/trendingItems.test.tsx Co-authored-by: Sarah Dayan <[email protected]> * Update packages/recommend-js/src/__tests__/relatedProducts.test.tsx Co-authored-by: Sarah Dayan <[email protected]> * Update packages/recommend-js/src/__tests__/relatedProducts.test.tsx Co-authored-by: Sarah Dayan <[email protected]> * fix: naming in test Co-authored-by: Sarah Dayan <[email protected]>
- Loading branch information
1 parent
52a47e9
commit ea6e668
Showing
15 changed files
with
875 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
207 changes: 207 additions & 0 deletions
207
packages/recommend-js/src/__tests__/frequentlyBoughtTogether.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,207 @@ | ||
/** @jsx h */ | ||
import { ObjectWithObjectID } from '@algolia/client-search'; | ||
import { waitFor, within } from '@testing-library/dom'; | ||
import { h } from 'preact'; | ||
|
||
import { createMultiSearchResponse } from '../../../../test/utils/createApiResponse'; | ||
import { | ||
createRecommendClient, | ||
hit, | ||
} from '../../../../test/utils/createRecommendClient'; | ||
import { frequentlyBoughtTogether } from '../frequentlyBoughtTogether'; | ||
|
||
function createMockedRecommendClient(recommendations: ObjectWithObjectID[]) { | ||
const recommendClient = createRecommendClient({ | ||
getFrequentlyBoughtTogether: jest.fn(() => | ||
Promise.resolve( | ||
createMultiSearchResponse({ | ||
hits: recommendations, | ||
}) | ||
) | ||
), | ||
}); | ||
|
||
return recommendClient; | ||
} | ||
|
||
describe('frequentlyBoughtTogether', () => { | ||
beforeEach(() => { | ||
document.body.innerHTML = ''; | ||
}); | ||
|
||
describe('rendering the header and items', () => { | ||
test('renders JSX templates', async () => { | ||
const container = document.createElement('div'); | ||
|
||
const recommendClient = createMockedRecommendClient(hit.recommendations); | ||
|
||
document.body.appendChild(container); | ||
|
||
frequentlyBoughtTogether<ObjectWithObjectID>({ | ||
container, | ||
recommendClient, | ||
indexName: 'products', | ||
objectIDs: ['D06270-9132-995'], | ||
headerComponent: () => <h1>FBT</h1>, | ||
itemComponent: ({ item }) => <div>{item.objectID}</div>, | ||
}); | ||
|
||
await waitFor(() => { | ||
expect(within(container).getAllByRole('listitem')).not.toBeNull(); | ||
expect(container).toMatchInlineSnapshot(` | ||
<div> | ||
<section | ||
class="auc-Recommend" | ||
> | ||
<h1> | ||
FBT | ||
</h1> | ||
<div | ||
class="auc-Recommend-container" | ||
> | ||
<ol | ||
class="auc-Recommend-list" | ||
> | ||
<li | ||
class="auc-Recommend-item" | ||
> | ||
<div> | ||
1 | ||
</div> | ||
</li> | ||
<li | ||
class="auc-Recommend-item" | ||
> | ||
<div> | ||
2 | ||
</div> | ||
</li> | ||
<li | ||
class="auc-Recommend-item" | ||
> | ||
<div> | ||
3 | ||
</div> | ||
</li> | ||
</ol> | ||
</div> | ||
</section> | ||
</div> | ||
`); | ||
}); | ||
}); | ||
|
||
test('renders using `createElement` and `Fragment`', async () => { | ||
const container = document.createElement('div'); | ||
|
||
const recommendClient = createMockedRecommendClient(hit.recommendations); | ||
|
||
document.body.appendChild(container); | ||
|
||
frequentlyBoughtTogether<ObjectWithObjectID>({ | ||
container, | ||
recommendClient, | ||
indexName: 'products', | ||
objectIDs: ['D06270-9132-995'], | ||
headerComponent: ({ createElement }) => | ||
createElement('h1', null, 'FBT'), | ||
itemComponent: ({ item, createElement, Fragment }) => | ||
createElement(Fragment, null, item.objectID), | ||
}); | ||
|
||
await waitFor(() => { | ||
expect(within(container).getAllByRole('listitem')).not.toBeNull(); | ||
expect(container).toMatchInlineSnapshot(` | ||
<div> | ||
<section | ||
class="auc-Recommend" | ||
> | ||
<h1> | ||
FBT | ||
</h1> | ||
<div | ||
class="auc-Recommend-container" | ||
> | ||
<ol | ||
class="auc-Recommend-list" | ||
> | ||
<li | ||
class="auc-Recommend-item" | ||
> | ||
1 | ||
</li> | ||
<li | ||
class="auc-Recommend-item" | ||
> | ||
2 | ||
</li> | ||
<li | ||
class="auc-Recommend-item" | ||
> | ||
3 | ||
</li> | ||
</ol> | ||
</div> | ||
</section> | ||
</div> | ||
`); | ||
}); | ||
}); | ||
}); | ||
|
||
describe('rendering `fallbackComponent`', () => { | ||
test('renders JSX templates', async () => { | ||
const container = document.createElement('div'); | ||
|
||
const recommendClient = createMockedRecommendClient([]); | ||
|
||
document.body.appendChild(container); | ||
|
||
frequentlyBoughtTogether<ObjectWithObjectID>({ | ||
container, | ||
recommendClient, | ||
indexName: 'products', | ||
objectIDs: ['D06270-9132-995'], | ||
itemComponent: ({ item }) => <div>{item.objectID}</div>, | ||
fallbackComponent: () => <div>Fallback component</div>, | ||
}); | ||
|
||
await waitFor(() => { | ||
expect(within(container).getByText('Fallback component')) | ||
.toMatchInlineSnapshot(` | ||
<div> | ||
Fallback component | ||
</div> | ||
`); | ||
}); | ||
}); | ||
|
||
test('renders using `createElement` and `Fragment`', async () => { | ||
const container = document.createElement('div'); | ||
|
||
const recommendClient = createMockedRecommendClient([]); | ||
|
||
document.body.appendChild(container); | ||
|
||
frequentlyBoughtTogether<ObjectWithObjectID>({ | ||
container, | ||
recommendClient, | ||
indexName: 'products', | ||
objectIDs: ['D06270-9132-995'], | ||
itemComponent: ({ item, createElement }) => | ||
createElement('div', null, item.objectID), | ||
fallbackComponent: ({ createElement, Fragment }) => | ||
createElement(Fragment, null, 'Fallback component'), | ||
}); | ||
|
||
await waitFor(() => { | ||
expect(within(container).getByText('Fallback component')) | ||
.toMatchInlineSnapshot(` | ||
<div> | ||
Fallback component | ||
</div> | ||
`); | ||
}); | ||
}); | ||
}); | ||
}); |
Oops, something went wrong.