-
Notifications
You must be signed in to change notification settings - Fork 3.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(npm/vue): expose Test Utils API (#22757)
* expose test utils object from cypress/mount * inline test utils types and rewrite cli/vue/index.d.ts to use inline types * update readme * typo and fix comment * revert accidental change * revert accidental change
- Loading branch information
1 parent
3d07d53
commit 8e07318
Showing
9 changed files
with
177 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
23 changes: 23 additions & 0 deletions
23
npm/vue/cypress/component/test-utils-api/TestUtilsApi.cy.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
import { VueTestUtils, mount } from 'cypress/vue' | ||
import { h } from 'vue' | ||
import TestUtilsApi from './TestUtilsApi.vue' | ||
|
||
const greeting = 'This is a globally registered component!' | ||
|
||
describe('VueTestUtils API', () => { | ||
before(() => { | ||
VueTestUtils.config.global.components = { | ||
'globally-registered-component': { | ||
setup () { | ||
return () => h('h1', greeting) | ||
}, | ||
}, | ||
} | ||
}) | ||
|
||
it('gains access to underlying Vue Test Utils library', () => { | ||
mount(TestUtilsApi) | ||
|
||
cy.get('h1').contains(greeting) | ||
}) | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
<template> | ||
<globally-registered-component /> | ||
</template> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,69 @@ | ||
import fs from 'fs-extra' | ||
import globby from 'globby' | ||
import path from 'path' | ||
|
||
// We depend on @vue/test-utils and inline this library in the | ||
// @cypress/vue bundle. | ||
// Unfortunately, although rollup can inline libraries like this, | ||
// TypeScript doesn't do the same for d.ts files - it mains imports | ||
// to the original library, which we do not actually ship in the binary. | ||
|
||
// This script copies the `d.ts` files into the `dist` directory | ||
// then modifies the `index.d.ts` to reference the copied type definitions | ||
// instead of the ones from the local node_modules directory that we don't | ||
// actually bundle in the binary. | ||
|
||
function rewriteSourceForInlineTypes (src: string) { | ||
return src | ||
// Need to modify these lines: | ||
// import type { MountingOptions, VueWrapper } from '@vue/test-utils'; | ||
// import * as _VueTestUtils from '@vue/test-utils'; | ||
// to | ||
// import type { MountingOptions, VueWrapper } from './@vue/test-utils'; | ||
// import * as _VueTestUtils from './@vue/test-utils'; | ||
.replaceAll(`'@vue/test-utils';`, `'./@vue/test-utils';`) | ||
|
||
// Need to modify this line: | ||
// config: import("@vue/test-utils/config).GlobalConfigOptions; | ||
// to | ||
// config: import("./@vue/test-utils/config").GlobalConfigOptions; | ||
.replaceAll(`@vue/test-utils/dist/config`, `./@vue/test-utils/config`) | ||
} | ||
|
||
async function inlineTestUtilsTypes () { | ||
console.log('[npm/vue] Inline type definitions for @vue/test-utils and rewriting source') // eslint-disable-line no-console | ||
|
||
// get the directory with the type definitions we want to inline | ||
const vtuDir = path.dirname(require.resolve('@vue/test-utils')) | ||
|
||
// grab the type definitions | ||
const typeDefs = await globby('**/*.d.ts', { cwd: vtuDir }) | ||
|
||
// make a directory for them in npm/vue/dist | ||
const typeDefDir = path.join(__dirname, 'dist', '@vue', 'test-utils') | ||
|
||
await fs.mkdir(typeDefDir, { recursive: true }) | ||
|
||
// copy the type definitions | ||
await Promise.all( | ||
typeDefs.map((tds) => { | ||
const from = path.join(vtuDir, tds) | ||
const to = path.join(typeDefDir, tds) | ||
|
||
return fs.copy(from, to, { recursive: true }) | ||
}), | ||
) | ||
|
||
const cypressVueMainTypeDef = path.join(__dirname, 'dist', 'index.d.ts') | ||
|
||
// modify index.d.ts to reference relative type definitions instead of ones from | ||
// node_modules | ||
const updateWithRelativeImports = rewriteSourceForInlineTypes( | ||
await fs.readFile(cypressVueMainTypeDef, 'utf-8'), | ||
) | ||
|
||
// rewrite index.d.ts, now modified to point at local type definitions. | ||
await fs.writeFile(cypressVueMainTypeDef, updateWithRelativeImports) | ||
} | ||
|
||
inlineTestUtilsTypes() |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
export function expectType<T>(value: T): void | ||
export function expectError<T>(value: T): void | ||
export function expectAssignable<T, T2 extends T = T>(value: T2): void | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import { expectError, expectType } from './index' | ||
import { mount, VueTestUtils } from '../dist' | ||
import * as VTU from '@vue/test-utils' | ||
import { defineComponent } from 'vue' | ||
|
||
const App = defineComponent({ | ||
template: `<div />`, | ||
}) | ||
|
||
// Returns Chainable - not the `mount` function from @vue/test-utils | ||
expectType<Cypress.Chainable>( | ||
mount(App), | ||
) | ||
|
||
// Rewritten relative types match those copied from node_modules | ||
// see npm/vue/inline-types.ts for more info. | ||
expectType<typeof VueTestUtils['config']['global']>(VTU['config']['global']) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
{ | ||
"extends": "../tsconfig.json", | ||
"compilerOptions": { | ||
"noEmit": true, | ||
"skipLibCheck": true, | ||
"experimentalDecorators": true, | ||
"strictNullChecks": false | ||
}, | ||
"exclude": [ | ||
"../src" | ||
], | ||
"include": [ | ||
"../dist", | ||
"../test-dts" | ||
] | ||
} |
8e07318
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Circle has built the
linux x64
version of the Test Runner.Learn more about this pre-release platform-specific build at https://on.cypress.io/installing-cypress#Install-pre-release-version.
Run this command to install the pre-release locally:
8e07318
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Circle has built the
darwin arm64
version of the Test Runner.Learn more about this pre-release platform-specific build at https://on.cypress.io/installing-cypress#Install-pre-release-version.
Run this command to install the pre-release locally:
8e07318
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Circle has built the
linux arm64
version of the Test Runner.Learn more about this pre-release platform-specific build at https://on.cypress.io/installing-cypress#Install-pre-release-version.
Run this command to install the pre-release locally:
8e07318
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Circle has built the
darwin x64
version of the Test Runner.Learn more about this pre-release platform-specific build at https://on.cypress.io/installing-cypress#Install-pre-release-version.
Run this command to install the pre-release locally:
8e07318
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Circle has built the
win32 x64
version of the Test Runner.Learn more about this pre-release platform-specific build at https://on.cypress.io/installing-cypress#Install-pre-release-version.
Run this command to install the pre-release locally: