feat: add select color scheme tests

jest.config.js

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

src/components/Profile/Header.vue

@@ -7,6 +7,14 @@
   </header>
 </template>
 
+<script lang="ts">
+import Vue from 'vue'
+
+export default Vue.extend({
+  name: 'HeaderProfile'
+})
+</script>
+
 <style lang="scss">
 .profile-header {
   width: 100%;

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/components/Profile/SelectColorScheme.spec.ts

@@ -0,0 +1,89 @@
+import SelectColorScheme from '@/components/Profile/SelectColorScheme.vue'
+import SelectColorSchemeCard from '@/components/Profile/SelectColorSchemeCard.vue'
+import HeaderProfile from '@/components/Profile/Header.vue'
+import SwapHelpText from '@/components/UI/SwapHelpText.vue'
+import SwapButton from '@/components/UI/SwapButton.vue'
+
+import { shallowMount } from '@vue/test-utils'
+import { mockColorScheme1, mockColorScheme2 } from '../../__mocks__/userColorScheme.mock'
+import { stubComponent } from '../../__helpers__/stubComponent'
+
+const HeaderProfileStub = stubComponent(HeaderProfile, {
+  template: `
+    <div>
+      <slot></slot>
+      <slot name="help-text"></slot>
+    </div>
+  `
+})
+
+const SwapHelpTextStub = stubComponent(SwapHelpText, {
+  template: `
+    <div>
+      <slot></slot>
+    </div>
+  `
+})
+
+describe('SelectColorScheme', () => {
+  let wrapper
+
+  const createComponent = ({ propsData = {}, provide = {} } = {}) => {
+    wrapper = shallowMount(SelectColorScheme, {
+      propsData: {
+        ...propsData
+      },
+      provide: {
+        ...provide
+      },
+      stubs: {
+        HeaderProfile: HeaderProfileStub,
+        SwapHelpText: SwapHelpTextStub
+      }
+    })
+  }
+
+  const findButtonByText = text => {
+    return wrapper
+      .findAllComponents(SwapButton)
+      .filter(buttonWrapper => buttonWrapper.text().includes(text))
+      .at(0)
+  }
+
+  beforeEach(() => {
+    createComponent({ propsData: { options: [mockColorScheme1, mockColorScheme2] } })
+  })
+
+  it('renders help text', () => {
+    expect(wrapper.html().includes('Your own colors will protect you from phishing.')).toBe(true)
+  })
+
+  it('emits update color scheme', () => {
+    const cardWrapper = wrapper.findComponent(SelectColorSchemeCard)
+    cardWrapper.vm.$emit('select')
+
+    expect(wrapper.emitted()['select-color-scheme']).toBeTruthy()
+  })
+
+  it('emits refresh color scheme', () => {
+    const refreshButton = findButtonByText('Refresh colors')
+    refreshButton.vm.$emit('click')
+
+    expect(wrapper.emitted()['refresh-color-schemes']).toBeTruthy()
+  })
+
+  it('emits update select colors scheme', () => {
+    const cardWrapper = wrapper.findComponent(SelectColorSchemeCard)
+    cardWrapper.vm.$emit('select')
+
+    const emitted = wrapper.emitted()['update:selected-color-scheme'][0][0]
+
+    expect(emitted).toEqual(mockColorScheme1)
+  })
+
+  it('renders all options', () => {
+    const cardWrappers = wrapper.findAllComponents(SelectColorSchemeCard)
+
+    expect(cardWrappers.length).toBe(2)
+  })
+})

tests/unit/setup.ts

@@ -1,2 +1,9 @@
+import Vue from 'vue'
+import UI from '@/components/UI'
+import { enableAutoDestroy } from '@vue/test-utils'
+
 process.env.VUE_APP_HOME_URL = 'http://localhost'
 process.env.VUE_APP_KEYS_URL = 'http://keys.localhost'
+
+Vue.use(UI)
+enableAutoDestroy(global.afterEach)