talksik/solidjs-templates
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update vitest templates

Browse Source
This commit is contained in:
Alex Lohr
2022-11-21 21:31:03 +01:00
parent 8671428a75
commit 28ebc31924
13 changed files with 1064 additions and 1279 deletions
Download Patch File Download Diff File Expand all files Collapse all files
js-vitest/package.json
+6 -6
View File
@@ -13,13 +13,13 @@
"license": "MIT",
"devDependencies": {
"@testing-library/jest-dom": "^5.16.5",
"jsdom": "^20.0.0",
"solid-testing-library": "^0.3.0",
"vite": "^3.0.9",
"vite-plugin-solid": "^2.3.0",
"vitest": "^0.22.1"
"jsdom": "^20.0.3",
"@solidjs/testing-library": "^0.5.1",
"vite": "^3.2.4",
"vite-plugin-solid": "^2.4.0",
"vitest": "^0.25.2"
},
"dependencies": {
"solid-js": "^1.5.1"
"solid-js": "^1.6.2"
}
}
js-vitest/pnpm-lock.yaml
Generated
+503 -604
View File
File diff suppressed because it is too large Load Diff
js-vitest/setupVitest.js
-1
View File
@@ -1 +0,0 @@
import '@testing-library/jest-dom';
js-vitest/src/todo-list.jsx
+6 -10
View File
@@ -1,18 +1,14 @@
import { For, createSignal } from 'solid-js';
import { For } from 'solid-js';
import { createStore } from 'solid-js/store';
export const TodoList = () => {
let input;
let todoId = 0;
const [todos, setTodos] = createSignal([]);
const [todos, setTodos] = createStore([]);
const addTodo = (text) => {
setTodos([...todos(), { id: ++todoId, text, completed: false }]);
setTodos(todos.length, { id: todos.length, text, completed: false });
};
const toggleTodo = (id) => {
setTodos(
todos().map((todo) =>
todo.id === id ? { ...todo, completed: !todo.completed } : todo,
),
);
setTodos(id, 'completed', (c) => !c);
};
return (
@@ -29,7 +25,7 @@ export const TodoList = () => {
Add Todo
</button>
</div>
<For each={todos()}>
<For each={todos}>
{(todo) => {
const { id, text } = todo;
return (
js-vitest/src/todo-list.test.jsx
+6 -15
View File
@@ -1,36 +1,28 @@
import { describe, expect, test } from 'vitest';
import { render, fireEvent } from 'solid-testing-library';
import { render, fireEvent } from '@solidjs/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 />
));
const { getByPlaceholderText, getByText } = 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 { getByPlaceholderText, getByText } = 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 { getByPlaceholderText, findByRole, getByText } = render(() => (
<TodoList />
));
const input = getByPlaceholderText('new todo here');
const button = getByText('Add Todo');
input.value = 'mark new todo as completed';
@@ -41,6 +33,5 @@ describe('<TodoList />', () => {
expect(completed?.checked).toBe(true);
const text = getByText('mark new todo as completed');
expect(text).toHaveStyle({ 'text-decoration': 'line-through' });
unmount();
});
});
js-vitest/vite.config.js
+3 -1
View File
@@ -8,7 +8,9 @@ export default defineConfig({
transformMode: {
web: [/\.jsx?$/],
},
setupFiles: './setupVitest.js',
setupFiles: ['node_modules/@testing-library/jest-dom/extend-expect.js'],
// otherwise, solid would be loaded twice:
deps: { registerNodeLoader: true },
// if you have few tests, try commenting one
// or both out to improve performance:
// threads: false,
ts-vitest/package.json
+8 -8
View File
@@ -12,16 +12,16 @@
},
"license": "MIT",
"devDependencies": {
"@types/testing-library__jest-dom": "^5.14.3",
"@testing-library/jest-dom": "^5.16.5",
"jsdom": "^20.0.0",
"solid-testing-library": "^0.3.0",
"typescript": "^4.8.2",
"vite": "^3.0.9",
"vite-plugin-solid": "^2.3.0",
"vitest": "^0.22.1"
"@types/testing-library__jest-dom": "^5.14.5",
"jsdom": "^20.0.3",
"@solidjs/testing-library": "^0.5.1",
"typescript": "^4.9.3",
"vite": "^3.2.4",
"vite-plugin-solid": "^2.4.0",
"vitest": "^0.25.2"
},
"dependencies": {
"solid-js": "^1.5.1"
"solid-js": "^1.6.2"
}
}
ts-vitest/pnpm-lock.yaml
Generated
+491 -593
View File
File diff suppressed because it is too large Load Diff
ts-vitest/setupVitest.ts
-1
View File
@@ -1 +0,0 @@
import '@testing-library/jest-dom';
ts-vitest/src/todo-list.test.tsx
+7 -10
View File
@@ -1,40 +1,37 @@
import { describe, expect, test } from 'vitest';
import { render, fireEvent } from 'solid-testing-library';
import { render, fireEvent } from '@solidjs/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 />);
const { getByPlaceholderText, getByText } = 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 { getByPlaceholderText, getByText } = 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 { getByPlaceholderText, findByRole, getByText } = 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;
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();
});
});
ts-vitest/src/todo-list.tsx
+27 -23
View File
@@ -1,19 +1,17 @@
import { For, createSignal } from 'solid-js';
import { For } from 'solid-js';
import { createStore } from 'solid-js/store';
type Todo = { id: number, text: string, completed: boolean };
type Todo = { id: number; text: string; completed: boolean };
export const TodoList = () => {
let input!: HTMLInputElement;
let todoId = 0;
const [todos, setTodos] = createSignal<Todo[]>([])
const [todos, setTodos] = createStore<Todo[]>([]);
const addTodo = (text: string) => {
setTodos([...todos(), { id: ++todoId, text, completed: false }]);
}
setTodos(todos.length, { id: todos.length, text, completed: false });
};
const toggleTodo = (id: number) => {
setTodos(todos().map(todo =>
todo.id === id ? { ...todo, completed: !todo.completed } : todo)
);
}
setTodos(id, 'completed', (c) => !c);
};
return (
<>
@@ -23,27 +21,33 @@ export const TodoList = () => {
onClick={() => {
if (!input.value.trim()) return;
addTodo(input.value);
input.value = "";
input.value = '';
}}
>
Add Todo
</button>
</div>
<For each={todos()}>
<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>
return (
<div>
<input
type="checkbox"
checked={todo.completed}
onchange={[toggleTodo, id]}
/>
<span
style={{
'text-decoration': todo.completed ? 'line-through' : 'none',
}}
>
{text}
</span>
</div>
);
}}
</For>
</>
);
}
};
ts-vitest/tsconfig.json
+1 -1
View File
@@ -8,6 +8,6 @@
"esModuleInterop": true,
"jsx": "preserve",
"jsxImportSource": "solid-js",
"types": ["vite/client"]
"types": ["vite/client", "@testing-library/jest-dom"]
}
}
ts-vitest/vite.config.ts
+4 -4
View File
@@ -12,10 +12,10 @@ export default defineConfig({
test: {
environment: 'jsdom',
globals: true,
transformMode: {
web: [/\.[jt]sx?$/],
},
setupFiles: './setupVitest.ts',
transformMode: { web: [/\.[jt]sx?$/] },
setupFiles: ['node_modules/@testing-library/jest-dom/extend-expect.js'],
// otherwise, solid would be loaded twice:
deps: { registerNodeLoader: true },
// if you have few tests, try commenting one
// or both out to improve performance:
threads: false,