test: active and fix linter for tests (#1616)

packages/x-components/.eslintrc.js

@@ -1,13 +1,6 @@
 module.exports = {
   extends: ['plugin:@empathyco/x/all'],
-  // TODO - Reactivate linter for unit and e2e tests once they pass.
-  ignorePatterns: [
-    'cypress.config.ts',
-    '**/__tests__/**/*.spec.ts',
-    '**/tests/**/*.spec.ts',
-    '**/__tests__/**/utils.ts',
-    '**/tests/**/utils.ts'
-  ],
+  ignorePatterns: ['cypress.config.ts'],
   parserOptions: {
     tsconfigRootDir: __dirname,
     project: 'tsconfig.eslint.json'
@@ -43,7 +36,9 @@ module.exports = {
     {
       files: ['*.spec.ts'],
       rules: {
-        'max-len': 'off'
+        'max-len': 'off',
+        '@typescript-eslint/no-unsafe-argument': 'off',
+        'vue/one-component-per-file': 'off'
       }
     }
   ]

packages/x-components/src/components/__tests__/base-event-button.spec.ts

@@ -1,12 +1,10 @@
 import { ComponentMountingOptions, mount } from '@vue/test-utils';
 import { installNewXPlugin } from '../../__tests__/utils';
 import { XPlugin } from '../../plugins';
-import { WireMetadata } from '../../wiring/wiring.types';
+import { WireMetadata, XEventsTypes } from '../../wiring';
 import BaseEventButton from '../base-event-button.vue';
-import { XEventsTypes } from 'src/wiring';
 
-const stubSlot = `<span class="test-msg">button text</span>
-        <i class="test-icon"></i>`;
+const stubSlot = `<span class="test-msg">button text</span><i class="test-icon"></i>`;
 
 function render(options: ComponentMountingOptions<typeof BaseEventButton> = {}) {
   const wrapper = mount(BaseEventButton, {

packages/x-components/src/components/__tests__/highlight.spec.ts

@@ -22,18 +22,10 @@ function renderHighlight({
   });
   return {
     wrapper,
-    getStartPart() {
-      return wrapper.find(getDataTestSelector('highlight-start'));
-    },
-    getMatchingPart() {
-      return wrapper.find(getDataTestSelector('matching-part'));
-    },
-    getEndPart() {
-      return wrapper.find(getDataTestSelector('highlight-end'));
-    },
-    async setHighlight(highlight: string) {
-      return await wrapper.setProps({ highlight } as any);
-    }
+    getStartPart: () => wrapper.find(getDataTestSelector('highlight-start')),
+    getMatchingPart: () => wrapper.find(getDataTestSelector('matching-part')),
+    getEndPart: () => wrapper.find(getDataTestSelector('highlight-end')),
+    setHighlight: (highlight: string) => wrapper.setProps({ highlight } as any)
   };
 }
 

packages/x-components/src/composables/__tests__/use-x-bus.spec.ts

@@ -39,7 +39,7 @@ describe('testing useXBus', () => {
     onColumnsNumberProvidedMock.mockReset();
   });
 
-  it('should emit and on subscription in the bus for registered events', async () => {
+  it('should emit and on subscription in the bus for registered events', () => {
     const { emitSpy, onSpy } = render();
     const metadata = {
       customMetadata: 'custom',

packages/x-components/src/x-installer/api/__tests__/default-api.spec.ts

@@ -72,16 +72,16 @@ describe('testing default X API', () => {
       lang: 'es'
     };
     const rootComponent = defineComponent({
-      template: `<div>
-        <h1 class="lang-test">{{ lang }}</h1>
-        <h1 class="store-test">{{ store }}</h1>
-      </div>`,
       setup: () => {
         const snippetConfig = inject<SnippetConfig>('snippetConfig');
         const lang = computed(() => snippetConfig?.lang ?? '');
         const store = computed(() => snippetConfig?.store ?? '');
         return { lang, store };
-      }
+      },
+      template: `<div>
+        <h1 class="lang-test">{{ lang }}</h1>
+        <h1 class="store-test">{{ store }}</h1>
+      </div>`
     });
 
     const { api } = await new XInstaller({

packages/x-components/src/x-installer/x-installer/__tests__/x-installer.spec.ts

@@ -23,9 +23,11 @@ const getMinimumSnippetConfig = (): SnippetConfig => ({
 });
 
 const component = defineComponent({
-  template: '<h1/>',
-  setup: () => {},
-  mounted: jest.fn()
+  setup: () => {
+    // empty setup
+  },
+  mounted: jest.fn(),
+  template: '<h1/>'
 });
 
 /**
@@ -36,12 +38,12 @@ const component = defineComponent({
  */
 function createSnippetConfigComponent(snippetProperty: keyof SnippetConfig = 'instance') {
   return defineComponent({
-    template: '<h1 id="snippet-config-value">{{ snippetConfigValue }}</h1>',
     setup: () => {
       const snippetConfig = inject<SnippetConfig>('snippetConfig');
       const snippetConfigValue = computed(() => snippetConfig?.[snippetProperty] ?? '');
       return { snippetConfigValue };
-    }
+    },
+    template: '<h1 id="snippet-config-value">{{ snippetConfigValue }}</h1>'
   });
 }
 
@@ -98,6 +100,7 @@ describe('testing `XInstaller` utility', () => {
       getMinimumSnippetConfig()
     );
 
+    // eslint-disable-next-line @typescript-eslint/unbound-method
     expect(component?.mounted).toHaveBeenCalledTimes(1);
   });
 
@@ -229,8 +232,10 @@ describe('testing `XInstaller` utility', () => {
      */
 
     const componentApp = defineComponent({
-      template: '<section class="root-element" />',
-      setup: () => {}
+      setup: () => {
+        // emtpy setup
+      },
+      template: '<section class="root-element" />'
     });
 
     function installX(

packages/x-components/src/x-modules/device/components/__tests__/device-detector.spec.ts

@@ -25,7 +25,7 @@ async function renderDeviceDetector({
 } = {}) {
   Object.assign(window, { innerWidth: initialWidth });
   const xBus = new XDummyBus();
-  let emitSpy = jest.spyOn(xBus, 'emit');
+  const emitSpy = jest.spyOn(xBus, 'emit');
 
   const wrapper = mount(DeviceDetector, {
     props: {
@@ -45,7 +45,7 @@ async function renderDeviceDetector({
       Object.assign(window, { innerWidth: width });
       window.dispatchEvent(new UIEvent('resize'));
     },
-    waitForThrottle() {
+    waitForThrottle: () => {
       jest.advanceTimersByTime(throttleMs);
       return nextTick();
     }

packages/x-components/src/x-modules/experience-controls/components/__tests__/experience-controls.spec.ts

@@ -24,9 +24,8 @@ describe('testing experience controls component', () => {
     expect(getXComponentXModuleName(wrapper.vm)).toEqual('experienceControls');
   });
 
-  // eslint-disable-next-line max-len
   it('listens to the event ExperienceControlsEventsChanged and emits the events on the payload', () => {
-    const { wrapper } = renderExperienceControls();
+    renderExperienceControls();
 
     const eventsFromExperienceControls = {
       ExtraParamsProvided: {

packages/x-components/src/x-modules/extra-params/components/__tests__/renderless-extra-params.spec.ts

@@ -8,11 +8,7 @@ import { extraParamsXModule } from '../../x-module';
 import RenderlessExtraParam from '../renderless-extra-param.vue';
 import { resetXExtraParamStateWith } from './utils';
 
-function render({
-  template = `<RenderlessExtraParam :name="name" />`,
-  name = 'warehouse',
-  params = {}
-} = {}) {
+function render({ template = `<RenderlessExtraParam :name="name" />`, name = 'warehouse' } = {}) {
   const wrapper = mount(
     {
       template,

packages/x-components/src/x-modules/facets/components/__tests__/preselected-filters.spec.ts

@@ -147,11 +147,11 @@ describe('testing Preselected filters component', () => {
 
     // Create a test component to check the injected provide value
     const TestComponent = defineComponent({
-      template: '<div id="provide-test">{{ snippetConfig.filters.join(\',\') }}</div>',
       setup() {
         const snippetConfig = inject('snippetConfig');
         return { snippetConfig };
-      }
+      },
+      template: '<div id="provide-test">{{ snippetConfig.filters.join(\',\') }}</div>'
     });
 
     // Mount the original component with TestComponent inside the slot to test provide

packages/x-components/src/x-modules/facets/components/filters/__tests__/all-filter.spec.ts

@@ -51,11 +51,11 @@ function renderAllFilter({ template = `<AllFilter :facet="facet"></AllFilter>` }
     wrapper,
     allFilterWrapper,
     facet,
-    toggleFirstFilter() {
+    toggleFirstFilter: () => {
       XPlugin.bus.emit('UserClickedAFilter', store.state.x.facets.filters[facet.filters[0].id]);
       return nextTick();
     },
-    clickAllFilter() {
+    clickAllFilter: () => {
       allFilterWrapper.trigger('click');
       return nextTick();
     }

packages/x-components/src/x-modules/facets/components/filters/__tests__/hierarchical-filter.spec.ts

@@ -333,13 +333,12 @@ describe('testing `HierarchicalFilter` component', () => {
 
       getFiltersWrappers().forEach((filterWrapper, index) => {
         const filter = getFilters()[index];
+        const classes = ['x-facet-filter', 'x-hierarchical-filter'];
         if (partiallySelectedIds.includes(filter.id)) {
-          expect(filterWrapper.classes()).toContain('x-hierarchical-filter--is-partially-selected');
-        } else {
-          expect(filterWrapper.classes()).not.toContain(
-            'x-hierarchical-filter--is-partially-selected'
-          );
+          classes.push('x-hierarchical-filter--is-partially-selected');
+          classes.push('x-facet-filter--is-partially-selected');
         }
+        expect(filterWrapper.classes()).toEqual(expect.arrayContaining(classes));
       });
     });
 

packages/x-components/src/x-modules/facets/components/lists/__tests__/exclude-filters-with-no-results.spec.ts

@@ -1,27 +1,18 @@
-import { Filter } from '@empathyco/x-types';
-import { mount, VueWrapper, DOMWrapper } from '@vue/test-utils';
-import Vue from 'vue';
-import { getSimpleFilterStub } from '../../../../../__stubs__/filters-stubs.factory';
+import { SimpleFilter } from '@empathyco/x-types';
+import { mount } from '@vue/test-utils';
+import { getSimpleFilterStub } from '../../../../../__stubs__';
 import { getXComponentXModuleName, isXComponent } from '../../../../../components';
 import ExcludeFiltersWithNoResults from '../exclude-filters-with-no-results.vue';
 
-/**
- * Renders a {@link ExcludeFiltersWithNoResults} component with the provided options, and returns
- * a small API to test it.
- *
- * @param options - Options to test the {@link ExcludeFiltersWithNoResults} component with.
- * @returns A {@link RenderExcludeFiltersWithNoResultsAPI} object to test the
- * {@link ExcludeFiltersWithNoResults}.
- */
 function renderExcludeFiltersWithNoResults({
-  filters = [],
+  filters = [] as SimpleFilter[],
   template = `
     <ExcludeFiltersWithNoResults :filters="filters" v-slot="{ filters }">
       <div>
         <span class="filter" v-for="filter in filters">{{ filter.label }}</span>
       </div>
     </ExcludeFiltersWithNoResults>`
-}: RenderExcludeFiltersWithNoResultsOptions = {}): RenderExcludeFiltersWithNoResultsAPI {
+} = {}) {
   const templateWrapper = mount(
     {
       props: ['filters'],
@@ -38,9 +29,7 @@ function renderExcludeFiltersWithNoResults({
   const wrapper = templateWrapper.findComponent(ExcludeFiltersWithNoResults);
   return {
     wrapper,
-    getRenderedFilters() {
-      return templateWrapper.findAll('.filter');
-    }
+    getRenderedFilters: () => templateWrapper.findAll('.filter')
   };
 }
 
@@ -70,18 +59,3 @@ describe('testing Filters component', () => {
     expect(renderedFilters.map(wrapper => wrapper.text())).toEqual(['Women', 'Kids']);
   });
 });
-
-interface RenderExcludeFiltersWithNoResultsOptions {
-  /** The filters data to render. */
-  filters?: Filter[];
-  /** The template to render. Receives the `filters` via prop, and has registered the
-   * {@link ExcludeFiltersWithNoResults} component. */
-  template?: string;
-}
-
-interface RenderExcludeFiltersWithNoResultsAPI {
-  /** Retrieves the testing wrappers of the filters. */
-  getRenderedFilters: () => DOMWrapper<Element>[];
-  /** The Vue testing utils wrapper for the {@link ExcludeFiltersWithNoResults} component. */
-  wrapper: VueWrapper;
-}

packages/x-components/src/x-modules/facets/components/lists/__tests__/filters-list.spec.ts

@@ -1,21 +1,14 @@
-import { Filter } from '@empathyco/x-types';
-import { mount, VueWrapper } from '@vue/test-utils';
-import Vue from 'vue';
-import { createSimpleFacetStub } from '../../../../../__stubs__/facets-stubs.factory';
+import { SimpleFilter } from '@empathyco/x-types';
+import { mount } from '@vue/test-utils';
+import { createSimpleFacetStub } from '../../../../../__stubs__';
 import { getDataTestSelector } from '../../../../../__tests__/utils';
 import { getXComponentXModuleName, isXComponent } from '../../../../../components';
 import FiltersList from '../filters-list.vue';
 
-/**
- * Function that returns a Filters wrapper.
- *
- * @param filters - Filters filters props.
- * @returns FiltersList vue-test-utils wrapper.
- */
 function renderFilters({
-  filters = [],
+  filters = [] as SimpleFilter[],
   template = '<Filters :filters="filters"></Filters>'
-}: RenderFiltersOptions = {}): RenderFiltersAPI {
+} = {}) {
   const wrapperTemplate = mount(
     {
       props: ['filters'],
@@ -65,7 +58,7 @@ describe('testing Filters component', () => {
       filters,
       template: `
         <Filters :filters="filters" #default="{ filter }">
-        <p>{{ filter.label }}</p>
+          <p>{{ filter.label }}</p>
         </Filters>
       `
     });
@@ -76,18 +69,3 @@ describe('testing Filters component', () => {
     });
   });
 });
-
-interface RenderFiltersOptions {
-  /** The filters data to render. */
-  filters?: Filter[];
-  /** The template to render. Receives the `filters` via prop, and has registered the
-   * {@link FiltersComponent} as `Filters`. */
-  template?: string;
-}
-
-interface RenderFiltersAPI {
-  /** The rendered filters data. */
-  filters: Filter[];
-  /** The Vue testing utils wrapper for the {@link FiltersComponent}. */
-  wrapper: VueWrapper;
-}

packages/x-components/src/x-modules/facets/components/lists/__tests__/filters-search.spec.ts

@@ -1,7 +1,7 @@
 import { Filter } from '@empathyco/x-types';
 import { Dictionary } from '@empathyco/x-utils';
 import { mount, VueWrapper, DOMWrapper } from '@vue/test-utils';
-import Vue, { nextTick } from 'vue';
+import { nextTick } from 'vue';
 import { getXComponentXModuleName, isXComponent } from '../../../../../components';
 import { getSimpleFilterStub } from '../../../../../__stubs__/filters-stubs.factory';
 import { getDataTestSelector } from '../../../../../__tests__/utils';