Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSG-994: Add React Hook Forms to Comet Starter App #19

Merged
merged 5 commits into from
Aug 25, 2023
Merged

CSG-994: Add React Hook Forms to Comet Starter App #19

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
25996b7
Add react-hook-forms to project. Update login form to utilize hooks f…
jbouder Aug 25, 2023
1ab9df4
Update readme.
jbouder Aug 25, 2023
0afb389
Remove extra newline.
jbouder Aug 25, 2023
c07261e
Update e2e test for redirect to dashboard.
jbouder Aug 25, 2023
8574fe1
Update to pin react-hook-form version back.
jbouder Aug 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ The goal of this project is to provide a React with TypeScript starter applicati
- Component Library: [Comet Component Library](https://github.com/MetroStar/comet)
- Data Visualization: [Victory Charts](https://formidable.com/open-source/victory/)
- State Management: [Recoil](https://recoiljs.org/)
- Form Validation: [React Hook Form](https://react-hook-form.com/)
- Unit Testing: [Jest](https://jestjs.io/) with [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
- Code Analysis: [ES Lint](https://eslint.org/)
- Code Formatting: [Prettier](https://prettier.io/)
Expand Down
2 changes: 1 addition & 1 deletion cypress/e2e/sign-in.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ describe('signin spec', () => {
cy.signIn('test', '12345678');

// Verify Homepage after signin
cy.get('h1').should('contain', 'Welcome John Doe');
cy.get('h1').should('contain', 'My Dashboard');
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should have these Cypress tests run for each PR so we can catch these.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I would like to do that, the only issue is we need to have the app deployed somewhere to run against. Thought about deploying to GitHub pages, but the root URL changes a bit and would need some fine-tuning.

cy.get('#sign-in-alert').should('not.exist');
});
});
26 changes: 13 additions & 13 deletions src/components/header/header.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,11 @@ describe('Header', () => {
</AuthProvider>
);

test('should render successfully', () => {
test('should render successfully', async () => {
const { baseElement } = render(headerComponent);
expect(baseElement).toBeTruthy();
await act(async () => {
expect(baseElement).toBeTruthy();
});
});

test('should navigate away from home', async () => {
Expand Down Expand Up @@ -87,17 +89,15 @@ describe('Header', () => {
window.dispatchEvent(new Event('resize'));

const button = screen.getByText('Menu');
await act(async () => {
expect(screen.getByText('Menu')).toBeTruthy();
userEvent
.click(button)
.then(() => {
// Handle click
})
.catch(() => {
// Handle error
});
});
expect(screen.getByText('Menu')).toBeTruthy();
userEvent
.click(button)
.then(() => {
// Handle click
})
.catch(() => {
// Handle error
});
expect(baseElement.querySelector('.usa-nav')).toBeDefined();
});
});
14 changes: 9 additions & 5 deletions src/components/protected-route/protected-route.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { User } from '@src/types/user';
import { render } from '@testing-library/react';
import { act, render } from '@testing-library/react';
import { AuthProvider } from 'react-oidc-context';
import { BrowserRouter } from 'react-router-dom';
import { RecoilRoot } from 'recoil';
Expand All @@ -17,12 +17,14 @@ describe('ProtectedRoute', () => {
</AuthProvider>
);

test('should render successfully', () => {
test('should render successfully', async () => {
const { baseElement } = render(wrapperComponent);
expect(baseElement).toBeTruthy();
await act(async () => {
expect(baseElement).toBeTruthy();
});
});

test('should render successfully when signed in', () => {
test('should render successfully when signed in', async () => {
jest.spyOn(useAuthMock, 'default').mockReturnValue({
isSignedIn: true,
currentUserData: {} as User,
Expand All @@ -32,6 +34,8 @@ describe('ProtectedRoute', () => {
});

const { baseElement } = render(wrapperComponent);
expect(baseElement).toBeTruthy();
await act(async () => {
expect(baseElement).toBeTruthy();
});
});
});
16 changes: 8 additions & 8 deletions src/hooks/use-auth.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,48 +20,48 @@ describe('useAuth', () => {
</AuthProvider>
);

test('should call signIn successfully', () => {
test('should call signIn successfully', async () => {
const { result } = renderHook(() => useAuth(), {
wrapper: contextWrapper,
});

act(() => {
await act(async () => {
result.current.signIn(false);
});
expect(result.current.signIn).toBeTruthy();
});

test('should call signIn with SSO and no configs', () => {
test('should call signIn with SSO and no configs', async () => {
const { result } = renderHook(() => useAuth(), {
wrapper: contextWrapper,
});

act(() => {
await act(async () => {
result.current.signIn(true);
});
expect(result.current.signIn).toBeTruthy();
});

test('should call signIn with SSO and available configs', () => {
test('should call signIn with SSO and available configs', async () => {
process.env.SSO_AUTHORITY = 'http://localhost';
process.env.SSO_CLIENT_ID = 'dev-client';

const { result } = renderHook(() => useAuth(), {
wrapper: contextWrapper,
});

act(() => {
await act(async () => {
result.current.signIn(true);
});
expect(result.current.signIn).toBeTruthy();
});

test('should call signOut successfully', () => {
test('should call signOut successfully', async () => {
const { result } = renderHook(() => useAuth(), {
wrapper: contextWrapper,
});

act(() => {
await act(async () => {
result.current.signOut();
});
expect(result.current.signOut).toBeTruthy();
Expand Down
12 changes: 7 additions & 5 deletions src/pages/dashboard/dashboard.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,12 +24,14 @@ describe('Dashboard', () => {
mock.reset();
});

test('should render successfully', () => {
test('should render successfully', async () => {
const { baseElement } = render(componentWrapper);
expect(baseElement).toBeTruthy();
expect(baseElement.querySelector('h1')?.textContent).toEqual(
'My Dashboard',
);
await act(async () => {
expect(baseElement).toBeTruthy();
expect(baseElement.querySelector('h1')?.textContent).toEqual(
'My Dashboard',
);
});
});

test('should render with mock data', async () => {
Expand Down
6 changes: 4 additions & 2 deletions src/pages/details/details.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,11 @@ describe('Details', () => {
mock.reset();
});

test('should render successfully', () => {
test('should render successfully', async () => {
const { baseElement } = render(componentWrapper);
expect(baseElement).toBeTruthy();
await act(async () => {
expect(baseElement).toBeTruthy();
});
});

test('should render with mock data', async () => {
Expand Down
12 changes: 7 additions & 5 deletions src/pages/home/home.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,14 @@ describe('Home', () => {
</AuthProvider>
);

test('should render successfully', () => {
test('should render successfully', async () => {
const { baseElement } = render(componentWrapper);
expect(baseElement).toBeTruthy();
expect(baseElement.querySelector('h1')?.textContent).toEqual(
'Welcome Guest',
);
await act(async () => {
expect(baseElement).toBeTruthy();
expect(baseElement.querySelector('h1')?.textContent).toEqual(
'Welcome Guest',
);
});
});

test('should render with mock data', async () => {
Expand Down
61 changes: 29 additions & 32 deletions src/pages/sign-in/sign-in.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,19 @@ describe('SignIn', () => {
</AuthProvider>
);

const mockUsername = 'username1';
const mockPassword = 'test1234';

const OLD_ENV = process.env;
beforeEach(() => {
process.env = { ...OLD_ENV };
});

test('should render successfully', () => {
test('should render successfully', async () => {
const { baseElement } = render(signInComponent);
expect(baseElement).toBeTruthy();
await act(async () => {
expect(baseElement).toBeTruthy();
});
});

test('should simulate a login attempt with blank fields', async () => {
Expand All @@ -39,7 +44,7 @@ describe('SignIn', () => {

test('should simulate a login attempt with blank username', async () => {
const { baseElement } = render(signInComponent);
await userEvent.type(screen.getByLabelText('Password'), 'b');
await userEvent.type(screen.getByLabelText('Password'), mockPassword);
await userEvent.click(
screen.getByText('Sign In', { selector: 'button[type=submit]' }),
);
Expand All @@ -48,7 +53,7 @@ describe('SignIn', () => {

test('should simulate a login attempt with blank password', async () => {
const { baseElement } = render(signInComponent);
await userEvent.type(screen.getByLabelText('Username'), 'a');
await userEvent.type(screen.getByLabelText('Username'), mockUsername);
await userEvent.click(
screen.getByText('Sign In', { selector: 'button[type=submit]' }),
);
Expand All @@ -65,14 +70,12 @@ describe('SignIn', () => {
});

const { baseElement } = render(signInComponent);
await userEvent.type(screen.getByLabelText('Username'), 'a');
await userEvent.type(screen.getByLabelText('Password'), 'b');
await userEvent.type(screen.getByLabelText('Username'), mockUsername);
await userEvent.type(screen.getByLabelText('Password'), mockPassword);

await act(async () => {
await userEvent.click(
screen.getByText('Sign In', { selector: 'button[type=submit]' }),
);
});
await userEvent.click(
screen.getByText('Sign In', { selector: 'button[type=submit]' }),
);
expect(baseElement.querySelectorAll('.usa-error-message').length).toBe(0);
});

Expand All @@ -86,14 +89,12 @@ describe('SignIn', () => {
});

const { baseElement } = render(signInComponent);
await userEvent.type(screen.getByLabelText('Username'), 'a');
await userEvent.type(screen.getByLabelText('Password'), 'b');
await userEvent.type(screen.getByLabelText('Username'), mockUsername);
await userEvent.type(screen.getByLabelText('Password'), mockPassword);

await act(async () => {
await userEvent.click(
screen.getByText('Sign In', { selector: 'button[type=submit]' }),
);
});
await userEvent.click(
screen.getByText('Sign In', { selector: 'button[type=submit]' }),
);
expect(baseElement.querySelectorAll('.usa-error-message').length).toBe(0);
});

Expand All @@ -107,14 +108,12 @@ describe('SignIn', () => {
});

const { baseElement } = render(signInComponent);
await userEvent.type(screen.getByLabelText('Username'), 'a');
await userEvent.type(screen.getByLabelText('Password'), 'b');
await userEvent.type(screen.getByLabelText('Username'), mockUsername);
await userEvent.type(screen.getByLabelText('Password'), mockPassword);

await act(async () => {
await userEvent.click(
screen.getByText('Sign In', { selector: 'button[type=submit]' }),
);
});
await userEvent.click(
screen.getByText('Sign In', { selector: 'button[type=submit]' }),
);
expect(baseElement.querySelectorAll('.usa-alert').length).toBe(1);
});

Expand All @@ -139,13 +138,11 @@ describe('SignIn', () => {
process.env.SSO_CLIENT_ID = 'dev-client';

const { baseElement } = render(signInComponent);
await act(async () => {
await userEvent.click(
screen.getByText('Sign In with SSO', {
selector: 'button[type=button]',
}),
);
});
await userEvent.click(
screen.getByText('Sign In with SSO', {
selector: 'button[type=button]',
}),
);
expect(baseElement.querySelectorAll('.usa-error-message').length).toBe(0);
});
});
Loading
Loading