feat: add vue-test-utils and unit test for BalanceInput.vue

components/shared/BalanceInput.test.ts

@@ -0,0 +1,89 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { mount, createLocalVue } from '@vue/test-utils'
+import Buefy from 'buefy'
+import { vi } from 'vitest'
+
+import BalanceInput from '@/components/shared/BalanceInput.vue'
+
+const localVue = createLocalVue()
+localVue.use(Buefy)
+
+test('BalanceInput.vue', async () => {
+ vi.useFakeTimers()
+
+ const wrapper = mount(BalanceInput, {
+ attachTo: document.body,
+ mocks: {
+ $t: () => '',
+ $config: {
+ prefix: 'rmrk',
+ },
+ $store: {
+ getters: {
+ currentUrlPrefix: 'rmrk',
+ },
+ },
+ },
+ localVue,
+ })
+ const input = wrapper.find('[data-testid="balance-input"]')
+ const options = wrapper
+ .find('[data-testid="balance-input-select"]')
+ .findAll('option')
+
+ // test focus
+ await (wrapper.vm as any).focusInput()
+ expect(input.element).toBe(document.activeElement)
+
+ // check html5validity
+ await wrapper.setProps({ min: 10, max: 100 })
+ await input.setValue('0')
+ expect(await (wrapper.vm as any).checkValidity()).toBe(false)
+ await input.setValue('50')
+ expect(await (wrapper.vm as any).checkValidity()).toBe(true)
+ await input.setValue('900')
+ expect(await (wrapper.vm as any).checkValidity()).toBe(false)
+
+ // set value from props
+ await wrapper.setProps({ value: 3 })
+ expect((input.element as HTMLInputElement).value).toBe('3')
+
+ // check value
+ await input.setValue('1')
+ vi.runAllTimers()
+ expect(wrapper.emitted().input).toBeTruthy()
+ expect(wrapper.emitted().input?.at(-1)).toStrictEqual(['1000000000000', '1'])
+
+ // change unit
+ await options.at(6).setSelected()
+ await input.setValue('2')
+ expect(wrapper.find('option:checked').element.textContent).toBe(' Kilo ')
+ vi.runAllTimers()
+ expect(wrapper.emitted().input).toBeTruthy()
+ expect(wrapper.emitted().input?.at(-1)).toStrictEqual([
+ '2000000000000000000',
+ '2',
+ ])
+
+ // if props calculate = false
+ await options.at(5).setSelected()
+ await wrapper.setProps({ calculate: false })
+ await input.setValue('4')
+ vi.runAllTimers()
+ expect(wrapper.emitted().input).toBeTruthy()
+ expect(wrapper.emitted().input?.at(-1)).toStrictEqual([4, '4'])
+
+ // if value invalid
+ await wrapper.setProps({ calculate: true })
+ await input.setValue('+e-')
+ vi.runAllTimers()
+ expect(wrapper.emitted().input).toBeTruthy()
+ expect(wrapper.emitted().input?.at(-1)).toStrictEqual(['0', ''])
+
+ // if value zero
+ await input.setValue('0')
+ vi.runAllTimers()
+ await options.at(6).setSelected()
+ expect(wrapper.emitted().input).toBeTruthy()
+ expect(wrapper.emitted().input?.at(-1)).toStrictEqual(['0', '0'])
+})

components/shared/BalanceInput.vue

@@ -9,12 +9,14 @@
  :min="minWithUnit"
  :max="maxWithUnit"
  :expanded="expanded"
- @input="handleInput" />
+ @input="handleInput"
+ data-testid="balance-input" />
  <p class="control balance">
  <b-select
  :value="selectedUnit"
  :disabled="!calculate"
- @input="handleUnitChange">
+ @input="handleUnitChange"
+ data-testid="balance-input-select">
  <option v-for="u in units" :key="u.value" :value="u.value">
  {{ u.name }}
  </option>

package.json

@@ -30,7 +30,8 @@
  "lint:quiet": "eslint --quiet --ignore-path .gitignore --ext .js,.ts,.vue .",
  "lint:fix": "eslint --fix --quiet --ignore-path .gitignore --ext .js,.ts,.vue .",
  "test": "vitest run --reporter verbose --allowOnly",
- "test:watch": "vitest --reporter verbose --allowOnly",
+ "test:watch": "vitest",
+ "test:coverage": "vitest run --coverage",
  "prepare": "husky install"
  },
  "husky": {
@@ -123,7 +124,9 @@
  "@types/markdown-it": "^12.2.3",
  "@typescript-eslint/eslint-plugin": "^5.31.0",
  "@typescript-eslint/parser": "^5.31.0",
+ "@vue/test-utils": "^1.3.0",
  "all-contributors-cli": "^6.20.0",
+ "c8": "^7.12.0",
  "consola": "^2.15.3",
  "eslint": "^8.20.0",
  "eslint-plugin-prettier": "^4.2.1",
@@ -139,6 +142,7 @@
  "sass": "^1.54.0",
  "sass-loader": "^10.3",
  "typescript": "^4.7.4",
+ "vite-plugin-vue2": "^2.0.2",
  "vitest": "^0.20.2",
  "vue-debounce-decorator": "^1.0.1"
  }