From 9e1603ad7a0a2cdd020eb001bcc313163b24f59f Mon Sep 17 00:00:00 2001 From: Carl Upton Date: Mon, 7 Jun 2021 11:59:02 +0100 Subject: [PATCH 1/9] adding age range data + select and removing some of the more patronising comments --- src/App.tsx | 3 +- src/components/header/Header.tsx | 1 - .../salary check form/SalaryCheckForm.tsx | 26 +++- .../salary results/SalaryResults.tsx | 9 +- src/data/UK salaries.json | 120 ++++++++++++++---- src/types/JobInformation.ts | 1 + 6 files changed, 129 insertions(+), 31 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index dbcfe46..5f91dc7 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -26,12 +26,11 @@ function App(): JSX.Element {
{!submitted && ( <> -
+

Sometimes you need a reality check when it comes to your earnings.

-

Spoiler alert: You'll be fine

diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx index c3c0332..62c3649 100644 --- a/src/components/header/Header.tsx +++ b/src/components/header/Header.tsx @@ -4,7 +4,6 @@ export default function Header(): JSX.Element { return (

Reality Check

-

Chances are you're doing fine

); } diff --git a/src/components/salary check form/SalaryCheckForm.tsx b/src/components/salary check form/SalaryCheckForm.tsx index f6e24dd..b0cfc0f 100644 --- a/src/components/salary check form/SalaryCheckForm.tsx +++ b/src/components/salary check form/SalaryCheckForm.tsx @@ -18,13 +18,13 @@ const schema = yup.object().shape({ .transform((x) => (Number.isNaN(x) ? undefined : x)) .positive('Must provide a positive salary') .required('Must provide a salary'), + ageRange: yup.string().required('Must select an age range'), }); export default function SalaryCheckForm({ onSubmit }: FormProps): JSX.Element { const { register, handleSubmit, - getValues, formState: { errors }, } = useForm({ resolver: yupResolver(schema) }); const submitHandler = handleSubmit((data) => onSubmit(data)); @@ -43,8 +43,8 @@ export default function SalaryCheckForm({ onSubmit }: FormProps): JSX.Element { {errors.salary.message} )}
+
+ + + {errors.ageRange && ( + {errors.ageRange.message} + )} +
; + } + return (
Date: Mon, 7 Jun 2021 13:43:44 +0100 Subject: [PATCH 2/9] age range now works --- .../salary check form/SalaryCheckForm.tsx | 2 +- .../salary results/SalaryResults.tsx | 10 +- src/data/UK salaries.json | 210 +++++++++++++++--- src/types/JobInformation.ts | 2 +- tailwind.config.js | 2 +- 5 files changed, 194 insertions(+), 32 deletions(-) diff --git a/src/components/salary check form/SalaryCheckForm.tsx b/src/components/salary check form/SalaryCheckForm.tsx index b0cfc0f..7be78b6 100644 --- a/src/components/salary check form/SalaryCheckForm.tsx +++ b/src/components/salary check form/SalaryCheckForm.tsx @@ -61,7 +61,7 @@ export default function SalaryCheckForm({ onSubmit }: FormProps): JSX.Element { + - - {errors.salary && ( - {errors.salary.message} - )} -
-
- - - {errors.ageRange && ( - {errors.ageRange.message} - )} -
-
-
- -
- - + + + ); } diff --git a/src/components/shared/Select.tsx b/src/components/shared/Select.tsx index b2c6ce3..467999a 100644 --- a/src/components/shared/Select.tsx +++ b/src/components/shared/Select.tsx @@ -1 +1,32 @@ -export default function Select() {} +/* eslint-disable react/jsx-props-no-spreading */ +import React from 'react'; +import { useFormContext } from 'react-hook-form'; + +type SelectProps = { + id: string; + name: string; + children: React.ReactNode; +}; + +export default function Select({ + id, + name, + children, +}: SelectProps): JSX.Element { + const { register } = useFormContext(); + const formattedName = name.replace(/([A-Z])/g, ' $1').toLowerCase(); + return ( + <> + + + + ); +} From 4083a3b1860526e6dfaa907a7340a5c9aa279322 Mon Sep 17 00:00:00 2001 From: Carl Upton Date: Mon, 7 Jun 2021 15:10:59 +0100 Subject: [PATCH 6/9] Select now working --- src/App.tsx | 13 +------------ src/chevron-down-solid.svg | 1 + src/components/shared/Select.tsx | 8 +++++--- 3 files changed, 7 insertions(+), 15 deletions(-) create mode 100644 src/chevron-down-solid.svg diff --git a/src/App.tsx b/src/App.tsx index 5f91dc7..27412f1 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -24,18 +24,7 @@ function App(): JSX.Element {
- {!submitted && ( - <> -
-

- Sometimes you need a reality check when it comes to your - earnings. -

-
- - - - )} + {!submitted && } {submitted && jobInfo && } {submitted &&
diff --git a/src/chevron-down-solid.svg b/src/chevron-down-solid.svg new file mode 100644 index 0000000..026b7c0 --- /dev/null +++ b/src/chevron-down-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/shared/Select.tsx b/src/components/shared/Select.tsx index 467999a..50a608f 100644 --- a/src/components/shared/Select.tsx +++ b/src/components/shared/Select.tsx @@ -1,6 +1,7 @@ /* eslint-disable react/jsx-props-no-spreading */ import React from 'react'; import { useFormContext } from 'react-hook-form'; +import { ReactComponent as Chevron } from '../../chevron-down-solid.svg'; type SelectProps = { id: string; @@ -16,17 +17,18 @@ export default function Select({ const { register } = useFormContext(); const formattedName = name.replace(/([A-Z])/g, ' $1').toLowerCase(); return ( - <> +
+ - +
); } From fbec6d03d4e93660ee5bca246eab0c70bac5d247 Mon Sep 17 00:00:00 2001 From: Carl Upton Date: Mon, 7 Jun 2021 15:21:29 +0100 Subject: [PATCH 7/9] adding source for data --- src/App.tsx | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/src/App.tsx b/src/App.tsx index 27412f1..efdd148 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -24,7 +24,23 @@ function App(): JSX.Element {
- {!submitted && } + {!submitted && ( + <> + +

+ All data sourced{' '} + + here + +

+ + )} {submitted && jobInfo && } {submitted &&
From 132baa1b23de412013232e9f0e4152c5994e918a Mon Sep 17 00:00:00 2001 From: Carl Upton Date: Mon, 7 Jun 2021 16:01:20 +0100 Subject: [PATCH 8/9] adding tests --- .../SalaryCheckForm.test.tsx | 45 ++++++++++++++++++- .../salary check form/SalaryCheckForm.tsx | 6 +-- src/components/shared/Select.tsx | 2 +- 3 files changed, 46 insertions(+), 7 deletions(-) diff --git a/src/components/salary check form/SalaryCheckForm.test.tsx b/src/components/salary check form/SalaryCheckForm.test.tsx index e23ab5c..f247f3e 100644 --- a/src/components/salary check form/SalaryCheckForm.test.tsx +++ b/src/components/salary check form/SalaryCheckForm.test.tsx @@ -1,5 +1,10 @@ import React from 'react'; -import { render, screen, fireEvent } from '@testing-library/react'; +import { + render, + screen, + fireEvent, + getAllByRole, +} from '@testing-library/react'; import SalaryCheckForm from './SalaryCheckForm'; const mockSubmit = jest.fn(({ data: JobInformation }) => @@ -12,6 +17,15 @@ describe('SalaryCheckForm', () => { }); it('should display required error when no salary entered', async () => { + fireEvent.change( + await screen.getByRole('combobox', { name: 'Select an age range' }), + { + target: { + value: 'all', + }, + } + ); + fireEvent.submit(screen.getByRole('button')); expect(await screen.findAllByRole('alert')).toHaveLength(1); @@ -21,15 +35,42 @@ describe('SalaryCheckForm', () => { expect(mockSubmit).not.toBeCalled(); }); + it('should display required error when no age range entered', async () => { + fireEvent.input( + await screen.getByRole('textbox', { name: 'Enter Salary (Gross)' }), + { + target: { + value: '1000', + }, + } + ); + + fireEvent.submit(screen.getByRole('button')); + expect(await screen.findAllByRole('alert')).toHaveLength(1); + expect(await screen.findByRole('alert')).toHaveTextContent( + 'Must select an age range' + ); + expect(mockSubmit).not.toBeCalled(); + }); + it('should display positive error when a negative salary is entered', async () => { fireEvent.input( - await screen.getByRole('textbox', { name: 'Enter Salary' }), + await screen.getByRole('textbox', { name: 'Enter Salary (Gross)' }), { target: { value: '-1000', }, } ); + fireEvent.change( + await screen.getByRole('combobox', { name: 'Select an age range' }), + { + target: { + value: 'all', + }, + } + ); + fireEvent.submit(screen.getByRole('button')); expect(await screen.findAllByRole('alert')).toHaveLength(1); expect(await screen.findByRole('alert')).toHaveTextContent( diff --git a/src/components/salary check form/SalaryCheckForm.tsx b/src/components/salary check form/SalaryCheckForm.tsx index 6bbc02c..52c02b3 100644 --- a/src/components/salary check form/SalaryCheckForm.tsx +++ b/src/components/salary check form/SalaryCheckForm.tsx @@ -62,10 +62,8 @@ export default function SalaryCheckForm({ onSubmit }: FormProps): JSX.Element {
Date: Mon, 7 Jun 2021 16:02:20 +0100 Subject: [PATCH 9/9] incrementing version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index eaf88a3..0dbfbc2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "reality-check", - "version": "1.0.1", + "version": "1.1.0", "private": true, "dependencies": { "@craco/craco": "^6.1.2",