Merge pull request #40 from atk/ts-vitest

ts-vitest starter template
2022-03-11 15:37:45 +01:00
parent af5706903a ded9af3dfb
commit a243007388
11 changed files with 1895 additions and 0 deletions
@@ -85,6 +85,13 @@ $ 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
 $ cd my-solid-project
 $ npm install # or pnpm install or yarn install
 ```
 ```bash
 # Typescript + uvu template
 $ npx degit solidjs/templates/ts-uvu my-solid-project
@@ -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');
 fs.readFile(typesPath, 'utf8', (err, data) => {
    if (err) throw err;
    let lines = data.split('\n');
    if (lines[8] === '/// <reference types="jest" />') {
        lines = lines.slice(0, 8).concat(lines.slice(9));
    }
    fs.writeFile(typesPath, lines.join('\n'), '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.tsx" type="module"></script>
  </body>
 </html>
@@ -0,0 +1,27 @@
 {
  "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",
    "typescript": "^4.6.2",
    "vite": "^2.8.6",
    "vite-plugin-solid": "^2.2.6",
    "vitest": "^0.5.9"
  },
  "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,40 @@
 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') as HTMLInputElement;
    const button = getByText('Add Todo');
    input.value = 'test new todo';
    fireEvent.click(button as HTMLInputElement);
    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') as HTMLInputElement;
    const button = getByText('Add Todo') as HTMLButtonElement;
    input.value = 'mark new todo as completed';
    fireEvent.click(button);
    const completed = await findByRole('checkbox') as HTMLInputElement;
    expect(completed?.checked).toBe(false);
    fireEvent.click(completed);
    expect(completed?.checked).toBe(true);
    const text = getByText('mark new todo as completed') as HTMLSpanElement;
    expect(text).toHaveStyle({ 'text-decoration': 'line-through' });
    unmount();
  });
 });
@@ -0,0 +1,49 @@
 import { For, createSignal } from 'solid-js';
 type Todo = { id: number, text: string, completed: boolean };
 export const TodoList = () => {
  let input!: HTMLInputElement;
  let todoId = 0;
  const [todos, setTodos] = createSignal<Todo[]>([])
  const addTodo = (text: string) => {
    setTodos([...todos(), { id: ++todoId, text, completed: false }]);
  }
  const toggleTodo = (id: number) => {
    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,13 @@
 {
  "compilerOptions": {
    "strict": true,
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
    "types": ["vite/client"]
  }
 }
@@ -0,0 +1,33 @@
 /// <reference types="vitest" />
 /// <reference types="vite/client" />
 import { defineConfig } from 'vite';
 import solidPlugin from 'vite-plugin-solid';
 export default defineConfig({
  plugins: [solidPlugin()],
  test: {
    environment: 'jsdom',
    globals: true,
    transformMode: {
      web: [/\.[jt]sx?$/],
    },
    setupFiles: './setupVitest.ts',
    // 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,
  },
  build: {
    target: 'esnext',
    polyfillDynamicImport: false,
  },
  resolve: {
    conditions: ['development', 'browser'],
  }
 });