chore: remove mixin test and create test for the new composable

empathyco · May 9, 2024 · 9f324bc · 9f324bc
1 parent 0a6387e
commit 9f324bc
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 109 deletions.
diff --git a/...__tests__/filters-injection-mixin.spec.ts → ...s/__tests__/use-filters-injection.spec.ts b/...__tests__/filters-injection-mixin.spec.ts → ...s/__tests__/use-filters-injection.spec.ts
@@ -1,38 +1,51 @@
+import Vue, { ComponentOptions, defineComponent, PropType, provide, ref } from 'vue';
 import { Filter } from '@empathyco/x-types';
 import { mount, Wrapper } from '@vue/test-utils';
-import Vue, { ComponentOptions } from 'vue';
-import { Component, Prop } from 'vue-property-decorator';
 import {
   createHierarchicalFilter,
   createSimpleFilter
-} from '../../../../../__stubs__/filters-stubs.factory';
-import { XProvide } from '../../../../../components/decorators/injection.decorators';
-import FiltersInjectionMixin from '../filters-injection.mixin';
-
-@Component({
+} from '../../__stubs__/filters-stubs.factory';
+import { useFiltersInjection } from '../use-filters-injection';
+
+const Provider = defineComponent({
+  name: 'Provider',
+  props: {
+    injectedData: {
+      type: Array as PropType<Filter[]>
+    }
+  },
+  setup(props) {
+    const filters = ref(props.injectedData);
+    provide('filters', filters);
+  },
   template: `
     <div>
       <slot />
     </div>
   `
-})
-class Provider extends Vue {
-  @Prop()
-  @XProvide('filters')
-  public injectedData!: any;
-}
+});
 
 const Filters: ComponentOptions<Vue> = {
-  mixins: [FiltersInjectionMixin],
+  props: {
+    filters: Array as PropType<Filter[]>,
+    parentId: {
+      type: String as PropType<Filter['id']>,
+      required: false
+    }
+  },
+  setup(props) {
+    const renderedFilters = useFiltersInjection(props);
+    return { renderedFilters };
+  },
   template: `
     <div>
     <li v-for="filter of renderedFilters" :key="filter.id">{{ filter.id }}</li>
     </div>
   `
 };
 
-describe('test filters injection mixin', () => {
-  function renderFiltersMixin({
+describe('test filters injection composable', () => {
+  function renderFiltersComposable({
     propFilters,
     injectedFilters,
     parentId
@@ -76,7 +89,7 @@ describe('test filters injection mixin', () => {
     const whiteFilter = createSimpleFilter('color', 'white');
     const blackFilter = createSimpleFilter('color', 'black');
     const blueFilter = createSimpleFilter('color', 'blue');
-    const { setPropFilters, getRenderedFilterIds } = renderFiltersMixin({
+    const { setPropFilters, getRenderedFilterIds } = renderFiltersComposable({
       propFilters: [whiteFilter, blackFilter]
     });
     let renderedIds = getRenderedFilterIds();
@@ -96,7 +109,7 @@ describe('test filters injection mixin', () => {
     const whiteFilter = createSimpleFilter('color', 'white');
     const blackFilter = createSimpleFilter('color', 'black');
     const blueFilter = createSimpleFilter('color', 'blue');
-    const { getRenderedFilterIds } = renderFiltersMixin({
+    const { getRenderedFilterIds } = renderFiltersComposable({
       injectedFilters: [whiteFilter, blackFilter, blueFilter]
     });
     const renderedIds = getRenderedFilterIds();
@@ -110,7 +123,7 @@ describe('test filters injection mixin', () => {
     const whiteFilter = createSimpleFilter('color', 'white');
     const blackFilter = createSimpleFilter('color', 'black');
     const blueFilter = createSimpleFilter('color', 'blue');
-    const { getRenderedFilterIds } = renderFiltersMixin({
+    const { getRenderedFilterIds } = renderFiltersComposable({
       propFilters: [whiteFilter, blackFilter],
       injectedFilters: [blueFilter]
     });
@@ -137,7 +150,7 @@ describe('test filters injection mixin', () => {
     categoryShirts.parentId = categoryJeans.parentId = categoryMen.id;
     const categoryWomen = createHierarchicalFilter('category', 'women', false);
 
-    const { getRenderedFilterIds } = renderFiltersMixin({
+    const { getRenderedFilterIds } = renderFiltersComposable({
       propFilters: [categoryShirts, categoryJeans, categoryMen, categoryWomen]
     });
     const renderedIds = getRenderedFilterIds();
@@ -164,7 +177,7 @@ describe('test filters injection mixin', () => {
     categoryShirts.parentId = categoryJeans.parentId = categoryMen.id;
     const categoryWomen = createHierarchicalFilter('category', 'women', false);
 
-    const { getRenderedFilterIds } = renderFiltersMixin({
+    const { getRenderedFilterIds } = renderFiltersComposable({
       propFilters: [categoryShirts, categoryJeans, categoryMen, categoryWomen],
       parentId: categoryMen.id
     });

diff --git a/packages/x-components/src/x-modules/facets/components/lists/filters-injection.mixin.ts b/packages/x-components/src/x-modules/facets/components/lists/filters-injection.mixin.ts