-
-
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
Changes from all commits
860f8de
d9d4754
4150f74
7a60412
6c8ec2a
205e987
b78b171
d042221
bd26fe8
0f0cf9f
ea4c8a5
9e0ab89
343ca1f
c5317d8
8fb64c2
c16d457
09bdb65
8c1269f
bc8514f
c378713
9a9c9df
70b3359
91fa5da
09cf89e
939ebdb
60b136b
c8e8d61
170f15a
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
import faker from '@faker-js/faker' | ||
import DashboardEntry from './DashboardEntry.vue' | ||
|
||
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]' | ||
|
||
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') | ||
}) | ||
}) |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
/// <reference types="vite-plugin-pages/client" /> | ||
|
||
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] |
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') |
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 | ||
} |
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 |
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) |
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() |
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 = {}) => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 commentThe 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 commentThe 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! |
||
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> | ||
} | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,7 @@ | ||
{ | ||
"compilerOptions": { | ||
"jsx": "preserve" | ||
}, | ||
"extends": "../../tsconfig.json", | ||
"exclude": ["dist", "node_modules"] | ||
} |
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.
Haha, happy to see we use it! 🙌