Skip to content

Commit

Permalink
test: fix resultVariantProviderAndSelector test
Browse files Browse the repository at this point in the history
  • Loading branch information
@albertjcuac
albertjcuac committed Aug 14, 2024
1 parent 310261d commit 914c266
Showing 1 changed file with 42 additions and 44 deletions.
86 changes: 42 additions & 44 deletions ...-components/src/components/result/__tests__/result-variants-provider-and-selector.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { createResultStub } from '../../../__stubs__/index';
import { findTestDataById, getDataTestSelector, installNewXPlugin } from '../../../__tests__/utils';
import ResultVariantsProvider from '../result-variants-provider.vue';
import ResultVariantSelector from '../result-variant-selector.vue';
import { XPlugin } from '../../../plugins/index';
import { XPlugin } from '../../../plugins';

const variants = [
{
Expand Down Expand Up @@ -35,10 +35,8 @@ const render = ({
result = {},
autoSelectDepth = Number.POSITIVE_INFINITY
} = {}) => {
installNewXPlugin();
const emitSpy = jest.spyOn(XPlugin.bus, 'emit');

const wrapper = mount({
global: { plugins: [installNewXPlugin()] },
template: `
<ResultVariantsProvider
:result="result"
Expand All @@ -58,15 +56,15 @@ const render = ({

return {
wrapper: wrapper.findComponent(ResultVariantsProvider),
emitSpy,
emitSpy: jest.spyOn(XPlugin.bus, 'emit'),
findSelectorButtonByLevel: (level: number) =>
findTestDataById(wrapper, 'variants-list')
.at(level)
.findAll(getDataTestSelector('variant-button')),
?.findAll(getDataTestSelector('variant-button')),
findSelectorItemByLevel: (level: number) =>
findTestDataById(wrapper, 'variants-list')
.at(level)
.findAll(getDataTestSelector('variant-item')),
?.findAll(getDataTestSelector('variant-item')),
setResult: (result: Result) => {
(wrapper.vm as any).result = result;
return nextTick();
Expand Down Expand Up @@ -110,25 +108,25 @@ describe('results with variants', () => {
expect(wrapper.find(getDataTestSelector('result-name')).text()).toEqual('jacket');
expect(wrapper.find(getDataTestSelector('result-image')).text()).toEqual('');

await firstLevelVariantButtons.at(0).trigger('click');
await firstLevelVariantButtons?.at(0)?.trigger('click');

expect(wrapper.find(getDataTestSelector('result-name')).text()).toEqual('red jacket');
expect(wrapper.find(getDataTestSelector('result-image')).text()).toEqual('red-jacket-image');

const secondLevelVariantButtons = findSelectorButtonByLevel(1);

await secondLevelVariantButtons.at(1).trigger('click');
await secondLevelVariantButtons?.at(1)?.trigger('click');

expect(wrapper.find(getDataTestSelector('result-name')).text()).toEqual('red jacket L');
expect(wrapper.find(getDataTestSelector('result-image')).text()).toEqual('red-jacket-image');

// It won't deselect the child variant if the parent is clicked.

await firstLevelVariantButtons.at(0).trigger('click');
await firstLevelVariantButtons?.at(0)?.trigger('click');

expect(wrapper.find(getDataTestSelector('result-name')).text()).toEqual('red jacket L');

await firstLevelVariantButtons.at(1).trigger('click');
await firstLevelVariantButtons?.at(1)?.trigger('click');

expect(wrapper.find(getDataTestSelector('result-name')).text()).toEqual('blue jacket');
expect(wrapper.find(getDataTestSelector('result-image')).text()).toEqual('');
Expand Down Expand Up @@ -180,11 +178,11 @@ describe('results with variants', () => {
result
});

const firstVariant = findSelectorItemByLevel(0).at(0);
const secondSelectorFirstVariant = findSelectorItemByLevel(1).at(0);
const firstVariant = findSelectorItemByLevel(0)?.at(0);
const secondSelectorFirstVariant = findSelectorItemByLevel(1)?.at(0);

expect(firstVariant.element.className).toContain('--is-selected');
expect(secondSelectorFirstVariant.element.className).toContain('--is-selected');
expect(firstVariant?.element.className).toContain('--is-selected');
expect(secondSelectorFirstVariant?.element.className).toContain('--is-selected');
});

it('selects variants on init up to the level set in the autoSelectDepth prop', () => {
Expand All @@ -198,11 +196,11 @@ describe('results with variants', () => {
autoSelectDepth: 1
});

const firstVariant = findSelectorItemByLevel(0).at(0);
const secondSelectorFirstVariant = findSelectorItemByLevel(1).at(0);
const firstVariant = findSelectorItemByLevel(0)?.at(0);
const secondSelectorFirstVariant = findSelectorItemByLevel(1)?.at(0);

expect(firstVariant.element.className).toContain('--is-selected');
expect(secondSelectorFirstVariant.element.className).not.toContain('--is-selected');
expect(firstVariant?.element.className).toContain('--is-selected');
expect(secondSelectorFirstVariant?.element.className).not.toContain('--is-selected');
});

it('wont select any variant by default if autoSelectDepth is 0', () => {
Expand Down Expand Up @@ -257,10 +255,10 @@ describe('results with variants', () => {

await firstVariantButton.trigger('click');

expect(variantWrappers.at(0).element).toHaveClass(className);
variantWrappers.wrappers
.slice(1)
.forEach(wrapper => expect(wrapper.element).not.toHaveClass(className));
expect(variantWrappers.at(0)?.element).toHaveClass(className);
variantWrappers.slice(1).forEach(wrapper => {
expect(wrapper.element.classList.contains(className)).toBe(false);
});
});

it('renders all the variants of each level', async () => {
Expand All @@ -286,26 +284,26 @@ describe('results with variants', () => {

const firstLevelVariantButtons = findSelectorButtonByLevel(0);

expect(firstLevelVariantButtons).toHaveLength(2);
expect(firstLevelVariantButtons.at(0).text()).toEqual('red jacket');
expect(firstLevelVariantButtons.at(1).text()).toEqual('blue jacket');
expect(firstLevelVariantButtons)?.toHaveLength(2);
expect(firstLevelVariantButtons?.at(0)?.text()).toEqual('red jacket');
expect(firstLevelVariantButtons?.at(1)?.text()).toEqual('blue jacket');

await firstLevelVariantButtons.at(1).trigger('click');
await firstLevelVariantButtons?.at(1)?.trigger('click');

const secondLevelVariantButtons = findSelectorButtonByLevel(1);

expect(secondLevelVariantButtons).toHaveLength(2);
expect(secondLevelVariantButtons.at(0).text()).toEqual('blue jacket L');
expect(secondLevelVariantButtons.at(1).text()).toEqual('blue jacket S');
expect(secondLevelVariantButtons?.at(0)?.text()).toEqual('blue jacket L');
expect(secondLevelVariantButtons?.at(1)?.text()).toEqual('blue jacket S');

await secondLevelVariantButtons.at(0).trigger('click');
await secondLevelVariantButtons?.at(0)?.trigger('click');

const thirdLevelVariantButtons = findSelectorButtonByLevel(2);

expect(thirdLevelVariantButtons).toHaveLength(3);
expect(thirdLevelVariantButtons.at(0).text()).toEqual('blue jacket L1');
expect(thirdLevelVariantButtons.at(1).text()).toEqual('blue jacket L2');
expect(thirdLevelVariantButtons.at(1).text()).toEqual('blue jacket L2');
expect(thirdLevelVariantButtons?.at(0)?.text()).toEqual('blue jacket L1');
expect(thirdLevelVariantButtons?.at(1)?.text()).toEqual('blue jacket L2');
expect(thirdLevelVariantButtons?.at(1)?.text()).toEqual('blue jacket L2');
});

it('wont render if no result is injected', () => {
Expand Down Expand Up @@ -349,12 +347,12 @@ describe('results with variants', () => {

expect(variants).toHaveLength(2);

expect(variants.at(0).text()).toEqual('red jacket');
expect(variants.at(1).text()).toEqual('blue jacket');
expect(variants.at(0)?.text()).toEqual('red jacket');
expect(variants.at(1)?.text()).toEqual('blue jacket');

await variants.at(0).trigger('click');
await variants.at(0)?.trigger('click');

expect(variants.at(0).element).toHaveClass('isSelected');
expect(variants.at(0)?.element).toHaveClass('isSelected');
});

it('exposes variant, isSelected and selectVariant in the variant slot', async () => {
Expand All @@ -375,11 +373,11 @@ describe('results with variants', () => {

expect(variants).toHaveLength(2);

expect(variants.at(0).text()).toEqual('red jacket');
expect(variants.at(1).text()).toEqual('blue jacket');
expect(variants.at(0)?.text()).toEqual('red jacket');
expect(variants.at(1)?.text()).toEqual('blue jacket');

await variants.at(1).trigger('click');
expect(variants.at(1).element).toHaveClass('isSelected');
await variants.at(1)?.trigger('click');
expect(variants.at(1)?.element).toHaveClass('isSelected');
});

it('exposes variant and isSelected in the variant-content slot', async () => {
Expand All @@ -395,10 +393,10 @@ describe('results with variants', () => {

expect(variants).toHaveLength(2);

await variants.at(0).trigger('click');
await variants.at(0)?.trigger('click');

expect(variants.at(0).text()).toContain('red jacket SELECTED!');
expect(variants.at(1).text()).toEqual('blue jacket');
expect(variants.at(0)?.text()).toContain('red jacket SELECTED!');
expect(variants.at(1)?.text()).toEqual('blue jacket');
});
});
});

0 comments on commit 914c266

Please sign in to comment.