Feature/create profile tests

jest.config.js

@@ -1,3 +1,4 @@
 module.exports = {
+  setupFilesAfterEnv: ['<rootDir>/tests/unit/setup.js'],
   preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel'
 }

src/components/Profile/SelectColorScheme.vue

@@ -32,7 +32,7 @@
 import Vue, { PropType } from 'vue'
 import HeaderProfile from '@/components/Profile/Header.vue'
 import SelectColorSchemeCard from '@/components/Profile/SelectColorSchemeCard.vue'
-import { ColorScheme } from '@/types/generators'
+import { ColorScheme } from '@/types/services/userColorSchemeService'
 
 export default Vue.extend({
   name: 'SelectColorScheme',

src/components/UI/SwapStepper.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="swap-stepper">
     <template v-for="step in stepsCount">
-      <div v-show="step === activeStep" :key="step" class="swap-stepper__content">
+      <div v-show="step === activeStep" :key="step" class="swap-stepper__content" data-test-id="swap-stepper-content">
         <slot :name="step" :change-active-step="changeActiveStep"></slot>
       </div>
     </template>

src/views/Profile/Create.vue

@@ -24,7 +24,7 @@
         </create-profile-select-color-scheme>
       </template>
       <template #2="{ changeActiveStep }">
-        <div class="create-profile__mnemonic-phrase-table">
+        <div class="create-profile__mnemonic-phrase-table" data-testid="step-mnemonic-phrase">
           <create-profile-header class="create-profile__header">
             Your secret phrase
             <template #help-text>
@@ -49,7 +49,7 @@
         </div>
       </template>
       <template #3="{ changeActiveStep }">
-        <div class="create-profile__mnemonic-phrase-table">
+        <div class="create-profile__mnemonic-phrase-table" data-testid="step-mnemonic-phrase-edit">
           <create-profile-header class="create-profile__header">
             Fill in the missing words
             <template #help-text>
@@ -123,7 +123,7 @@ import {
   FORM_PASSWORD
 } from '@/constants/profile'
 import { iframeMessageTypes, profileMessageTypes } from '@/constants/messageTypes'
-import { ColorScheme } from '@/types/generators'
+import { ColorScheme } from '@/types/services/userColorSchemeService'
 import { EncryptionParameters, MnemonicPhrase } from '@/types/encryptionParameters'
 import { ProfileParameters } from '@/types/profileParameters'
 import { ChangeActiveStep } from '@/types/components/UI/swapStepper'
@@ -179,7 +179,7 @@ export default Vue.extend({
 
   data(): Data {
     return {
-      profilesParameters: profileService.getProfilesParameters(),
+      profilesParameters: [],
       selectedProfileParameters: profileService.getSelectedProfileParameters(),
       tableMatrix: [],
       isRefreshing: false
@@ -206,10 +206,13 @@ export default Vue.extend({
   async created(): Promise<void> {
     if (!this.profilesParameters.length) {
       this.profilesParameters = await this.getProfilesParameters(PROFILES_COUNT)
+
       profileService.setProfilesParameters(this.profilesParameters)
+    } else {
+      this.profilesParameters = profileService.getProfilesParameters()
     }
 
-    document.addEventListener('keydown', this.closeByPressingESC)
+    window.addEventListener('keydown', this.closeByPressingESC)
 
     windowParentPostMessage({
       key: CREATE_PROFILE_WINDOW,
@@ -247,12 +250,14 @@ export default Vue.extend({
       }
 
       const profilesParameters = await Promise.all(profilesParametersResolvers)
+
       return profilesParameters
     },
     async refreshProfilesParameters(): Promise<void> {
       if (!this.isRefreshing) {
         this.isRefreshing = true
         this.profilesParameters = await this.getProfilesParameters(PROFILES_COUNT)
+
         profileService.setProfilesParameters(this.profilesParameters)
         this.isRefreshing = false
       }
@@ -312,6 +317,7 @@ export default Vue.extend({
     },
     goToStepShowMnemonicPhrase(changeActiveStep: ChangeActiveStep): void {
       this.tableMatrix = this.getDefaultTableMatrix()
+
       changeActiveStep(STEPS[MNEMONIC_PHRASE_SHOW])
     },
     goToStepWriteMnemonicPhrase(changeActiveStep: ChangeActiveStep): void {

tests/unit/__helpers__/flushPromises.ts

@@ -0,0 +1,3 @@
+export default function flushPromises(): Promise<void> {
+  return new Promise(resolve => setTimeout(resolve, 0))
+}

tests/unit/__helpers__/stubComponent.ts

@@ -0,0 +1,12 @@
+export function stubComponent(Component, options = {}) {
+  return {
+    props: Component.options.props,
+    model: Component.options.model,
+    // Do not render any slots/scoped slots except default
+    // This differs from VTU behavior which renders all slots
+    template: '<div><slot></slot></div>',
+    // allows wrapper.find(Component) to work for stub
+    $_vueTestUtils_original: Component,
+    ...options
+  }
+}

tests/unit/setup.js

@@ -0,0 +1,6 @@
+import Vue from 'vue'
+import UI from '@/components/UI'
+import { enableAutoDestroy } from '@vue/test-utils'
+
+Vue.use(UI)
+enableAutoDestroy(global.afterEach)