feat(ui/testing): refine existing test files

yusufkandemir · Apr 9, 2024 · 48509f1 · 48509f1
1 parent dcf6988
commit 48509f1
Show file tree

Hide file tree

Showing 16 changed files with 106 additions and 118 deletions.
diff --git a/ui/src/components/dialog/QDialog.test.js b/ui/src/components/dialog/QDialog.test.js
@@ -97,7 +97,7 @@ describe('[QDialog API]', () => {
 
       test.todo('has effect', () => {
         const propVal = 'fade'
-        const wrapper = mount(QDialog, {
+        mount(QDialog, {
           props: {
             transitionShow: propVal
           }

diff --git a/ui/src/components/space/QSpace.test.js b/ui/src/components/space/QSpace.test.js
@@ -10,7 +10,8 @@ describe('[QSpace API]', () => {
 
       expect(
         wrapper.get('div.q-space')
-      ).toBeDefined()
+          .exists()
+      ).toBe(true)
     })
   })
 })
diff --git a/ui/src/composables/private/use-form.test.js b/ui/src/composables/private/use-form.test.js
@@ -12,7 +12,7 @@ describe('[useForm API]', () => {
           modelValue: 'MyModelValue'
         })
 
-        expect(result).toBeTruthy()
+        expect(result).toBeTypeOf('object')
         expect(result.name).toBe('MyName')
         expect(result.value).toBe('MyModelValue')
       })
@@ -28,14 +28,14 @@ describe('[useForm API]', () => {
         fn(acc, 'push')
         fn(acc, 'push', ' MyClassName')
 
-        expect(acc.length).toBe(2)
+        expect(acc).toHaveLength(2)
 
         expect(acc[ 0 ].type).toBe('input')
-        expect(Object.keys(acc[ 0 ].props).length).toBe(1)
+        expect(Object.keys(acc[ 0 ].props)).toHaveLength(1)
         expect(acc[ 0 ].props.class).toBe('hidden')
 
         expect(acc[ 1 ].type).toBe('input')
-        expect(Object.keys(acc[ 1 ].props).length).toBe(1)
+        expect(Object.keys(acc[ 1 ].props)).toHaveLength(1)
         expect(acc[ 1 ].props.class).toBe('hidden MyClassName')
       })
 
@@ -51,15 +51,15 @@ describe('[useForm API]', () => {
         fn(acc, 'push')
         fn(acc, 'push', ' MyClassName')
 
-        expect(acc.length).toBe(2)
+        expect(acc).toHaveLength(2)
 
         expect(acc[ 0 ].type).toBe('input')
-        expect(Object.keys(acc[ 0 ].props).length).toBe(2)
+        expect(Object.keys(acc[ 0 ].props)).toHaveLength(2)
         expect(acc[ 0 ].props.class).toBe('hidden')
         expect(acc[ 0 ].props.myAttr).toBe('MyAttrValue')
 
         expect(acc[ 1 ].type).toBe('input')
-        expect(Object.keys(acc[ 1 ].props).length).toBe(2)
+        expect(Object.keys(acc[ 1 ].props)).toHaveLength(2)
         expect(acc[ 1 ].props.class).toBe('hidden MyClassName')
         expect(acc[ 1 ].props.myAttr).toBe('MyAttrValue')
       })

diff --git a/ui/src/composables/private/use-ratio.test.js b/ui/src/composables/private/use-ratio.test.js
@@ -7,24 +7,24 @@ describe('[useRatio API]', () => {
     describe('[(function)default]', () => {
       test('should return padding when ratio is supplied', () => {
         const { value } = useRatio({ ratio: 2 })
-        expect(value).toBeTruthy()
+        expect(value).toBeTypeOf('object')
         expect(value.paddingBottom).toBeTruthy()
       })
 
       test('should return padding when naturalRatio is supplied', () => {
         const { value } = useRatio({}, { value: 2 })
-        expect(value).toBeTruthy()
+        expect(value).toBeTypeOf('object')
         expect(value.paddingBottom).toBeTruthy()
       })
 
       test('should not return padding when invalid params', () => {
         const { value } = useRatio({ ratio: 'a' })
-        expect(value).toBeFalsy()
+        expect(value).toBeNull()
       })
 
       test('should not return padding when no params are supplied', () => {
         const { value } = useRatio({})
-        expect(value).toBeFalsy()
+        expect(value).toBeNull()
       })
     })
   })

diff --git a/ui/src/composables/private/use-size.test.js b/ui/src/composables/private/use-size.test.js
@@ -7,7 +7,7 @@ describe('[useSize API]', () => {
     describe('[(variable)useSizeDefaults]', () => {
       test('is defined correctly', () => {
         expect(useSizeDefaults).toBeTypeOf('object')
-        expect(Object.keys(useSizeDefaults).length).not.toBe(0)
+        expect(Object.keys(useSizeDefaults)).not.toHaveLength(0)
       })
     })
   })

diff --git a/ui/src/composables/use-id.test.js b/ui/src/composables/use-id.test.js
@@ -4,21 +4,19 @@ import { defineComponent } from 'vue'
 
 import useId from './use-id.js'
 
+const uidRE = /^f_/
+
 describe('[useId API]', () => {
   describe('[Functions]', () => {
     describe('[(function)default]', () => {
       test('useId()', () => {
         const { value: result } = useId()
-
-        expect(result).toBeTruthy()
-        expect(result.startsWith('f_')).toBe(true)
+        expect(result).toMatch(uidRE)
       })
 
       test('useId({})', () => {
         const { value: result } = useId({})
-
-        expect(result).toBeTruthy()
-        expect(result.startsWith('f_')).toBe(true)
+        expect(result).toMatch(uidRE)
       })
 
       test('useId({ getValue })', () => {
@@ -34,8 +32,7 @@ describe('[useId API]', () => {
           getValue: () => null
         })
 
-        expect(result).toBeTruthy()
-        expect(result.startsWith('f_')).toBe(true)
+        expect(result).toMatch(uidRE)
       })
 
       test('useId({ getValue: () => null, required: true })', () => {
@@ -44,8 +41,7 @@ describe('[useId API]', () => {
           required: true
         })
 
-        expect(result).toBeTruthy()
-        expect(result.startsWith('f_')).toBe(true)
+        expect(result).toMatch(uidRE)
       })
 
       test('useId({ getValue: () => null, required: false })', () => {
@@ -54,21 +50,22 @@ describe('[useId API]', () => {
           required: false
         })
 
-        expect(result).toBe(null)
+        expect(result).toBeNull()
       })
 
-      test('can be used in a Component', () => {
-        const TestComponent = defineComponent({
-          template: '<div />',
-          setup () {
-            // eslint-disable-next-line
-            const result = useId()
-            return { result }
-          }
-        })
+      test('can be used in a Vue Component', () => {
+        const wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              // eslint-disable-next-line
+              const result = useId()
+              return { result }
+            }
+          })
+        )
 
-        const wrapper = mount(TestComponent)
-        expect(wrapper.vm.result.startsWith('f_')).toBe(true)
+        expect(wrapper.vm.result).toMatch(/^f_/)
       })
     })
   })

diff --git a/ui/src/plugins/icon-set/IconSet.test.js b/ui/src/plugins/icon-set/IconSet.test.js
@@ -180,9 +180,8 @@ describe('[IconSet API]', () => {
       test('should be callable', () => {
         const wrapper = mountPlugin()
 
-        expect(IconSet.set).toBeTypeOf('function')
-        expect(IconSet.set(
-          {
+        expect(
+          IconSet.set({
             name: 'new-icon-set',
             type: {
               positive: 'check_circle',
@@ -322,25 +321,25 @@ describe('[IconSet API]', () => {
               removeQueue: 'clear_all',
               removeUploaded: 'done_all'
             }
-          }
-        )).toBeUndefined()
+          })
+        ).toBeUndefined()
 
         expect(IconSet.props.name).toBe('new-icon-set')
         expect(wrapper.vm.$q.iconSet.name).toBe('new-icon-set')
       })
 
       test('should work with an imported icon set', async () => {
-        const wrapper = mountPlugin()
+        const { vm: { $q } } = mountPlugin()
         const { default: newIconSet } = await import('quasar/icon-set/fontawesome-v6.mjs')
 
         IconSet.set(newIconSet)
         expect(IconSet.props.name).toBe(newIconSet.name)
-        expect(wrapper.vm.$q.iconSet.name).toBe(newIconSet.name)
+        expect($q.iconSet.name).toBe(newIconSet.name)
 
         const { default: anotherIconSet } = await import('quasar/icon-set/ionicons-v4.mjs')
-        wrapper.vm.$q.iconSet.set(anotherIconSet)
+        $q.iconSet.set(anotherIconSet)
         expect(IconSet.props.name).toBe(anotherIconSet.name)
-        expect(wrapper.vm.$q.iconSet.name).toBe(anotherIconSet.name)
+        expect($q.iconSet.name).toBe(anotherIconSet.name)
       })
     })
   })

diff --git a/ui/src/plugins/lang/Lang.test.js b/ui/src/plugins/lang/Lang.test.js
@@ -114,15 +114,15 @@ describe('[Lang API]', () => {
       })
 
       test('can be set', () => {
-        const wrapper = mountPlugin()
+        const { vm: { $q } } = mountPlugin()
 
         Lang.props.nativeName = 'new-lang'
         expect(Lang.props.nativeName).toBe('new-lang')
-        expect(wrapper.vm.$q.lang.nativeName).toBe('new-lang')
+        expect($q.lang.nativeName).toBe('new-lang')
 
-        wrapper.vm.$q.lang.nativeName = 'another-lang'
+        $q.lang.nativeName = 'another-lang'
         expect(Lang.props.nativeName).toBe('another-lang')
-        expect(wrapper.vm.$q.lang.nativeName).toBe('another-lang')
+        expect($q.lang.nativeName).toBe('another-lang')
       })
     })
   })
@@ -132,9 +132,8 @@ describe('[Lang API]', () => {
       test('should be callable', () => {
         const wrapper = mountPlugin()
 
-        expect(Lang.set).toBeTypeOf('function')
-        expect(Lang.set(
-          {
+        expect(
+          Lang.set({
             isoName: 'en-US',
             nativeName: 'New Language',
             rtl: true,
@@ -223,42 +222,44 @@ describe('[Lang API]', () => {
               noNodes: 'No nodes available',
               noResults: 'No matching nodes found'
             }
-          }
-        )).toBeUndefined()
+          })
+        ).toBeUndefined()
 
         expect(Lang.props.nativeName).toBe('New Language')
         expect(wrapper.vm.$q.lang.nativeName).toBe('New Language')
       })
 
       test('should work with an imported lang pack', async () => {
-        const wrapper = mountPlugin()
+        const { vm: { $q } } = mountPlugin()
         const { default: deLang } = await import('quasar/lang/de-DE.mjs')
 
         Lang.set(deLang)
         expect(Lang.props.nativeName).toBe(deLang.nativeName)
-        expect(wrapper.vm.$q.lang.nativeName).toBe(deLang.nativeName)
+        expect($q.lang.nativeName).toBe(deLang.nativeName)
 
         const { default: itLang } = await import('quasar/lang/it.mjs')
-        wrapper.vm.$q.lang.set(itLang)
+        $q.lang.set(itLang)
         expect(Lang.props.nativeName).toBe(itLang.nativeName)
-        expect(wrapper.vm.$q.lang.nativeName).toBe(itLang.nativeName)
+        expect($q.lang.nativeName).toBe(itLang.nativeName)
       })
     })
 
     describe('[(method)getLocale]', () => {
       test('should be callable', () => {
         const wrapper = mountPlugin()
 
-        expect(Lang.getLocale).toBeTypeOf('function')
-        expect(Lang.getLocale()).$any([
+        expect(
+          Lang.getLocale()
+        ).$any([
           expect.any(String),
-          void 0
+          undefined
         ])
 
-        expect(wrapper.vm.$q.lang.getLocale).toBeTypeOf('function')
-        expect(wrapper.vm.$q.lang.getLocale()).$any([
+        expect(
+          wrapper.vm.$q.lang.getLocale()
+        ).$any([
           expect.any(String),
-          void 0
+          undefined
         ])
       })
     })