test: add test for vue-tsc

fi3ework · Mar 24, 2022 · e46d327 · e46d327
1 parent 6871f55
commit e46d327
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 8 deletions.
diff --git a/packages/vite-plugin-checker/__tests__/e2e/Sandbox/Sandbox.ts b/packages/vite-plugin-checker/__tests__/e2e/Sandbox/Sandbox.ts
@@ -115,13 +115,13 @@ export async function waitForHmrOverlay(): Promise<
  const element = await page.waitForSelector('vite-plugin-checker-error-overlay', {
  state: 'attached',
  })
- return element
+ return element as any
 }
 
 export async function getHmrOverlay(): Promise<ElementHandle<'vite-plugin-checker-error-overlay'> | null> {
  const dom = await page.$('vite-plugin-checker-error-overlay')
  if (dom) console.log('found vite-plugin-checker-error-overlay')
- return dom
+ return dom as any
 }
 
 export async function getHmrOverlayText(

diff --git a/playground/vue3-vue-tsc/__tests__/__snapshots__/test.spec.ts.snap b/playground/vue3-vue-tsc/__tests__/__snapshots__/test.spec.ts.snap
@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`vue3-vue-tsc serve get initial error and subsequent error 1`] = `"[{\\"checkerId\\":\\"TypeScript\\",\\"frame\\":\\" 1 | <template>/n 2 | <img alt=/\\"Vue logo/\\" src=/\\"./assets/logo.png/\\" />/n > 3 | <HelloWorld msg1=/\\"Diana/\\" />/n | ^^^^^^^^^^/n 4 | </template>/n 5 |/n 6 | <script lang=/\\"ts/\\">\\",\\"id\\":\\"<PROJECT_ROOT>/temp/vue3-vue-tsc/src/App.vue\\",\\"level\\":1,\\"loc\\":{\\"column\\":4,\\"file\\":\\"<PROJECT_ROOT>/temp/vue3-vue-tsc/src/App.vue\\",\\"line\\":3},\\"message\\":\\"Type '{ msg1: string; }' is not assignable to type 'IntrinsicAttributes & Partial<{}> & Omit<Readonly<{ msg?: unknown; } & { msg: string; } & {}> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>'./n Property 'msg' is missing in type '{ msg1: string; }' but required in type 'Omit<Readonly<{ msg?: unknown; } & { msg: string; } & {}> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>'.\\",\\"stack\\":\\"\\"}]"`;
+
+exports[`vue3-vue-tsc serve get initial error and subsequent error 2`] = `
+"
+ ERROR(TypeScript) Type '{ msg1: string; }' is not assignable to type 'IntrinsicAttributes & Partial<{}> & Omit<Readonly<{ msg?: unknown; } & { msg: string; } & {}> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>'.
+ Property 'msg' is missing in type '{ msg1: string; }' but required in type 'Omit<Readonly<{ msg?: unknown; } & { msg: string; } & {}> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>'.
+ FILE <PROJECT_ROOT>/temp/vue3-vue-tsc/src/App.vue:3:4
+
+ 1 | <template>
+ 2 | <img alt=\\"Vue logo\\" src=\\"./assets/logo.png\\" />
+ > 3 | <HelloWorld msg1=\\"Diana\\" />
+ | ^^^^^^^^^^
+ 4 | </template>
+ 5 |
+ 6 | <script lang=\\"ts\\">
+
+[TypeScript] Found 1 error. Watching for file changes."
+`;
+
+exports[`vue3-vue-tsc serve get initial error and subsequent error 3`] = `"[{\\"checkerId\\":\\"TypeScript\\",\\"frame\\":\\" 1 | <template>/n 2 | <img alt=/\\"Vue logo/\\" src=/\\"./assets/logo.png/\\" />/n > 3 | <HelloWorld msg2=/\\"Diana/\\" />/n | ^^^^^^^^^^/n 4 | </template>/n 5 |/n 6 | <script lang=/\\"ts/\\">\\",\\"id\\":\\"<PROJECT_ROOT>/temp/vue3-vue-tsc/src/App.vue\\",\\"level\\":1,\\"loc\\":{\\"column\\":4,\\"file\\":\\"<PROJECT_ROOT>/temp/vue3-vue-tsc/src/App.vue\\",\\"line\\":3},\\"message\\":\\"Type '{ msg2: string; }' is not assignable to type 'IntrinsicAttributes & Partial<{}> & Omit<Readonly<{ msg?: unknown; } & { msg: string; } & {}> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>'./n Property 'msg' is missing in type '{ msg2: string; }' but required in type 'Omit<Readonly<{ msg?: unknown; } & { msg: string; } & {}> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>'.\\",\\"stack\\":\\"\\"}]"`;
+
+exports[`vue3-vue-tsc serve get initial error and subsequent error 4`] = `
+"
+ ERROR(TypeScript) Type '{ msg2: string; }' is not assignable to type 'IntrinsicAttributes & Partial<{}> & Omit<Readonly<{ msg?: unknown; } & { msg: string; } & {}> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>'.
+ Property 'msg' is missing in type '{ msg2: string; }' but required in type 'Omit<Readonly<{ msg?: unknown; } & { msg: string; } & {}> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>'.
+ FILE <PROJECT_ROOT>/temp/vue3-vue-tsc/src/App.vue:3:4
+
+ 1 | <template>
+ 2 | <img alt=\\"Vue logo\\" src=\\"./assets/logo.png\\" />
+ > 3 | <HelloWorld msg2=\\"Diana\\" />
+ | ^^^^^^^^^^
+ 4 | </template>
+ 5 |
+ 6 | <script lang=\\"ts\\">
+
+[TypeScript] Found 1 error. Watching for file changes."
+`;
diff --git a/playground/vue3-vue-tsc/__tests__/test.spec.ts b/playground/vue3-vue-tsc/__tests__/test.spec.ts
@@ -1,13 +1,26 @@
+import stringify from 'fast-json-stable-stringify'
 import {
+ killServer,
  preTest,
+ resetReceivedLog,
+ sleepForEdit,
+ sleepForServerReady,
+ stripedLog,
  viteBuild,
-} from '../../../packages/vite-plugin-checker/__tests__/e2e/Sandbox/Sandbox'
+ viteServe,
+} from 'vite-plugin-checker/__tests__/e2e/Sandbox/Sandbox'
 import {
  editFile,
  sleep,
  testDir,
  WORKER_CLEAN_TIMEOUT,
-} from '../../../packages/vite-plugin-checker/__tests__/e2e/testUtils'
+} from 'vite-plugin-checker/__tests__/e2e/testUtils'
+import { WS_CHECKER_ERROR_EVENT } from 'vite-plugin-checker/src/client'
+
+import { copyCode } from '../../../scripts/jestSetupFilesAfterEnv'
+import { serializers } from '../../../scripts/serializers'
+
+expect.addSnapshotSerializer(serializers)
 
 beforeAll(async () => {
  await preTest()
@@ -18,16 +31,55 @@ afterAll(async () => {
 })
 
 describe('vue3-vue-tsc', () => {
+ beforeEach(async () => {
+ await copyCode()
+ })
+
+ describe('serve', () => {
+ afterEach(async () => {
+ await killServer()
+ })
+
+ it('get initial error and subsequent error', async () => {
+ let diagnostics: any
+ await viteServe({
+ cwd: testDir,
+ wsSend: (_payload) => {
+ if (_payload.type === 'custom' && _payload.event === WS_CHECKER_ERROR_EVENT) {
+ diagnostics = _payload.data.diagnostics
+ }
+ },
+ })
+ await sleepForServerReady(2)
+ expect(stringify(diagnostics)).toMatchSnapshot()
+ expect(stripedLog).toMatchSnapshot()
+
+ console.log('-- edit file --')
+ resetReceivedLog()
+ editFile('src/App.vue', (code) =>
+ code.replace('<HelloWorld msg1="Diana" />', '<HelloWorld msg2="Diana" />')
+ )
+ await sleepForEdit()
+ expect(stringify(diagnostics)).toMatchSnapshot()
+ expect(stripedLog).toMatchSnapshot()
+ })
+ })
+
  describe('build', () => {
+ const errMsg = `error TS2322: Type '{ msg1: string; }' is not assignable to type 'IntrinsicAttributes & Partial<{}> & Omit<Readonly<{ msg?: unknown; } & { msg: string; } & {}> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>'.`
+
  it('enableBuild: true', async () => {
- await viteBuild({ expectedErrorMsg: 'error TS2322', cwd: testDir })
+ await viteBuild({
+ expectedErrorMsg: errMsg,
+ cwd: testDir,
+ })
  })
 
  it('enableBuild: false', async () => {
  editFile('vite.config.ts', (code) =>
- code.replace('vueTsc: true', 'vueTsc: true, enableBuild: false')
+ code.replace('vueTsc: true', 'vueTsc: true, enableBuild: false,')
  )
- await viteBuild({ unexpectedErrorMsg: 'error TS2322', cwd: testDir })
+ await viteBuild({ unexpectedErrorMsg: errMsg, cwd: testDir })
  })
  })
 })
diff --git a/playground/vue3-vue-tsc/src/App.vue b/playground/vue3-vue-tsc/src/App.vue
@@ -1,6 +1,6 @@
 <template>
  <img alt="Vue logo" src="./assets/logo.png" />
- <HelloWorld msg12="j" />
+ <HelloWorld msg1="Diana" />
 </template>
 
 <script lang="ts">