Merge pull request #8 from Scille/run-tests

Setup components test (with ms-input tests imported from parsec-cloud)

.github/workflows/ci.yml

@@ -40,8 +40,6 @@ jobs:
         timeout-minutes: 2
 
   test:
-    # Currently disable the tests since they are not configured in the repository.
-    if: false
     name: Test
     runs-on: ubuntu-22.04
     steps:

package.json

@@ -46,7 +46,7 @@
     "@vitejs/plugin-legacy": "^5.0.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
-    "@vue/test-utils": "^2.3.0",
+    "@vue/test-utils": "^2.4.5",
     "@vue/typescript": "^1.8.20",
     "@zxcvbn-ts/core": "^3.0.4",
     "@zxcvbn-ts/language-common": "^3.0.4",
@@ -62,6 +62,7 @@
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-vue": "^9.18.1",
     "eslint-plugin-vue-scoped-css": "^2.5.1",
+    "happy-dom": "^14.7.1",
     "prettier": "3.1.0",
     "prettier-plugin-organize-imports": "^3.2.4",
     "sass": "^1.69.5",

tests/components/specs/testMsChoosePasswordInput.spec.ts

@@ -0,0 +1,45 @@
+// Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS
+
+import { IonInput } from '@ionic/vue';
+import { MsChoosePasswordInput } from '@lib';
+import { VueWrapper, mount } from '@vue/test-utils';
+
+describe('Choose password', () => {
+  let wrapper: VueWrapper<any>;
+
+  beforeEach(() => {
+    wrapper = mount(MsChoosePasswordInput, {});
+  });
+
+  it('Validate the fields', async () => {
+    // Fields are empty, obviously not valid
+    expect(await wrapper.vm.areFieldsCorrect()).to.be.false;
+
+    const ionInputs = wrapper.findAllComponents(IonInput);
+    ionInputs[0].vm.$emit('ionInput', { target: { value: 'P@ssw0rd.' } });
+    expect(wrapper.vm.password).to.equal('P@ssw0rd.');
+
+    // Confirmation is not filled, not valid
+    expect(await wrapper.vm.areFieldsCorrect()).to.be.false;
+
+    ionInputs[1].vm.$emit('ionInput', { target: { value: 'P@ssw0rd.' } });
+    expect(wrapper.vm.passwordConfirm).to.equal('P@ssw0rd.');
+
+    // P@ssw0rd is not strong enough
+    expect(await wrapper.vm.areFieldsCorrect()).to.be.false;
+
+    ionInputs[0].vm.$emit('ionInput', {
+      target: { value: 'ABiggerSaferPassword' },
+    });
+    expect(wrapper.vm.password).to.equal('ABiggerSaferPassword');
+
+    // Password is strong enough but password and confirmation don't match
+    expect(await wrapper.vm.areFieldsCorrect()).to.be.false;
+
+    ionInputs[1].vm.$emit('ionInput', {
+      target: { value: 'ABiggerSaferPassword' },
+    });
+    expect(wrapper.vm.passwordConfirm).to.equal('ABiggerSaferPassword');
+    expect(await wrapper.vm.areFieldsCorrect()).to.be.true;
+  });
+});

tests/components/specs/testPasswordInput.spec.ts

@@ -0,0 +1,46 @@
+// Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS
+
+import { IonInput } from '@ionic/vue';
+import { MsPasswordInput } from '@lib';
+import { VueWrapper, mount } from '@vue/test-utils';
+
+describe('Password Input', () => {
+  let wrapper: VueWrapper;
+  beforeEach(() => {
+    wrapper = mount(MsPasswordInput, {
+      props: {
+        label: 'A Label',
+        modelValue: '',
+      },
+    });
+  });
+
+  it('should emit a signal when input changes', async () => {
+    const ionInput = wrapper.findComponent(IonInput);
+    ionInput.vm.$emit('ionInput', { target: { value: 'P@ssw0rd.' } });
+    expect(wrapper.emitted('change')?.length).to.equal(1);
+    expect(wrapper.emitted('change')?.at(0)).to.have.same.members(['P@ssw0rd.']);
+  });
+
+  it('should emit enter when Enter key is pressed', async () => {
+    // Setting a value
+    await wrapper.setProps({ modelValue: 'P@ssw0rd.' });
+    const ionInput = wrapper.findComponent(IonInput);
+    await ionInput.trigger('keyup.enter');
+    expect(wrapper.emitted('onEnterKeyup')?.length).to.equal(1);
+  });
+
+  it('should not emit enter when input is empty', async () => {
+    const ionInput = wrapper.findComponent(IonInput);
+    await ionInput.trigger('keyup.enter');
+    expect(wrapper.emitted('onEnterKeyup')).to.be.undefined;
+  });
+
+  it('should toggle password visibility button icon and password input type on password visibility button click', async () => {
+    expect((wrapper.vm as any).passwordVisible).to.be.false;
+    await wrapper.find('.input-icon').trigger('click');
+    expect((wrapper.vm as any).passwordVisible).to.be.true;
+    await wrapper.find('.input-icon').trigger('click');
+    expect((wrapper.vm as any).passwordVisible).to.be.false;
+  });
+});

tests/components/specs/testSearchInput.spec.ts

@@ -0,0 +1,37 @@
+// Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS
+
+import { IonInput } from '@ionic/vue';
+import { MsSearchInput } from '@lib';
+import { mount, VueWrapper } from '@vue/test-utils';
+
+describe('Search Input', () => {
+  let wrapper: VueWrapper;
+  beforeEach(() => {
+    wrapper = mount(MsSearchInput, {
+      props: {
+        placeholder: 'A Label',
+      },
+    });
+  });
+
+  it('should emit a signal when input changes', async () => {
+    const ionInput = wrapper.findComponent(IonInput);
+    ionInput.vm.$emit('ionInput', { target: { value: 'Search string' } });
+    expect(wrapper.emitted('change')?.length).to.equal(1);
+    expect(wrapper.emitted('change')?.at(0)).to.have.same.members(['Search string']);
+  });
+
+  it('should emit enter when Enter key is pressed', async () => {
+    // Setting a value
+    await wrapper.setProps({ modelValue: 'Search string' });
+    const ionInput = wrapper.findComponent(IonInput);
+    await ionInput.trigger('keyup.enter');
+    expect(wrapper.emitted('enter')?.length).to.equal(1);
+  });
+
+  it('should not emit enter when input is empty', async () => {
+    const ionInput = wrapper.findComponent(IonInput);
+    await ionInput.trigger('keyup.enter');
+    expect(wrapper.emitted('enter')).to.be.undefined;
+  });
+});

tests/support/mocks.ts

@@ -0,0 +1,12 @@
+// Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS
+
+import { I18n, Translatable } from '@lib';
+import { config } from '@vue/test-utils';
+
+function mockI18n(): void {
+  config.global.mocks = {
+    $msTranslate: (tr: Translatable): string => I18n.translate(tr),
+  };
+}
+
+export { mockI18n };

tests/support/setup.ts

@@ -0,0 +1,17 @@
+// Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS
+
+import { I18n } from '@lib';
+import appEnUS from '@lib/locales/en-US.json';
+import appFrFR from '@lib/locales/fr-FR.json';
+import { mockI18n } from '@tests/support/mocks';
+
+beforeEach(() => {
+  I18n.init({
+    defaultLocale: 'en-US',
+    customAssets: {
+      'fr-FR': appFrFR,
+      'en-US': appEnUS,
+    },
+  });
+  mockI18n();
+});

vite.config.ts

@@ -1,11 +1,14 @@
+// Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS
+/// <reference types="vitest" />
+
 import vue from '@vitejs/plugin-vue';
 import path from 'path';
-import { defineConfig } from 'vite';
+import { defineConfig, UserConfig } from 'vite';
 import dts from 'vite-plugin-dts';
 import { libInjectCss } from 'vite-plugin-lib-inject-css';
 
 // https://vitejs.dev/config/
-export default defineConfig({
+const config: UserConfig = {
   plugins: [
     vue(),
     libInjectCss(),
@@ -22,8 +25,13 @@ export default defineConfig({
     },
   },
   test: {
+    setupFiles: [path.resolve(__dirname, './tests/support/setup.ts')],
     globals: true,
-    environment: 'jsdom',
+    alias: {
+      '@lib': path.resolve(__dirname, './lib'),
+      '@tests': path.resolve(__dirname, './tests'),
+    },
+    environment: 'happy-dom',
   },
   build: {
     manifest: true,
@@ -48,4 +56,6 @@ export default defineConfig({
       },
     },
   },
-});
+};
+
+export default defineConfig(config);