From bf25339bc9e2310c95e1de596a004d3e25e3b59d Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Sun, 15 Jan 2023 19:09:01 +0000 Subject: [PATCH] test: add `vitest-environment-nuxt` (#1186) --- composables/idb/index.ts | 6 +++ composables/masto/statusDrafts.ts | 2 +- composables/users.ts | 2 +- nuxt.config.ts | 1 + package.json | 1 + pages/[[server]]/@[account]/[status].vue | 2 +- pnpm-lock.yaml | 54 +++++++++++++++++++++--- shims.d.ts | 10 +++++ tests/content-rich.test.ts | 7 --- tests/html-parse.test.ts | 4 -- tests/html-to-text.test.ts | 14 +++--- tests/language.test.ts | 1 - tests/reorder-timeline.test.ts | 4 -- vitest.config.mjs | 7 +++ vitest.config.ts | 31 -------------- 15 files changed, 82 insertions(+), 64 deletions(-) create mode 100644 vitest.config.mjs delete mode 100644 vitest.config.ts diff --git a/composables/idb/index.ts b/composables/idb/index.ts index 1019cb88..d71a30cc 100644 --- a/composables/idb/index.ts +++ b/composables/idb/index.ts @@ -3,6 +3,8 @@ import type { Ref } from 'vue' import { del, get, set, update } from 'idb-keyval' import type { UseIDBOptions } from '@vueuse/integrations/useIDBKeyval' +const isIDBSupported = !process.test && typeof indexedDB !== 'undefined' + export async function useAsyncIDBKeyval( key: IDBValidKey, initialValue: MaybeComputedRef, @@ -22,6 +24,8 @@ export async function useAsyncIDBKeyval( const rawInit: T = resolveUnref(initialValue) async function read() { + if (!isIDBSupported) + return try { const rawValue = await get(key) if (rawValue === undefined) { @@ -40,6 +44,8 @@ export async function useAsyncIDBKeyval( await read() async function write() { + if (!isIDBSupported) + return try { if (data.value == null) { await del(key) diff --git a/composables/masto/statusDrafts.ts b/composables/masto/statusDrafts.ts index 6603b63e..9729800f 100644 --- a/composables/masto/statusDrafts.ts +++ b/composables/masto/statusDrafts.ts @@ -4,7 +4,7 @@ import { STORAGE_KEY_DRAFTS } from '~/constants' import type { Draft, DraftMap } from '~/types' import type { Mutable } from '~/types/utils' -export const currentUserDrafts = process.server ? computed(() => ({})) : useUserLocalStorage(STORAGE_KEY_DRAFTS, () => ({})) +export const currentUserDrafts = process.server || process.test ? computed(() => ({})) : useUserLocalStorage(STORAGE_KEY_DRAFTS, () => ({})) export const builtinDraftKeys = [ 'dialog', diff --git a/composables/users.ts b/composables/users.ts index a79ac703..8f466850 100644 --- a/composables/users.ts +++ b/composables/users.ts @@ -289,7 +289,7 @@ interface UseUserLocalStorageCache { * Create reactive storage for the current user */ export function useUserLocalStorage(key: string, initial: () => T): Ref { - if (process.server) + if (process.server || process.test) return shallowRef(initial()) // @ts-expect-error bind value to the function diff --git a/nuxt.config.ts b/nuxt.config.ts index fe87c45a..280142ff 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -66,6 +66,7 @@ export default defineNuxtConfig({ define: { 'process.env.VSCODE_TEXTMATE_DEBUG': 'false', 'process.mock': ((!isCI || isPreview) && process.env.MOCK_USER) || 'false', + 'process.test': 'false', }, build: { target: 'esnext', diff --git a/package.json b/package.json index 9fc48947..0902cbeb 100644 --- a/package.json +++ b/package.json @@ -114,6 +114,7 @@ "vite-plugin-inspect": "^0.7.14", "vite-plugin-pwa": "^0.14.1", "vitest": "^0.27.0", + "vitest-environment-nuxt": "0.4.0", "vue-tsc": "^1.0.24", "workbox-build": "^6.5.4", "workbox-window": "^6.5.4" diff --git a/pages/[[server]]/@[account]/[status].vue b/pages/[[server]]/@[account]/[status].vue index b4e0babf..2e330b24 100644 --- a/pages/[[server]]/@[account]/[status].vue +++ b/pages/[[server]]/@[account]/[status].vue @@ -5,7 +5,7 @@ definePageMeta({ name: 'status', key: route => route.path, // GoToSocial - alias: ['/:server/@:account/statuses/:status'], + alias: ['/:server?/@:account/statuses/:status'], }) const route = useRoute() diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 15d5870c..ebe347a1 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -118,6 +118,7 @@ importers: vite-plugin-inspect: ^0.7.14 vite-plugin-pwa: ^0.14.1 vitest: ^0.27.0 + vitest-environment-nuxt: 0.4.0 vue-advanced-cropper: ^2.8.6 vue-tsc: ^1.0.24 vue-virtual-scroller: 2.0.0-beta.7 @@ -209,8 +210,9 @@ importers: unplugin-auto-import: 0.12.1_@vueuse+core@9.10.0 unplugin-vue-inspector: 0.0.2 vite-plugin-inspect: 0.7.14 - vite-plugin-pwa: 0.14.1_tz3vz2xt4jvid2diblkpydcyn4 + vite-plugin-pwa: 0.14.1 vitest: 0.27.0_jsdom@21.0.0 + vitest-environment-nuxt: 0.4.0_vitest@0.27.0 vue-tsc: 1.0.24_typescript@4.9.4 workbox-build: 6.5.4 workbox-window: 6.5.4 @@ -4048,6 +4050,12 @@ packages: resolution: {integrity: sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==} dev: true + /@vue/test-utils/2.2.7: + resolution: {integrity: sha512-BMuoruUFTEqhLoOgsMcgNVMiByYbfHCKGr2C4CPdGtz/affUtDVX5zr1RnPuq0tYSiaqq+Enw5voUpG6JY8Q7g==} + peerDependencies: + vue: ^3.0.1 + dev: true + /@vueuse/core/8.9.4: resolution: {integrity: sha512-B/Mdj9TK1peFyWaPof+Zf/mP9XuGAngaJZBwPaXBvU3aCTZlx3ltlrFFFyMV4iGBwsjSCeUCgZrtkEj9dS2Y3Q==} peerDependencies: @@ -5164,6 +5172,10 @@ packages: engines: {node: '>= 6'} dev: true + /css.escape/1.5.1: + resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==} + dev: true + /cssesc/3.0.0: resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} engines: {node: '>=4'} @@ -6913,6 +6925,19 @@ packages: ufo: 1.0.1 dev: true + /happy-dom/8.1.4: + resolution: {integrity: sha512-mUCzXHhSO6fOQlZwKW6z2f/+rYavKNxNrgY4nJ4dp+r8gTGbTENgMZGfM6eJD0DJPRFF8DFyngXdBF93wF96UA==} + dependencies: + css.escape: 1.5.1 + he: 1.2.0 + node-fetch: 2.6.8 + webidl-conversions: 7.0.0 + whatwg-encoding: 2.0.0 + whatwg-mimetype: 3.0.0 + transitivePeerDependencies: + - encoding + dev: true + /has-bigints/1.0.2: resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==} dev: true @@ -8846,7 +8871,6 @@ packages: optional: true dependencies: whatwg-url: 5.0.0 - dev: false /node-fetch/3.3.0: resolution: {integrity: sha512-BKwRP/O0UvoMKp7GNdwPlObhYGB5DQqwhEDQlNKuoqwVYSxkSZCSbHjnFFmUEtwSKRPU4kNK8PbDYYitwaE3QA==} @@ -12046,12 +12070,10 @@ packages: - supports-color dev: true - /vite-plugin-pwa/0.14.1_tz3vz2xt4jvid2diblkpydcyn4: + /vite-plugin-pwa/0.14.1: resolution: {integrity: sha512-5zx7yhQ8RTLwV71+GA9YsQQ63ALKG8XXIMqRJDdZkR8ZYftFcRgnzM7wOWmQZ/DATspyhPih5wCdcZnAIsM+mA==} peerDependencies: vite: ^3.1.0 || ^4.0.0 - workbox-build: ^6.5.4 - workbox-window: ^6.5.4 dependencies: '@rollup/plugin-replace': 5.0.2_rollup@3.9.1 debug: 4.3.4 @@ -12061,6 +12083,7 @@ packages: workbox-build: 6.5.4 workbox-window: 6.5.4 transitivePeerDependencies: + - '@types/babel__core' - supports-color dev: true @@ -12149,6 +12172,27 @@ packages: fsevents: 2.3.2 dev: true + /vitest-environment-nuxt/0.4.0_vitest@0.27.0: + resolution: {integrity: sha512-uRg/jvgHjzUGhkWTWtFEUlImfA3VScZG2EGlRvQk9ODspUw0a9hTz9Yz9tXQTsChoE2n7yi44TJdCVmK7iHxUA==} + peerDependencies: + vitest: ^0.24.5 || ^0.26.0 || ^0.27.0 + vue: ^3.2.45 + dependencies: + '@nuxt/kit': 3.0.0 + '@vue/test-utils': 2.2.7 + estree-walker: 3.0.2 + h3: 1.0.2 + happy-dom: 8.1.4 + magic-string: 0.27.0 + ofetch: 1.0.0 + unenv: 1.0.1 + vitest: 0.27.0_jsdom@21.0.0 + transitivePeerDependencies: + - encoding + - rollup + - supports-color + dev: true + /vitest/0.27.0_jsdom@21.0.0: resolution: {integrity: sha512-BnOa7T6CnXVC6UgcAsvFOZ2Dtvqkt+/Nl6CRgh4qVT70vElf65XwEL6zMRyTF+h2QXJziEkxYdrLo5WCxckMLQ==} engines: {node: '>=v14.16.0'} diff --git a/shims.d.ts b/shims.d.ts index e82d75f0..4686096f 100644 --- a/shims.d.ts +++ b/shims.d.ts @@ -1,3 +1,13 @@ /// /// /// + +declare global { + namespace NodeJS { + interface Process { + test?: boolean + } + } +} + +export {} diff --git a/tests/content-rich.test.ts b/tests/content-rich.test.ts index 6b4a94e3..9d50ec35 100644 --- a/tests/content-rich.test.ts +++ b/tests/content-rich.test.ts @@ -1,6 +1,3 @@ -/** - * @vitest-environment jsdom - */ /* eslint-disable vue/one-component-per-file */ import { describe, expect, it, vi } from 'vitest' import { renderToString } from 'vue/server-renderer' @@ -202,10 +199,6 @@ vi.mock('vue-router', () => { } }) -vi.mock('~/composables/dialog.ts', () => { - return {} -}) - vi.mock('shiki-es', async (importOriginal) => { const mod = await importOriginal() return { diff --git a/tests/html-parse.test.ts b/tests/html-parse.test.ts index f68bde0f..6769adc9 100644 --- a/tests/html-parse.test.ts +++ b/tests/html-parse.test.ts @@ -1,11 +1,7 @@ -/** - * @vitest-environment jsdom - */ import type { mastodon } from 'masto' import { describe, expect, it } from 'vitest' import { format } from 'prettier' import { render as renderTree } from 'ultrahtml' -import { parseMastodonHTML, treeToText } from '~/composables/content-parse' describe('html-parse', () => { it('empty', async () => { diff --git a/tests/html-to-text.test.ts b/tests/html-to-text.test.ts index 04a65914..79f5775a 100644 --- a/tests/html-to-text.test.ts +++ b/tests/html-to-text.test.ts @@ -1,8 +1,4 @@ -/** - * @vitest-environment jsdom - */ import { describe, expect, it } from 'vitest' -import { htmlToText } from '~/composables/content-parse' describe('html-to-text', () => { it('inline code', () => { @@ -13,11 +9,11 @@ describe('html-to-text', () => { it('code block', () => { expect(htmlToText('

text 

code
')) .toMatchInlineSnapshot(` - "text - \`\`\`js - code - \`\`\`" - `) + "text + \`\`\`js + code + \`\`\`" + `) }) it('bold & italic', () => { diff --git a/tests/language.test.ts b/tests/language.test.ts index d2dffa2a..27e562dc 100644 --- a/tests/language.test.ts +++ b/tests/language.test.ts @@ -1,5 +1,4 @@ import { describe, expect, it } from 'vitest' -import { matchLanguages } from '../utils/language' describe('language', () => { it('match language', () => { diff --git a/tests/reorder-timeline.test.ts b/tests/reorder-timeline.test.ts index 242b674c..eaa5e76f 100644 --- a/tests/reorder-timeline.test.ts +++ b/tests/reorder-timeline.test.ts @@ -1,9 +1,5 @@ -/** - * @vitest-environment jsdom - */ import type { mastodon } from 'masto' import { describe, expect, it } from 'vitest' -import { reorderedTimeline } from '~/composables/timeline' function status(id: string): mastodon.v1.Status { return { id } as mastodon.v1.Status diff --git a/vitest.config.mjs b/vitest.config.mjs new file mode 100644 index 00000000..f57754dd --- /dev/null +++ b/vitest.config.mjs @@ -0,0 +1,7 @@ +import { defineConfigWithNuxtEnv } from 'vitest-environment-nuxt/config' + +export default defineConfigWithNuxtEnv({ + define: { + 'process.test': 'true', + }, +}) diff --git a/vitest.config.ts b/vitest.config.ts deleted file mode 100644 index ac4388d7..00000000 --- a/vitest.config.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { resolve } from 'path' -import { defineConfig } from 'vitest/config' -import Vue from '@vitejs/plugin-vue' -import AutoImport from 'unplugin-auto-import/vite' - -export default defineConfig({ - resolve: { - alias: { - '~/': `${resolve(__dirname)}/`, - }, - }, - define: { - 'process.server': 'false', - 'process.client': 'true', - }, - plugins: [ - Vue({ - reactivityTransform: true, - }), - AutoImport({ - dts: false, - imports: [ - 'vue', - '@vueuse/core', - ], - dirs: [ - 'composables', - ], - }), - ], -})