cerchez07/introduction-to-testing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add another example

Browse Source
This commit is contained in:
Steve Kinney
2024-10-01 19:36:39 -05:00
parent 867bc939ae
commit 5710f74461
5 changed files with 58 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
examples/element-factory/src/alert-button.jsx Normal file
View File

@@ -0,0 +1,20 @@
import { useState } from 'react';
export const AlertButton = ({}) => {
const [message, setMessage] = useState('Alert!');
return (
<div>
<label>
Message
<input
type="text"
value={message}
onChange={(event) => setMessage(event.target.value)}
/>
</label>
<button onClick={() => alert(message)}>Trigger Alert</button>
</div>
);
};

34
examples/element-factory/src/alert-button.test.jsx Normal file
View File

@@ -0,0 +1,34 @@
import { render, screen, act } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { AlertButton } from './alert-button';
describe('AlertButton', () => {
beforeEach(() => {
vi.spyOn(window, 'alert').mockImplementation(() => {});
render(<AlertButton />);
});
afterEach(() => {
vi.restoreAllMocks();
});
it('should render an alert button', async () => {
const button = screen.getByRole('button', { name: /trigger alert/i });
expect(button).toBeInTheDocument();
});
it('should trigger an alert', async () => {
const button = screen.getByRole('button', { name: /trigger alert/i });
const messageInput = screen.getByLabelText(/message/i);
await act(async () => {
await userEvent.clear(messageInput);
await userEvent.type(messageInput, 'Hello, world!');
await userEvent.click(button);
});
expect(window.alert).toHaveBeenCalledWith('Hello, world!');
});
});

3
examples/element-factory/vitest.config.ts
View File

@@ -1,8 +1,9 @@
import { defineConfig } from 'vitest/config';
import { svelte } from '@sveltejs/vite-plugin-svelte';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [svelte()],
plugins: [svelte(), react()],
test: {
environment: 'happy-dom',
globals: true,

2
examples/task-list/index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Task List</title>
<script src="./src/index.tsx" type="module"></script>
<script src="./src/index.jsx" type="module"></script>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>

2
packages/css-configuration/index.js
View File

@@ -9,7 +9,7 @@ export const css = {
postcss: {
plugins: [
tailwindcss({
content: ['./**/*.{html,js,jsx,ts,tsx}'],
content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
theme: {
extend: {
container: {