feat(test): add AboutKoel component tests

package.json

@@ -26,7 +26,7 @@
     "nprogress": "^0.2.0",
     "plyr": "1.5.x",
     "pusher-js": "^4.1.0",
-    "select": "^1.0.6",
+    "select": "^1.1.2",
     "sketch-js": "^1.1.3",
     "slugify": "^1.0.2",
     "vue": "^3.2.32",

resources/assets/js/components/meta/AboutKoelModal.spec.ts

@@ -0,0 +1,44 @@
+import { beforeEach, expect, it } from 'vitest'
+import { cleanup } from '@testing-library/vue'
+import { mockHelper, render } from '@/__tests__/__helpers__'
+import { commonStore, userStore } from '@/stores'
+import AboutKoelModel from './AboutKoelModal.vue'
+import Btn from '@/components/ui/Btn.vue'
+import factory from '@/__tests__/factory'
+
+beforeEach(() => {
+  cleanup()
+  mockHelper.restoreAllMocks()
+  KOEL_ENV = ''
+})
+
+it('renders', async () => {
+  commonStore.state.currentVersion = 'v0.0.0'
+  commonStore.state.latestVersion = 'v0.0.0'
+
+  const { html } = render(AboutKoelModel, {
+    global: {
+      stubs: {
+        Btn
+      }
+    }
+  })
+
+  expect(html()).toMatchSnapshot()
+})
+
+it('shows new version', () => {
+  commonStore.state.currentVersion = 'v1.0.0'
+  commonStore.state.latestVersion = 'v1.0.1'
+  userStore.state.current = factory.states('admin')<User>('user')
+  const { findByTestId } = render(AboutKoelModel)
+
+  findByTestId('new-version-about')
+})
+
+it('shows demo notation', () => {
+  KOEL_ENV = 'demo'
+  const { findByTestId } = render(AboutKoelModel)
+
+  findByTestId('demo-credits')
+})

resources/assets/js/components/meta/AboutKoelModal.vue

@@ -11,7 +11,7 @@
 
       <p class="current-version">{{ currentVersion }}</p>
 
-      <p v-if="shouldNotifyNewVersion" class="new-version">
+      <p v-if="shouldNotifyNewVersion" data-testid="new-version-about">
         <a :href="latestVersionReleaseUrl" target="_blank">
           A new Koel version is available ({{ latestVersion }}).
         </a>
@@ -25,7 +25,7 @@
         <a href="https://github.com/koel/koel/graphs/contributors" rel="noopener" target="_blank">contributors</a>.
       </p>
 
-      <p v-if="isDemo" class="demo-credits">
+      <p v-if="isDemo" data-testid="demo-credits">
         Demo music provided by
         <a href="https://www.bensound.com" rel="noopener" target="_blank">Bensound</a>.
       </p>

resources/assets/js/components/meta/__snapshots__/AboutKoelModal.spec.ts.snap

@@ -0,0 +1,18 @@
+// Vitest Snapshot v1
+
+exports[`renders 1`] = `
+"<div class=\\"about text-secondary\\" data-testid=\\"about-modal\\" tabindex=\\"0\\" data-v-0ef2b3f8=\\"\\">
+  <header data-v-0ef2b3f8=\\"\\">
+    <h1 class=\\"text-white\\" data-v-0ef2b3f8=\\"\\">About Koel</h1>
+  </header>
+  <main data-v-0ef2b3f8=\\"\\">
+    <div class=\\"logo\\" data-v-0ef2b3f8=\\"\\"><img alt=\\"Koel&#x27;s logo\\" src=\\"/resources/assets/img/logo.svg\\" width=\\"128\\" data-v-0ef2b3f8=\\"\\" /></div>
+    <p class=\\"current-version\\" data-v-0ef2b3f8=\\"\\">v0.0.0</p>
+    <!--v-if-->
+    <p class=\\"author\\" data-v-0ef2b3f8=\\"\\"> Made with ❤️ by <a href=\\"https://github.com/phanan\\" rel=\\"noopener\\" target=\\"_blank\\" data-v-0ef2b3f8=\\"\\">Phan An</a> and quite a few <a href=\\"https://github.com/koel/core/graphs/contributors\\" rel=\\"noopener\\" target=\\"_blank\\" data-v-0ef2b3f8=\\"\\">awesome</a>  <a href=\\"https://github.com/koel/koel/graphs/contributors\\" rel=\\"noopener\\" target=\\"_blank\\" data-v-0ef2b3f8=\\"\\">contributors</a>. </p>
+    <!--v-if-->
+    <p data-v-0ef2b3f8=\\"\\"> Loving Koel? Please consider supporting its development via <a href=\\"https://github.com/users/phanan/sponsorship\\" rel=\\"noopener\\" target=\\"_blank\\" data-v-0ef2b3f8=\\"\\">GitHub Sponsors</a> and/or <a href=\\"https://opencollective.com/koel\\" rel=\\"noopener\\" target=\\"_blank\\" data-v-0ef2b3f8=\\"\\">OpenCollective</a>. </p>
+  </main>
+  <footer data-v-0ef2b3f8=\\"\\"><button type=\\"button\\" data-testid=\\"close-modal-btn\\" red=\\"\\" rounded=\\"\\" data-v-27deb898=\\"\\" data-v-0ef2b3f8=\\"\\">Close</button></footer>
+</div>"
+`;

resources/assets/js/types.d.ts

@@ -1,4 +1,4 @@
-declare const KOEL_ENV: '' | 'demo'
+declare let KOEL_ENV: '' | 'demo'
 
 declare module '*.vue'
 

yarn.lock

@@ -7596,7 +7596,7 @@ select-hose@^2.0.0:
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
   integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=
 
-select@^1.0.6:
+select@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
   integrity sha1-DnNQrN7ICxEIUoeG7B1EGNEbOW0=