Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

test(menu-select): common test suite #5874

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
+430 −268
Open

test(menu-select): common test suite #5874

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7b29ece
test(menu-select): common test suite
aymeric-giraudet Sep 29, 2023
66d727d
fix types and vue v3
aymeric-giraudet Jun 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
16 changes: 16 additions & 0 deletions packages/instantsearch.js/src/__tests__/common-widgets.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ import {
trendingItems,
lookingSimilar,
poweredBy,
menuSelect,
} from '../widgets';

import type { TestOptionsMap, TestSetupsMap } from '@instantsearch/tests';
Expand Down Expand Up @@ -583,6 +584,20 @@ const testSetups: TestSetupsMap<TestSuites> = {
flavor: 'instantsearch.js',
};
},
createMenuSelectWidgetTests({ instantSearchOptions, widgetParams }) {
instantsearch(instantSearchOptions)
.addWidgets([
menuSelect({
container: document.body.appendChild(document.createElement('div')),
...widgetParams,
}),
])
.start();

return {
flavor: 'instantsearch.js',
};
},
};

const testOptions: TestOptionsMap<TestSuites> = {
Expand Down Expand Up @@ -613,6 +628,7 @@ const testOptions: TestOptionsMap<TestSuites> = {
createTrendingItemsWidgetTests: undefined,
createLookingSimilarWidgetTests: undefined,
createPoweredByWidgetTests: undefined,
createMenuSelectWidgetTests: undefined,
};

describe('Common widget tests (InstantSearch.js)', () => {
Expand Down
69 changes: 0 additions & 69 deletions packages/instantsearch.js/src/widgets/menu-select/__tests__/menu-select.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,75 +19,6 @@ beforeEach(() => {

describe('menuSelect', () => {
describe('templates', () => {
test('renders default templates', async () => {
const container = document.createElement('div');
const searchClient = createMockedSearchClient();

const search = instantsearch({
indexName: 'indexName',
searchClient,
initialUiState: {
indexName: {
menu: {
brand: 'Apple',
},
},
},
});

search.addWidgets([
menuSelect({ container, attribute: 'brand', limit: 3 }),
]);

// @MAJOR Once Hogan.js and string-based templates are removed,
// `search.start()` can be moved to the test body and the following
// assertion can go away.
expect(async () => {
search.start();

await wait(0);
}).not.toWarnDev();

await wait(0);

expect(container).toMatchInlineSnapshot(`
<div>
<div
class="ais-MenuSelect"
>
<select
class="ais-MenuSelect-select"
>
<option
class="ais-MenuSelect-option"
value=""
>
See all
</option>
<option
class="ais-MenuSelect-option"
value="Apple"
>
Apple (442)
</option>
<option
class="ais-MenuSelect-option"
value="Canon"
>
Canon (287)
</option>
<option
class="ais-MenuSelect-option"
value="Dell"
>
Dell (174)
</option>
</select>
</div>
</div>
`);
});

test('renders with templates using `html`', async () => {
const container = document.createElement('div');
const searchClient = createMockedSearchClient();
Expand Down
9 changes: 9 additions & 0 deletions packages/react-instantsearch/src/__tests__/common-widgets.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -369,6 +369,9 @@ const testSetups: TestSetupsMap<TestSuites> = {
flavor: 'react-instantsearch',
};
},
createMenuSelectWidgetTests() {
throw new Error('MenuSelect is not supported in React InstantSearch');
},
};

const testOptions: TestOptionsMap<TestSuites> = {
Expand Down Expand Up @@ -405,6 +408,12 @@ const testOptions: TestOptionsMap<TestSuites> = {
createTrendingItemsWidgetTests: { act },
createLookingSimilarWidgetTests: { act },
createPoweredByWidgetTests: { act },
createMenuSelectWidgetTests: {
act,
skippedTests: {
'MenuSelect widget common tests': true,
},
},
};

/**
Expand Down
16 changes: 16 additions & 0 deletions packages/vue-instantsearch/src/__tests__/common-widgets.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import {
AisRatingMenu,
AisNumericMenu,
AisPoweredBy,
AisMenuSelect,
} from '../instantsearch';
import { renderCompat } from '../util/vue-compat';

Expand Down Expand Up @@ -538,6 +539,21 @@ const testSetups = {
flavor: 'vue-instantsearch',
};
},
async createMenuSelectWidgetTests({ instantSearchOptions, widgetParams }) {
mountApp(
{
render: renderCompat((h) =>
h(AisInstantSearch, { props: instantSearchOptions }, [
h(AisMenuSelect, { props: widgetParams }),
h(GlobalErrorSwallower),
])
),
},
document.body.appendChild(document.createElement('div'))
);

await nextTick();
},
};

const testOptions = {
Expand Down
160 changes: 0 additions & 160 deletions packages/vue-instantsearch/src/components/__tests__/MenuSelect.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,92 +23,7 @@ const defaultProps = {
attribute: 'brand',
};

it('accepts an attribute prop', () => {
__setState({
...defaultState,
});

const props = {
...defaultProps,
};

const wrapper = mount(MenuSelect, {
propsData: props,
});

expect(wrapper.vm.widgetParams.attribute).toBe('brand');
});

it('accepts a limit prop', () => {
__setState({
...defaultState,
});

const props = {
...defaultProps,
limit: 5,
};

const wrapper = mount(MenuSelect, {
propsData: props,
});

expect(wrapper.vm.widgetParams.limit).toBe(5);
});

it('accepts a sortBy prop', () => {
__setState({
...defaultState,
});

const props = {
...defaultProps,
sortBy: ['name:desc'],
};

const wrapper = mount(MenuSelect, {
propsData: props,
});

expect(wrapper.vm.widgetParams.sortBy).toEqual(['name:desc']);
});

it('accepts a transformItems prop', () => {
__setState({
...defaultState,
});

const transformItems = () => {};

const props = {
...defaultProps,
transformItems,
};

const wrapper = mount(MenuSelect, {
propsData: props,
});

expect(wrapper.vm.widgetParams.transformItems).toBe(transformItems);
});

describe('default render', () => {
it('renders correctly', () => {
__setState({
...defaultState,
});

const props = {
...defaultProps,
};

const wrapper = mount(MenuSelect, {
propsData: props,
});

expect(wrapper.html()).toMatchSnapshot();
});

it('renders correctly with custom label', () => {
__setState({
...defaultState,
Expand All @@ -129,81 +44,6 @@ describe('default render', () => {
expect(wrapper.find('option').html()).toContain('None');
expect(wrapper.html()).toMatchSnapshot();
});

it('renders correctly with a selected value', () => {
__setState({
...defaultState,
items: [
{ label: 'Apple', value: 'Apple', isRefined: false, count: 50 },
{ label: 'Samsung', value: 'Samsung', isRefined: true, count: 20 },
{ label: 'Sony', value: 'Sony', isRefined: false, count: 15 },
],
});

const props = {
...defaultProps,
};

const wrapper = mount(MenuSelect, {
propsData: props,
});

const selected = wrapper.find('[value="Samsung"]');
const options = wrapper.findAll('option:not([value="Samsung"])');

expect(selected.element.selected).toBe(true);

for (let i = 0; i < options.length; i++) {
expect((options[i] || options.at(i)).element.selected).toBe(false);
}
});

it('renders correctly without refinements', () => {
__setState({
...defaultState,
canRefine: false,
items: [],
});

const props = {
...defaultProps,
};

const wrapper = mount(MenuSelect, {
propsData: props,
});

expect(wrapper.html()).toMatchSnapshot();
});

it('calls refine on select change', async () => {
const refine = jest.fn();

__setState({
...defaultState,
refine,
});

const props = {
...defaultProps,
};

const wrapper = mount(MenuSelect, {
propsData: props,
});

expect(refine).not.toHaveBeenCalled();

const select = wrapper.find('select');

// Simulate the change
select.element.value = 'Apple';

await select.trigger('change');

expect(refine).toHaveBeenCalledTimes(1);
expect(refine).toHaveBeenCalledWith('Apple');
});
});

it('exposes send-event method for insights middleware', async () => {
Expand Down
39 changes: 0 additions & 39 deletions packages/vue-instantsearch/src/components/__tests__/__snapshots__/MenuSelect.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,33 +62,6 @@ exports[`custom item slot renders correctly 1`] = `
</div>
`;

exports[`default render renders correctly 1`] = `
<div class="ais-MenuSelect">
<select class="ais-MenuSelect-select">
<option class="ais-MenuSelect-option"
value
>
See all
</option>
<option class="ais-MenuSelect-option"
value="Apple"
>
Apple (50)
</option>
<option class="ais-MenuSelect-option"
value="Samsung"
>
Samsung (20)
</option>
<option class="ais-MenuSelect-option"
value="Sony"
>
Sony (15)
</option>
</select>
</div>
`;

exports[`default render renders correctly with custom label 1`] = `
<div class="ais-MenuSelect">
<select class="ais-MenuSelect-select">
Expand Down Expand Up @@ -117,15 +90,3 @@ exports[`default render renders correctly with custom label 1`] = `
</select>
</div>
`;

exports[`default render renders correctly without refinements 1`] = `
<div class="ais-MenuSelect ais-MenuSelect--noRefinement">
<select class="ais-MenuSelect-select">
<option class="ais-MenuSelect-option"
value
>
See all
</option>
</select>
</div>
`;
1 change: 1 addition & 0 deletions tests/common/widgets/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,4 @@ export * from './frequently-bought-together';
export * from './trending-items';
export * from './looking-similar';
export * from './powered-by';
export * from './menu-select';