Merge pull request #45 from atk/js-vitest

js-vitest template
2022-03-25 19:35:12 +01:00
parent a29501c437 5930402172
commit 1a6e720e2f
13 changed files with 1942 additions and 9 deletions
@@ -85,6 +85,13 @@ $ cd my-solid-project
 $ npm install # or pnpm install or yarn install
 ```
 ```bash
 # Javascript template
 $ npx degit solidjs/templates/js-vitest my-solid-project
 $ cd my-solid-project
 $ npm install # or pnpm install or yarn install
 ```
 ```bash
 # Typescript + vitest template
 $ npx degit solidjs/templates/ts-vitest my-solid-project
@@ -0,0 +1,2 @@
 node_modules
 dist
@@ -0,0 +1,38 @@
 ## Usage
 Those templates dependencies are maintained via [pnpm](https://pnpm.io) via `pnpm up -Lri`.
 This is the reason you see a `pnpm-lock.yaml`. That being said, any package manager will work. This file can be safely be removed once you clone a template.
 ```bash
 $ npm install # or pnpm install or yarn install
 ```
 ### Learn more on the [Solid Website](https://solidjs.com) and come chat with us on our [Discord](https://discord.com/invite/solidjs)
 ## Available Scripts
 In the project directory, you can run:
 ### `npm dev` or `npm start`
 Runs the app in the development mode.<br>
 Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 The page will reload if you make edits.<br>
 ### `npm run build`
 Builds the app for production to the `dist` folder.<br>
 It correctly bundles Solid in production mode and optimizes the build for the best performance.
 The build is minified and the filenames include the hashes.<br>
 Your app is ready to be deployed!
 ### `npm run test`
 Runs your test suite using vitest, solid-testing-library and jest-dom for the best possible unit testing experience.
 ## Deployment
 You can deploy the `dist` folder to any static host provider (netlify, surge, now, etc.)
@@ -0,0 +1,18 @@
 import fs from 'fs';
 import path from 'path';
 const typesPath = path.resolve('node_modules', '@types', 'testing-library__jest-dom', 'index.d.ts');
 const refMatcher = /[\r\n]+\/\/\/ <reference types="jest" \/>/;
 fs.readFile(typesPath, 'utf8', (err, data) => {
    if (err) throw err;
    fs.writeFile(
        typesPath,
        data.replace(refMatcher, ''),
        'utf8',
        function(err) {
            if (err) throw err;
        }
    );
 });
@@ -0,0 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
    <title>Solid App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script src="/src/index.jsx" type="module"></script>
  </body>
 </html>
@@ -0,0 +1,26 @@
 {
  "name": "vite-template-solid",
  "version": "0.0.0",
  "description": "",
  "type": "module",
  "scripts": {
    "start": "vite",
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "test": "vitest",
    "postinstall": "node ./fix-jest-dom.mjs"
  },
  "license": "MIT",
  "devDependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "jsdom": "^19.0.0",
    "solid-testing-library": "^0.3.0",
    "vite": "^2.8.6",
    "vite-plugin-solid": "^2.2.6",
    "vitest": "^0.6.1"
  },
  "dependencies": {
    "solid-js": "^1.3.10"
  }
 }
@@ -0,0 +1 @@
 import '@testing-library/jest-dom';
@@ -0,0 +1,5 @@
 import { render } from 'solid-js/web';
 import { TodoList } from './todo-list';
 render(() => <TodoList />, document.getElementById('root'));
@@ -0,0 +1,55 @@
 import { For, createSignal } from 'solid-js';
 export const TodoList = () => {
  let input;
  let todoId = 0;
  const [todos, setTodos] = createSignal([]);
  const addTodo = (text) => {
    setTodos([...todos(), { id: ++todoId, text, completed: false }]);
  };
  const toggleTodo = (id) => {
    setTodos(
      todos().map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo,
      ),
    );
  };
  return (
    <>
      <div>
        <input placeholder="new todo here" ref={input} />
        <button
          onClick={() => {
            if (!input.value.trim()) return;
            addTodo(input.value);
            input.value = '';
          }}
        >
          Add Todo
        </button>
      </div>
      <For each={todos()}>
        {(todo) => {
          const { id, text } = todo;
          return (
            <div>
              <input
                type="checkbox"
                checked={todo.completed}
                onchange={[toggleTodo, id]}
              />
              <span
                style={{
                  'text-decoration': todo.completed ? 'line-through' : 'none',
                }}
              >
                {text}
              </span>
            </div>
          );
        }}
      </For>
    </>
  );
 };
@@ -0,0 +1,46 @@
 import { describe, expect, test } from 'vitest';
 import { render, fireEvent } from 'solid-testing-library';
 import { TodoList } from './todo-list';
 describe('<TodoList />', () => {
  test('it will render an text input and a button', () => {
    const { getByPlaceholderText, getByText, unmount } = render(() => (
      <TodoList />
    ));
    expect(getByPlaceholderText('new todo here')).toBeInTheDocument();
    expect(getByText('Add Todo')).toBeInTheDocument();
    unmount();
  });
  test('it will add a new todo', async () => {
    const { getByPlaceholderText, getByText, unmount } = render(() => (
      <TodoList />
    ));
    const input = getByPlaceholderText('new todo here');
    const button = getByText('Add Todo');
    input.value = 'test new todo';
    fireEvent.click(button);
    expect(input.value).toBe('');
    expect(getByText(/test new todo/)).toBeInTheDocument();
    unmount();
  });
  test('it will mark a todo as completed', async () => {
    const { getByPlaceholderText, findByRole, getByText, unmount } = render(
      () => <TodoList />,
    );
    const input = getByPlaceholderText('new todo here');
    const button = getByText('Add Todo');
    input.value = 'mark new todo as completed';
    fireEvent.click(button);
    const completed = await findByRole('checkbox');
    expect(completed?.checked).toBe(false);
    fireEvent.click(completed);
    expect(completed?.checked).toBe(true);
    const text = getByText('mark new todo as completed');
    expect(text).toHaveStyle({ 'text-decoration': 'line-through' });
    unmount();
  });
 });
@@ -0,0 +1,30 @@
 import { defineConfig } from 'vite';
 import solidPlugin from 'vite-plugin-solid';
 export default defineConfig({
  test: {
    globals: true,
    environment: 'jsdom',
    transformMode: {
      web: [/\.jsx?$/],
    },
    setupFiles: './setupVitest.js',
    // solid needs to be inline to work around
    // a resolution issue in vitest:
    deps: {
      inline: [/solid-js/],
    },
    // if you have few tests, try commenting one
    // or both out to improve performance:
    // threads: false,
    // isolate: false,
  },
  plugins: [solidPlugin()],
  build: {
    target: 'esnext',
    polyfillDynamicImport: false,
  },
  resolve: {
    conditions: ['development', 'browser'],
  },
 });
@@ -2,17 +2,17 @@ import fs from 'fs';
 import path from 'path';
 const typesPath = path.resolve('node_modules', '@types', 'testing-library__jest-dom', 'index.d.ts');
 const refMatcher = /[\r\n]+\/\/\/ <reference types="jest" \/>/;
 fs.readFile(typesPath, 'utf8', (err, data) => {
    if (err) throw err;
-    let lines = data.split('\n');
+    fs.writeFile(
-
+        typesPath,
-    if (lines[8] === '/// <reference types="jest" />') {
+        data.replace(refMatcher, ''),
-        lines = lines.slice(0, 8).concat(lines.slice(9));
+        'utf8',
-    }
+        function(err) {
-
+            if (err) throw err;
-    fs.writeFile(typesPath, lines.join('\n'), 'utf8', function(err) {
+        }
-        if (err) throw err;
+    );
    });
 });