refactor: use @vue/test-utils flushPromises & refactor type definitio…

…ns (#740)

* refactor(test): use @vue/test-utils flushPromises
* refactor: reduce any uses
* refactor: move type definition

__tests__/content/series.test.ts

@@ -5,8 +5,9 @@ import { basename } from 'node:path'
 import { load } from 'js-yaml'
 import { describe, expect, test } from 'vitest'
 
+import type { Software } from '~~/composables/useSoftwareData'
+import { platforms, regionList } from '~~/composables/useSoftwareData'
 import seriesList from '~~/content/series/.seriesList.json'
-import { platforms, regionList, Software } from '~~/src/content'
 
 const dirpath = './content/series'
 

__tests__/content/songs.test.ts

@@ -5,8 +5,8 @@ import { basename } from 'node:path'
 import { load } from 'js-yaml'
 import { describe, expect, test } from 'vitest'
 
+import type { Song } from '~~/composables/useSongData'
 import seriesList from '~~/content/series/.seriesList.json'
-import { Song } from '~~/src/content'
 
 const dirpath = './content/songs'
 

__tests__/pages/songs/index.test.ts

@@ -25,7 +25,7 @@ describe('pages/songs/index.vue', () => {
       bpm: 180,
       series: ['1st-jp', '2nd']
     }
-  ]
+  ] as Awaited<ReturnType<typeof useSongList>>['songs']['value']
   const global = { plugins, stubs: { NuxtLink: RouterLinkStub, Series: true } }
 
   beforeEach(() => {

__tests__/test-utils.ts

@@ -1,17 +1,14 @@
 import Oruga from '@oruga-ui/oruga-next'
 import { bulmaConfig } from '@oruga-ui/theme-bulma'
-import { mount } from '@vue/test-utils'
-import flushPromises from 'flush-promises'
+import { flushPromises, mount } from '@vue/test-utils'
 import type { DefineComponent, Plugin } from 'vue'
 import { defineComponent, h, Suspense } from 'vue'
 
-import type { SoftwareParsedContent } from '~~/composables/useSoftwareData'
-import type { SoftwareListData } from '~~/composables/useSoftwareList'
-import type { SongParsedContent } from '~~/composables/useSongData'
-
-export const plugins: (Plugin | [Plugin, ...any[]])[] = [[Oruga, bulmaConfig]]
+export const plugins: (Plugin | [Plugin, ...unknown[]])[] = [
+  [Oruga, bulmaConfig]
+]
 
-export const mountAsync = async <T extends DefineComponent<any, any, any, any>>(
+export const mountAsync = async <T extends DefineComponent<{}, {}, {}, any>>(
   component: T,
   options: Parameters<typeof mount<T>>[1]
 ) => {
@@ -33,7 +30,9 @@ export const mountAsync = async <T extends DefineComponent<any, any, any, any>>(
   return wrapper
 }
 
-export const mockSoftware: SoftwareParsedContent = {
+export const mockSoftware: Awaited<
+  ReturnType<typeof useSoftwareData>
+>['software']['value'] = {
   slug: '1st-jp',
   title: 'Dance Dance Revolution',
   platform: 'Play Station',
@@ -49,7 +48,9 @@ export const mockSoftware: SoftwareParsedContent = {
   _id: 'content:series:1st-jp.md'
 }
 
-export const mockSoftwareList: SoftwareListData[] = [
+export const mockSoftwareList: Awaited<
+  ReturnType<typeof useSoftwareList>
+>['softwareList']['value'] = [
   {
     slug: '1st-jp',
     title: 'Dance Dance Revolution',
@@ -66,7 +67,9 @@ export const mockSoftwareList: SoftwareListData[] = [
   }
 ]
 
-export const mockSong: SongParsedContent = {
+export const mockSong: Awaited<
+  ReturnType<typeof useSongData>
+>['song']['value'] = {
   slug: 'butterfly',
   name: 'butterfly',
   artist: 'smile. dk',

components/content/Charts.vue

@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts" setup>
-import type { Software } from '~~/src/content'
+import type { Software } from '~~/composables/useSoftwareData'
 
 interface Props {
   difficulties: Software['difficulties']

components/content/SeriesList.vue

@@ -7,8 +7,8 @@
 </template>
 
 <script lang="ts" setup>
+import type { Song } from '~~/composables/useSongData'
 import seriesList from '~~/content/series/.seriesList.json'
-import type { Song } from '~~/src/content'
 
 interface SeriesListProps {
   series: Song['series']

composables/useSoftwareData.ts

@@ -1,16 +1,33 @@
 import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
 import type { Ref } from 'vue'
 
-import type { Software } from '~~/src/content'
+import type seriesList from '~~/content/series/.seriesList.json'
 
-export type SoftwareParsedContent = ParsedContent & Software
+export const regionList = ['JP', 'US', 'EU', 'None'] as const
+
+export const platforms = [
+  'Play Station',
+  'Play Station 2',
+  'Dreamcast',
+  'GAME BOY COLOR',
+  'Wii'
+] as const
+
+export interface Software {
+  slug: keyof typeof seriesList
+  title: string
+  platform: (typeof platforms)[number]
+  region: (typeof regionList)[number]
+  launched: string
+  difficulties: { [key in number]: { name: string; class: string } }
+}
 
 export default async function (slug: string) {
   const { data } = await useAsyncData(`/software/${slug}`, () =>
-    queryContent<SoftwareParsedContent>()
+    queryContent<Software & ParsedContent>()
       .where({ _type: 'markdown', slug })
       .findOne()
   )
 
-  return { software: data as Ref<SoftwareParsedContent> }
+  return { software: data as Ref<Software & ParsedContent> }
 }

composables/useSoftwareList.ts

@@ -1,15 +1,20 @@
 import type { Ref } from 'vue'
 
-import type { Software } from '~~/src/content'
+import type { Software } from '~~/composables/useSoftwareData'
 
-const keys = ['slug', 'title', 'platform', 'region', 'launched'] as const
-export type SoftwareListData = Pick<Software, (typeof keys)[number]>
+export type SoftwareListData = Omit<Software, 'difficulties'>
 
 export default async function () {
   const { data } = await useAsyncData('/software', () =>
     queryContent<Software>('series')
       .sort({ launched: 1 })
-      .only([...keys])
+      .only<(keyof Software)[]>([
+        'slug',
+        'title',
+        'platform',
+        'region',
+        'launched'
+      ])
       .find()
   )
 

composables/useSongData.ts

@@ -1,16 +1,24 @@
 import type { ParsedContent } from '@nuxt/content/dist/runtime/types'
 import type { Ref } from 'vue'
 
-import type { Song } from '~~/src/content'
+import type seriesList from '~~/content/series/.seriesList.json'
+
+export interface Song {
+  slug: string
+  name: string
+  artist: string
+  bpm: number | string
+  series: (keyof typeof seriesList)[]
+}
 
 export type SongParsedContent = ParsedContent & Song
 
 export default async function (slug: string) {
   const { data } = await useAsyncData(`/songs/${slug}`, () =>
-    queryContent<SongParsedContent>()
+    queryContent<ParsedContent & Song>()
       .where({ _type: 'markdown', slug: { $eq: slug } })
       .findOne()
   )
 
-  return { song: data as Ref<SongParsedContent> }
+  return { song: data as Ref<ParsedContent & Song> }
 }

composables/useSongList.ts

@@ -1,11 +1,14 @@
 import type { Ref } from 'vue'
 
-import type { Song } from '~~/src/content'
+import type { Song } from '~~/composables/useSongData'
 
-export default async function (key: string, ...keys: (keyof Song)[]) {
+export default async function <T extends keyof Song>(
+  key: string,
+  ...keys: T[]
+) {
   const { data } = await useAsyncData(key, () =>
     queryContent<Song>('songs').sort({ name: 1 }).only(keys).find()
   )
 
-  return { songs: data as Ref<Pick<Song, (typeof keys)[number]>[]> }
+  return { songs: data as Ref<Pick<Song, T>[]> }
 }

package.json

@@ -36,7 +36,6 @@
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-nuxt": "^4.0.0",
     "eslint-plugin-simple-import-sort": "^10.0.0",
-    "flush-promises": "^1.0.2",
     "js-yaml": "^4.1.0",
     "jsdom": "^21.1.0",
     "npm-run-all2": "^6.0.4",

pages/songs/index.vue

@@ -17,7 +17,7 @@
       <OTableColumn v-slot="props" label="Series">
         <div class="buttons">
           <NuxtLink
-            v-for="slug in (props.row as Song).series"
+            v-for="slug in (props.row as (typeof songs[number])).series"
             :key="slug"
             class="button is-small"
             :to="`/series/${slug}`"
@@ -45,7 +45,6 @@
 <script lang="ts" setup>
 import useSongList from '~~/composables/useSongList'
 import seriesList from '~~/content/series/.seriesList.json'
-import type { Song } from '~~/src/content'
 
 useHead({ title: 'Song List' })
 

yarn.lock

@@ -2894,11 +2894,6 @@ flatted@^3.1.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"
   integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
 
-flush-promises@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/flush-promises/-/flush-promises-1.0.2.tgz#4948fd58f15281fed79cbafc86293d5bb09b2ced"
-  integrity sha512-G0sYfLQERwKz4+4iOZYQEZVpOt9zQrlItIxQAAYAWpfby3gbHrx0osCHz5RLl/XoXevXk0xoN4hDFky/VV9TrA==
-
 follow-redirects@^1.0.0:
   version "1.15.2"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"