Merge pull request #666 from codeforpdx/662/asterner-unit-tests

vitest: fix several tests

test/components/CivicProfileForms/FinancialInfo.test.jsx

@@ -1,11 +1,10 @@
 // import React from 'react';
 // import { render } from '@testing-library/react';
-// import { expect, it, describe } from 'vitest';
-// import { FinancialInfo } from '@components/CivicProfileForms';
+import { it, describe } from 'vitest';
 
-// describe('Financial Info Form', () => {
-//   it('renders', () => {
-//     const { getByText } = render(<FinancialInfo />);
-//     expect(getByText('Financial Information')).not.toBeNull();
-//   });
-// });
+describe.todo('Financial Info Form', () => {
+  it('renders', () => {
+    // const { getByText } = render(<FinancialInfo />);
+    // expect(getByText('Financial Information')).not.toBeNull();
+  });
+});

test/components/Contacts/ContactListTableDesktop.test.jsx

@@ -6,3 +6,6 @@
 // import ContactListTableDesktop from '../../../src/components/Contacts/ContactListTableDesktop';
 
 // const queryClient = new QueryClient();
+import { describe } from 'vitest';
+
+describe.todo('write tests for this component');

test/components/Contacts/ContactListTableMobile.test.jsx

@@ -6,3 +6,6 @@
 // import ContactListTableMobile from '../../../src/components/Contacts/ContactListTableMobile';
 
 // const queryClient = new QueryClient();
+import { describe } from 'vitest';
+
+describe.todo('write tests for this component');

test/components/Signup/PodRegistrationForm.test.jsx

@@ -18,8 +18,8 @@ describe('PodRegistrationForm', () => {
     );
 
     const textField = screen.getByRole('textbox', { name: 'Email' });
-    const inputElementPassword = screen.getByLabelText('Password');
-    const inputElementConfirmPassord = screen.getByLabelText('Confirm Password');
+    const inputElementPassword = screen.getByLabelText(/^password/i);
+    const inputElementConfirmPassord = screen.getByLabelText(/^confirm password/i);
 
     expect(textField).not.toBeNull();
     expect(inputElementPassword).not.toBeNull();

test/pages/CivicProfile.test.jsx

@@ -1,38 +1,51 @@
-// import React from 'react';
-// import { BrowserRouter } from 'react-router-dom';
-// import { render } from '@testing-library/react';
-// import { describe, expect, it } from 'vitest';
-// import { CivicProfile } from '@pages';
-// import createMatchMedia from '../helpers/createMatchMedia';
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import { render } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { CivicProfile } from '@pages';
+import { CIVIC_FORM_LIST } from '@components/CivicProfileForms';
+import createMatchMedia from '../helpers/createMatchMedia';
 
 // TODO: Rewrite tests to align with changes in CivicProfile component
 // e.g. "successfully navigates to Basic Information"
-// describe('CivicProfile Page', () => {
-// it('renders page container flex direction as row and nav container width as 25% by default', () => {
-//   const component = render(
-//     <BrowserRouter>
-//       <CivicProfile />
-//     </BrowserRouter>
-//   );
-//   const componentContainer = component.container.firstChild;
-//   const navContainer = componentContainer.firstChild;
-//   const componentContainerStyles = getComputedStyle(componentContainer);
-//   const navContainerStyles = getComputedStyle(navContainer);
-//   expect(componentContainerStyles.flexDirection).toBe('row');
-//   expect(navContainerStyles.width).toBe('25%');
-// });
-// it('renders page container flex direction as column and nav container width as 100% below 600px', () => {
-//   window.matchMedia = createMatchMedia(599);
-//   const component = render(
-//     <BrowserRouter>
-//       <CivicProfile />
-//     </BrowserRouter>
-//   );
-//   const componentContainer = component.container.firstChild;
-//   const navContainer = componentContainer.firstChild;
-//   const componentContainerStyles = getComputedStyle(componentContainer);
-//   const navContainerStyles = getComputedStyle(navContainer);
-//   expect(componentContainerStyles.flexDirection).toBe('column');
-//   expect(navContainerStyles.width).toBe('100%');
-// });
-// });
+describe.todo('CivicProfile Page', () => {
+  it('renders page container flex direction as row and nav container width as 25% by default', () => {
+    const component = render(
+      <BrowserRouter>
+        <CivicProfile />
+      </BrowserRouter>
+    );
+    const componentContainer = component.container.firstChild;
+    const navContainer = componentContainer.firstChild;
+    const componentContainerStyles = getComputedStyle(componentContainer);
+    const navContainerStyles = getComputedStyle(navContainer);
+    expect(componentContainerStyles.flexDirection).toBe('row');
+    expect(navContainerStyles.width).toBe('25%');
+  });
+
+  it('renders page container flex direction as column and nav container width as 100% below 600px', () => {
+    window.matchMedia = createMatchMedia(599);
+    const component = render(
+      <BrowserRouter>
+        <CivicProfile />
+      </BrowserRouter>
+    );
+    const componentContainer = component.container.firstChild;
+    const navContainer = componentContainer.firstChild;
+    const componentContainerStyles = getComputedStyle(componentContainer);
+    const navContainerStyles = getComputedStyle(navContainer);
+    expect(componentContainerStyles.flexDirection).toBe('column');
+    expect(navContainerStyles.width).toBe('100%');
+  });
+
+  it('renders buttons for all forms in CIVIC_FORM_LIST', () => {
+    const numLinks = CIVIC_FORM_LIST.length;
+    const { getByRole, getAllByRole } = render(
+      <BrowserRouter>
+        <CivicProfile />
+      </BrowserRouter>
+    );
+    expect(getByRole('navigation')).not.toBeNull();
+    expect(getAllByRole('tab').length).toEqual(numLinks);
+  });
+});

test/pages/Signup.test.jsx

@@ -79,7 +79,7 @@ describe('Signup Page', () => {
     };
     useNotification.mockReturnValue({ addNotification: vi.fn() });
     const { getByRole } = render(<MockSignupContexts session={sessionObj} />);
-    expect(getByRole('heading', { name: 'Register For PASS' })).not.toBeNull();
+    expect(getByRole('heading', { name: 'Sign Up' })).not.toBeNull();
   });
   it('lets users request to create pods', async () => {
     const session = {
@@ -102,8 +102,8 @@ describe('Signup Page', () => {
     const password = 'password';
     const confirmPassword = 'password';
     const emailField = getByRole('textbox', { name: 'Email' });
-    const passwordField = getByLabelText('Password');
-    const confirmPasswordField = getByLabelText('Confirm Password');
+    const passwordField = getByLabelText(/^password/i);
+    const confirmPasswordField = getByLabelText(/^confirm password/i);
     await user.type(emailField, email);
     await user.type(passwordField, password);
     await user.type(confirmPasswordField, confirmPassword);
@@ -135,8 +135,8 @@ describe('Signup Page', () => {
     const password = 'password';
     const confirmPassword = 'password';
     const emailField = getByRole('textbox', { name: 'Email' });
-    const passwordField = getByLabelText('Password');
-    const confirmPasswordField = getByLabelText('Confirm Password');
+    const passwordField = getByLabelText(/^password/i);
+    const confirmPasswordField = getByLabelText(/^confirm password/i);
 
     await user.type(emailField, email);
     await user.type(passwordField, password);