Use vitest

test/unit/specs/components/draft.spec.js

@@ -1,6 +1,5 @@
 import { mount, flushPromises } from '@vue/test-utils'
 import { nextTick } from 'vue'
-import sinon from 'sinon'
 import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
 import { mountOpts, waitForEvent, $t } from '../../../fixtures/setup_test'
 
@@ -25,7 +24,7 @@ const saveManually = async (wrapper) => {
 const waitSaveTime = 4000
 
 afterEach(() => {
-  sinon.restore()
+  vi.useRealTimers()
 })
 
 describe('Draft saving', () => {
@@ -43,12 +42,10 @@ describe('Draft saving', () => {
     await saveManually(wrapper)
     expect(wrapper.vm.$store.getters.draftCount).to.equal(1)
     expect(wrapper.vm.$store.getters.draftsArray[0].status).to.equal('mew mew')
-    console.log('done')
   })
 
   it('should auto-save if it is enabled', async function () {
-    this.timeout(5000)
-    const clock = sinon.useFakeTimers(Date.now())
+    vi.useFakeTimers()
     const wrapper = mount(PostStatusForm, mountOpts())
     await wrapper.vm.$store.dispatch('setOption', {
       name: 'autoSaveDraft',
@@ -59,10 +56,9 @@ describe('Draft saving', () => {
     await textarea.setValue('mew mew')
 
     expect(wrapper.vm.$store.getters.draftCount).to.equal(0)
-    await clock.tickAsync(waitSaveTime)
+    await vi.advanceTimersByTimeAsync(waitSaveTime)
     expect(wrapper.vm.$store.getters.draftCount).to.equal(1)
     expect(wrapper.vm.$store.getters.draftsArray[0].status).to.equal('mew mew')
-    clock.restore()
   })
 
   it('should auto-save when close if auto-save is on', async () => {
@@ -81,7 +77,6 @@ describe('Draft saving', () => {
     wrapper.vm.requestClose()
     expect(wrapper.vm.$store.getters.draftCount).to.equal(1)
     await waitForEvent(wrapper, 'can-close')
-    console.log('done')
   })
 
   it('should save when close if auto-save is off, and unsavedPostAction is save', async () => {
@@ -104,7 +99,6 @@ describe('Draft saving', () => {
     wrapper.vm.requestClose()
     expect(wrapper.vm.$store.getters.draftCount).to.equal(1)
     await waitForEvent(wrapper, 'can-close')
-    console.log('done')
   })
 
   it('should discard when close if auto-save is off, and unsavedPostAction is discard', async () => {
@@ -127,40 +121,33 @@ describe('Draft saving', () => {
     wrapper.vm.requestClose()
     await waitForEvent(wrapper, 'can-close')
     expect(wrapper.vm.$store.getters.draftCount).to.equal(0)
-    console.log('done')
   })
 
   it('should confirm when close if auto-save is off, and unsavedPostAction is confirm', async () => {
-    try {
-      const wrapper = mount(PostStatusForm, mountOpts({
-        props: {
-          closeable: true
-        }
-      }))
-      await wrapper.vm.$store.dispatch('setOption', {
-        name: 'autoSaveDraft',
-        value: false
-      })
-      await wrapper.vm.$store.dispatch('setOption', {
-        name: 'unsavedPostAction',
-        value: 'confirm'
-      })
-      expect(wrapper.vm.$store.getters.draftCount).to.equal(0)
-      const textarea = wrapper.get('textarea')
-      await textarea.setValue('mew mew')
-      wrapper.vm.requestClose()
-      await nextTick()
-      const saveButton = wrapper.findByText('button', $t('post_status.close_confirm_save_button'))
-      expect(saveButton).to.be.ok
-      await saveButton.trigger('click')
-      console.log('clicked')
-      expect(wrapper.vm.$store.getters.draftCount).to.equal(1)
-      await flushPromises()
-      await waitForEvent(wrapper, 'can-close')
-    console.log('done')
-    } catch (e) {
-      console.log('error:', e)
-      throw e
-    }
+    const wrapper = mount(PostStatusForm, mountOpts({
+      props: {
+        closeable: true
+      }
+    }))
+    await wrapper.vm.$store.dispatch('setOption', {
+      name: 'autoSaveDraft',
+      value: false
+    })
+    await wrapper.vm.$store.dispatch('setOption', {
+      name: 'unsavedPostAction',
+      value: 'confirm'
+    })
+    expect(wrapper.vm.$store.getters.draftCount).to.equal(0)
+    const textarea = wrapper.get('textarea')
+    await textarea.setValue('mew mew')
+    wrapper.vm.requestClose()
+    await nextTick()
+    const saveButton = wrapper.findByText('button', $t('post_status.close_confirm_save_button'))
+    expect(saveButton).to.be.ok
+    await saveButton.trigger('click')
+    console.log('clicked')
+    expect(wrapper.vm.$store.getters.draftCount).to.equal(1)
+    await flushPromises()
+    await waitForEvent(wrapper, 'can-close')
   })
 })

test/unit/specs/components/emoji_input.spec.js

@@ -18,7 +18,13 @@ const generateInput = (value, padEmoji = true) => {
         $t: (msg) => msg
       },
       stubs: {
-        FAIcon: true
+        FAIcon: true,
+        Popover: {
+          template: `<div><slot trigger /></div>`,
+          methods: {
+            updateStyles () {}
+          }
+        }
       },
       directives: {
         'click-outside': vClickOutside
@@ -104,43 +110,37 @@ describe('EmojiInput', () => {
       expect(inputEvents[inputEvents.length - 1][0]).to.eql('Eat some spam!:spam:')
     })
 
-    it('correctly sets caret after insertion at beginning', (done) => {
+    it('correctly sets caret after insertion at beginning', async () => {
       const initialString = '1234'
       const wrapper = generateInput(initialString)
       const input = wrapper.find('input')
       input.setValue(initialString)
       wrapper.setData({ caret: 0 })
       wrapper.vm.insert({ insertion: '1234', keepOpen: false })
-      wrapper.vm.$nextTick(() => {
-        expect(wrapper.vm.caret).to.eql(5)
-        done()
-      })
+      await wrapper.vm.$nextTick()
+      expect(wrapper.vm.caret).to.eql(5)
     })
 
-    it('correctly sets caret after insertion at end', (done) => {
+    it('correctly sets caret after insertion at end', async () => {
       const initialString = '1234'
       const wrapper = generateInput(initialString)
       const input = wrapper.find('input')
       input.setValue(initialString)
       wrapper.setData({ caret: initialString.length })
       wrapper.vm.insert({ insertion: '1234', keepOpen: false })
-      wrapper.vm.$nextTick(() => {
-        expect(wrapper.vm.caret).to.eql(10)
-        done()
-      })
+      await wrapper.vm.$nextTick()
+      expect(wrapper.vm.caret).to.eql(10)
     })
 
-    it('correctly sets caret after insertion if padEmoji setting is set to false', (done) => {
+    it('correctly sets caret after insertion if padEmoji setting is set to false', async () => {
       const initialString = '1234'
       const wrapper = generateInput(initialString, false)
       const input = wrapper.find('input')
       input.setValue(initialString)
       wrapper.setData({ caret: initialString.length })
       wrapper.vm.insert({ insertion: '1234', keepOpen: false })
-      wrapper.vm.$nextTick(() => {
-        expect(wrapper.vm.caret).to.eql(8)
-        done()
-      })
+      await wrapper.vm.$nextTick()
+      expect(wrapper.vm.caret).to.eql(8)
     })
   })
 })

test/unit/specs/services/date_utils/date_utils.spec.js

@@ -1,5 +1,8 @@
 import * as DateUtils from 'src/services/date_utils/date_utils.js'
 
+beforeEach(() => { vi.useFakeTimers() })
+afterEach(() => { vi.useRealTimers() })
+
 describe('DateUtils', () => {
   describe('relativeTime', () => {
     it('returns now with low enough amount of seconds', () => {

test/unit/specs/services/theme_data/iss_deserializer.spec.js

@@ -1,10 +1,13 @@
 import { deserialize } from 'src/services/theme_data/iss_deserializer.js'
 import { serialize } from 'src/services/theme_data/iss_serializer.js'
-const componentsContext = require.context('src', true, /\.style.js(on)?$/)
+const componentsContext = import.meta.glob(
+  ['/src/**/*.style.js', '/src/**/*.style.json'],
+  { eager: true }
+)
 
 describe('ISS (de)serialization', () => {
-  componentsContext.keys().forEach(key => {
-    const component = componentsContext(key).default
+  Object.keys(componentsContext).forEach(key => {
+    const component = componentsContext[key].default
 
     it(`(De)serialization of component ${component.name} works`, () => {
       const normalized = component.defaultRules.map(x => ({ component: component.name, ...x }))

test/unit/specs/services/theme_data/sanity_checks.spec.js

@@ -16,10 +16,10 @@ const checkColors = (output) => {
 }
 
 describe('Theme Data utility functions', () => {
-  const context = require.context('static/themes/', false, /\.json$/)
-  context.keys().forEach((key) => {
+  const context = import.meta.glob('/public/static/themes/*.json', { import: 'default', eager: true })
+  Object.keys(context).forEach((key) => {
     it(`Should render all colors for ${key} properly`, () => {
-      const { theme, source } = context(key)
+      const { theme, source } = context[key]
       const data = source || theme
       const colors = getColors(data.colors, data.opacity, 1)
       checkColors(colors)

test/unit/specs/services/theme_data/theme_data3.spec.js

@@ -62,8 +62,6 @@ describe('Theme Data 3', () => {
   })
 
   describe('init', function () {
-    this.timeout(5000)
-
     it('Test initialization without anything', () => {
       const out = init({ inputRuleset: [], ultimateBackgroundColor: '#DEADAF' })