-
-
Notifications
You must be signed in to change notification settings - Fork 1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: adding ui component tests #590
Merged
antfu
merged 28 commits into
vitest-dev:main
from
JessicaSachs:jess/adding-cy-component-tests
Mar 21, 2022
Merged
Changes from 18 commits
Commits
Show all changes
28 commits
Select commit
Hold shift + click to select a range
860f8de
docs: additional cypress + vitest comparison content
JessicaSachs d9d4754
feat: ui testing
edimitchel 4150f74
fix: seperate cypress tests
edimitchel 7a60412
Merge branch 'vitest-dev:main' into main
JessicaSachs 6c8ec2a
feat: adding cypress component testing for ui
JessicaSachs 205e987
chore: share the common deps for global app setup
JessicaSachs b78b171
Merge remote-tracking branch 'origin/main' into jess/adding-cy-compon…
JessicaSachs d042221
spacing
JessicaSachs bd26fe8
Merge remote-tracking branch 'origin/main' into jess/adding-cy-compon…
JessicaSachs 0f0cf9f
Update package.json
JessicaSachs ea4c8a5
chore: adding OptimizationPersist + PkgConfig to reduce flake
JessicaSachs 9e0ab89
Merge branch 'jess/adding-cy-component-tests' of https://github.com/J…
JessicaSachs 343ca1f
chore: workaround for unocss hmr
JessicaSachs c5317d8
chore: adding ts-ignore comments
JessicaSachs 8fb64c2
chore: reordering data-testid
JessicaSachs c16d457
chore: ts-expect-error
JessicaSachs 09bdb65
--allow-empty
JessicaSachs 8c1269f
bug: reproduction of failing vite + cypress setup
JessicaSachs bc8514f
chore: adding Vite 2.9.0-beta.3 to cold-start stability issues for UI…
JessicaSachs c378713
Merge remote-tracking branch 'origin/main' into jess/adding-cy-compon…
JessicaSachs 9a9c9df
chore: fixing types
JessicaSachs 70b3359
chore: fixing types
JessicaSachs 91fa5da
reenabling tests
JessicaSachs 09cf89e
adding faker seed back in
JessicaSachs 939ebdb
bumping faker version
JessicaSachs 60b136b
Merge branch 'main' into jess/adding-cy-component-tests
antfu c8e8d61
Merge branch 'main' into jess/adding-cy-component-tests
antfu 170f15a
Merge branch 'main' into jess/adding-cy-component-tests
antfu File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
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
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 |
---|---|---|
|
@@ -12,3 +12,6 @@ dist | |
.idea | ||
.DS_Store | ||
bench/test/*/*/ | ||
cypress/videos | ||
cypress/downloads | ||
cypress/screenshots |
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
38 changes: 38 additions & 0 deletions
38
packages/ui/client/components/dashboard/DashboardEntry.cy.tsx
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,38 @@ | ||
// import faker from '@faker-js/faker' | ||
// import DashboardEntry from './DashboardEntry.vue' | ||
|
||
it('runs', () => { | ||
expect(true).to.be.true; | ||
}) | ||
// const body = () => (<div data-testid="body-content">{ faker.lorem.words(2) }</div>) | ||
// const header = () => (<div data-testid="header-content">{ faker.hacker.phrase() }</div>) | ||
// const bodySelector = '[data-testid=body-content]' | ||
// const headerSelector = '[data-testid=header-content]' | ||
// const tailSelector = '[data-testid=tail]' | ||
|
||
// // Used as a workaround until unocss HMR is compatible w Cy. | ||
// it('initial', () => { | ||
// cy.mount(<DashboardEntry v-slots={{ body, header }}/>) | ||
// }) | ||
|
||
// describe('DashboardEntry', () => { | ||
// it('tail is rendered by default', () => { | ||
// cy.mount(<DashboardEntry v-slots={{ body, header }}/>) | ||
// .get(tailSelector) | ||
// .should('exist') | ||
// }) | ||
|
||
// it('tail is not shown when true', () => { | ||
// cy.mount(<DashboardEntry tail v-slots={{ body, header }}/>) | ||
// .get(tailSelector) | ||
// .should('not.exist') | ||
// }) | ||
|
||
// it('renders the body and header slots', () => { | ||
// cy.mount(<DashboardEntry v-slots={{ body, header }}/>) | ||
// .get(bodySelector) | ||
// .should('be.visible') | ||
// .get(headerSelector) | ||
// .should('be.visible') | ||
// }) | ||
// }) |
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
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,25 @@ | ||
import { createRouter as _createRouter, createWebHistory } from 'vue-router' | ||
import FloatingVue, { VTooltip } from 'floating-vue' | ||
import routes from 'virtual:generated-pages' | ||
import 'd3-graph-controller/default.css' | ||
import 'splitpanes/dist/splitpanes.css' | ||
import '@unocss/reset/tailwind.css' | ||
import 'codemirror/lib/codemirror.css' | ||
import 'codemirror-theme-vars/base.css' | ||
import './styles/main.css' | ||
import 'floating-vue/dist/style.css' | ||
import 'uno.css' | ||
|
||
export const directives = { | ||
tooltip: VTooltip, | ||
} | ||
|
||
FloatingVue.options.instantMove = true | ||
FloatingVue.options.distance = 10 | ||
|
||
export const createRouter = () => _createRouter({ | ||
history: createWebHistory(import.meta.env.BASE_URL), | ||
routes, | ||
}) | ||
|
||
export const plugins = [createRouter] |
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 |
---|---|---|
@@ -1,27 +1,15 @@ | ||
import { createApp } from 'vue' | ||
import { createRouter, createWebHistory } from 'vue-router' | ||
import routes from 'virtual:generated-pages' | ||
import FloatingVue, { VTooltip } from 'floating-vue' | ||
import { directives, plugins } from './global-setup' | ||
import App from './App.vue' | ||
|
||
import 'd3-graph-controller/default.css' | ||
import 'splitpanes/dist/splitpanes.css' | ||
import '@unocss/reset/tailwind.css' | ||
import 'codemirror/lib/codemirror.css' | ||
import 'codemirror-theme-vars/base.css' | ||
import 'floating-vue/dist/style.css' | ||
import './styles/main.css' | ||
import 'uno.css' | ||
|
||
const app = createApp(App) | ||
const router = createRouter({ | ||
history: createWebHistory(import.meta.env.BASE_URL), | ||
routes, | ||
|
||
plugins.forEach((plugin) => { | ||
app.use(plugin) | ||
}) | ||
app.use(router) | ||
|
||
app.directive('tooltip', VTooltip) | ||
FloatingVue.options.instantMove = true | ||
FloatingVue.options.distance = 10 | ||
Object.entries(directives).forEach(([name, directive]) => { | ||
app.directive(name, directive) | ||
}) | ||
|
||
app.mount('#app') |
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,7 @@ | ||
{ | ||
"testFiles": "**/*.cy.{js,ts,jsx,tsx}", | ||
"componentFolder": "client", | ||
"supportFile": "cypress/support/index.ts", | ||
"pluginsFile": "cypress/plugins/index.ts", | ||
"fixturesFolder": false | ||
} |
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,15 @@ | ||
import path from 'path' | ||
import { startDevServer } from '@cypress/vite-dev-server' | ||
|
||
const plugin: Cypress.PluginConfig = (on, config) => { | ||
on('dev-server:start', options => startDevServer({ | ||
options, | ||
viteConfig: { | ||
configFile: path.resolve(__dirname, './vite.config.ts'), | ||
}, | ||
})) | ||
|
||
return config | ||
} | ||
|
||
export default plugin |
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,7 @@ | ||
import { defineConfig } from 'vite' | ||
import vueJsx from '@vitejs/plugin-vue-jsx' | ||
import { config } from '../../vite.config' | ||
|
||
config.plugins?.push(vueJsx()) | ||
|
||
export default defineConfig(config) |
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,10 @@ | ||
// import faker from '@faker-js/faker' | ||
import '../../client/global-setup' | ||
|
||
import { registerMount } from './mount' | ||
|
||
// before(() => { | ||
// faker.seed(0) | ||
// }) | ||
|
||
registerMount() |
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,31 @@ | ||
import { mount } from '@cypress/vue' | ||
import type { Component } from 'vue' | ||
import { directives, plugins } from '../../client/global-setup' | ||
|
||
export const registerMount = () => Cypress.Commands.add( | ||
'mount', | ||
// eslint-disable-next-line @typescript-eslint/no-unused-vars | ||
<C extends Parameters<typeof mount>[0]>(comp: any, options: any = {}) => { | ||
options.global = options.global || {} | ||
options.global.stubs = options.global.stubs || {} | ||
options.global.stubs.transition = false | ||
options.global.plugins = options.global.plugins || [] | ||
options.global.directives = directives | ||
plugins?.forEach((pluginFn: () => any) => { | ||
options?.global?.plugins?.push(pluginFn()) | ||
}) | ||
|
||
return mount(comp, options) | ||
}, | ||
) | ||
|
||
declare global { | ||
namespace Cypress { | ||
interface Chainable { | ||
/** | ||
* Install all vue plugins and globals then mount | ||
*/ | ||
mount<Props = any>(comp: Component<Props>, options?: unknown): Cypress.Chainable<any> | ||
} | ||
} | ||
} |
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 |
---|---|---|
@@ -1,4 +1,7 @@ | ||
{ | ||
"compilerOptions": { | ||
"jsx": "preserve" | ||
}, | ||
"extends": "../../tsconfig.json", | ||
"exclude": ["dist", "node_modules"] | ||
} |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
This C generic seems unused
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.
Yeah thanks for talking about this. I really need help learning how to best type these wrapper functions. Typescript is not my first language... 😓
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.
You should give a try of https://github.com/type-challenges/type-challenges!
In a stream, this could be fun to watch, especially with Anthony as mentor :P