Skip to content

Commit

Permalink
feat: add Marko example and include code coverage for Marko files (vi…
Browse files Browse the repository at this point in the history
  • Loading branch information
DylanPiercey authored and LorenzoBloedow committed Dec 19, 2023
1 parent 62ddcd4 commit 837a844
Show file tree
Hide file tree
Showing 15 changed files with 523 additions and 1,248 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ Next generation testing framework powered by Vite.
- [Native code coverage](https://vitest.dev/guide/features.html#coverage) via [`v8`](https://v8.dev/blog/javascript-code-coverage) or [`istanbul`](https://istanbul.js.org/).
- [Tinyspy](https://github.com/tinylibs/tinyspy) built-in for mocking, stubbing, and spies.
- [JSDOM](https://github.com/jsdom/jsdom) and [happy-dom](https://github.com/capricorn86/happy-dom) for DOM and browser API mocking
- Components testing ([Vue](./examples/vue), [React](./examples/react), [Svelte](./examples/svelte), [Lit](./examples/lit), [Vitesse](./examples/vitesse))
- Components testing ([Vue](./examples/vue), [React](./examples/react), [Svelte](./examples/svelte), [Lit](./examples/lit), [Vitesse](./examples/vitesse), [Marko](./examples/marko))
- Workers multi-threading via [Tinypool](https://github.com/tinylibs/tinypool) (a lightweight fork of [Piscina](https://github.com/piscinajs/piscina))
- Benchmarking support with [Tinybench](https://github.com/tinylibs/tinybench)
- [Workspace](https://vitest.dev/guide/workspace) support
Expand Down
2 changes: 1 addition & 1 deletion docs/.vitepress/components/FeaturesList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<ListItem><a target="_blank" href="https://vitejs.dev" rel="noopener noreferrer">Vite</a>'s config, transformers, resolvers, and plugins.</ListItem>
<ListItem>Use the same setup from your app to run the tests!</ListItem>
<ListItem><a target="_blank" href="https://twitter.com/antfu7/status/1468233216939245579" rel="noopener noreferrer">Smart & instant watch mode, like HMR for tests!</a></ListItem>
<ListItem>Component testing for Vue, React, Svelte, Lit and more</ListItem>
<ListItem>Component testing for Vue, React, Svelte, Lit, Marko and more</ListItem>
<ListItem>Out-of-the-box TypeScript / JSX support</ListItem>
<ListItem>ESM first, top level await</ListItem>
<ListItem>Workers multi-threading via <a target="_blank" href="https://github.com/tinylibs/tinypool" rel="noopener noreferrer">Tinypool</a></ListItem>
Expand Down
2 changes: 1 addition & 1 deletion docs/.vitepress/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export default withPwa(defineConfig({
['link', { rel: 'icon', href: '/favicon.ico', sizes: 'any' }],
['link', { rel: 'icon', href: '/logo.svg', type: 'image/svg+xml' }],
['meta', { name: 'author', content: `${teamMembers.map(c => c.name).join(', ')} and ${vitestName} contributors` }],
['meta', { name: 'keywords', content: 'vitest, vite, test, coverage, snapshot, react, vue, preact, svelte, solid, lit, ruby, cypress, puppeteer, jsdom, happy-dom, test-runner, jest, typescript, esm, tinypool, tinyspy, node' }],
['meta', { name: 'keywords', content: 'vitest, vite, test, coverage, snapshot, react, vue, preact, svelte, solid, lit, marko, ruby, cypress, puppeteer, jsdom, happy-dom, test-runner, jest, typescript, esm, tinypool, tinyspy, node' }],
['meta', { property: 'og:title', content: vitestName }],
['meta', { property: 'og:description', content: vitestDescription }],
['meta', { property: 'og:url', content: ogUrl }],
Expand Down
2 changes: 1 addition & 1 deletion docs/config/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -1007,7 +1007,7 @@ List of files included in coverage as glob patterns
#### coverage.extension

- **Type:** `string | string[]`
- **Default:** `['.js', '.cjs', '.mjs', '.ts', '.mts', '.cts', '.tsx', '.jsx', '.vue', '.svelte']`
- **Default:** `['.js', '.cjs', '.mjs', '.ts', '.mts', '.cts', '.tsx', '.jsx', '.vue', '.svelte', '.marko']`
- **Available for providers:** `'v8' | 'istanbul'`
- **CLI:** `--coverage.extension=<extension>`, `--coverage.extension=<extension1> --coverage.extension=<extension2>`

Expand Down
1 change: 1 addition & 0 deletions examples/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
| `solid` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/solid) | [Play Online](https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/solid?initialPath=__vitest__/) |
| `svelte` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/svelte) | [Play Online](https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/svelte?initialPath=__vitest__/) |
| `sveltekit` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/sveltekit) | [Play Online](https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/sveltekit?initialPath=__vitest__/) |
| `marko` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/marko) | [Play Online](https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/marko?initialPath=__vitest__/) |
| `vitesse` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/vitesse) | [Play Online](https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/vitesse?initialPath=__vitest__/) |
| `vue-jsx` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/vue-jsx) | [Play Online](https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/vue-jsx?initialPath=__vitest__/) |
| `vue` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/vue) | [Play Online](https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/vue?initialPath=__vitest__/) |
Expand Down
17 changes: 17 additions & 0 deletions examples/marko/components/Hello.marko
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
export interface Input {
count: number;
}

class {
declare state: { times: number };
onCreate() {
this.state = { times: 2 };
}
}

$ const { count } = input;
$ const { times } = state;
$ const result = count * times;

<div>${count} x ${times} = ${result}</div>
<button onClick(() => component.state.times++)>x1</button>
23 changes: 23 additions & 0 deletions examples/marko/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
{
"name": "@vitest/example-marko",
"type": "module",
"private": true,
"scripts": {
"test": "vitest",
"test:ui": "vitest --ui",
"coverage": "vitest run --coverage"
},
"devDependencies": {
"@marko/compiler": "latest",
"@marko/testing-library": "latest",
"@marko/vite": "latest",
"@vitest/ui": "latest",
"jsdom": "latest",
"marko": "latest",
"vite": "latest",
"vitest": "latest"
},
"stackblitz": {
"startCommand": "npm run test:ui"
}
}
3 changes: 3 additions & 0 deletions examples/marko/test/__snapshots__/basic.test.ts.snap
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`mount component 1`] = `"<div>4 x 2 = 8</div><button>x1</button>"`;
3 changes: 3 additions & 0 deletions examples/marko/test/__snapshots__/hello.test.ts.snap
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html

exports[`Hello.marko > mounts 1`] = `"<div>4 x 2 = 8</div><button>x1</button>"`;
31 changes: 31 additions & 0 deletions examples/marko/test/basic.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import Hello from '../components/Hello.marko'

let host: HTMLElement

afterEach(() => {
host.remove()
})

test('mount component', async () => {
host = document.createElement('div')
host.setAttribute('id', 'host')
document.body.appendChild(host)
const instance = Hello
.renderSync({ count: 4 })
.appendTo(host)
.getComponent()
expect(instance).toBeTruthy()
expect(host.innerHTML).toContain('4 x 2 = 8')
expect(host.innerHTML).toMatchSnapshot()
const btn = host.getElementsByTagName('button')[0]
btn.click() // or btn.dispatchEvent(new window.Event('click', { bubbles: true }))
await tick()
expect(host.innerHTML).toContain('4 x 3 = 12')
btn.click()
await tick()
expect(host.innerHTML).toContain('4 x 4 = 16')
})

async function tick() {
await new Promise(resolve => setTimeout(resolve))
}
21 changes: 21 additions & 0 deletions examples/marko/test/hello.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
import { fireEvent, render, screen } from '@marko/testing-library'
import Hello from '../components/Hello.marko'

describe('Hello.marko', () => {
it('mounts', async () => {
const { container } = await render(Hello, { count: 4 })
expect(container).toBeTruthy()
expect(container.innerHTML).toContain('4 x 2 = 8')
expect(container.innerHTML).toMatchSnapshot()
})

it('updates on button click', async () => {
await render(Hello, { count: 4 })
const btn = screen.getByRole('button')
const div = screen.getByText('4 x 2 = 8')
await fireEvent.click(btn)
expect(div.innerHTML).toBe('4 x 3 = 12')
await fireEvent.click(btn)
expect(div.innerHTML).toBe('4 x 4 = 16')
})
})
12 changes: 12 additions & 0 deletions examples/marko/vitest.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { defineConfig } from 'vite'
import marko from '@marko/vite'

export default defineConfig({
plugins: [
marko(),
],
test: {
globals: true,
environment: 'jsdom',
},
})
2 changes: 1 addition & 1 deletion packages/vitest/src/defaults.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export const coverageConfigDefaults: ResolvedCoverageOptions = {
exclude: defaultCoverageExcludes,
reportOnFailure: false,
reporter: [['text', {}], ['html', {}], ['clover', {}], ['json', {}]],
extension: ['.js', '.cjs', '.mjs', '.ts', '.mts', '.cts', '.tsx', '.jsx', '.vue', '.svelte'],
extension: ['.js', '.cjs', '.mjs', '.ts', '.mts', '.cts', '.tsx', '.jsx', '.vue', '.svelte', '.marko'],
allowExternal: false,
}

Expand Down
2 changes: 1 addition & 1 deletion packages/vitest/src/types/coverage.ts
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ export interface BaseCoverageOptions {
/**
* Extensions for files to be included in coverage
*
* @default ['.js', '.cjs', '.mjs', '.ts', '.tsx', '.jsx', '.vue', '.svelte']
* @default ['.js', '.cjs', '.mjs', '.ts', '.tsx', '.jsx', '.vue', '.svelte', '.marko']
*/
extension?: string | string[]

Expand Down
Loading

0 comments on commit 837a844

Please sign in to comment.