feat(test): add SettingsScreen tests

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

@@ -0,0 +1,47 @@
+import { expect, it } from 'vitest'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import SettingsScreen from './SettingsScreen.vue'
+import { settingStore } from '@/stores'
+import { fireEvent, waitFor } from '@testing-library/vue'
+import router from '@/router'
+import { alerts } from '@/utils'
+
+new class extends UnitTestCase {
+  protected test () {
+    it('renders', () => expect(this.render(SettingsScreen).html()).toMatchSnapshot())
+
+    it('submits the settings form', async () => {
+      const updateMock = this.mock(settingStore, 'update')
+      const goMock = this.mock(router, 'go')
+
+      settingStore.state.media_path = ''
+      const { getByLabelText, getByText } = this.render(SettingsScreen)
+
+      await fireEvent.update(getByLabelText('Media Path'), '/media')
+      await fireEvent.click(getByText('Scan'))
+
+      await waitFor(() => {
+        expect(updateMock).toHaveBeenCalledWith({ media_path: '/media' })
+        expect(goMock).toHaveBeenCalledWith('home')
+      })
+    })
+
+    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')
+
+      settingStore.state.media_path = '/old'
+      const { getByLabelText, getByText } = this.render(SettingsScreen)
+
+      await fireEvent.update(getByLabelText('Media Path'), '/new')
+      await fireEvent.click(getByText('Scan'))
+
+      await waitFor(() => {
+        expect(updateMock).not.toHaveBeenCalled()
+        expect(goMock).not.toHaveBeenCalled()
+        expect(confirmMock).toHaveBeenCalled()
+      })
+    })
+  }
+}

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

@@ -0,0 +1,18 @@
+// Vitest Snapshot v1
+
+exports[`renders 1`] = `
+<section id="settingsWrapper">
+  <header class="screen-header">
+    <div class="thumbnail-wrapper"></div>
+    <div class="heading-wrapper">
+      <h1>Settings</h1><span class="meta text-secondary"></span>
+    </div>
+  </header>
+  <form class="main-scroll-wrap">
+    <div class="form-row"><label for="inputSettingsPath">Media Path</label>
+      <p id="mediaPathHelp" class="help"> The <em>absolute</em> path to the server directory containing your media. Koel will scan this directory for songs and extract any available information.<br> Scanning may take a while, especially if you have a lot of songs, so be patient. </p><input id="inputSettingsPath" aria-describedby="mediaPathHelp" name="media_path" type="text">
+    </div>
+    <div class="form-row"><button type="submit" data-v-27deb898="">Scan</button></div>
+  </form>
+</section>
+`;