fix(test): stub MessageToaster and DialogBox in tests

resources/assets/js/__tests__/UnitTestCase.ts

@@ -6,6 +6,8 @@ import { clickaway, droppable, focus } from '@/directives'
 import { defineComponent, nextTick } from 'vue'
 import { commonStore, userStore } from '@/stores'
 import factory from '@/__tests__/factory'
+import { DialogBoxKey, MessageToasterKey } from '@/symbols'
+import { DialogBoxStub, MessageToasterStub } from '@/__tests__/stubs'
 
 // A deep-merge function that
 // - supports symbols as keys (_.merge doesn't)
@@ -86,7 +88,22 @@ export default abstract class UnitTestCase {
           icon: this.stub('icon')
         }
       }
-    }, options))
+    }, this.supplyRequiredProvides(options)))
+  }
+
+  private supplyRequiredProvides (options: RenderOptions) {
+    options.global = options.global || {}
+    options.global.provide = options.global.provide || {}
+
+    if (!options.global.provide?.hasOwnProperty(DialogBoxKey)) {
+      options.global.provide[DialogBoxKey] = DialogBoxStub
+    }
+
+    if (!options.global.provide?.hasOwnProperty(MessageToasterKey)) {
+      options.global.provide[MessageToasterKey] = MessageToasterStub
+    }
+
+    return options
   }
 
   protected stub (testId = 'stub') {

resources/assets/js/__tests__/stubs.ts

@@ -0,0 +1,19 @@
+import { Ref, ref } from 'vue'
+import { noop } from '@/utils'
+import MessageToaster from '@/components/ui/MessageToaster.vue'
+import DialogBox from '@/components/ui/DialogBox.vue'
+
+export const MessageToasterStub: InstanceType<Ref<MessageToaster>> = ref({
+  info: noop,
+  success: noop,
+  warning: noop,
+  error: noop
+})
+
+export const DialogBoxStub: InstanceType<Ref<DialogBox>> = ref({
+  info: noop,
+  success: noop,
+  warning: noop,
+  error: noop,
+  confirm: noop
+})

resources/assets/js/components/screens/SettingsScreen.spec.ts

@@ -4,7 +4,7 @@ import SettingsScreen from './SettingsScreen.vue'
 import { settingStore } from '@/stores'
 import { fireEvent, waitFor } from '@testing-library/vue'
 import router from '@/router'
-import { alerts } from '@/utils'
+import { DialogBoxStub } from '@/__tests__/stubs'
 
 new class extends UnitTestCase {
   protected test () {
@@ -29,7 +29,7 @@ new class extends UnitTestCase {
     it('confirms upon media path change', async () => {
       const updateMock = this.mock(settingStore, 'update')
       const goMock = this.mock(router, 'go')
-      const confirmMock = this.mock(alerts, 'confirm')
+      const confirmMock = this.mock(DialogBoxStub.value, 'confirm')
 
       settingStore.state.media_path = '/old'
       const { getByLabelText, getByText } = this.render(SettingsScreen)

resources/assets/js/components/song/SongContextMenu.spec.ts

@@ -1,12 +1,13 @@
 import { expect, it } from 'vitest'
 import factory from '@/__tests__/factory'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import SongContextMenu from './SongContextMenu.vue'
-import { alerts, arrayify, eventBus } from '@/utils'
+import { arrayify, eventBus } from '@/utils'
 import { fireEvent } from '@testing-library/vue'
 import router from '@/router'
 import { downloadService, playbackService } from '@/services'
 import { favoriteStore, playlistStore, queueStore } from '@/stores'
+import { MessageToasterStub } from '@/__tests__/stubs'
+import SongContextMenu from './SongContextMenu.vue'
 
 let songs: Song[]
 
@@ -139,7 +140,7 @@ new class extends UnitTestCase {
     it('lists and adds to existing playlist', async () => {
       playlistStore.state.playlists = factory<Playlist[]>('playlist', 3)
       const addMock = this.mock(playlistStore, 'addSongs')
-      this.mock(alerts, 'success')
+      this.mock(MessageToasterStub.value, 'success')
       const { queryByText, getByText } = await this.renderComponent()
 
       playlistStore.state.playlists.forEach(playlist => queryByText(playlist.name))

resources/assets/js/components/song/SongEditForm.spec.ts

@@ -1,12 +1,13 @@
 import { expect, it } from 'vitest'
 import factory from '@/__tests__/factory'
 import UnitTestCase from '@/__tests__/UnitTestCase'
-import { alerts, arrayify } from '@/utils'
-import SongEditForm from './SongEditForm.vue'
+import { arrayify } from '@/utils'
 import { EditSongFormInitialTabKey, SongsKey } from '@/symbols'
 import { ref } from 'vue'
 import { fireEvent } from '@testing-library/vue'
 import { songStore } from '@/stores'
+import { MessageToasterStub } from '@/__tests__/stubs'
+import SongEditForm from './SongEditForm.vue'
 
 let songs: Song[]
 
@@ -31,7 +32,7 @@ new class extends UnitTestCase {
   protected test () {
     it('edits a single song', async () => {
       const updateMock = this.mock(songStore, 'update')
-      const alertMock = this.mock(alerts, 'success')
+      const alertMock = this.mock(MessageToasterStub.value, 'success')
 
       const { html, getByTestId, getByRole } = await this.renderComponent(factory<Song>('song', {
         title: 'Rocket to Heaven',
@@ -67,7 +68,7 @@ new class extends UnitTestCase {
 
     it('edits multiple songs', async () => {
       const updateMock = this.mock(songStore, 'update')
-      const alertMock = this.mock(alerts, 'success')
+      const alertMock = this.mock(MessageToasterStub.value, 'success')
 
       const { html, getByTestId, getByRole, queryByTestId } = await this.renderComponent(factory<Song[]>('song', 3))
 

resources/assets/js/components/user/UserAddForm.spec.ts

@@ -2,14 +2,14 @@ import { expect, it } from 'vitest'
 import UnitTestCase from '@/__tests__/UnitTestCase'
 import { fireEvent, waitFor } from '@testing-library/vue'
 import { userStore } from '@/stores'
-import { alerts } from '@/utils'
 import UserAddForm from './UserAddForm.vue'
+import { MessageToasterStub } from '@/__tests__/stubs'
 
 new class extends UnitTestCase {
   protected test () {
     it('creates a new user', async () => {
       const storeMock = this.mock(userStore, 'store')
-      const alertMock = this.mock(alerts, 'success')
+      const alertMock = this.mock(MessageToasterStub.value, 'success')
 
       const { getByLabelText, getByRole } = this.render(UserAddForm)
 

resources/assets/js/components/user/UserEditForm.spec.ts

@@ -5,14 +5,14 @@ import UnitTestCase from '@/__tests__/UnitTestCase'
 import { UserKey } from '@/symbols'
 import { fireEvent, waitFor } from '@testing-library/vue'
 import { userStore } from '@/stores'
-import { alerts } from '@/utils'
 import UserEditForm from './UserEditForm.vue'
+import { MessageToasterStub } from '@/__tests__/stubs'
 
 new class extends UnitTestCase {
   protected test () {
     it('edits a user', async () => {
       const updateMock = this.mock(userStore, 'update')
-      const alertMock = this.mock(alerts, 'success')
+      const alertMock = this.mock(MessageToasterStub.value, 'success')
 
       const user = ref(factory<User>('user', { name: 'John Doe' }))