ci: sonar integration

.github/workflows/build.yml

@@ -35,6 +35,27 @@ jobs:
         timeout-minutes: 15
         uses: ./.github/actions/run-e2e-tests
 
+      - name: Load Motive Shared Actions
+        uses: daspn/private-actions-checkout@v2
+        with:
+          app_id: ${{ secrets.MOTIVE_PRIVATE_ACTIONS_APP_ID }}
+          app_private_key: ${{ secrets.MOTIVE_PRIVATE_ACTIONS_APP_PRIVATE_KEY }}
+          configure_git: true
+          actions_list: '[ "empathyco/platform-motive-ci-library@v5" ]'
+          checkout_base_path: ./.loaded_actions/actions
+
+      - name: Sonar scanner
+        uses: ./.loaded_actions/actions/platform-motive-ci-library/node/sonarqube
+        env:
+          BROWSERSLIST_IGNORE_OLD_DATA: 'true'
+        with:
+          IS_PR: 'true'
+          BRANCH_NAME: main
+          CHANGE_BRANCH: ${{ github.event.pull_request.head.ref }}
+          CHANGE_TARGET: ${{ github.event.pull_request.base.ref }}
+          CHANGE_ID: ${{ github.event.number }}
+          REPO_NAME: ${{ github.event.repository.name }}
+
       - name: release
         if:
           ${{ github.ref_name == 'main' && github.actor != 'support-empathy' &&

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/cypress.config.ts

@@ -1,5 +1,3 @@
-import { addCucumberPreprocessorPlugin } from '@badeball/cypress-cucumber-preprocessor';
-import { createEsbuildPlugin } from '@badeball/cypress-cucumber-preprocessor/esbuild';
 import { defineConfig } from 'cypress';
 
 export default defineConfig({
@@ -9,34 +7,41 @@ export default defineConfig({
     requestTimeout: 7000,
     viewportHeight: 1080,
     viewportWidth: 1920,
-    screenshotOnRunFailure: false,
-    video: false,
+    specPattern: 'tests/e2e/**/*.feature',
     supportFile: 'tests/support/index.ts',
     fixturesFolder: 'tests/e2e/fixtures',
     screenshotsFolder: 'tests/e2e/screenshots',
+    experimentalRunAllSpecs: true,
+    screenshotOnRunFailure: false,
+    video: false,
     retries: {
       openMode: 0,
       runMode: 1
     },
     async setupNodeEvents(on, config) {
-      await addCucumberPreprocessorPlugin(on, config);
-      on(
-        'file:preprocessor',
-        require('@bahmutov/cypress-esbuild-preprocessor')({
-          plugins: [createEsbuildPlugin(config)]
-        })
+      const { createEsbuildPlugin } = require('@badeball/cypress-cucumber-preprocessor/esbuild');
+      const createBundler = require('@bahmutov/cypress-esbuild-preprocessor');
+
+      // await here
+      await require('@badeball/cypress-cucumber-preprocessor').addCucumberPreprocessorPlugin(
+        on,
+        config
       );
+
+      on('file:preprocessor', createBundler({ plugins: [createEsbuildPlugin(config)] }));
+
+      // return any mods to Cypress
       return config;
-    },
-    specPattern: 'tests/e2e/**/*.feature',
-    experimentalRunAllSpecs: true
+    }
   },
   component: {
     defaultCommandTimeout: 7000,
-    experimentalSingleTabRunMode: true,
+    viewportHeight: 1080,
+    viewportWidth: 1920,
     specPattern: 'tests/unit/**/*.spec.ts',
     supportFile: 'tests/support/index.ts',
     indexHtmlFile: 'tests/support/component-index.html',
+    experimentalSingleTabRunMode: true,
     screenshotOnRunFailure: false,
     video: false,
     retries: {

packages/x-components/jest.config.js

@@ -4,6 +4,9 @@ module.exports = {
     '^.+\\.vue$': '@vue/vue3-jest',
     '^.+\\.scss$': 'jest-scss-transform'
   },
+  moduleNameMapper: {
+    'vue-global-events': '<rootDir>/node_modules/vue-global-events/dist/index.cjs'
+  },
   testMatch: ['<rootDir>/src/**/*.spec.ts'],
   setupFilesAfterEnv: ['./jest.setup.ts'],
   // jest 27 changes the default environment to node instead of jsdom

packages/x-components/package.json

@@ -52,11 +52,11 @@
     "gen:typescript-docs": "api-documenter markdown --input-folder dist/report --output-folder docs/API-reference/api",
     "gen:component-docs": "vue-docgen",
     "lint": "eslint . --ext .ts,.vue",
-    "test:unit": "jest --silent",
+    "test:unit": "jest --coverage",
     "test:unit-jest": "jest",
-    "test:unit-cypress": "cypress run --component --browser chrome",
     "test:unit-coverage": "jest --coverage",
     "test:unit-watch": "jest --watch",
+    "test:unit-cypress": "cypress run --component --browser chrome",
     "test:e2e": "start-server-and-test preview http://localhost:8080 cypress:open",
     "test:e2e:firefox": "start-server-and-test serve http://localhost:8080 cypress:open:firefox",
     "test:e2e:ci": "start-server-and-test serve http://localhost:8080 cypress:run:ci",

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

@@ -1,6 +1,6 @@
-import { createLocalVue } from '@vue/test-utils';
+import { computed, defineComponent, inject, nextTick } from 'vue';
 import { XComponentsAdapterDummy } from '../../../__tests__/adapter.dummy';
-import { XInstaller } from '../../x-installer/x-installer';
+import { XInstaller } from '../../x-installer';
 import { NormalisedSnippetConfig, SnippetConfig } from '../api.types';
 import { BaseXAPI } from '../base-api';
 import { XDummyBus } from '../../../__tests__/bus.dummy';
@@ -66,43 +66,42 @@ describe('testing default X API', () => {
   });
 
   it('changes the `SnippetConfig` when calling the `setSnippetConfig` function', async () => {
-    const vue = createLocalVue();
     const snippetConfig: SnippetConfig = {
       instance: 'test',
       scope: 'test',
       lang: 'es'
     };
-    const installerApp = vue.extend({
-      inject: ['snippetConfig'],
-      render(h) {
-        // Vue does not provide type safety for inject
-        const lang = (this as any).snippetConfig.lang;
-        const store = (this as any).snippetConfig.store;
-        return h('div', [
-          h('h1', { class: 'lang-test' }, [lang]),
-          h('h1', { class: 'store-test' }, [store])
-        ]);
-      }
+    const rootComponent = defineComponent({
+      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, app } = await new XInstaller({
+    const { api } = await new XInstaller({
+      rootComponent,
       adapter: XComponentsAdapterDummy,
-      api: defaultXAPI,
-      app: installerApp
+      api: defaultXAPI
     }).init(snippetConfig);
 
-    const langElement = app?.$el.getElementsByClassName('lang-test')[0];
-    const storeElement = app?.$el.getElementsByClassName('store-test')[0];
+    const langElement = document.querySelector('.lang-test');
+    const storeElement = document.querySelector('.store-test');
 
-    expect(langElement).toHaveTextContent(snippetConfig.lang);
+    expect(langElement?.textContent).toEqual(snippetConfig.lang);
     api?.setSnippetConfig({ lang: 'en' });
-    await vue.nextTick();
-    expect(langElement).toHaveTextContent('en');
+    await nextTick();
+    expect(langElement?.textContent).toEqual('en');
 
-    expect(storeElement).toHaveTextContent('');
+    expect(storeElement?.textContent).toEqual('');
     api?.setSnippetConfig({ store: 'Portugal' });
-    await vue.nextTick();
-    expect(storeElement).toHaveTextContent('Portugal');
+    await nextTick();
+    expect(storeElement?.textContent).toEqual('Portugal');
   });
 
   it('should allow set the snippetConfig getter', () => {