unitTest

dummy/@/lib/auth/sign-in.test.tsx

@@ -1,23 +1,57 @@
 import {describe, expect, it, vi} from 'vitest';
 import {FormEvent} from 'react'
 import {signIn, SignInForm} from './sign-in'
-import {render, screen} from '@testing-library/react';
+import {render, screen, fireEvent, waitFor} from '@testing-library/react';
 import {getFormData} from '../form/get-data';
+import React from 'react';
 
 describe('SignInForm', () => {
-	it.todo('should display email input')
-	it.todo('should display password input')
-	it.todo('should display sign in button')
+	it('should display email input', () => {
+		const {baseElement} = render(<SignInForm />);
+		const email = baseElement.querySelector('input[type="email"]');
+		expect(email).toBeTruthy();
+	})
+	it('should display password input', () => {
+	const {baseElement} = render(<SignInForm />);
+	const password = baseElement.querySelector('input[type="password"]');
+	expect(password).toBeTruthy();
+})
+
+	it('should display sign in button', () => {
+
+	const {baseElement} = render(<SignInForm />);
+	const button = baseElement.querySelector('button[type="submit"]');
+	expect(button).toBeTruthy();
+	})
+
 
-	it.todo('should be submitted with email and password', () => {
+	it.only('should be submitted with email and password', async() => {
 		const onSubmit = vi.fn((event: FormEvent<HTMLFormElement>) => getFormData(event.currentTarget))
 
-		render(<SignInForm onSubmit={onSubmit}/>)
+		 render(<SignInForm onSubmit={onSubmit}/>)
+		const email = screen.getByRole('textbox', {name: "Email"});
+		const password = screen.getByRole('textbox', {name: "Password"});
+		const button = screen.getByRole('button');
+		 // when
+		fireEvent.change(email, { target: { value: '[email protected]' } });
+		fireEvent.change(password, { target: { value: 'Mariusz1234!' } })
+		fireEvent.click(button);
+
+
+
+await waitFor(() => {
+	expect(onSubmit).toHaveBeenCalled();
+  });
+
 	})
 })
 
-describe('signIn', () => {
-	it.todo('should return `wrong email` error')
-	it.todo('should return `invalid password` error')
-	it.todo('should authenticate user')
-})
+
+// describe('signIn', () => {
+// 	it.todo('should return `wrong email` error' () => {
+// 		expect(signIn()).toBe()
+
+// 	})
+// 	it.todo('should return `invalid password` error')
+// 	it.todo('should authenticate user')
+// })

dummy/@/lib/auth/sign-in.tsx

@@ -52,7 +52,7 @@ export function SignInForm({
 					<Input name='email' type='email'/>
 				</Label>
 
-				<Label htmlFor='password'>
+				<Label >
 					Password
 					<Input name='password' type='password'/>
 				</Label>

dummy/@/lib/form/get-data.test.tsx

@@ -0,0 +1,17 @@
+import {describe, expect, it} from 'vitest';
+import {getFormData} from './get-data'
+import { Result } from 'postcss';
+
+
+
+
+describe('getFormData', () => {
+	it('should return form data', () => {
+		const form = document.createElement("form");
+		form.innerHTML = `<input type="text" name="name" value="John">
+		<input type="text" name="age" value={30}>
+		<input type="text" name="city" value="New York">`;
+
+		expect(getFormData(form)).toStrictEqual({"name":"John", "age":30, "city":"New York"});
+	})
+})

dummy/@/lib/use-toggle.test.tsx

@@ -1,7 +1,17 @@
 import {describe, expect, it} from 'vitest';
 import {useToggle} from './use-toggle'
+import { renderHook } from '@testing-library/react';
 
 describe('useToggle', () => {
-	it.todo('should return initial value')
-	it.todo('should return toggled value')
+	it('should return initial value', () => {
+		const {result} = renderHook(() => useToggle(true));
+		const value = result.current[0]
+		expect(value).toBeTruthy();
+	})
+	it('should return toggled value', () => {
+		const {result} = renderHook(() => useToggle(true));
+		const toggle = result.current[1];
+		expect(toggle()).toBeFalsy();
+
+	})
 })