From a88f613da7e5567dbfdebd7df94f94507c47c6b5 Mon Sep 17 00:00:00 2001 From: Michael Hunteman Date: Fri, 27 Sep 2024 08:43:02 -0700 Subject: Add vitests --- client/src/components/AdminLogin.test.tsx | 30 ++++++++++++++++++++++++++ client/src/components/Dashboard.tsx | 1 + client/src/components/Desktop.tsx | 2 +- client/src/components/GlobalSnackbar.test.tsx | 28 ++++++++++++++++++++++++ client/src/components/GuestLogin.test.tsx | 29 +++++++++++++++++++++++++ client/src/components/Mobile.tsx | 2 +- client/src/components/RsvpForm.test.tsx | 31 +++++++++++++++++++++++++++ 7 files changed, 121 insertions(+), 2 deletions(-) create mode 100644 client/src/components/AdminLogin.test.tsx create mode 100644 client/src/components/GlobalSnackbar.test.tsx create mode 100644 client/src/components/GuestLogin.test.tsx create mode 100644 client/src/components/RsvpForm.test.tsx (limited to 'client/src/components') diff --git a/client/src/components/AdminLogin.test.tsx b/client/src/components/AdminLogin.test.tsx new file mode 100644 index 0000000..feffadf --- /dev/null +++ b/client/src/components/AdminLogin.test.tsx @@ -0,0 +1,30 @@ +import '@testing-library/jest-dom'; +import React from 'react'; +import { fireEvent, screen } from '@testing-library/react'; +import { userEvent } from '@testing-library/user-event'; +import { describe, expect, it } from 'vitest'; +import { createMemoryRouter, RouterProvider } from 'react-router-dom'; +import { renderWithProviders } from '../renderWithProviders'; +import routes from '../routes'; + +describe('Admin Login', async () => { + const memoryRouter = createMemoryRouter(routes, { + initialEntries: ['/admin/login'], + }); + it('can log in', async () => { + const { getByLabelText, getByRole, findByText } = renderWithProviders( + + ); + const user = userEvent.setup(); + + await user.type(getByLabelText(/username/i), 'username'); + await user.type(getByLabelText(/password/i), 'password'); + fireEvent.click(getByRole('button', { name: 'Log in' })); + expect(await findByText(/first name/i)).toBeInTheDocument(); + expect(await findByText(/last name/i)).toBeInTheDocument(); + expect(await findByText(/attendance/i)).toBeInTheDocument(); + expect(await findByText(/email/i)).toBeInTheDocument(); + expect(await findByText(/message/i)).toBeInTheDocument(); + expect(await findByText(/party size/i)).toBeInTheDocument(); + }); +}); diff --git a/client/src/components/Dashboard.tsx b/client/src/components/Dashboard.tsx index 985e48a..56b50a2 100644 --- a/client/src/components/Dashboard.tsx +++ b/client/src/components/Dashboard.tsx @@ -48,6 +48,7 @@ function Dashboard() { columns, data: guests, muiPaginationProps: { + color: 'primary', shape: 'rounded', showRowsPerPage: false, variant: 'outlined', diff --git a/client/src/components/Desktop.tsx b/client/src/components/Desktop.tsx index 0aa4357..d7447f3 100644 --- a/client/src/components/Desktop.tsx +++ b/client/src/components/Desktop.tsx @@ -4,7 +4,7 @@ import { Link } from 'react-router-dom'; import { Button, IconButton, useTheme } from '@mui/material'; import DarkModeIcon from '@mui/icons-material/DarkMode'; import LightModeIcon from '@mui/icons-material/LightMode'; -import { ThemeContext } from '../ThemeContextProvider'; +import { ThemeContext } from '../AppThemeProvider'; import pages from '../pages'; function Desktop() { diff --git a/client/src/components/GlobalSnackbar.test.tsx b/client/src/components/GlobalSnackbar.test.tsx new file mode 100644 index 0000000..2643816 --- /dev/null +++ b/client/src/components/GlobalSnackbar.test.tsx @@ -0,0 +1,28 @@ +import '@testing-library/jest-dom'; +import React from 'react'; +import { describe, expect, it } from 'vitest'; +import { createMemoryRouter, RouterProvider } from 'react-router-dom'; +import { renderWithProviders } from '../renderWithProviders'; +import routes from '../routes'; +import { showSnackbar } from '../slices/snackbarSlice'; +import setupStore from '../store'; + +describe('Global Snackbar', async () => { + const memoryRouter = createMemoryRouter(routes, { + initialEntries: ['/'], + }); + it('displays message', async () => { + const store = setupStore(); + store.dispatch( + showSnackbar({ + message: 'message', + severity: 'success', + }) + ); + const { findByText } = renderWithProviders( + , + { store } + ); + expect(await findByText(/message/i)).toBeInTheDocument(); + }); +}); diff --git a/client/src/components/GuestLogin.test.tsx b/client/src/components/GuestLogin.test.tsx new file mode 100644 index 0000000..b31a00a --- /dev/null +++ b/client/src/components/GuestLogin.test.tsx @@ -0,0 +1,29 @@ +import '@testing-library/jest-dom'; +import React from 'react'; +import { fireEvent } from '@testing-library/react'; +import { userEvent } from '@testing-library/user-event'; +import { describe, expect, it } from 'vitest'; +import { createMemoryRouter, RouterProvider } from 'react-router-dom'; +import { renderWithProviders } from '../renderWithProviders'; +import routes from '../routes'; + +describe('Guest Login', async () => { + const memoryRouter = createMemoryRouter(routes, { + initialEntries: ['/guests/login'], + }); + it('can log in', async () => { + const { getByLabelText, getByRole, findByLabelText } = renderWithProviders( + + ); + const user = userEvent.setup(); + + await user.type(getByLabelText(/first name/i), 'Michael'); + await user.type(getByLabelText(/last name/i), 'Hunteman'); + fireEvent.click(getByRole('button', { name: 'Log in' })); + expect(await findByLabelText(/accept/i)).not.toBeChecked(); + expect(await findByLabelText(/decline/i)).toBeChecked(); + expect(await findByLabelText(/email/i)).toHaveValue(''); + expect(await findByLabelText(/party size/i)).toHaveValue(1); + expect(await findByLabelText(/message to the couple/i)).toHaveValue(''); + }); +}); diff --git a/client/src/components/Mobile.tsx b/client/src/components/Mobile.tsx index 38aa20b..d8510c7 100644 --- a/client/src/components/Mobile.tsx +++ b/client/src/components/Mobile.tsx @@ -5,7 +5,7 @@ import { Button, IconButton, Menu, MenuItem } from '@mui/material'; import DarkModeIcon from '@mui/icons-material/DarkMode'; import LightModeIcon from '@mui/icons-material/LightMode'; import { useTheme } from '@mui/material/styles'; -import { ThemeContext } from '../ThemeContextProvider'; +import { ThemeContext } from '../AppThemeProvider'; import MenuIcon from '@mui/icons-material/Menu'; import pages from '../pages'; diff --git a/client/src/components/RsvpForm.test.tsx b/client/src/components/RsvpForm.test.tsx new file mode 100644 index 0000000..a871268 --- /dev/null +++ b/client/src/components/RsvpForm.test.tsx @@ -0,0 +1,31 @@ +import '@testing-library/jest-dom'; +import React from 'react'; +import { fireEvent } from '@testing-library/react'; +import { userEvent } from '@testing-library/user-event'; +import { describe, expect, it } from 'vitest'; +import { createMemoryRouter, RouterProvider } from 'react-router-dom'; +import { renderWithProviders } from '../renderWithProviders'; +import routes from '../routes'; +import setupStore from '../store'; +import { initialGuest } from '../mocks/handlers'; +import { setGuest } from '../slices/auth/guestSlice'; + +describe('RSVP form', async () => { + const memoryRouter = createMemoryRouter(routes, { + initialEntries: ['/rsvp'], + }); + it('can submit', async () => { + const store = setupStore(); + store.dispatch(setGuest(initialGuest)); + const { getByLabelText, getByRole, findByText } = renderWithProviders( + , + { store } + ); + const user = userEvent.setup(); + + fireEvent.click(getByLabelText(/accept/i), { target: { clicked: true } }); + await user.type(getByLabelText(/email/i), 'mhunteman@cox.net'); + fireEvent.click(getByRole('button', { name: 'RSVP' })); + expect(await findByText(/RSVP updated/i)).toBeInTheDocument(); + }); +}); -- cgit v1.2.3