diff --git a/packages/x-components/src/x-modules/facets/components/filters/__tests__/renderless-filter.spec.ts b/packages/x-components/src/x-modules/facets/components/filters/__tests__/renderless-filter.spec.ts index 8689b6316d..082282d26b 100644 --- a/packages/x-components/src/x-modules/facets/components/filters/__tests__/renderless-filter.spec.ts +++ b/packages/x-components/src/x-modules/facets/components/filters/__tests__/renderless-filter.spec.ts @@ -1,18 +1,17 @@ -import { BooleanFilter } from '@empathyco/x-types'; -import { mount, Wrapper } from '@vue/test-utils'; -import Vue from 'vue'; +import { mount } from '@vue/test-utils'; +import { nextTick, reactive } from 'vue'; import { getXComponentXModuleName, isXComponent } from '../../../../../components'; -import { XEventsTypes } from '../../../../../wiring/events.types'; import { createSimpleFilter, getSimpleFilterStub } from '../../../../../__stubs__/filters-stubs.factory'; -import { getDataTestSelector } from '../../../../../__tests__/utils'; +import { getDataTestSelector, installNewXPlugin } from '../../../../../__tests__/utils'; import RenderlessFilter from '../renderless-filter.vue'; +import { XPlugin } from '../../../../../plugins/x-plugin'; function renderComponent({ - filter = createSimpleFilter('category', 'food'), - clickEvents, + filter = reactive(createSimpleFilter('category', 'food')), + clickEvents = {}, template = ` ` -}: RenderOptions = {}): RenderAPI { - Vue.observable(filter); - const emit = jest.fn(); +} = {}) { + installNewXPlugin(); + + //Vue.observable(filter); + const wrapper = mount( { components: { RenderlessFilter }, @@ -41,11 +42,6 @@ function renderComponent({ propsData: { filter, clickEvents - }, - mocks: { - $x: { - emit - } } } ); @@ -54,14 +50,14 @@ function renderComponent({ return { wrapper: renderlessFilterWrapper, - emit, + emit: jest.spyOn(XPlugin.bus, 'emit'), filter, - clickFilter() { + clickFilter: () => { renderlessFilterWrapper.trigger('click'); }, - async selectFilter() { + selectFilter: async () => { filter.selected = true; - await Vue.nextTick(); + await nextTick(); } }; } @@ -80,7 +76,7 @@ describe('testing Renderless Filter component', () => { }); it('emits UserClickedAFilter and other custom events when clicked', () => { - const filter = getSimpleFilterStub(); + const filter = reactive(getSimpleFilterStub()); const { wrapper, clickFilter, emit } = renderComponent({ filter, clickEvents: { @@ -117,39 +113,14 @@ describe('testing Renderless Filter component', () => { }); it('disables the filter when it has no results', async () => { - const filter = createSimpleFilter('category', 'men', false); + const filter = reactive(createSimpleFilter('category', 'men', false)); const { wrapper } = renderComponent({ filter }); expect(wrapper.attributes('disabled')).toBeUndefined(); filter.totalResults = 0; - await wrapper.vm.$nextTick(); + await nextTick(); expect(wrapper.attributes('disabled')).toBe('disabled'); }); }); - -interface RenderOptions { - /** The template containing the {@link RenderlessFilter} component to render. */ - template?: string; - /** The filter data. Passed as prop to the {@link RenderlessFilter} component. */ - filter?: BooleanFilter; - /** - * Additional events to emit when the filter is clicked. - * Passed as prop to the {@link RenderlessFilter} component. - */ - clickEvents?: Partial; -} - -interface RenderAPI { - /** Wrapper of the {@link RenderlessFilter} component. */ - wrapper: Wrapper; - /** Mock of the {@link XBus.emit} function. */ - emit: jest.Mock; - /** The rendered filter data. */ - filter: BooleanFilter; - /** Fakes a click on the filter component. */ - clickFilter: () => void; - /** Sets the {@link RenderAPI.filter} `selected` property to `true`. */ - selectFilter: () => Promise; -} diff --git a/packages/x-components/src/x-modules/facets/components/filters/__tests__/simple-filter.spec.ts b/packages/x-components/src/x-modules/facets/components/filters/__tests__/simple-filter.spec.ts index 8c1ff466d2..ee536e26f2 100644 --- a/packages/x-components/src/x-modules/facets/components/filters/__tests__/simple-filter.spec.ts +++ b/packages/x-components/src/x-modules/facets/components/filters/__tests__/simple-filter.spec.ts @@ -1,6 +1,6 @@ import { SimpleFilter as SimpleFilterModel } from '@empathyco/x-types'; import { mount, Wrapper } from '@vue/test-utils'; -import Vue from 'vue'; +import Vue, { nextTick } from 'vue'; import { createSimpleFilter } from '../../../../../__stubs__/filters-stubs.factory'; import { getDataTestSelector } from '../../../../../__tests__/utils'; import { getXComponentXModuleName, isXComponent } from '../../../../../components'; @@ -44,11 +44,11 @@ function renderSimpleFilter({ }, selectFilter() { filter.selected = true; - return Vue.nextTick(); + return nextTick(); }, updateFilter(newFields) { Object.assign(filter, newFields); - return Vue.nextTick(); + return nextTick(); } }; }