refactor: remove old and outdated examples (#5611)

Author: sheremet-va

examples/README.md

@@ -2,26 +2,11 @@
 |---|---|---|
 | `basic` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/basic) | [Play Online](https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/basic?initialPath=__vitest__/) |
 | `fastify` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/fastify) | [Play Online](https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/fastify?initialPath=__vitest__/) |
-| `graphql` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/graphql) | [Play Online](https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/graphql?initialPath=__vitest__/) |
-| `image-snapshot` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/image-snapshot) | [Play Online](https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/image-snapshot?initialPath=__vitest__/) |
 | `lit` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/lit) | [Play Online](https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/lit?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__/) |
-| `mocks` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/mocks) | [Play Online](https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/mocks?initialPath=__vitest__/) |
-| `nestjs` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/nestjs) | [Play Online](https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/nestjs?initialPath=__vitest__/) |
-| `nextjs` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/nextjs) | [Play Online](https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/nextjs?initialPath=__vitest__/) |
-| `playwright` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/playwright) | |
-| `preact-testing-lib` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/preact-testing-lib) | [Play Online](https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/preact-testing-lib?initialPath=__vitest__/) |
-| `react-mui` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/react-mui) | [Play Online](https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/react-mui?initialPath=__vitest__/) |
-| `react-storybook` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/react-storybook) | [Play Online](https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/react-storybook?initialPath=__vitest__/) |
-| `react-testing-lib-msw` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/react-testing-lib-msw) | [Play Online](https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/react-testing-lib-msw?initialPath=__vitest__/) |
-| `react-testing-lib` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/react-testing-lib) | [Play Online](https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/react-testing-lib?initialPath=__vitest__/) |
+| `preact` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/preact) | [Play Online](https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/preact?initialPath=__vitest__/) |
 | `react` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/react) | [Play Online](https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/react?initialPath=__vitest__/) |
-| `ruby` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/ruby) | [Play Online](https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/ruby?initialPath=__vitest__/) |
 | `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__/) |
 | `typecheck` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/typecheck) | [Play Online](https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/typecheck?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__/) |
 | `workspace` | [GitHub](https://github.com/vitest-dev/vitest/tree/main/examples/workspace) | [Play Online](https://stackblitz.com/fork/github/vitest-dev/vitest/tree/main/examples/workspace?initialPath=__vitest__/) |

examples/fastify/package.json

@@ -12,10 +12,9 @@
   },
   "devDependencies": {
     "@vitest/ui": "latest",
-    "axios": "^0.26.1",
-    "fastify": "4.5.3",
-    "supertest": "6.2.4",
-    "tsx": "^3.9.0",
+    "fastify": "^4.26.2",
+    "supertest": "^6.3.4",
+    "tsx": "^4.7.2",
     "vite": "latest",
     "vitest": "latest"
   },

examples/fastify/test/app.test.ts

@@ -1,6 +1,5 @@
 import { afterAll, expect, test } from 'vitest'
 import supertest from 'supertest'
-import axios from 'axios'
 
 import app from '../src/app'
 import { usersData } from '../mockData'
@@ -34,10 +33,10 @@ test('with axios', async () => {
   const address = app.server.address()
   const port = typeof address === 'string' ? address : address?.port
 
-  const response = await axios.get(`http://localhost:${port}/users`)
+  const response = await fetch(`http://localhost:${port}/users`).then(r => r.json())
 
-  expect(response.data).toHaveLength(4)
-  expect(response.data).toStrictEqual(usersData)
+  expect(response).toHaveLength(4)
+  expect(response).toStrictEqual(usersData)
 })
 
 afterAll(async () => {

examples/graphql/package.json

@@ -5,6 +5,8 @@ import { defineConfig } from 'vite'
 // https://vitejs.dev/config/
 export default defineConfig({
   test: {
+    // Lit recommends using browser environment for testing
+    // https://lit.dev/docs/tools/testing/#testing-in-the-browser
     browser: {
       enabled: true,
       name: 'chrome',

examples/graphql/src/Fragment.gql

@@ -8,12 +8,12 @@
     "coverage": "vitest run --coverage"
   },
   "devDependencies": {
-    "@marko/compiler": "latest",
-    "@marko/testing-library": "latest",
-    "@marko/vite": "latest",
+    "@marko/compiler": "^5.36.1",
+    "@marko/testing-library": "^6.2.0",
+    "@marko/vite": "^4.1.10",
     "@vitest/ui": "latest",
-    "jsdom": "latest",
-    "marko": "latest",
+    "jsdom": "^24.0.0",
+    "marko": "^5.34.2",
     "vite": "latest",
     "vitest": "latest"
   },

examples/graphql/src/Query.gql

@@ -1,3 +1,20 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`mount component 1`] = `"<div>4 x 2 = 8</div><button>x1</button>"`;
+exports[`mount component 1`] = `
+<div
+  id="host"
+>
+  
+  <div>
+    4
+     x 
+    2
+     = 
+    8
+  </div>
+  <button>
+    x1
+  </button>
+  
+</div>
+`;

examples/graphql/src/query.ts

@@ -1,3 +1,11 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Hello.marko > mounts 1`] = `"<div>4 x 2 = 8</div><button>x1</button>"`;
+exports[`Hello.marko > mounts 1`] = `
+<div>
+  4
+   x 
+  2
+   = 
+  8
+</div>
+`;

examples/graphql/test/query.spec.ts

@@ -1,3 +1,4 @@
+import { afterEach, expect, test } from 'vitest'
 import Hello from '../components/Hello.marko'
 
 let host: HTMLElement
@@ -16,7 +17,7 @@ test('mount component', async () => {
     .getComponent()
   expect(instance).toBeTruthy()
   expect(host.innerHTML).toContain('4 x 2 = 8')
-  expect(host.innerHTML).toMatchSnapshot()
+  expect(host).toMatchSnapshot()
   const btn = host.getElementsByTagName('button')[0]
   btn.click() // or btn.dispatchEvent(new window.Event('click', { bubbles: true }))
   await tick()

examples/graphql/vite.config.ts

@@ -1,12 +1,13 @@
 import { fireEvent, render, screen } from '@marko/testing-library'
+import { describe, expect, it } from 'vitest'
 import Hello from '../components/Hello.marko'
 
 describe('Hello.marko', () => {
   it('mounts', async () => {
-    const { container } = await render(Hello, { count: 4 })
+    await render(Hello, { count: 4 })
+    const container = screen.getByText('4 x 2 = 8')
     expect(container).toBeTruthy()
-    expect(container.innerHTML).toContain('4 x 2 = 8')
-    expect(container.innerHTML).toMatchSnapshot()
+    expect(container).toMatchSnapshot()
   })
 
   it('updates on button click', async () => {

examples/image-snapshot/README.md

@@ -1,3 +1,5 @@
+/// <reference types="vitest" />
+
 import { defineConfig } from 'vite'
 import marko from '@marko/vite'
 
@@ -6,7 +8,7 @@ export default defineConfig({
     marko(),
   ],
   test: {
-    globals: true,
     environment: 'jsdom',
+    setupFiles: ['./vitest.setup.ts'],
   },
 })

examples/image-snapshot/package.json

@@ -0,0 +1,6 @@
+import { cleanup } from '@marko/testing-library'
+import { afterEach } from 'vitest'
+
+afterEach(() => {
+  cleanup()
+})