From bfc9ec80d771ea11f4bd8bbfeadd97627e4b9447 Mon Sep 17 00:00:00 2001
From: Andrea Delgado <114981520+andreadlgdo@users.noreply.github.com>
Date: Wed, 19 Jun 2024 11:19:26 +0200
Subject: [PATCH 01/15] feat: migrate components to use composition API

---
 .../components/filters/renderless-filter.vue  | 131 +++++++++---------
 .../components/filters/simple-filter.vue      |  88 ++++++------
 2 files changed, 111 insertions(+), 108 deletions(-)

diff --git a/packages/x-components/src/x-modules/facets/components/filters/renderless-filter.vue b/packages/x-components/src/x-modules/facets/components/filters/renderless-filter.vue
index f3096c30d0..bcdc45b5f9 100644
--- a/packages/x-components/src/x-modules/facets/components/filters/renderless-filter.vue
+++ b/packages/x-components/src/x-modules/facets/components/filters/renderless-filter.vue
@@ -1,11 +1,9 @@
 <script lang="ts">
-  import Vue, { CreateElement, VNode } from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
+  import { computed, defineComponent, h, PropType, ref } from 'vue';
   import { BooleanFilter } from '@empathyco/x-types';
-  import { xComponentMixin } from '../../../../components';
-  import { VueCSSClasses } from '../../../../utils/types';
   import { XEvent, XEventsTypes } from '../../../../wiring/events.types';
   import { facetsXModule } from '../../x-module';
+  import { use$x } from '../../../../composables/use-$x';
 
   /**
    * Renders default slot content. It binds to the default slot a
@@ -18,74 +16,77 @@
    *
    * @public
    */
-  @Component({
-    mixins: [xComponentMixin(facetsXModule)]
-  })
-  export default class RenderlessFilter extends Vue {
-    /** The filter data to render. */
-    @Prop({ required: true })
-    public filter!: BooleanFilter;
-
-    /** Additional events with its payload to emit when the filter is clicked. */
-    @Prop()
-    public clickEvents?: Partial<XEventsTypes>;
+  export default defineComponent({
+    name: 'RenderlessFilter',
+    module: facetsXModule.name,
+    props: {
+      /** The filter data to render. */
+      filter: {
+        type: Object as PropType<BooleanFilter>,
+        required: true
+      },
+      /** Additional events with its payload to emit when the filter is clicked. */
+      clickEvents: Object as PropType<Partial<XEventsTypes>>
+    },
+    setup: function (props, { slots }) {
+      const $x = use$x();
 
-    /**
-     * The events that will be emitted when the filter is clicked.
-     *
-     * @returns The events to be emitted when the filter is clicked.
-     * @internal
-     */
-    protected get events(): Partial<XEventsTypes> {
-      return {
-        UserClickedAFilter: this.filter,
-        ...this.clickEvents
-      };
-    }
+      const rootElement = ref<HTMLElement | undefined>();
 
-    /**
-     * The events to emit to the bus.
-     *
-     * @internal
-     */
-    protected emitEvents(): void {
-      Object.entries(this.events).forEach(([event, payload]) => {
-        this.$x.emit(event as XEvent, payload, { target: this.$el as HTMLElement });
+      /**
+       * The events that will be emitted when the filter is clicked.
+       *
+       * @returns The events to be emitted when the filter is clicked.
+       * @internal
+       */
+      const events = computed(() => {
+        return {
+          UserClickedAFilter: props.filter,
+          ...props.clickEvents
+        };
       });
-    }
 
-    /**
-     * Returns `true` when the filter should be disabled.
-     *
-     * @returns `true` if the filter should be disabled.
-     * @internal
-     */
-    protected get isDisabled(): boolean {
-      return this.filter.totalResults === 0;
-    }
+      /**
+       * Returns `true` when the filter should be disabled.
+       *
+       * @returns `true` if the filter should be disabled.
+       * @internal
+       */
+      const isDisabled = computed(() => props.filter.totalResults === 0);
 
-    /**
-     * Dynamic CSS classes to apply to the component.
-     *
-     * @returns The dynamic CSS classes to apply to the component.
-     * @internal
-     */
-    protected get cssClasses(): VueCSSClasses {
-      return ['x-facet-filter', { 'x-selected': this.filter.selected }];
-    }
+      /**
+       * Dynamic CSS classes to apply to the component.
+       *
+       * @returns The dynamic CSS classes to apply to the component.
+       * @internal
+       */
+      const cssClasses = computed(() => {
+        return ['x-facet-filter', { 'x-selected': props.filter.selected }];
+      });
 
-    render(h: CreateElement): VNode {
-      return (
-        this.$scopedSlots.default?.({
-          filter: this.filter,
-          // eslint-disable-next-line @typescript-eslint/unbound-method
-          clickFilter: this.emitEvents,
-          cssClasses: this.cssClasses,
-          isDisabled: this.isDisabled
-        })?.[0] ?? h()
-      );
+      /**
+       * The events to emit to the bus.
+       *
+       * @internal
+       */
+      const emitEvents = () => {
+        Object.entries(events.value).forEach(([event, payload]) => {
+          $x.emit(event as XEvent, payload, { target: rootElement.value as HTMLElement });
+        });
+      };
+
+      return () => {
+        return (
+          slots.default?.({
+            filter: props.filter,
+            clickFilter: emitEvents,
+            cssClasses: cssClasses.value,
+            isDisabled: isDisabled.value
+          })?.[0] ?? h()
+        );
+      };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">
diff --git a/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue b/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue
index 83646d0b6c..6ef57fa5e9 100644
--- a/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue
+++ b/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue
@@ -2,7 +2,7 @@
   <RenderlessFilter
     v-slot="{ filter, clickFilter, cssClasses, isDisabled }"
     :class="cssClasses"
-    :clickEvents="_clickEvents"
+    :clickEvents="clickEventsEmit"
     :filter="filter"
     class="x-simple-filter"
   >
@@ -43,61 +43,63 @@
 
 <script lang="ts">
   import { SimpleFilter as SimpleFilterModel } from '@empathyco/x-types';
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
-  import { xComponentMixin } from '../../../../components';
-  import { VueCSSClasses } from '../../../../utils/types';
+  import { computed, defineComponent, PropType } from 'vue';
   import { XEventsTypes } from '../../../../wiring/events.types';
   import { facetsXModule } from '../../x-module';
-  import RenderlessFilter from './renderless-filter.vue';
 
   /**
    * Renders a simple filter, emitting the needed events when clicked.
    *
    * @public
    */
-  @Component({
-    components: { RenderlessFilter },
-    mixins: [xComponentMixin(facetsXModule)]
-  })
-  export default class SimpleFilter extends Vue {
-    /** The filter data to render. */
-    @Prop({ required: true })
-    public filter!: SimpleFilterModel;
-
-    /**
-     * Additional events, with their payload, to emit when the filter is clicked.
-     *
-     * @public
-     */
-    @Prop()
-    public clickEvents?: Partial<XEventsTypes>;
+  export default defineComponent({
+    name: 'SimpleFilter',
+    xModule: facetsXModule.name,
+    props: {
+      /** The filter data to render. */
+      filter: {
+        type: Object as PropType<SimpleFilterModel>,
+        required: true
+      },
+      /**
+       * Additional events, with their payload, to emit when the filter is clicked.
+       *
+       * @public
+       */
+      clickEvents: Object as PropType<Partial<XEventsTypes>>
+    },
+    setup: function (props) {
+      /**
+       * The {@link XEventsTypes} to emit.
+       *
+       * @returns The events to emit when clicked.
+       * @internal
+       */
+      const clickEventsEmit = computed(() => {
+        return {
+          UserClickedASimpleFilter: props.filter,
+          ...props.clickEvents
+        };
+      });
 
-    /**
-     * The {@link XEventsTypes} to emit.
-     *
-     * @returns The events to emit when clicked.
-     * @internal
-     */
-    protected get _clickEvents(): Partial<XEventsTypes> {
-      return {
-        UserClickedASimpleFilter: this.filter,
-        ...this.clickEvents
-      };
-    }
+      /**
+       * Dynamic CSS classes to apply to the component.
+       *
+       * @returns The dynamic CSS classes to apply to the component.
+       * @internal
+       */
+      const cssClasses = computed(() => {
+        return {
+          'x-simple-filter--is-selected': props.filter.selected
+        };
+      });
 
-    /**
-     * Dynamic CSS classes to apply to the component.
-     *
-     * @returns The dynamic CSS classes to apply to the component.
-     * @internal
-     */
-    protected get cssClasses(): VueCSSClasses {
       return {
-        'x-simple-filter--is-selected': this.filter.selected
+        clickEventsEmit,
+        cssClasses
       };
     }
-  }
+  });
 </script>
 
 <docs lang="mdx">

From c22bd1bd2423d9dca1912f2f2910a0593bcf7c62 Mon Sep 17 00:00:00 2001
From: Andrea Delgado <114981520+andreadlgdo@users.noreply.github.com>
Date: Wed, 19 Jun 2024 11:21:01 +0200
Subject: [PATCH 02/15] feat: add to playground

---
 packages/_vue3-migration-test/src/router.ts   |  6 ++++++
 .../src/x-modules/facets/components/index.ts  |  1 +
 .../facets/components/test-filters.vue        | 21 +++++++++++++++++++
 3 files changed, 28 insertions(+)
 create mode 100644 packages/_vue3-migration-test/src/x-modules/facets/components/test-filters.vue

diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index ce5c957d29..754920da15 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -10,6 +10,7 @@ import {
   TestCrossFade,
   TestElementsList,
   TestFacets,
+  TestFilters,
   TestFade,
   TestScroll,
   TestSortDropdown,
@@ -100,6 +101,11 @@ const routes = [
     name: 'Facets',
     component: TestFacets
   },
+  {
+    path: '/filters',
+    name: 'Filters',
+    component: TestFilters
+  },
   {
     path: '/scroll',
     name: 'Scroll',
diff --git a/packages/_vue3-migration-test/src/x-modules/facets/components/index.ts b/packages/_vue3-migration-test/src/x-modules/facets/components/index.ts
index 82e5a09c6f..f996c15827 100644
--- a/packages/_vue3-migration-test/src/x-modules/facets/components/index.ts
+++ b/packages/_vue3-migration-test/src/x-modules/facets/components/index.ts
@@ -1 +1,2 @@
 export { default as TestFacets } from './test-facets.vue';
+export { default as TestFilters } from './test-filters.vue';
diff --git a/packages/_vue3-migration-test/src/x-modules/facets/components/test-filters.vue b/packages/_vue3-migration-test/src/x-modules/facets/components/test-filters.vue
new file mode 100644
index 0000000000..7bf05f3e52
--- /dev/null
+++ b/packages/_vue3-migration-test/src/x-modules/facets/components/test-filters.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <h2>Simple Filter</h2>
+    <SimpleFilter :filter="filter" />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { SimpleFilter as SimpleFilterModel } from '@empathyco/x-types';
+  import { ref, Ref } from 'vue';
+  import SimpleFilter from '../../../../../x-components/src/x-modules/facets/components/filters/simple-filter.vue';
+
+  const filter: Ref<SimpleFilterModel> = ref({
+    modelName: 'SimpleFilter',
+    label: 'My Filter',
+    totalResults: 10,
+    facetId: 'facet1',
+    id: 'filter1',
+    selected: false
+  });
+</script>

From c9df8e257aef64d989e5e6c2333216c53586d4ed Mon Sep 17 00:00:00 2001
From: Andrea Delgado <114981520+andreadlgdo@users.noreply.github.com>
Date: Wed, 19 Jun 2024 11:25:15 +0200
Subject: [PATCH 03/15] fix: unit test

---
 .../__tests__/renderless-filter.spec.ts       | 65 +++++--------------
 .../filters/__tests__/simple-filter.spec.ts   |  6 +-
 2 files changed, 21 insertions(+), 50 deletions(-)

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 = `
         <RenderlessFilter
         :filter="filter"
@@ -28,9 +27,11 @@ function renderComponent({
           </button>
         </RenderlessFilter>
       `
-}: 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<XEventsTypes>;
-}
-
-interface RenderAPI {
-  /** Wrapper of the {@link RenderlessFilter} component. */
-  wrapper: Wrapper<Vue>;
-  /** 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<void>;
-}
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();
     }
   };
 }

From 8efce97e1edb415db7162832d5a7f9a462df4775 Mon Sep 17 00:00:00 2001
From: Andrea Delgado <114981520+andreadlgdo@users.noreply.github.com>
Date: Wed, 19 Jun 2024 11:54:23 +0200
Subject: [PATCH 04/15] fix: playground error on console

---
 .../src/x-modules/facets/components/filters/simple-filter.vue   | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue b/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue
index 6ef57fa5e9..fdf5cfa103 100644
--- a/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue
+++ b/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue
@@ -46,6 +46,7 @@
   import { computed, defineComponent, PropType } from 'vue';
   import { XEventsTypes } from '../../../../wiring/events.types';
   import { facetsXModule } from '../../x-module';
+  import RenderlessFilter from './renderless-filter.vue';
 
   /**
    * Renders a simple filter, emitting the needed events when clicked.
@@ -55,6 +56,7 @@
   export default defineComponent({
     name: 'SimpleFilter',
     xModule: facetsXModule.name,
+    components: { RenderlessFilter },
     props: {
       /** The filter data to render. */
       filter: {

From c5d06297a840d230e4eb24c63ff7807689473aa5 Mon Sep 17 00:00:00 2001
From: Andrea Delgado <114981520+andreadlgdo@users.noreply.github.com>
Date: Wed, 19 Jun 2024 15:31:40 +0200
Subject: [PATCH 05/15] fix: filter on playground

---
 .../x-modules/facets/components/filters/renderless-filter.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/x-components/src/x-modules/facets/components/filters/renderless-filter.vue b/packages/x-components/src/x-modules/facets/components/filters/renderless-filter.vue
index bcdc45b5f9..9464398e91 100644
--- a/packages/x-components/src/x-modules/facets/components/filters/renderless-filter.vue
+++ b/packages/x-components/src/x-modules/facets/components/filters/renderless-filter.vue
@@ -82,7 +82,7 @@
             clickFilter: emitEvents,
             cssClasses: cssClasses.value,
             isDisabled: isDisabled.value
-          })?.[0] ?? h()
+          }) ?? h()
         );
       };
     }

From d651cb22bd62bea199b4434b538830a5dd6b23f3 Mon Sep 17 00:00:00 2001
From: Andrea Delgado <114981520+andreadlgdo@users.noreply.github.com>
Date: Thu, 20 Jun 2024 09:57:17 +0200
Subject: [PATCH 06/15] fix: fix filter on test

---
 .../__tests__/renderless-filter.spec.ts       | 20 ++---
 .../filters/__tests__/simple-filter.spec.ts   | 81 +++++--------------
 2 files changed, 32 insertions(+), 69 deletions(-)

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 082282d26b..ef376d1148 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,5 +1,5 @@
 import { mount } from '@vue/test-utils';
-import { nextTick, reactive } from 'vue';
+import { nextTick, ref } from 'vue';
 import { getXComponentXModuleName, isXComponent } from '../../../../../components';
 import {
   createSimpleFilter,
@@ -10,7 +10,7 @@ import RenderlessFilter from '../renderless-filter.vue';
 import { XPlugin } from '../../../../../plugins/x-plugin';
 
 function renderComponent({
-  filter = reactive(createSimpleFilter('category', 'food')),
+  filter = ref(createSimpleFilter('category', 'food')),
   clickEvents = {},
   template = `
         <RenderlessFilter
@@ -56,7 +56,7 @@ function renderComponent({
       renderlessFilterWrapper.trigger('click');
     },
     selectFilter: async () => {
-      filter.selected = true;
+      filter.value.selected = true;
       await nextTick();
     }
   };
@@ -76,21 +76,21 @@ describe('testing Renderless Filter component', () => {
   });
 
   it('emits UserClickedAFilter and other custom events when clicked', () => {
-    const filter = reactive(getSimpleFilterStub());
+    const filter = ref(getSimpleFilterStub());
     const { wrapper, clickFilter, emit } = renderComponent({
       filter,
       clickEvents: {
-        UserClickedASimpleFilter: filter
+        UserClickedASimpleFilter: filter.value
       }
     });
 
     clickFilter();
 
     expect(emit).toHaveBeenCalledTimes(2);
-    expect(emit).toHaveBeenCalledWith('UserClickedAFilter', filter, {
+    expect(emit).toHaveBeenCalledWith('UserClickedAFilter', filter.value, {
       target: wrapper.element
     });
-    expect(emit).toHaveBeenCalledWith('UserClickedASimpleFilter', filter, {
+    expect(emit).toHaveBeenCalledWith('UserClickedASimpleFilter', filter.value, {
       target: wrapper.element
     });
   });
@@ -99,7 +99,7 @@ describe('testing Renderless Filter component', () => {
     const { wrapper, filter } = renderComponent();
 
     const customLabel = wrapper.find(getDataTestSelector('custom-label'));
-    expect(customLabel.text()).toEqual(filter.label);
+    expect(customLabel.text()).toEqual(filter.value.label);
   });
 
   it('adds selected classes to the rendered element when the filter is selected', async () => {
@@ -113,12 +113,12 @@ describe('testing Renderless Filter component', () => {
   });
 
   it('disables the filter when it has no results', async () => {
-    const filter = reactive(createSimpleFilter('category', 'men', false));
+    const filter = ref(createSimpleFilter('category', 'men', false));
     const { wrapper } = renderComponent({ filter });
 
     expect(wrapper.attributes('disabled')).toBeUndefined();
 
-    filter.totalResults = 0;
+    filter.value.totalResults = 0;
     await nextTick();
 
     expect(wrapper.attributes('disabled')).toBe('disabled');
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 ee536e26f2..0a79fc2e8f 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,19 +1,20 @@
-import { SimpleFilter as SimpleFilterModel } from '@empathyco/x-types';
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue, { nextTick } from 'vue';
+import { mount } from '@vue/test-utils';
+import { nextTick, ref } from 'vue';
 import { createSimpleFilter } from '../../../../../__stubs__/filters-stubs.factory';
-import { getDataTestSelector } from '../../../../../__tests__/utils';
+import { getDataTestSelector, installNewXPlugin } from '../../../../../__tests__/utils';
 import { getXComponentXModuleName, isXComponent } from '../../../../../components';
-import { XEventsTypes } from '../../../../../wiring/events.types';
 import SimpleFilter from '../simple-filter.vue';
+import { XPlugin } from '../../../../../plugins/index';
 
 function renderSimpleFilter({
   template = '<SimpleFilter :filter="filter" :clickEvents="clickEvents" />',
-  filter = createSimpleFilter('category', 'women'),
-  clickEvents
-}: RenderSimpleFilterOptions = {}): RenderSimpleFilterAPI {
-  Vue.observable(filter);
-  const emit = jest.fn();
+  filter = ref(createSimpleFilter('category', 'women')),
+  clickEvents = {}
+} = {}) {
+  //Vue.observable(filter);
+
+  installNewXPlugin();
+
   const wrapper = mount(
     {
       components: { SimpleFilter },
@@ -24,11 +25,6 @@ function renderSimpleFilter({
       propsData: {
         filter,
         clickEvents
-      },
-      mocks: {
-        $x: {
-          emit
-        }
       }
     }
   );
@@ -37,16 +33,16 @@ function renderSimpleFilter({
 
   return {
     wrapper: filterWrapper,
-    emit,
+    emit: jest.spyOn(XPlugin.bus, 'emit'),
     filter,
-    clickFilter() {
+    clickFilter: () => {
       wrapper.trigger('click');
     },
-    selectFilter() {
-      filter.selected = true;
+    selectFilter: () => {
+      filter.value.selected = true;
       return nextTick();
     },
-    updateFilter(newFields) {
+    updateFilter: (newFields: unknown) => {
       Object.assign(filter, newFields);
       return nextTick();
     }
@@ -69,7 +65,7 @@ describe('testing SimpleFilter component', () => {
   it('renders the provided filter by default', () => {
     const { wrapper, filter } = renderSimpleFilter();
 
-    expect(wrapper.text()).toEqual(filter.label);
+    expect(wrapper.text()).toEqual(filter.value.label);
   });
 
   it('emits `UserClickedAFilter` & `UserClickedASimpleFilter` events when clicked', () => {
@@ -79,7 +75,7 @@ describe('testing SimpleFilter component', () => {
 
     expect(emit).toHaveBeenCalledTimes(2);
     ['UserClickedAFilter', 'UserClickedASimpleFilter'].forEach(event => {
-      expect(emit).toHaveBeenCalledWith(event, filter, { target: wrapper.element });
+      expect(emit).toHaveBeenCalledWith(event, filter.value, { target: wrapper.element });
     });
   });
 
@@ -92,7 +88,7 @@ describe('testing SimpleFilter component', () => {
 
     expect(emit).toHaveBeenCalledTimes(3);
     ['UserClickedAFilter', 'UserClickedASimpleFilter'].forEach(event => {
-      expect(emit).toHaveBeenCalledWith(event, filter, { target: wrapper.element });
+      expect(emit).toHaveBeenCalledWith(event, filter.value, { target: wrapper.element });
     });
     expect(emit).toHaveBeenNthCalledWith(3, 'UserAcceptedAQuery', 'potato', {
       target: wrapper.element
@@ -111,7 +107,7 @@ describe('testing SimpleFilter component', () => {
     });
 
     const customLabel = wrapper.find(getDataTestSelector('custom-label'));
-    expect(customLabel.text()).toEqual(filter.label);
+    expect(customLabel.text()).toEqual(filter.value.label);
   });
 
   it('allows replacing the root element of the component', () => {
@@ -131,12 +127,12 @@ describe('testing SimpleFilter component', () => {
     const labelWrapper = wrapper.get(getDataTestSelector('label'));
     const inputWrapper = wrapper.get(getDataTestSelector('input'));
 
-    expect(labelWrapper.text()).toBe(filter.label);
+    expect(labelWrapper.text()).toBe(filter.value.label);
 
     inputWrapper.trigger('change');
     expect(emit).toHaveBeenCalledTimes(2);
     ['UserClickedAFilter', 'UserClickedASimpleFilter'].forEach(event => {
-      expect(emit).toHaveBeenCalledWith(event, filter, { target: wrapper.element });
+      expect(emit).toHaveBeenCalledWith(event, filter.value, { target: wrapper.element });
     });
   });
 
@@ -197,36 +193,3 @@ describe('testing SimpleFilter component', () => {
     expect(wrapper.classes()).toContain('x-simple-filter--is-selected');
   });
 });
-
-interface RenderSimpleFilterOptions {
-  /** The events to emit when the filter is clicked. */
-  clickEvents?: Partial<XEventsTypes>;
-  /** The filter data to render. */
-  filter?: SimpleFilterModel;
-  /** Template including the {@link SimpleFilter} to render. */
-  template?: string;
-}
-
-interface RenderSimpleFilterAPI {
-  /** Fakes a click in the {@link SimpleFilter} component. */
-  clickFilter: () => void;
-  /** Mock for the {@link XBus.emit} function. */
-  emit: jest.Mock;
-  /** The data rendered. */
-  filter: SimpleFilterModel;
-  /**
-   * Selects the filter.
-   *
-   * @returns A promise that resolves after Vue updates the view.
-   */
-  selectFilter: () => Promise<void>;
-  /**
-   * Updates the rendered filter data.
-   *
-   * @param newFilter - The new fields to set to the rendered filter.
-   * @returns A promise that resolves after Vue updates the view.
-   */
-  updateFilter: (newFilter: Partial<SimpleFilterModel>) => Promise<void>;
-  /** Test wrapper of the {@link SimpleFilter} component. */
-  wrapper: Wrapper<Vue>;
-}

From a91dd169f4999768ef08a2725a4f5c329c1afbff Mon Sep 17 00:00:00 2001
From: "Jose A. Cabaneros" <joseacabaneros@gmail.com>
Date: Fri, 21 Jun 2024 10:03:47 +0200
Subject: [PATCH 07/15] test(filters): fix unit tests

---
 .../__tests__/renderless-filter.spec.ts       | 86 +++++++----------
 .../filters/__tests__/simple-filter.spec.ts   | 93 ++++++++-----------
 .../components/filters/renderless-filter.vue  | 81 ++++++----------
 .../components/filters/simple-filter.vue      | 42 +++------
 4 files changed, 116 insertions(+), 186 deletions(-)

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 ef376d1148..1827d83a42 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
@@ -9,29 +9,26 @@ import { getDataTestSelector, installNewXPlugin } from '../../../../../__tests__
 import RenderlessFilter from '../renderless-filter.vue';
 import { XPlugin } from '../../../../../plugins/x-plugin';
 
-function renderComponent({
+function render({
   filter = ref(createSimpleFilter('category', 'food')),
   clickEvents = {},
   template = `
-        <RenderlessFilter
-        :filter="filter"
-        :clickEvents="clickEvents"
-        v-slot="{ filter, clickFilter, cssClasses, isDisabled }">
-          <button
-            @click="clickFilter"
-            :class="cssClasses"
-            :disabled="isDisabled"
-            data-test="custom-label"
-          >
-            {{ filter.label }}
-          </button>
-        </RenderlessFilter>
-      `
+    <RenderlessFilter
+      :filter="filter"
+      :clickEvents="clickEvents"
+      v-slot="{ filter, clickFilter, cssClasses, isDisabled }">
+        <button
+          @click="clickFilter"
+          :class="cssClasses"
+          :disabled="isDisabled"
+          data-test="custom-label"
+        >
+          {{ filter.label }}
+        </button>
+    </RenderlessFilter>`
 } = {}) {
   installNewXPlugin();
 
-  //Vue.observable(filter);
-
   const wrapper = mount(
     {
       components: { RenderlessFilter },
@@ -39,10 +36,7 @@ function renderComponent({
       template
     },
     {
-      propsData: {
-        filter,
-        clickEvents
-      }
+      propsData: { filter, clickEvents }
     }
   );
 
@@ -50,11 +44,9 @@ function renderComponent({
 
   return {
     wrapper: renderlessFilterWrapper,
-    emit: jest.spyOn(XPlugin.bus, 'emit'),
+    emitSpy: jest.spyOn(XPlugin.bus, 'emit'),
     filter,
-    clickFilter: () => {
-      renderlessFilterWrapper.trigger('click');
-    },
+    clickFilter: () => renderlessFilterWrapper.trigger('click'),
     selectFilter: async () => {
       filter.value.selected = true;
       await nextTick();
@@ -63,47 +55,41 @@ function renderComponent({
 }
 
 describe('testing Renderless Filter component', () => {
-  it('is an x-component', () => {
-    const { wrapper } = renderComponent();
-
-    expect(isXComponent(wrapper.vm)).toEqual(true);
-  });
-
-  it('belongs to the `facets` x-module', () => {
-    const { wrapper } = renderComponent();
+  it('is an XComponent that belongs to the facets', () => {
+    const { wrapper } = render();
 
+    expect(isXComponent(wrapper.vm)).toBeTruthy();
     expect(getXComponentXModuleName(wrapper.vm)).toEqual('facets');
   });
 
-  it('emits UserClickedAFilter and other custom events when clicked', () => {
+  it('emits UserClickedAFilter and other custom events when clicked', async () => {
     const filter = ref(getSimpleFilterStub());
-    const { wrapper, clickFilter, emit } = renderComponent({
+    const { clickFilter, emitSpy } = render({
       filter,
-      clickEvents: {
-        UserClickedASimpleFilter: filter.value
-      }
+      clickEvents: { UserClickedASimpleFilter: filter.value }
     });
+    const metadata = {
+      moduleName: 'facets',
+      location: 'none',
+      replaceable: true
+    };
 
-    clickFilter();
+    await clickFilter();
 
-    expect(emit).toHaveBeenCalledTimes(2);
-    expect(emit).toHaveBeenCalledWith('UserClickedAFilter', filter.value, {
-      target: wrapper.element
-    });
-    expect(emit).toHaveBeenCalledWith('UserClickedASimpleFilter', filter.value, {
-      target: wrapper.element
-    });
+    expect(emitSpy).toHaveBeenCalledTimes(2);
+    expect(emitSpy).toHaveBeenCalledWith('UserClickedAFilter', filter.value, metadata);
+    expect(emitSpy).toHaveBeenCalledWith('UserClickedASimpleFilter', filter.value, metadata);
   });
 
   it('allows customizing the rendered content with an slot', () => {
-    const { wrapper, filter } = renderComponent();
+    const { wrapper, filter } = render();
 
     const customLabel = wrapper.find(getDataTestSelector('custom-label'));
     expect(customLabel.text()).toEqual(filter.value.label);
   });
 
   it('adds selected classes to the rendered element when the filter is selected', async () => {
-    const { wrapper, selectFilter } = renderComponent();
+    const { wrapper, selectFilter } = render();
 
     expect(wrapper.classes()).not.toContain('x-selected');
 
@@ -114,13 +100,13 @@ describe('testing Renderless Filter component', () => {
 
   it('disables the filter when it has no results', async () => {
     const filter = ref(createSimpleFilter('category', 'men', false));
-    const { wrapper } = renderComponent({ filter });
+    const { wrapper } = render({ filter });
 
     expect(wrapper.attributes('disabled')).toBeUndefined();
 
     filter.value.totalResults = 0;
     await nextTick();
 
-    expect(wrapper.attributes('disabled')).toBe('disabled');
+    expect(wrapper.attributes('disabled')).toEqual('disabled');
   });
 });
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 0a79fc2e8f..c220c6b397 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
@@ -6,13 +6,17 @@ import { getXComponentXModuleName, isXComponent } from '../../../../../component
 import SimpleFilter from '../simple-filter.vue';
 import { XPlugin } from '../../../../../plugins/index';
 
-function renderSimpleFilter({
+const metadata = {
+  moduleName: 'facets',
+  location: 'none',
+  replaceable: true
+};
+
+function render({
   template = '<SimpleFilter :filter="filter" :clickEvents="clickEvents" />',
   filter = ref(createSimpleFilter('category', 'women')),
   clickEvents = {}
 } = {}) {
-  //Vue.observable(filter);
-
   installNewXPlugin();
 
   const wrapper = mount(
@@ -22,10 +26,7 @@ function renderSimpleFilter({
       template
     },
     {
-      propsData: {
-        filter,
-        clickEvents
-      }
+      propsData: { filter, clickEvents }
     }
   );
 
@@ -33,77 +34,63 @@ function renderSimpleFilter({
 
   return {
     wrapper: filterWrapper,
-    emit: jest.spyOn(XPlugin.bus, 'emit'),
+    emitSpy: jest.spyOn(XPlugin.bus, 'emit'),
     filter,
-    clickFilter: () => {
-      wrapper.trigger('click');
-    },
+    clickFilter: () => wrapper.trigger('click'),
     selectFilter: () => {
       filter.value.selected = true;
       return nextTick();
-    },
-    updateFilter: (newFields: unknown) => {
-      Object.assign(filter, newFields);
-      return nextTick();
     }
   };
 }
 
 describe('testing SimpleFilter component', () => {
-  it('is an x-component', () => {
-    const { wrapper } = renderSimpleFilter();
-
-    expect(isXComponent(wrapper.vm)).toEqual(true);
-  });
-
-  it('belongs to the `facets` x-module', () => {
-    const { wrapper } = renderSimpleFilter();
+  it('is an XComponent that belongs to the facets', () => {
+    const { wrapper } = render();
 
+    expect(isXComponent(wrapper.vm)).toBeTruthy();
     expect(getXComponentXModuleName(wrapper.vm)).toEqual('facets');
   });
 
   it('renders the provided filter by default', () => {
-    const { wrapper, filter } = renderSimpleFilter();
+    const { wrapper, filter } = render();
 
     expect(wrapper.text()).toEqual(filter.value.label);
   });
 
-  it('emits `UserClickedAFilter` & `UserClickedASimpleFilter` events when clicked', () => {
-    const { wrapper, clickFilter, emit, filter } = renderSimpleFilter();
+  it('emits `UserClickedAFilter` & `UserClickedASimpleFilter` events when clicked', async () => {
+    const { clickFilter, emitSpy, filter } = render();
 
-    clickFilter();
+    await clickFilter();
 
-    expect(emit).toHaveBeenCalledTimes(2);
+    expect(emitSpy).toHaveBeenCalledTimes(2);
     ['UserClickedAFilter', 'UserClickedASimpleFilter'].forEach(event => {
-      expect(emit).toHaveBeenCalledWith(event, filter.value, { target: wrapper.element });
+      expect(emitSpy).toHaveBeenCalledWith(event, filter.value, metadata);
     });
   });
 
-  it('emits configured events when clicked', () => {
-    const { wrapper, clickFilter, emit, filter } = renderSimpleFilter({
+  it('emits configured events when clicked', async () => {
+    const { clickFilter, emitSpy, filter } = render({
       clickEvents: { UserAcceptedAQuery: 'potato' }
     });
 
-    clickFilter();
+    await clickFilter();
 
-    expect(emit).toHaveBeenCalledTimes(3);
+    expect(emitSpy).toHaveBeenCalledTimes(3);
     ['UserClickedAFilter', 'UserClickedASimpleFilter'].forEach(event => {
-      expect(emit).toHaveBeenCalledWith(event, filter.value, { target: wrapper.element });
-    });
-    expect(emit).toHaveBeenNthCalledWith(3, 'UserAcceptedAQuery', 'potato', {
-      target: wrapper.element
+      expect(emitSpy).toHaveBeenCalledWith(event, filter.value, metadata);
     });
+    expect(emitSpy).toHaveBeenNthCalledWith(3, 'UserAcceptedAQuery', 'potato', metadata);
   });
 
   it('allows customizing the default button content', () => {
-    const { wrapper, filter } = renderSimpleFilter({
+    const { wrapper, filter } = render({
       template: `
       <SimpleFilter :filter="filter" :clickEvents="clickEvents">
         <template #label="{ filter }">
           <span data-test="custom-label">{{ filter.label }}</span>
         </template>
-      </SimpleFilter>
-      `
+      </SimpleFilter>`
     });
 
     const customLabel = wrapper.find(getDataTestSelector('custom-label'));
@@ -111,7 +98,7 @@ describe('testing SimpleFilter component', () => {
   });
 
   it('allows replacing the root element of the component', () => {
-    const { wrapper, emit, filter } = renderSimpleFilter({
+    const { wrapper, emitSpy, filter } = render({
       template: `
       <SimpleFilter :filter="filter" :clickEvents="clickEvents" v-slot="{ filter, clickFilter }">
         <label data-test="label">
@@ -121,23 +108,22 @@ describe('testing SimpleFilter component', () => {
           />
           {{ filter.label }}
         </label>
-      </SimpleFilter>
-      `
+      </SimpleFilter>`
     });
     const labelWrapper = wrapper.get(getDataTestSelector('label'));
     const inputWrapper = wrapper.get(getDataTestSelector('input'));
 
-    expect(labelWrapper.text()).toBe(filter.value.label);
+    expect(labelWrapper.text()).toEqual(filter.value.label);
 
     inputWrapper.trigger('change');
-    expect(emit).toHaveBeenCalledTimes(2);
+    expect(emitSpy).toHaveBeenCalledTimes(2);
     ['UserClickedAFilter', 'UserClickedASimpleFilter'].forEach(event => {
-      expect(emit).toHaveBeenCalledWith(event, filter.value, { target: wrapper.element });
+      expect(emitSpy).toHaveBeenCalledWith(event, filter.value, metadata);
     });
   });
 
   it('exposes proper css classes and attributes in the default slot', async () => {
-    const { wrapper, selectFilter, updateFilter } = renderSimpleFilter({
+    const { wrapper, selectFilter, filter } = render({
       template: `
       <SimpleFilter
         :filter="filter"
@@ -150,8 +136,7 @@ describe('testing SimpleFilter component', () => {
           :aria-checked="filter.selected.toString()">
           {{ filter.label }}
         </button>
-      </SimpleFilter>
-      `
+      </SimpleFilter>`
     });
     const buttonWrapper = wrapper.get(getDataTestSelector('button'));
 
@@ -162,7 +147,7 @@ describe('testing SimpleFilter component', () => {
     expect(buttonWrapper.attributes()).toHaveProperty('aria-checked', 'false');
     expect(buttonWrapper.element).toHaveProperty('disabled', false);
 
-    await selectFilter(); // Faking filter selection because XBus is mocked.
+    await selectFilter();
     expect(buttonWrapper.attributes('aria-checked')).toBe('true');
     expect(buttonWrapper.classes()).toHaveLength(4);
     expect(buttonWrapper.classes()).toEqual(
@@ -174,15 +159,17 @@ describe('testing SimpleFilter component', () => {
       ])
     );
 
-    await updateFilter({ totalResults: 0 });
+    filter.value.totalResults = 0;
+    await nextTick();
     expect(buttonWrapper.element).toHaveProperty('disabled', true);
 
-    await updateFilter({ totalResults: undefined });
+    filter.value.totalResults = undefined;
+    await nextTick();
     expect(buttonWrapper.element).toHaveProperty('disabled', false);
   });
 
   it('adds selected classes to the rendered element when the filter is selected', async () => {
-    const { wrapper, selectFilter } = renderSimpleFilter();
+    const { wrapper, selectFilter } = render();
 
     expect(wrapper.classes()).not.toContain('x-selected');
     expect(wrapper.classes()).not.toContain('x-simple-filter--is-selected');
diff --git a/packages/x-components/src/x-modules/facets/components/filters/renderless-filter.vue b/packages/x-components/src/x-modules/facets/components/filters/renderless-filter.vue
index 9464398e91..4875addf41 100644
--- a/packages/x-components/src/x-modules/facets/components/filters/renderless-filter.vue
+++ b/packages/x-components/src/x-modules/facets/components/filters/renderless-filter.vue
@@ -1,24 +1,24 @@
 <script lang="ts">
-  import { computed, defineComponent, h, PropType, ref } from 'vue';
+  import { computed, defineComponent, h, PropType } from 'vue';
   import { BooleanFilter } from '@empathyco/x-types';
+  import { useXBus } from '../../../../composables/use-x-bus';
   import { XEvent, XEventsTypes } from '../../../../wiring/events.types';
   import { facetsXModule } from '../../x-module';
-  import { use$x } from '../../../../composables/use-$x';
 
   /**
    * Renders default slot content. It binds to the default slot a
    * {@link @empathyco/x-types#BooleanFilter}, the {@link XEvent}
-   * that will be emitted when clicking the content, the css classes and if the content should be
+   * that will be emitted when clicking the content, the CSS classes and if the content should be
    * deactivated.
    *
    * @remarks The default slot expects a root element, if it receives a list of elements, it will
-   * renders the first element.
+   * render the first element.
    *
    * @public
    */
   export default defineComponent({
     name: 'RenderlessFilter',
-    module: facetsXModule.name,
+    xModule: facetsXModule.name,
     props: {
       /** The filter data to render. */
       filter: {
@@ -28,63 +28,38 @@
       /** Additional events with its payload to emit when the filter is clicked. */
       clickEvents: Object as PropType<Partial<XEventsTypes>>
     },
-    setup: function (props, { slots }) {
-      const $x = use$x();
+    setup(props, { slots }) {
+      const xBus = useXBus();
 
-      const rootElement = ref<HTMLElement | undefined>();
-
-      /**
-       * The events that will be emitted when the filter is clicked.
-       *
-       * @returns The events to be emitted when the filter is clicked.
-       * @internal
-       */
-      const events = computed(() => {
-        return {
-          UserClickedAFilter: props.filter,
-          ...props.clickEvents
-        };
-      });
-
-      /**
-       * Returns `true` when the filter should be disabled.
-       *
-       * @returns `true` if the filter should be disabled.
-       * @internal
-       */
+      /** Returns `true` when the filter should be disabled. */
       const isDisabled = computed(() => props.filter.totalResults === 0);
 
-      /**
-       * Dynamic CSS classes to apply to the component.
-       *
-       * @returns The dynamic CSS classes to apply to the component.
-       * @internal
-       */
-      const cssClasses = computed(() => {
-        return ['x-facet-filter', { 'x-selected': props.filter.selected }];
-      });
+      /** Dynamic CSS classes to apply to the component. */
+      const cssClasses = computed(() => [
+        'x-facet-filter',
+        { 'x-selected': props.filter.selected }
+      ]);
 
-      /**
-       * The events to emit to the bus.
-       *
-       * @internal
-       */
+      /** The events that will be emitted when the filter is clicked. */
+      const events = computed(() => ({
+        UserClickedAFilter: props.filter,
+        ...props.clickEvents
+      }));
+
+      /** Emit events to the bus. */
       const emitEvents = () => {
         Object.entries(events.value).forEach(([event, payload]) => {
-          $x.emit(event as XEvent, payload, { target: rootElement.value as HTMLElement });
+          xBus.emit(event as XEvent, payload);
         });
       };
 
-      return () => {
-        return (
-          slots.default?.({
-            filter: props.filter,
-            clickFilter: emitEvents,
-            cssClasses: cssClasses.value,
-            isDisabled: isDisabled.value
-          }) ?? h()
-        );
-      };
+      return () =>
+        slots.default?.({
+          filter: props.filter,
+          clickFilter: emitEvents,
+          cssClasses: cssClasses.value,
+          isDisabled: isDisabled.value
+        }) ?? h();
     }
   });
 </script>
diff --git a/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue b/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue
index fdf5cfa103..3bd52a4ef0 100644
--- a/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue
+++ b/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue
@@ -63,38 +63,20 @@
         type: Object as PropType<SimpleFilterModel>,
         required: true
       },
-      /**
-       * Additional events, with their payload, to emit when the filter is clicked.
-       *
-       * @public
-       */
+      /** Additional events, with their payload, to emit when the filter is clicked. */
       clickEvents: Object as PropType<Partial<XEventsTypes>>
     },
-    setup: function (props) {
-      /**
-       * The {@link XEventsTypes} to emit.
-       *
-       * @returns The events to emit when clicked.
-       * @internal
-       */
-      const clickEventsEmit = computed(() => {
-        return {
-          UserClickedASimpleFilter: props.filter,
-          ...props.clickEvents
-        };
-      });
-
-      /**
-       * Dynamic CSS classes to apply to the component.
-       *
-       * @returns The dynamic CSS classes to apply to the component.
-       * @internal
-       */
-      const cssClasses = computed(() => {
-        return {
-          'x-simple-filter--is-selected': props.filter.selected
-        };
-      });
+    setup(props) {
+      /** The {@link XEventsTypes} to emit. */
+      const clickEventsEmit = computed(() => ({
+        UserClickedASimpleFilter: props.filter,
+        ...props.clickEvents
+      }));
+
+      /** Dynamic CSS classes to apply to the component. */
+      const cssClasses = computed(() => ({
+        'x-simple-filter--is-selected': props.filter.selected
+      }));
 
       return {
         clickEventsEmit,

From a282c367d2485809f27a249187f79b98c1cc7759 Mon Sep 17 00:00:00 2001
From: Andrea Delgado <114981520+andreadlgdo@users.noreply.github.com>
Date: Mon, 24 Jun 2024 10:00:16 +0200
Subject: [PATCH 08/15] fix: fix unit test

---
 .../__tests__/hierarchical-filter.spec.ts     | 219 ++++--------------
 .../__tests__/number-range-filter.spec.ts     |  87 +++----
 2 files changed, 83 insertions(+), 223 deletions(-)

diff --git a/packages/x-components/src/x-modules/facets/components/filters/__tests__/hierarchical-filter.spec.ts b/packages/x-components/src/x-modules/facets/components/filters/__tests__/hierarchical-filter.spec.ts
index f1fb2c4d45..fed226ae45 100644
--- a/packages/x-components/src/x-modules/facets/components/filters/__tests__/hierarchical-filter.spec.ts
+++ b/packages/x-components/src/x-modules/facets/components/filters/__tests__/hierarchical-filter.spec.ts
@@ -1,20 +1,21 @@
-import {
-  HierarchicalFacet,
-  HierarchicalFilter as HierarchicalFilterModel
-} from '@empathyco/x-types';
+import { HierarchicalFilter as HierarchicalFilterModel } from '@empathyco/x-types';
 import { mount, Wrapper, WrapperArray } from '@vue/test-utils';
-import Vue from 'vue';
 import { createHierarchicalFacetStub } from '../../../../../__stubs__/facets-stubs.factory';
 import { getDataTestSelector, installNewXPlugin } from '../../../../../__tests__/utils';
 import { getXComponentXModuleName, isXComponent } from '../../../../../components';
 import { XPlugin } from '../../../../../plugins/x-plugin';
-import { XEventsTypes } from '../../../../../wiring/events.types';
 import { flatHierarchicalFilters } from '../../../utils';
 import { facetsXModule } from '../../../x-module';
 import { resetXFacetsStateWith } from '../../__tests__/utils';
 import HierarchicalFilter from '../hierarchical-filter.vue';
 
-function renderHierarchicalFilter({
+const metadata = {
+  moduleName: 'facets',
+  location: 'none',
+  replaceable: true
+};
+
+function render({
   template = `
     <HierarchicalFilter
       :filter="filter"
@@ -35,10 +36,9 @@ function renderHierarchicalFilter({
   ]),
   childrenFiltersClass = '',
   filterItemClass = '',
-  clickEvents
-}: HierarchicalFilterOptions = {}): HierarchicalFilterAPI {
+  clickEvents = {}
+} = {}) {
   const [, localVue] = installNewXPlugin({ initialXModules: [facetsXModule] });
-  const emit = jest.spyOn(XPlugin.bus, 'emit');
   const store = XPlugin.store;
   resetXFacetsStateWith(store, { category: facet });
   const wrapper = mount(
@@ -109,7 +109,7 @@ function renderHierarchicalFilter({
     getFiltersWrappers,
     getFilterWrapperByText,
     hierarchicalFilterWrapper,
-    emit,
+    emitSpy: jest.spyOn(XPlugin.bus, 'emit'),
     getRootFilter,
     getFilters,
     getPartiallySelectedFilters,
@@ -120,45 +120,35 @@ function renderHierarchicalFilter({
 
 describe('testing `HierarchicalFilter` component', () => {
   it('is an x-component', () => {
-    const { hierarchicalFilterWrapper } = renderHierarchicalFilter();
+    const { hierarchicalFilterWrapper } = render();
 
     expect(isXComponent(hierarchicalFilterWrapper.vm)).toEqual(true);
   });
 
   it('belongs to the `facets` x-module', () => {
-    const { hierarchicalFilterWrapper } = renderHierarchicalFilter();
+    const { hierarchicalFilterWrapper } = render();
 
     expect(getXComponentXModuleName(hierarchicalFilterWrapper.vm)).toEqual('facets');
   });
 
   it('renders the provided filter by default', () => {
-    const { getFilterWrapper, getRootFilter } = renderHierarchicalFilter();
+    const { getFilterWrapper, getRootFilter } = render();
 
     expect(getFilterWrapper().text()).toEqual(getRootFilter().label);
   });
 
   it('emits `UserClickedAFilter` and `UserClickedAHierarchicalFilter` event when clicked', () => {
-    const { getFilterWrapper, clickFilter, emit, getRootFilter } = renderHierarchicalFilter();
+    const { clickFilter, emitSpy, getRootFilter } = render();
     const filter = getRootFilter();
     clickFilter();
 
-    expect(emit).toHaveBeenCalledTimes(2);
-    expect(emit).toHaveBeenCalledWith('UserClickedAFilter', filter, {
-      target: getFilterWrapper().element,
-      moduleName: 'facets',
-      location: undefined,
-      replaceable: true
-    });
-    expect(emit).toHaveBeenCalledWith('UserClickedAHierarchicalFilter', filter, {
-      target: getFilterWrapper().element,
-      moduleName: 'facets',
-      location: undefined,
-      replaceable: true
-    });
+    expect(emitSpy).toHaveBeenCalledTimes(2);
+    expect(emitSpy).toHaveBeenCalledWith('UserClickedAFilter', filter, metadata);
+    expect(emitSpy).toHaveBeenCalledWith('UserClickedAHierarchicalFilter', filter, metadata);
   });
 
   it('emits configured events when clicked', () => {
-    const { getFilterWrapper, clickFilter, emit, getRootFilter } = renderHierarchicalFilter({
+    const { clickFilter, emitSpy, getRootFilter } = render({
       clickEvents: {
         UserAcceptedAQuery: 'potato',
         UserBlurredSearchBox: undefined
@@ -167,31 +157,16 @@ describe('testing `HierarchicalFilter` component', () => {
     const filter = getRootFilter();
     clickFilter();
 
-    expect(emit).toHaveBeenCalledTimes(4);
+    expect(emitSpy).toHaveBeenCalledTimes(4);
     ['UserClickedAFilter', 'UserClickedAHierarchicalFilter'].forEach(event => {
-      expect(emit).toHaveBeenCalledWith(event, filter, {
-        target: getFilterWrapper().element,
-        moduleName: 'facets',
-        location: undefined,
-        replaceable: true
-      });
-    });
-    expect(emit).toHaveBeenCalledWith('UserAcceptedAQuery', 'potato', {
-      target: getFilterWrapper().element,
-      moduleName: 'facets',
-      location: undefined,
-      replaceable: true
-    });
-    expect(emit).toHaveBeenCalledWith('UserBlurredSearchBox', undefined, {
-      target: getFilterWrapper().element,
-      moduleName: 'facets',
-      location: undefined,
-      replaceable: true
+      expect(emitSpy).toHaveBeenCalledWith(event, filter, metadata);
     });
+    expect(emitSpy).toHaveBeenCalledWith('UserAcceptedAQuery', 'potato', metadata);
+    expect(emitSpy).toHaveBeenCalledWith('UserBlurredSearchBox', undefined, metadata);
   });
 
   it('allows replacing the root element of the component', () => {
-    const { hierarchicalFilterWrapper, getRootFilter, emit } = renderHierarchicalFilter({
+    const { hierarchicalFilterWrapper, getRootFilter, emitSpy } = render({
       template: `
         <HierarchicalFilter
           :filter="filter"
@@ -217,19 +192,14 @@ describe('testing `HierarchicalFilter` component', () => {
 
     customInputWrapper.trigger('change');
 
-    expect(emit).toHaveBeenCalledTimes(2);
-    const expectedMetadata = {
-      target: customLabelWrapper.element,
-      moduleName: 'facets',
-      location: undefined,
-      replaceable: true
-    };
-    expect(emit).toHaveBeenCalledWith('UserClickedAFilter', filter, expectedMetadata);
-    expect(emit).toHaveBeenCalledWith('UserClickedAHierarchicalFilter', filter, expectedMetadata);
+    expect(emitSpy).toHaveBeenCalledTimes(2);
+
+    expect(emitSpy).toHaveBeenCalledWith('UserClickedAFilter', filter, metadata);
+    expect(emitSpy).toHaveBeenCalledWith('UserClickedAHierarchicalFilter', filter, metadata);
   });
 
   it('allows customizing the rendered label content with an slot', () => {
-    const { getFilterWrapper, getRootFilter } = renderHierarchicalFilter({
+    const { getFilterWrapper, getRootFilter } = render({
       template: `
         <HierarchicalFilter :filter="filter" :clickEvents="clickEvents">
           <template #label :filter="filter">
@@ -246,7 +216,7 @@ describe('testing `HierarchicalFilter` component', () => {
   });
 
   it('exposes proper css classes and attributes in the default slot', async () => {
-    const { getFilterWrapper, mutateFilter, getRootFilter } = renderHierarchicalFilter();
+    const { getFilterWrapper, mutateFilter, getRootFilter } = render();
 
     expect(getFilterWrapper().attributes()).not.toHaveProperty('disabled');
     expect(getFilterWrapper().classes()).toHaveLength(4);
@@ -289,7 +259,7 @@ describe('testing `HierarchicalFilter` component', () => {
   });
 
   it('adds selected classes to the rendered element when the filter is selected', async () => {
-    const { getFilterWrapper, mutateFilter, getRootFilter } = renderHierarchicalFilter();
+    const { getFilterWrapper, mutateFilter, getRootFilter } = render();
 
     expect(getFilterWrapper().classes()).not.toEqual(
       expect.arrayContaining(['x-selected', 'x-hierarchical-filter--is-selected'])
@@ -305,7 +275,7 @@ describe('testing `HierarchicalFilter` component', () => {
 
   describe('children testing', () => {
     it('allows customizing the slot for all the children', () => {
-      const { getFiltersWrappers, getFilters } = renderHierarchicalFilter({
+      const { getFiltersWrappers, getFilters } = render({
         template: `
           <HierarchicalFilter :filter="filter" :clickEvents="clickEvents" #label="{ filter }">
             Custom - {{ filter.label }}
@@ -322,7 +292,7 @@ describe('testing `HierarchicalFilter` component', () => {
 
     it('renders children filter only when available', async () => {
       const { hierarchicalFilterWrapper, getFiltersWrappers, mutateFilter, getRootFilter } =
-        renderHierarchicalFilter();
+        render();
       const filter = getRootFilter();
       await mutateFilter(filter, { children: [] });
       const childrenFiltersWrapper = hierarchicalFilterWrapper.find(
@@ -338,31 +308,21 @@ describe('testing `HierarchicalFilter` component', () => {
 
     // eslint-disable-next-line max-len
     it('emits `UserClickedAFilter` and `UserClickedAHierarchicalFilter` events when a child is clicked', () => {
-      const { getFiltersWrappers, emit } = renderHierarchicalFilter();
+      const { getFiltersWrappers, emitSpy } = render();
       expect(getFiltersWrappers().wrappers.length).toBeGreaterThan(1);
       getFiltersWrappers().wrappers.forEach(filterWrapper => {
-        emit.mockClear();
+        emitSpy.mockClear();
         filterWrapper.trigger('click');
         const filter = (filterWrapper.vm as any).filter;
 
-        expect(emit).toHaveBeenCalledTimes(2);
-        expect(emit).toHaveBeenCalledWith('UserClickedAFilter', filter, {
-          target: filterWrapper.element,
-          moduleName: 'facets',
-          location: undefined,
-          replaceable: true
-        });
-        expect(emit).toHaveBeenCalledWith('UserClickedAHierarchicalFilter', filter, {
-          target: filterWrapper.element,
-          moduleName: 'facets',
-          location: undefined,
-          replaceable: true
-        });
+        expect(emitSpy).toHaveBeenCalledTimes(2);
+        expect(emitSpy).toHaveBeenCalledWith('UserClickedAFilter', filter, metadata);
+        expect(emitSpy).toHaveBeenCalledWith('UserClickedAHierarchicalFilter', filter, metadata);
       });
     });
 
     it('emits configured events when a child is clicked', () => {
-      const { getFiltersWrappers, emit } = renderHierarchicalFilter({
+      const { getFiltersWrappers, emitSpy } = render({
         clickEvents: {
           UserAcceptedAQuery: 'potato',
           UserBlurredSearchBox: undefined
@@ -370,36 +330,21 @@ describe('testing `HierarchicalFilter` component', () => {
       });
       expect(getFiltersWrappers().wrappers.length).toBeGreaterThan(1);
       getFiltersWrappers().wrappers.forEach(filterWrapper => {
-        emit.mockClear();
+        emitSpy.mockClear();
         filterWrapper.trigger('click');
         const filter = (filterWrapper.vm as any).filter;
 
-        expect(emit).toHaveBeenCalledTimes(4);
+        expect(emitSpy).toHaveBeenCalledTimes(4);
         ['UserClickedAFilter', 'UserClickedAHierarchicalFilter'].forEach(event => {
-          expect(emit).toHaveBeenCalledWith(event, filter, {
-            target: filterWrapper.element,
-            moduleName: 'facets',
-            location: undefined,
-            replaceable: true
-          });
-        });
-        expect(emit).toHaveBeenCalledWith('UserAcceptedAQuery', 'potato', {
-          target: filterWrapper.element,
-          moduleName: 'facets',
-          location: undefined,
-          replaceable: true
-        });
-        expect(emit).toHaveBeenCalledWith('UserBlurredSearchBox', undefined, {
-          target: filterWrapper.element,
-          moduleName: 'facets',
-          location: undefined,
-          replaceable: true
+          expect(emitSpy).toHaveBeenCalledWith(event, filter, metadata);
         });
+        expect(emitSpy).toHaveBeenCalledWith('UserAcceptedAQuery', 'potato', metadata);
+        expect(emitSpy).toHaveBeenCalledWith('UserBlurredSearchBox', undefined, metadata);
       });
     });
 
     it('adds a CSS class when the filter is partially selected', () => {
-      const { getFiltersWrappers, getPartiallySelectedFilters } = renderHierarchicalFilter();
+      const { getFiltersWrappers, getPartiallySelectedFilters } = render();
       const partiallySelectedIds = getPartiallySelectedFilters().map(filter => filter.id);
 
       expect(getFiltersWrappers().length).toBeGreaterThan(0);
@@ -417,7 +362,7 @@ describe('testing `HierarchicalFilter` component', () => {
     });
 
     it('exposes proper css classes and attributes in the default slot to children', async () => {
-      const { mutateFilter, getFilterWrapperByText, getFilters } = renderHierarchicalFilter({
+      const { mutateFilter, getFilterWrapperByText, getFilters } = render({
         template: `
            <HierarchicalFilter
              :filter="filter"
@@ -493,7 +438,7 @@ describe('testing `HierarchicalFilter` component', () => {
     });
 
     it('allows adding classes to the inner filters lists', () => {
-      const { hierarchicalFilterWrapper } = renderHierarchicalFilter({
+      const { hierarchicalFilterWrapper } = render({
         childrenFiltersClass: 'custom-class',
         facet: createHierarchicalFacetStub('category', createFilter => [
           createFilter('root', false, createFilter => [
@@ -512,7 +457,7 @@ describe('testing `HierarchicalFilter` component', () => {
     });
 
     it('allows adding classes to the filter item', () => {
-      const { hierarchicalFilterWrapper } = renderHierarchicalFilter({
+      const { hierarchicalFilterWrapper } = render({
         filterItemClass: 'custom-class',
         facet: createHierarchicalFacetStub('category', createFilter => [
           createFilter('root', false, createFilter => [
@@ -531,71 +476,3 @@ describe('testing `HierarchicalFilter` component', () => {
     });
   });
 });
-
-interface HierarchicalFilterOptions {
-  clickEvents?: Partial<XEventsTypes>;
-  facet?: HierarchicalFacet;
-  childrenFiltersClass?: string;
-  filterItemClass?: string;
-  template?: string;
-}
-
-interface HierarchicalFilterAPI {
-  /**
-   * Clicks the root filter.
-   *
-   * @returns A promise that resolves after Vue updates the view.
-   */
-  clickFilter: () => Promise<void>;
-  /** Mock for the `$x.emit` function. Can be used to check the emitted events. */
-  emit: jest.SpyInstance;
-  /**
-   * Get the filter wrapper. This is the clickable element that represents the filter.
-   *
-   * @returns The filter Wrapper.
-   */
-  getFilterWrapper: () => Wrapper<Vue>;
-  /**
-   * Gets a filter wrapper by the rendered button text.
-   *
-   * @param text - The rendered filter text.
-   * @returns The filter Wrapper.
-   */
-  getFilterWrapperByText: (text: string) => Wrapper<Vue> | undefined;
-  /**
-   * Get all the filters including children.
-   *
-   * @returns The filters WrapperArray.
-   */
-  getFiltersWrappers: () => WrapperArray<Vue>;
-  /** The hierarchical filter wrapper.*/
-  hierarchicalFilterWrapper: Wrapper<Vue>;
-  /**
-   * Returns the root filter.
-   *
-   * @returns The root filter.
-   */
-  getRootFilter: () => HierarchicalFilterModel;
-  /**
-   * Saves a new filter in the store.
-   *
-   * @param filter - The filter to save in the store.
-   * @returns A promise that resolves after re-rendering the component.
-   */
-  mutateFilter: (
-    filter: HierarchicalFilterModel,
-    newFilterState: Partial<HierarchicalFilterModel>
-  ) => Promise<void>;
-  /**
-   * Returns all the filters of the hierarchical facet.
-   *
-   * @returns All the filters of the hierarchical facet.
-   */
-  getFilters: () => HierarchicalFilterModel[];
-  /**
-   * Returns all the partially selected filters of the hierarchical facet.
-   *
-   * @returns All the partially selected filters of the hierarchical facet.
-   */
-  getPartiallySelectedFilters: () => HierarchicalFilterModel[];
-}
diff --git a/packages/x-components/src/x-modules/facets/components/filters/__tests__/number-range-filter.spec.ts b/packages/x-components/src/x-modules/facets/components/filters/__tests__/number-range-filter.spec.ts
index 0b78d82a77..e29f189dd3 100644
--- a/packages/x-components/src/x-modules/facets/components/filters/__tests__/number-range-filter.spec.ts
+++ b/packages/x-components/src/x-modules/facets/components/filters/__tests__/number-range-filter.spec.ts
@@ -1,19 +1,24 @@
-import { NumberRangeFilter as NumberRangeFilterModel } from '@empathyco/x-types';
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount } from '@vue/test-utils';
+import { nextTick, ref } from 'vue';
 import { createNumberRangeFilter } from '../../../../../__stubs__/filters-stubs.factory';
-import { getDataTestSelector } from '../../../../../__tests__/utils';
+import { getDataTestSelector, installNewXPlugin } from '../../../../../__tests__/utils';
 import { getXComponentXModuleName, isXComponent } from '../../../../../components';
-import { XEventsTypes } from '../../../../../wiring/index';
 import NumberRangeFilter from '../number-range-filter.vue';
+import { XPlugin } from '../../../../../plugins/index';
 
-function renderNumberRangeFilter({
+const metadata = {
+  moduleName: 'facets',
+  location: 'none',
+  replaceable: true
+};
+
+function render({
   template = '<NumberRangeFilter :filter="filter" :clickEvents="clickEvents" />',
-  filter = createNumberRangeFilter('price', { min: 0, max: 20 }),
-  clickEvents
-}: NumberRangeFilterWrapperData = {}): NumberRangeFilterAPI {
-  Vue.observable(filter);
-  const emit = jest.fn();
+  filter = ref(createNumberRangeFilter('price', { min: 0, max: 20 })),
+  clickEvents = {}
+} = {}) {
+  installNewXPlugin();
+
   const wrapper = mount(
     {
       components: { NumberRangeFilter },
@@ -24,11 +29,6 @@ function renderNumberRangeFilter({
       propsData: {
         filter,
         clickEvents
-      },
-      mocks: {
-        $x: {
-          emit
-        }
       }
     }
   );
@@ -38,66 +38,64 @@ function renderNumberRangeFilter({
   return {
     wrapper,
     filterWrapper,
-    emit,
+    emitSpy: jest.spyOn(XPlugin.bus, 'emit'),
     filter,
-    clickFilter() {
+    clickFilter: () => {
       wrapper.trigger('click');
     },
-    selectFilter() {
-      filter.selected = true;
-      return Vue.nextTick();
+    selectFilter: () => {
+      filter.value.selected = true;
+      return nextTick();
     }
   };
 }
 
 describe('testing NumberRangeFilter component', () => {
   it('is an x-component', () => {
-    const { filterWrapper } = renderNumberRangeFilter();
+    const { filterWrapper } = render();
 
     expect(isXComponent(filterWrapper.vm)).toEqual(true);
   });
 
   it('belongs to the `facets` x-module', () => {
-    const { filterWrapper } = renderNumberRangeFilter();
+    const { filterWrapper } = render();
 
     expect(getXComponentXModuleName(filterWrapper.vm)).toEqual('facets');
   });
 
   it('renders the provided filter by default', () => {
-    const { wrapper, filter } = renderNumberRangeFilter();
+    const { wrapper, filter } = render();
 
-    expect(wrapper.text()).toEqual(filter.label);
+    expect(wrapper.text()).toEqual(filter.value.label);
   });
 
   it('emits `UserClickedAFilter` & `UserClickedANumberRangeFilter` events when clicked', () => {
-    const { wrapper, clickFilter, emit, filter } = renderNumberRangeFilter();
+    const { clickFilter, emitSpy, filter } = render();
 
     clickFilter();
 
-    expect(emit).toHaveBeenCalledTimes(2);
+    expect(emitSpy).toHaveBeenCalledTimes(2);
     ['UserClickedAFilter', 'UserClickedANumberRangeFilter'].forEach(event => {
-      expect(emit).toHaveBeenCalledWith(event, filter, { target: wrapper.element });
+      expect(emitSpy).toHaveBeenCalledWith(event, filter.value, metadata);
     });
   });
 
   it('emits configured events when clicked', () => {
-    const { wrapper, clickFilter, emit, filter } = renderNumberRangeFilter({
+    const { clickFilter, emitSpy, filter } = render({
       clickEvents: { UserAcceptedAQuery: 'potato' }
     });
 
     clickFilter();
 
-    expect(emit).toHaveBeenCalledTimes(3);
+    expect(emitSpy).toHaveBeenCalledTimes(3);
     ['UserClickedAFilter', 'UserClickedANumberRangeFilter'].forEach(event => {
-      expect(emit).toHaveBeenCalledWith(event, filter, { target: wrapper.element });
-    });
-    expect(emit).toHaveBeenNthCalledWith(3, 'UserAcceptedAQuery', 'potato', {
-      target: wrapper.element
+      expect(emitSpy).toHaveBeenCalledWith(event, filter.value, metadata);
     });
+    expect(emitSpy).toHaveBeenNthCalledWith(3, 'UserAcceptedAQuery', 'potato', metadata);
   });
 
   it('allows customizing the rendered content with an slot', () => {
-    const { wrapper, filter } = renderNumberRangeFilter({
+    const { wrapper, filter } = render({
       template: `
       <NumberRangeFilter :filter="filter" :clickEvents="clickEvents" v-slot="{ filter }">
         <span data-test="custom-label">{{ filter.label }}</span>
@@ -106,11 +104,11 @@ describe('testing NumberRangeFilter component', () => {
     });
 
     const customLabel = wrapper.find(getDataTestSelector('custom-label'));
-    expect(customLabel.text()).toEqual(filter.label);
+    expect(customLabel.text()).toEqual(filter.value.label);
   });
 
   it('adds selected classes to the rendered element when the filter is selected', async () => {
-    const { wrapper, selectFilter } = renderNumberRangeFilter();
+    const { wrapper, selectFilter } = render();
 
     expect(wrapper.classes()).not.toContain('x-selected');
     expect(wrapper.classes()).not.toContain('x-number-range-filter--is-selected');
@@ -121,18 +119,3 @@ describe('testing NumberRangeFilter component', () => {
     expect(wrapper.classes()).toContain('x-number-range-filter--is-selected');
   });
 });
-
-interface NumberRangeFilterWrapperData {
-  clickEvents?: Partial<XEventsTypes>;
-  filter?: NumberRangeFilterModel;
-  template?: string;
-}
-
-interface NumberRangeFilterAPI {
-  clickFilter: () => void;
-  emit: jest.Mock;
-  filter: NumberRangeFilterModel;
-  filterWrapper: Wrapper<Vue>;
-  selectFilter: () => Promise<void>;
-  wrapper: Wrapper<Vue>;
-}

From 77f64205ff7f8b52ed36a712c0317bd734579554 Mon Sep 17 00:00:00 2001
From: Andrea Delgado <114981520+andreadlgdo@users.noreply.github.com>
Date: Mon, 24 Jun 2024 11:26:22 +0200
Subject: [PATCH 09/15] feat: change playground component

---
 .../src/x-modules/facets/components/test-filters.vue       | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/_vue3-migration-test/src/x-modules/facets/components/test-filters.vue b/packages/_vue3-migration-test/src/x-modules/facets/components/test-filters.vue
index 7bf05f3e52..fe50bd732d 100644
--- a/packages/_vue3-migration-test/src/x-modules/facets/components/test-filters.vue
+++ b/packages/_vue3-migration-test/src/x-modules/facets/components/test-filters.vue
@@ -1,7 +1,12 @@
 <template>
   <div>
     <h2>Simple Filter</h2>
-    <SimpleFilter :filter="filter" />
+    <SimpleFilter v-slot="{ clickFilter, cssClasses }" :filter="filter">
+      <label :class="cssClasses" for="filter">
+        <input @change="clickFilter" id="filter" :checked="filter.selected" type="checkbox" />
+        {{ filter.label }}
+      </label>
+    </SimpleFilter>
   </div>
 </template>
 

From 2676ca5379a5f2056f4c20bc2da34e38c03d6ddb Mon Sep 17 00:00:00 2001
From: Andrea Delgado <114981520+andreadlgdo@users.noreply.github.com>
Date: Wed, 26 Jun 2024 10:52:38 +0200
Subject: [PATCH 10/15] refactor: change name

---
 .../src/x-modules/facets/components/filters/simple-filter.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue b/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue
index 3bd52a4ef0..a2cf3805a2 100644
--- a/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue
+++ b/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue
@@ -68,7 +68,7 @@
     },
     setup(props) {
       /** The {@link XEventsTypes} to emit. */
-      const clickEventsEmit = computed(() => ({
+      const clickEventsToEmit = computed(() => ({
         UserClickedASimpleFilter: props.filter,
         ...props.clickEvents
       }));
@@ -79,7 +79,7 @@
       }));
 
       return {
-        clickEventsEmit,
+        clickEventsToEmit,
         cssClasses
       };
     }

From 16f5b889853a561594c1bc97bcffd58971086657 Mon Sep 17 00:00:00 2001
From: Andrea Delgado <114981520+andreadlgdo@users.noreply.github.com>
Date: Wed, 26 Jun 2024 11:43:29 +0200
Subject: [PATCH 11/15] fix: problem in the template

---
 .../src/x-modules/facets/components/filters/simple-filter.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue b/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue
index a2cf3805a2..2d31c6d385 100644
--- a/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue
+++ b/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue
@@ -2,7 +2,7 @@
   <RenderlessFilter
     v-slot="{ filter, clickFilter, cssClasses, isDisabled }"
     :class="cssClasses"
-    :clickEvents="clickEventsEmit"
+    :clickEvents="clickEventsToEmit"
     :filter="filter"
     class="x-simple-filter"
   >

From 7994375a7b18d3bc03dc1805e8ca25c520471b26 Mon Sep 17 00:00:00 2001
From: Andrea Delgado <114981520+andreadlgdo@users.noreply.github.com>
Date: Wed, 26 Jun 2024 12:45:06 +0200
Subject: [PATCH 12/15] fix: fix problem with styles

---
 .../components/filters/simple-filter.vue      | 57 ++++++++++---------
 1 file changed, 29 insertions(+), 28 deletions(-)

diff --git a/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue b/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue
index 2d31c6d385..ad9e40521a 100644
--- a/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue
+++ b/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue
@@ -1,12 +1,12 @@
 <template>
-  <RenderlessFilter
-    v-slot="{ filter, clickFilter, cssClasses, isDisabled }"
-    :class="cssClasses"
-    :clickEvents="clickEventsToEmit"
-    :filter="filter"
-    class="x-simple-filter"
-  >
-    <!--
+  <div :class="cssClasses" class="x-simple-filter">
+    <RenderlessFilter
+      v-slot="{ filter, clickFilter, cssClasses, isDisabled }"
+      :class="cssClasses"
+      :clickEvents="clickEventsToEmit"
+      :filter="filter"
+    >
+      <!--
       @slot The control element to render
       @binding {Filter} filter - The filter data
       @binding {() => void} clickFilter - Method that will invoke the needed actions after the user
@@ -15,30 +15,31 @@
       @binding {Boolean} isDisabled - True if the filter shouldn't be able to be selected by the
       user
     -->
-    <slot
-      v-bind="{
-        filter,
-        clickFilter,
-        cssClasses,
-        isDisabled
-      }"
-    >
-      <button
-        @click="clickFilter"
-        :aria-checked="filter.selected.toString()"
-        :class="cssClasses"
-        :disabled="isDisabled"
-        data-test="filter"
-        role="checkbox"
+      <slot
+        v-bind="{
+          filter,
+          clickFilter,
+          cssClasses,
+          isDisabled
+        }"
       >
-        <!--
+        <button
+          @click="clickFilter"
+          :aria-checked="filter.selected.toString()"
+          :class="cssClasses"
+          :disabled="isDisabled"
+          data-test="filter"
+          role="checkbox"
+        >
+          <!--
           @slot The content to render inside the button
           @binding {Filter} filter - The filter data
         -->
-        <slot :filter="filter" name="label">{{ filter.label }}</slot>
-      </button>
-    </slot>
-  </RenderlessFilter>
+          <slot :filter="filter" name="label">{{ filter.label }}</slot>
+        </button>
+      </slot>
+    </RenderlessFilter>
+  </div>
 </template>
 
 <script lang="ts">

From a5cd354c5638d6fe1514836965874cbb0980f01e Mon Sep 17 00:00:00 2001
From: Andrea Delgado <114981520+andreadlgdo@users.noreply.github.com>
Date: Thu, 27 Jun 2024 09:25:53 +0200
Subject: [PATCH 13/15] fix: remove div solution

---
 .../components/filters/simple-filter.vue      | 57 +++++++++----------
 1 file changed, 28 insertions(+), 29 deletions(-)

diff --git a/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue b/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue
index ad9e40521a..2d31c6d385 100644
--- a/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue
+++ b/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue
@@ -1,12 +1,12 @@
 <template>
-  <div :class="cssClasses" class="x-simple-filter">
-    <RenderlessFilter
-      v-slot="{ filter, clickFilter, cssClasses, isDisabled }"
-      :class="cssClasses"
-      :clickEvents="clickEventsToEmit"
-      :filter="filter"
-    >
-      <!--
+  <RenderlessFilter
+    v-slot="{ filter, clickFilter, cssClasses, isDisabled }"
+    :class="cssClasses"
+    :clickEvents="clickEventsToEmit"
+    :filter="filter"
+    class="x-simple-filter"
+  >
+    <!--
       @slot The control element to render
       @binding {Filter} filter - The filter data
       @binding {() => void} clickFilter - Method that will invoke the needed actions after the user
@@ -15,31 +15,30 @@
       @binding {Boolean} isDisabled - True if the filter shouldn't be able to be selected by the
       user
     -->
-      <slot
-        v-bind="{
-          filter,
-          clickFilter,
-          cssClasses,
-          isDisabled
-        }"
+    <slot
+      v-bind="{
+        filter,
+        clickFilter,
+        cssClasses,
+        isDisabled
+      }"
+    >
+      <button
+        @click="clickFilter"
+        :aria-checked="filter.selected.toString()"
+        :class="cssClasses"
+        :disabled="isDisabled"
+        data-test="filter"
+        role="checkbox"
       >
-        <button
-          @click="clickFilter"
-          :aria-checked="filter.selected.toString()"
-          :class="cssClasses"
-          :disabled="isDisabled"
-          data-test="filter"
-          role="checkbox"
-        >
-          <!--
+        <!--
           @slot The content to render inside the button
           @binding {Filter} filter - The filter data
         -->
-          <slot :filter="filter" name="label">{{ filter.label }}</slot>
-        </button>
-      </slot>
-    </RenderlessFilter>
-  </div>
+        <slot :filter="filter" name="label">{{ filter.label }}</slot>
+      </button>
+    </slot>
+  </RenderlessFilter>
 </template>
 
 <script lang="ts">

From 7aa985441094abb655003251c7911ae0cf677b42 Mon Sep 17 00:00:00 2001
From: Andrea Delgado <114981520+andreadlgdo@users.noreply.github.com>
Date: Thu, 27 Jun 2024 10:58:39 +0200
Subject: [PATCH 14/15] fix: class problems

---
 .../facets/components/filters/renderless-filter.vue       | 8 ++++----
 .../x-modules/facets/components/filters/simple-filter.vue | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/x-components/src/x-modules/facets/components/filters/renderless-filter.vue b/packages/x-components/src/x-modules/facets/components/filters/renderless-filter.vue
index 4875addf41..4098c080e9 100644
--- a/packages/x-components/src/x-modules/facets/components/filters/renderless-filter.vue
+++ b/packages/x-components/src/x-modules/facets/components/filters/renderless-filter.vue
@@ -35,10 +35,10 @@
       const isDisabled = computed(() => props.filter.totalResults === 0);
 
       /** Dynamic CSS classes to apply to the component. */
-      const cssClasses = computed(() => [
-        'x-facet-filter',
-        { 'x-selected': props.filter.selected }
-      ]);
+      const cssClasses = computed(() => ({
+        'x-facet-filter': true,
+        'x-selected': props.filter.selected
+      }));
 
       /** The events that will be emitted when the filter is clicked. */
       const events = computed(() => ({
diff --git a/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue b/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue
index 2d31c6d385..d96d469f89 100644
--- a/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue
+++ b/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue
@@ -1,10 +1,9 @@
 <template>
   <RenderlessFilter
-    v-slot="{ filter, clickFilter, cssClasses, isDisabled }"
+    v-slot="{ filter, clickFilter, cssClasses: slotCssClasses, isDisabled }"
     :class="cssClasses"
     :clickEvents="clickEventsToEmit"
     :filter="filter"
-    class="x-simple-filter"
   >
     <!--
       @slot The control element to render
@@ -19,14 +18,14 @@
       v-bind="{
         filter,
         clickFilter,
-        cssClasses,
+        cssClasses: { ...slotCssClasses, ...cssClasses },
         isDisabled
       }"
     >
       <button
         @click="clickFilter"
         :aria-checked="filter.selected.toString()"
-        :class="cssClasses"
+        :class="[slotCssClasses, cssClasses]"
         :disabled="isDisabled"
         data-test="filter"
         role="checkbox"
@@ -75,6 +74,7 @@
 
       /** Dynamic CSS classes to apply to the component. */
       const cssClasses = computed(() => ({
+        'x-simple-filter': true,
         'x-simple-filter--is-selected': props.filter.selected
       }));
 

From c239d5a397e0e817dd0deecd7fd57cada7996adb Mon Sep 17 00:00:00 2001
From: "Jose A. Cabaneros" <joseacabaneros@gmail.com>
Date: Mon, 1 Jul 2024 13:16:18 +0200
Subject: [PATCH 15/15] feat(simple-filter)!: migrate RenderlessFilter and
 SimpleFilter to composition API

BREAKING-CHANGE: use cssClasses prop to pass classes through the component in Vue 3 instead of class or :class when using RenderlessFilter or SimpleFilter components
---
 .../facets/components/test-filters.vue        | 39 +++++++++++++++++--
 .../__tests__/hierarchical-filter.spec.ts     | 19 +++------
 .../__tests__/number-range-filter.spec.ts     | 35 +++++++----------
 .../components/filters/renderless-filter.vue  | 33 +++++++++-------
 .../components/filters/simple-filter.vue      | 39 +++++++++++--------
 5 files changed, 96 insertions(+), 69 deletions(-)

diff --git a/packages/_vue3-migration-test/src/x-modules/facets/components/test-filters.vue b/packages/_vue3-migration-test/src/x-modules/facets/components/test-filters.vue
index fe50bd732d..162e93bd81 100644
--- a/packages/_vue3-migration-test/src/x-modules/facets/components/test-filters.vue
+++ b/packages/_vue3-migration-test/src/x-modules/facets/components/test-filters.vue
@@ -1,8 +1,28 @@
 <template>
+  <h2>Simple Filter</h2>
   <div>
-    <h2>Simple Filter</h2>
-    <SimpleFilter v-slot="{ clickFilter, cssClasses }" :filter="filter">
-      <label :class="cssClasses" for="filter">
+    <h3>As it is</h3>
+    <SimpleFilter
+      :filter="filter"
+      :cssClasses="innerCssClasses"
+      class="this-is-not-inherited-in-vue3-use-cssClasses-prop-instead"
+      data-custom="this-is-not-inherited-in-vue3"
+    />
+  </div>
+  <div>
+    <h3>Label slot content</h3>
+    <SimpleFilter :filter="filter" :cssClasses="innerCssClasses">
+      <template #label>🚗 {{ filter.label }} ({{ filter.totalResults }})</template>
+    </SimpleFilter>
+  </div>
+  <div>
+    <h3>Default slot content</h3>
+    <SimpleFilter
+      v-slot="{ filter, clickFilter, cssClasses }"
+      :filter="filter"
+      :cssClasses="innerCssClasses"
+    >
+      <label :class="cssClasses" for="filter" class="LABEL-CLASS">
         <input @change="clickFilter" id="filter" :checked="filter.selected" type="checkbox" />
         {{ filter.label }}
       </label>
@@ -12,7 +32,7 @@
 
 <script setup lang="ts">
   import { SimpleFilter as SimpleFilterModel } from '@empathyco/x-types';
-  import { ref, Ref } from 'vue';
+  import { computed, ref, Ref } from 'vue';
   import SimpleFilter from '../../../../../x-components/src/x-modules/facets/components/filters/simple-filter.vue';
 
   const filter: Ref<SimpleFilterModel> = ref({
@@ -23,4 +43,15 @@
     id: 'filter1',
     selected: false
   });
+
+  const innerCssClasses = computed(() => [
+    'MOT-CUSTOM',
+    { 'MOT-CUSTOM--SELECTED': filter.value.selected }
+  ]);
 </script>
+
+<style>
+  .MOT-CUSTOM--SELECTED {
+    background-color: greenyellow;
+  }
+</style>
diff --git a/packages/x-components/src/x-modules/facets/components/filters/__tests__/hierarchical-filter.spec.ts b/packages/x-components/src/x-modules/facets/components/filters/__tests__/hierarchical-filter.spec.ts
index fed226ae45..aff85c72e7 100644
--- a/packages/x-components/src/x-modules/facets/components/filters/__tests__/hierarchical-filter.spec.ts
+++ b/packages/x-components/src/x-modules/facets/components/filters/__tests__/hierarchical-filter.spec.ts
@@ -119,15 +119,10 @@ function render({
 }
 
 describe('testing `HierarchicalFilter` component', () => {
-  it('is an x-component', () => {
-    const { hierarchicalFilterWrapper } = render();
-
-    expect(isXComponent(hierarchicalFilterWrapper.vm)).toEqual(true);
-  });
-
-  it('belongs to the `facets` x-module', () => {
+  it('is an XComponent that belongs to the facets', () => {
     const { hierarchicalFilterWrapper } = render();
 
+    expect(isXComponent(hierarchicalFilterWrapper.vm)).toBeTruthy();
     expect(getXComponentXModuleName(hierarchicalFilterWrapper.vm)).toEqual('facets');
   });
 
@@ -180,8 +175,7 @@ describe('testing `HierarchicalFilter` component', () => {
             >
             {{ filter.label }}
           </label>
-        </HierarchicalFilter>
-      `
+        </HierarchicalFilter>`
     });
 
     const filter = getRootFilter();
@@ -205,8 +199,7 @@ describe('testing `HierarchicalFilter` component', () => {
           <template #label :filter="filter">
             <span data-test="custom-label">{{ filter.label }}</span>
           </template>
-        </HierarchicalFilter>
-      `
+        </HierarchicalFilter>`
     });
 
     const defaultButton = getFilterWrapper().find(getDataTestSelector('filter'));
@@ -306,7 +299,6 @@ describe('testing `HierarchicalFilter` component', () => {
       );
     });
 
-    // eslint-disable-next-line max-len
     it('emits `UserClickedAFilter` and `UserClickedAHierarchicalFilter` events when a child is clicked', () => {
       const { getFiltersWrappers, emitSpy } = render();
       expect(getFiltersWrappers().wrappers.length).toBeGreaterThan(1);
@@ -377,8 +369,7 @@ describe('testing `HierarchicalFilter` component', () => {
                >
                  {{ filter.label }}
                </button>
-           </HierarchicalFilter>
-     `
+           </HierarchicalFilter>`
       });
 
       const grandChild0Wrapper = getFilterWrapperByText('grand-child-0')!;
diff --git a/packages/x-components/src/x-modules/facets/components/filters/__tests__/number-range-filter.spec.ts b/packages/x-components/src/x-modules/facets/components/filters/__tests__/number-range-filter.spec.ts
index e29f189dd3..afef730476 100644
--- a/packages/x-components/src/x-modules/facets/components/filters/__tests__/number-range-filter.spec.ts
+++ b/packages/x-components/src/x-modules/facets/components/filters/__tests__/number-range-filter.spec.ts
@@ -36,13 +36,10 @@ function render({
   const filterWrapper = wrapper.findComponent(NumberRangeFilter);
 
   return {
-    wrapper,
-    filterWrapper,
+    wrapper: filterWrapper,
     emitSpy: jest.spyOn(XPlugin.bus, 'emit'),
     filter,
-    clickFilter: () => {
-      wrapper.trigger('click');
-    },
+    clickFilter: () => wrapper.trigger('click'),
     selectFilter: () => {
       filter.value.selected = true;
       return nextTick();
@@ -51,16 +48,11 @@ function render({
 }
 
 describe('testing NumberRangeFilter component', () => {
-  it('is an x-component', () => {
-    const { filterWrapper } = render();
-
-    expect(isXComponent(filterWrapper.vm)).toEqual(true);
-  });
-
-  it('belongs to the `facets` x-module', () => {
-    const { filterWrapper } = render();
+  it('is an XComponent that belongs to the facets', () => {
+    const { wrapper } = render();
 
-    expect(getXComponentXModuleName(filterWrapper.vm)).toEqual('facets');
+    expect(isXComponent(wrapper.vm)).toBeTruthy();
+    expect(getXComponentXModuleName(wrapper.vm)).toEqual('facets');
   });
 
   it('renders the provided filter by default', () => {
@@ -69,10 +61,10 @@ describe('testing NumberRangeFilter component', () => {
     expect(wrapper.text()).toEqual(filter.value.label);
   });
 
-  it('emits `UserClickedAFilter` & `UserClickedANumberRangeFilter` events when clicked', () => {
+  it('emits `UserClickedAFilter` & `UserClickedANumberRangeFilter` events when clicked', async () => {
     const { clickFilter, emitSpy, filter } = render();
 
-    clickFilter();
+    await clickFilter();
 
     expect(emitSpy).toHaveBeenCalledTimes(2);
     ['UserClickedAFilter', 'UserClickedANumberRangeFilter'].forEach(event => {
@@ -80,12 +72,12 @@ describe('testing NumberRangeFilter component', () => {
     });
   });
 
-  it('emits configured events when clicked', () => {
+  it('emits configured events when clicked', async () => {
     const { clickFilter, emitSpy, filter } = render({
       clickEvents: { UserAcceptedAQuery: 'potato' }
     });
 
-    clickFilter();
+    await clickFilter();
 
     expect(emitSpy).toHaveBeenCalledTimes(3);
     ['UserClickedAFilter', 'UserClickedANumberRangeFilter'].forEach(event => {
@@ -97,10 +89,9 @@ describe('testing NumberRangeFilter component', () => {
   it('allows customizing the rendered content with an slot', () => {
     const { wrapper, filter } = render({
       template: `
-      <NumberRangeFilter :filter="filter" :clickEvents="clickEvents" v-slot="{ filter }">
-        <span data-test="custom-label">{{ filter.label }}</span>
-      </NumberRangeFilter>
-      `
+        <NumberRangeFilter :filter="filter" :clickEvents="clickEvents" v-slot="{ filter }">
+          <span data-test="custom-label">{{ filter.label }}</span>
+        </NumberRangeFilter>`
     });
 
     const customLabel = wrapper.find(getDataTestSelector('custom-label'));
diff --git a/packages/x-components/src/x-modules/facets/components/filters/renderless-filter.vue b/packages/x-components/src/x-modules/facets/components/filters/renderless-filter.vue
index 4098c080e9..7ca88d17bd 100644
--- a/packages/x-components/src/x-modules/facets/components/filters/renderless-filter.vue
+++ b/packages/x-components/src/x-modules/facets/components/filters/renderless-filter.vue
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { Dictionary } from '@empathyco/x-utils';
   import { computed, defineComponent, h, PropType } from 'vue';
   import { BooleanFilter } from '@empathyco/x-types';
   import { useXBus } from '../../../../composables/use-x-bus';
@@ -26,7 +27,12 @@
         required: true
       },
       /** Additional events with its payload to emit when the filter is clicked. */
-      clickEvents: Object as PropType<Partial<XEventsTypes>>
+      clickEvents: Object as PropType<Partial<XEventsTypes>>,
+      /** Inheritance CSS classes. */
+      cssClasses: {
+        type: Array as PropType<(string | Dictionary<boolean>)[]>,
+        default: () => []
+      }
     },
     setup(props, { slots }) {
       const xBus = useXBus();
@@ -34,30 +40,31 @@
       /** Returns `true` when the filter should be disabled. */
       const isDisabled = computed(() => props.filter.totalResults === 0);
 
-      /** Dynamic CSS classes to apply to the component. */
-      const cssClasses = computed(() => ({
-        'x-facet-filter': true,
-        'x-selected': props.filter.selected
-      }));
+      /** CSS classes to apply to the element. */
+      const innerCssClasses = computed(() => [
+        'x-facet-filter',
+        { 'x-selected': props.filter.selected },
+        ...props.cssClasses
+      ]);
 
       /** The events that will be emitted when the filter is clicked. */
-      const events = computed(() => ({
+      const innerClickEvents = computed(() => ({
         UserClickedAFilter: props.filter,
         ...props.clickEvents
       }));
 
-      /** Emit events to the bus. */
-      const emitEvents = () => {
-        Object.entries(events.value).forEach(([event, payload]) => {
+      /** Emit filter click events to the bus. */
+      function emitClickEvents() {
+        Object.entries(innerClickEvents.value).forEach(([event, payload]) => {
           xBus.emit(event as XEvent, payload);
         });
-      };
+      }
 
       return () =>
         slots.default?.({
           filter: props.filter,
-          clickFilter: emitEvents,
-          cssClasses: cssClasses.value,
+          clickFilter: emitClickEvents,
+          cssClasses: innerCssClasses.value,
           isDisabled: isDisabled.value
         }) ?? h();
     }
diff --git a/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue b/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue
index d96d469f89..6eab6bbbb9 100644
--- a/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue
+++ b/packages/x-components/src/x-modules/facets/components/filters/simple-filter.vue
@@ -1,31 +1,31 @@
 <template>
   <RenderlessFilter
-    v-slot="{ filter, clickFilter, cssClasses: slotCssClasses, isDisabled }"
-    :class="cssClasses"
-    :clickEvents="clickEventsToEmit"
+    v-slot="{ filter, clickFilter, isDisabled, cssClasses }"
     :filter="filter"
+    :clickEvents="innerClickEvents"
+    :cssClasses="innerCssClasses"
   >
     <!--
       @slot The control element to render
       @binding {Filter} filter - The filter data
       @binding {() => void} clickFilter - Method that will invoke the needed actions after the user
       clicks the filter.
-      @binding {Object} cssClasses - Object containing CSS classes to add to the button
       @binding {Boolean} isDisabled - True if the filter shouldn't be able to be selected by the
       user
+      @binding {Object} cssClasses - Object containing CSS classes to add to the button
     -->
     <slot
       v-bind="{
         filter,
         clickFilter,
-        cssClasses: { ...slotCssClasses, ...cssClasses },
-        isDisabled
+        isDisabled,
+        cssClasses
       }"
     >
       <button
         @click="clickFilter"
         :aria-checked="filter.selected.toString()"
-        :class="[slotCssClasses, cssClasses]"
+        :class="cssClasses"
         :disabled="isDisabled"
         data-test="filter"
         role="checkbox"
@@ -42,6 +42,7 @@
 
 <script lang="ts">
   import { SimpleFilter as SimpleFilterModel } from '@empathyco/x-types';
+  import { Dictionary } from '@empathyco/x-utils';
   import { computed, defineComponent, PropType } from 'vue';
   import { XEventsTypes } from '../../../../wiring/events.types';
   import { facetsXModule } from '../../x-module';
@@ -63,24 +64,30 @@
         required: true
       },
       /** Additional events, with their payload, to emit when the filter is clicked. */
-      clickEvents: Object as PropType<Partial<XEventsTypes>>
+      clickEvents: Object as PropType<Partial<XEventsTypes>>,
+      /** Inheritance CSS classes. */
+      cssClasses: {
+        type: Array as PropType<(string | Dictionary<boolean>)[]>,
+        default: () => []
+      }
     },
     setup(props) {
       /** The {@link XEventsTypes} to emit. */
-      const clickEventsToEmit = computed(() => ({
+      const innerClickEvents = computed(() => ({
         UserClickedASimpleFilter: props.filter,
         ...props.clickEvents
       }));
 
-      /** Dynamic CSS classes to apply to the component. */
-      const cssClasses = computed(() => ({
-        'x-simple-filter': true,
-        'x-simple-filter--is-selected': props.filter.selected
-      }));
+      /** CSS classes to apply to the element. */
+      const innerCssClasses = computed(() => [
+        'x-simple-filter',
+        { 'x-simple-filter--is-selected': props.filter.selected },
+        ...props.cssClasses
+      ]);
 
       return {
-        clickEventsToEmit,
-        cssClasses
+        innerClickEvents,
+        innerCssClasses
       };
     }
   });