Skip to content

Commit eac7776

Browse files
DylanPierceyDylanPiercey
authored
feat: add Marko example and include code coverage for Marko files (#4263)
1 parent 5a741ca commit eac7776

File tree

15 files changed

+523
-1248
lines changed

15 files changed

+523
-1248
lines changed

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ Next generation testing framework powered by Vite.
3838
- [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/).
3939
- [Tinyspy](https://github.com/tinylibs/tinyspy) built-in for mocking, stubbing, and spies.
4040
- [JSDOM](https://github.com/jsdom/jsdom) and [happy-dom](https://github.com/capricorn86/happy-dom) for DOM and browser API mocking
41-
- Components testing ([Vue](./examples/vue), [React](./examples/react), [Svelte](./examples/svelte), [Lit](./examples/lit), [Vitesse](./examples/vitesse))
41+
- Components testing ([Vue](./examples/vue), [React](./examples/react), [Svelte](./examples/svelte), [Lit](./examples/lit), [Vitesse](./examples/vitesse), [Marko](./examples/marko))
4242
- Workers multi-threading via [Tinypool](https://github.com/tinylibs/tinypool) (a lightweight fork of [Piscina](https://github.com/piscinajs/piscina))
4343
- Benchmarking support with [Tinybench](https://github.com/tinylibs/tinybench)
4444
- [Workspace](https://vitest.dev/guide/workspace) support

‎docs/.vitepress/components/FeaturesList.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<ListItem><a target="_blank" href="https://vitejs.dev" rel="noopener noreferrer">Vite</a>'s config, transformers, resolvers, and plugins.</ListItem>
88
<ListItem>Use the same setup from your app to run the tests!</ListItem>
99
<ListItem><a target="_blank" href="https://twitter.com/antfu7/status/1468233216939245579" rel="noopener noreferrer">Smart & instant watch mode, like HMR for tests!</a></ListItem>
10-
<ListItem>Component testing for Vue, React, Svelte, Lit and more</ListItem>
10+
<ListItem>Component testing for Vue, React, Svelte, Lit, Marko and more</ListItem>
1111
<ListItem>Out-of-the-box TypeScript / JSX support</ListItem>
1212
<ListItem>ESM first, top level await</ListItem>
1313
<ListItem>Workers multi-threading via <a target="_blank" href="https://github.com/tinylibs/tinypool" rel="noopener noreferrer">Tinypool</a></ListItem>

‎docs/.vitepress/config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ export default withPwa(defineConfig({
3737
['link', { rel: 'icon', href: '/favicon.ico', sizes: 'any' }],
3838
['link', { rel: 'icon', href: '/logo.svg', type: 'image/svg+xml' }],
3939
['meta', { name: 'author', content: `${teamMembers.map(c => c.name).join(', ')} and ${vitestName} contributors` }],
40-
['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' }],
40+
['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' }],
4141
['meta', { property: 'og:title', content: vitestName }],
4242
['meta', { property: 'og:description', content: vitestDescription }],
4343
['meta', { property: 'og:url', content: ogUrl }],

‎docs/config/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1007,7 +1007,7 @@ List of files included in coverage as glob patterns
10071007
#### coverage.extension
10081008

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

‎examples/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
| `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__/) |
2121
| `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__/) |
2222
| `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__/) |
23+
| `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__/) |
2324
| `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__/) |
2425
| `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__/) |
2526
| `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__/) |

‎examples/marko/components/Hello.marko‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
export interface Input {
2+
count: number;
3+
}
4+
5+
class {
6+
declare state: { times: number };
7+
onCreate() {
8+
this.state = { times: 2 };
9+
}
10+
}
11+
12+
$ const { count } = input;
13+
$ const { times } = state;
14+
$ const result = count * times;
15+
16+
<div>${count} x ${times} = ${result}</div>
17+
<button onClick(() => component.state.times++)>x1</button>

‎examples/marko/package.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "@vitest/example-marko",
3+
"type": "module",
4+
"private": true,
5+
"scripts": {
6+
"test": "vitest",
7+
"test:ui": "vitest --ui",
8+
"coverage": "vitest run --coverage"
9+
},
10+
"devDependencies": {
11+
"@marko/compiler": "latest",
12+
"@marko/testing-library": "latest",
13+
"@marko/vite": "latest",
14+
"@vitest/ui": "latest",
15+
"jsdom": "latest",
16+
"marko": "latest",
17+
"vite": "latest",
18+
"vitest": "latest"
19+
},
20+
"stackblitz": {
21+
"startCommand": "npm run test:ui"
22+
}
23+
}

‎examples/marko/test/__snapshots__/basic.test.ts.snap‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2+
3+
exports[`mount component 1`] = `"<div>4 x 2 = 8</div><button>x1</button>"`;

‎examples/marko/test/__snapshots__/hello.test.ts.snap‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2+
3+
exports[`Hello.marko > mounts 1`] = `"<div>4 x 2 = 8</div><button>x1</button>"`;

‎examples/marko/test/basic.test.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import Hello from '../components/Hello.marko'
2+
3+
let host: HTMLElement
4+
5+
afterEach(() => {
6+
host.remove()
7+
})
8+
9+
test('mount component', async () => {
10+
host = document.createElement('div')
11+
host.setAttribute('id', 'host')
12+
document.body.appendChild(host)
13+
const instance = Hello
14+
.renderSync({ count: 4 })
15+
.appendTo(host)
16+
.getComponent()
17+
expect(instance).toBeTruthy()
18+
expect(host.innerHTML).toContain('4 x 2 = 8')
19+
expect(host.innerHTML).toMatchSnapshot()
20+
const btn = host.getElementsByTagName('button')[0]
21+
btn.click() // or btn.dispatchEvent(new window.Event('click', { bubbles: true }))
22+
await tick()
23+
expect(host.innerHTML).toContain('4 x 3 = 12')
24+
btn.click()
25+
await tick()
26+
expect(host.innerHTML).toContain('4 x 4 = 16')
27+
})
28+
29+
async function tick() {
30+
await new Promise(resolve => setTimeout(resolve))
31+
}

0 commit comments

Comments
 (0)