tests: added component + auth store tests [WTEL-4374]

.github/workflows/main.yml

@@ -0,0 +1,20 @@
+name: Admin CI
+
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version: '20.x'
+    - run: npm ci
+    - run: npm run test:unit

package.json

@@ -15,7 +15,7 @@
     "@egjs/vue3-flicking": "^4.10.6",
     "@vuelidate/core": "^2.0.0",
     "@vuelidate/validators": "^2.0.0",
-    "@webitel/ui-sdk": "^24.4.12",
+    "@webitel/ui-sdk": "^24.4.17",
     "axios": "^1.6.8",
     "deep-copy": "^1.4.2",
     "vue": "^3.4.21",
@@ -25,15 +25,15 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.4",
+    "@vitest/coverage-v8": "^1.4.0",
     "@vue/compiler-sfc": "^3.4.21",
     "@vue/test-utils": "2.3.0",
-    "@vitest/coverage-v8": "^1.4.0",
     "eslint": "^8.16.0",
     "eslint-plugin-vue": "^8.7.1",
+    "happy-dom": "^14.3.1",
     "sass": "^1.52.1",
     "tslint": "^6.1.3",
     "vite": "^5.1.6",
-    "happy-dom": "^14.3.1",
     "vite-plugin-node-polyfills": "^0.21.0",
     "vite-plugin-svg-sprite": "^0.5.1",
     "vitest": "^1.4.0"

src/components/auth/__tests__/the-auth.spec.js

@@ -0,0 +1,50 @@
+import { shallowMount, mount } from '@vue/test-utils';
+import { createStore } from 'vuex';
+import router from '../../../router/router.js';
+import TheAuth from '../the-auth.vue';
+
+describe('TheAuth', () => {
+  let store;
+
+  beforeEach(() => {
+    store = createStore({
+      modules: {
+        auth: {
+          namespaced: true,
+        },
+        appearance: {
+          namespaced: true,
+        },
+      },
+    });
+  });
+
+  it('should render', () => {
+    const wrapper = shallowMount(TheAuth, {
+      global: {
+        plugins: [store, router],
+        mocks: {
+          $breakpoint: {},
+        },
+      },
+    });
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it('calls "submit auth" action on submit event', () => {
+    const mock = vi.spyOn(TheAuth.methods, 'submitAuth').mockImplementationOnce(vi.fn());
+
+    const wrapper = mount(TheAuth, {
+      global: {
+        plugins: [store, router],
+        mocks: {
+          $breakpoint: {},
+        },
+      },
+    });
+
+    wrapper.findComponent({ name: 'TheLogin'}).vm.$emit('submit');
+
+    expect(mock).toHaveBeenCalled();
+  });
+});

src/components/auth/register/__tests__/the-register.spec.js

@@ -0,0 +1,81 @@
+import { shallowMount, mount } from '@vue/test-utils';
+import { createStore } from 'vuex';
+import TheRegister from '../the-register.vue';
+
+describe('TheRegister', () => {
+  let store;
+
+  beforeEach(() => {
+    store = createStore({
+      modules: {
+        auth: {
+          namespaced: true,
+        },
+      },
+    });
+  });
+
+  it('should render', () => {
+    const wrapper = shallowMount(TheRegister, {
+      global: {
+        plugins: [store],
+      },
+    });
+    expect(wrapper.exists()).toBe(true);
+  });
+
+
+
+  it('"next" from first step calls domain check action', () => {
+    const mock = vi.spyOn(TheRegister.methods, 'checkDomain')
+    .mockImplementationOnce(vi.fn());
+    const wrapper = mount(TheRegister, {
+      shallow: true,
+      global: {
+        plugins: [store],
+        stubs: {
+          WtStepper: false,
+          TheRegisterFirstStep: false,
+        },
+      },
+    });
+    wrapper.findComponent({ name: 'TheRegisterFirstStep' }).vm.$emit('next');
+    expect(mock).toHaveBeenCalled();
+  });
+
+  it('"next" from second step increments activeStep', () => {
+    const wrapper = mount(TheRegister, {
+      shallow: true,
+      global: {
+        plugins: [store],
+        stubs: {
+          WtStepper: false,
+          TheRegisterSecondStep: false,
+        },
+      },
+      data: () => ({
+        activeStep: 2,
+      }),
+    });
+    wrapper.findComponent({ name: 'TheRegisterSecondStep' }).vm.$emit('next');
+    expect(wrapper.vm.activeStep).toBe(3);
+  });
+
+  it('"next" from third step emits "submit" event', () => {
+    const wrapper = mount(TheRegister, {
+      shallow: true,
+      global: {
+        plugins: [store],
+        stubs: {
+          WtStepper: false,
+          TheRegisterThirdStep: false,
+        },
+      },
+      data: () => ({
+        activeStep: 3,
+      }),
+    });
+    wrapper.findComponent({ name: 'TheRegisterThirdStep' }).vm.$emit('next');
+    expect(wrapper.emitted('submit')).toBeTruthy();
+  });
+});

src/components/auth/register/steps/__tests__/the-register-first-step.spec.js

@@ -0,0 +1,62 @@
+import { shallowMount, mount } from '@vue/test-utils';
+import { createStore } from 'vuex';
+import TheRegisterFirstStep from '../the-register-first-step.vue';
+
+const v$ = {
+  value: {
+    $touch: vi.fn(),
+  },
+};
+
+describe('TheRegisterFirstStep', () => {
+  let store;
+
+  beforeEach(() => {
+    store = createStore({
+      modules: {
+        auth: {
+          namespaced: true,
+        },
+      },
+    });
+  });
+
+  it('should render', () => {
+    const wrapper = shallowMount(TheRegisterFirstStep, {
+      global: {
+        plugins: [store],
+      },
+      data: () => ({ v$ }),
+    });
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it('emits "next" event on "next" btn click', () => {
+    const wrapper = mount(TheRegisterFirstStep, {
+      shallow: true,
+      global: {
+        plugins: [store],
+        stubs: {
+          WtButton: false,
+        },
+      },
+      data: () => ({ v$ }),
+    });
+    wrapper.findAllComponents({ name: 'WtButton' }).find((btn) => {
+      return btn.html().toLocaleLowerCase().includes('next');
+    }).vm.$emit('click');
+    expect(wrapper.emitted('next')).toBeTruthy();
+  });
+
+  it('emits "login" event on register link click', () => {
+    const wrapper = mount(TheRegisterFirstStep, {
+      shallow: true,
+      global: {
+        plugins: [store],
+      },
+      data: () => ({ v$ }),
+    });
+    wrapper.find('.auth-form-actions--link').trigger('click');
+    expect(wrapper.emitted('login')).toBeTruthy();
+  });
+});

src/components/auth/register/steps/__tests__/the-register-second-step.spec.js

@@ -0,0 +1,67 @@
+import { shallowMount, mount } from '@vue/test-utils';
+import { createStore } from 'vuex';
+import TheRegisterSecondStep from '../the-register-second-step.vue';
+
+const v$ = {
+  value: {
+    $touch: vi.fn(),
+  },
+};
+
+describe('TheRegisterSecondStep', () => {
+  let store;
+
+  beforeEach(() => {
+    store = createStore({
+      modules: {
+        auth: {
+          namespaced: true,
+        },
+      },
+    });
+  });
+
+  it('should render', () => {
+    const wrapper = shallowMount(TheRegisterSecondStep, {
+      global: {
+        plugins: [store],
+      },
+      data: () => ({ v$ }),
+    });
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it('emits "next" event on "next" btn click', () => {
+    const wrapper = mount(TheRegisterSecondStep, {
+      shallow: true,
+      global: {
+        plugins: [store],
+        stubs: {
+          WtButton: false,
+        },
+      },
+      data: () => ({ v$ }),
+    });
+    wrapper.findAllComponents({ name: 'WtButton' }).find((btn) => {
+      return btn.html().toLocaleLowerCase().includes('next');
+    }).vm.$emit('click');
+    expect(wrapper.emitted('next')).toBeTruthy();
+  });
+
+  it('emits "back" event on back button click', () => {
+    const wrapper = mount(TheRegisterSecondStep, {
+      shallow: true,
+      global: {
+        plugins: [store],
+        stubs: {
+          WtButton: false,
+        },
+      },
+      data: () => ({ v$ }),
+    });
+    wrapper.findAllComponents({ name: 'WtButton' }).find((btn) => {
+      return btn.html().toLocaleLowerCase().includes('back');
+    }).vm.$emit('click');
+    expect(wrapper.emitted('back')).toBeTruthy();
+  });
+});