feat: refactor

martapanc · Jun 13, 2023 · 4c6d4fc · 4c6d4fc
1 parent 6661c6c
commit 4c6d4fc
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 176 deletions.
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "test": "jest",
     "format": "prettier -w .",
     "format:check": "prettier -c .",
+    "style": "yarn lint:strict && yarn format",
     "postbuild": "next-sitemap --config next-sitemap.config.js",
     "prepare": "husky install",
     "storybook": "storybook dev -p 6006",

diff --git a/src/components/recruiter-info/SalaryHappinessTool.test.tsx b/src/components/recruiter-info/SalaryHappinessTool.test.tsx
@@ -1,13 +1,9 @@
-import { fireEvent, render, waitFor } from '@testing-library/react';
-import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
 
-import {
-  SalaryHappinessProps,
-  SalaryHappinessTool,
-} from '@/components/recruiter-info/SalaryHappinessTool';
+import { SalaryHappinessTool } from './SalaryHappinessTool';
 
-describe('Salary', () => {
-  const testRange = {
+describe('SalaryHappinessTool', () => {
+  const salaryData = {
     min: 40000,
     median: 80000,
     max: 120000,
@@ -16,49 +12,42 @@ describe('Salary', () => {
   const config = {
     displayTitle: true,
     currency: 'EUR',
-    forexMultiplier: 1.2,
+    forexMultiplier: 1,
   };
 
-  const props: SalaryHappinessProps = {
-    salaryData: testRange,
-    config,
-  };
-
-  it('renders correctly', () => {
-    const { container } = render(<SalaryHappinessTool {...props} />);
-    expect(container).toMatchSnapshot();
+  test('renders with title when displayTitle is true', () => {
+    render(<SalaryHappinessTool salaryData={salaryData} config={config} />);
+    const titleElement = screen.getByText('Salary Happiness Tool');
+    expect(titleElement).toBeInTheDocument();
   });
 
-  it('switches the emoji when changing the range', async () => {
-    const { getByTestId } = render(<SalaryHappinessTool {...props} />);
-    const rangeInput = getByTestId('salaryValue');
-    const emoji = getByTestId('emoji');
-    expect(emoji).toHaveAccessibleDescription('getting there');
-
-    fireEvent.change(rangeInput, { target: { value: '40000' } });
-    await waitFor(() => {
-      expect(emoji).toHaveAccessibleDescription(/are you serious?/i);
-    });
-
-    fireEvent.change(rangeInput, { target: { value: '50000' } });
-    expect(emoji).toHaveAccessibleDescription(/way too low/i);
-
-    fireEvent.change(rangeInput, { target: { value: '60000' } });
-    expect(emoji).toHaveAccessibleDescription(/too low/i);
-
-    fireEvent.change(rangeInput, { target: { value: '70000' } });
-    expect(emoji).toHaveAccessibleDescription(/getting there/i);
+  test('renders without title when displayTitle is false', () => {
+    const configWithoutTitle = { ...config, displayTitle: false };
+    render(
+      <SalaryHappinessTool
+        salaryData={salaryData}
+        config={configWithoutTitle}
+      />
+    );
+    const titleElement = screen.queryByText('Salary Happiness Tool');
+    expect(titleElement).toBeNull();
+  });
 
-    fireEvent.change(rangeInput, { target: { value: '80000' } });
-    expect(emoji).toHaveAccessibleDescription(/pretty good/i);
+  test('displays correct emoji and title for selected salary', () => {
+    render(<SalaryHappinessTool salaryData={salaryData} config={config} />);
+    const sliderElement = screen.getByLabelText('Salary');
+    fireEvent.change(sliderElement, { target: { value: '95000' } });
+    const emojiElement = screen.getByTestId('emoji');
+    expect(emojiElement.textContent).toBe(' 😀');
+    expect(emojiElement.getAttribute('title')).toBe('Even better');
 
-    fireEvent.change(rangeInput, { target: { value: '90000' } });
-    expect(emoji).toHaveAccessibleDescription(/even better/i);
+    fireEvent.change(sliderElement, { target: { value: '70000' } });
+    expect(emojiElement).toHaveAccessibleDescription(/getting there/i);
 
-    fireEvent.change(rangeInput, { target: { value: '100000' } });
-    expect(emoji).toHaveAccessibleDescription(/that's amazing/i);
+    fireEvent.change(sliderElement, { target: { value: '60000' } });
+    expect(emojiElement).toHaveAccessibleDescription(/still low/i);
 
-    fireEvent.change(rangeInput, { target: { value: '110000' } });
-    expect(emoji).toHaveAccessibleDescription(/make it rain!/i);
+    fireEvent.change(sliderElement, { target: { value: '50000' } });
+    expect(emojiElement).toHaveAccessibleDescription(/way too low/i);
   });
 });
diff --git a/src/components/recruiter-info/SalaryHappinessTool.tsx b/src/components/recruiter-info/SalaryHappinessTool.tsx
@@ -15,71 +15,59 @@ export interface SalaryHappinessProps {
   };
 }
 
-const SalaryHappinessTool = ({ salaryData, config }: SalaryHappinessProps) => {
-  let { median } = salaryData;
-  median = median * config.forexMultiplier;
+const roundNum = (num: number) => {
+  return Math.round(num / 5000) * 5000;
+};
 
-  const roundNum = (num: number) => {
-    return Math.round(num / 5000) * 5000;
-  };
+const SalaryHappinessTool = ({ salaryData, config }: SalaryHappinessProps) => {
+  const { median } = salaryData;
+  const medianInCurrency = median * config.forexMultiplier;
 
-  const minVisible = roundNum(median * 0.5);
-  const minSad = roundNum(median * 0.6);
-  const stillSad = roundNum(median * 0.7);
-  const minAcceptable = roundNum(median * 0.8);
-  const veryHappy = roundNum(median * 1.2);
-  const overTheMoon = roundNum(median * 1.3);
-  const maxVisible = roundNum(median * 1.5);
+  const minVisible = roundNum(medianInCurrency * 0.5);
+  const minSad = roundNum(medianInCurrency * 0.6);
+  const stillSad = roundNum(medianInCurrency * 0.7);
+  const minAcceptable = roundNum(medianInCurrency * 0.8);
+  const veryHappy = roundNum(medianInCurrency * 1.2);
+  const overTheMoon = roundNum(medianInCurrency * 1.3);
+  const maxVisible = roundNum(medianInCurrency * 1.5);
 
   const [selectedSalary, setSelectedSalary] = useState(minAcceptable);
-  const [emoji, setEmoji] = useState('❓');
-  const [title, setTitle] = useState('❓');
+  const [happinessScore, setHappinessScore] = useState({
+    emoji: '❓',
+    title: '',
+  });
 
   useEffect(() => {
     let emoji;
     let title;
 
-    switch (true) {
-      case selectedSalary < minSad:
-        emoji = '🤬';
-        title = 'Are you serious?';
-        break;
-      case selectedSalary >= minSad && selectedSalary < stillSad:
-        emoji = '😭';
-        title = 'Way too low';
-        break;
-      case selectedSalary >= stillSad && selectedSalary < minAcceptable:
-        emoji = '😢';
-        title = 'Still low';
-        break;
-      case selectedSalary >= minAcceptable && selectedSalary < median:
-        emoji = '😏';
-        title = 'Getting there';
-        break;
-      case selectedSalary >= median && selectedSalary < veryHappy:
-        emoji = '🙂';
-        title = 'Pretty good';
-        break;
-      case selectedSalary >= veryHappy && selectedSalary < overTheMoon:
-        emoji = '😀';
-        title = 'Even better';
-        break;
-      case selectedSalary >= overTheMoon && selectedSalary < maxVisible:
-        emoji = '😃';
-        title = "That's amazing";
-        break;
-      case selectedSalary >= maxVisible:
-        emoji = '🤑';
-        title = 'Make it rain!';
-        break;
-      default:
-        emoji = '';
-        title = '';
-        break;
+    if (selectedSalary < minSad) {
+      emoji = '🤬';
+      title = 'Are you serious?';
+    } else if (selectedSalary < stillSad) {
+      emoji = '😭';
+      title = 'Way too low';
+    } else if (selectedSalary < minAcceptable) {
+      emoji = '😢';
+      title = 'Still low';
+    } else if (selectedSalary < median) {
+      emoji = '😏';
+      title = 'Getting there';
+    } else if (selectedSalary < veryHappy) {
+      emoji = '🙂';
+      title = 'Pretty good';
+    } else if (selectedSalary < overTheMoon) {
+      emoji = '😀';
+      title = 'Even better';
+    } else if (selectedSalary < maxVisible) {
+      emoji = '😃';
+      title = "That's amazing";
+    } else {
+      emoji = '🤑';
+      title = 'Make it rain!';
     }
 
-    setEmoji(emoji);
-    setTitle(title);
+    setHappinessScore({ emoji, title });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedSalary]);
 
@@ -109,8 +97,12 @@ const SalaryHappinessTool = ({ salaryData, config }: SalaryHappinessProps) => {
 
       <p>
         <strong>Happiness Score:</strong>
-        <span className='text-3xl' data-testid='emoji' title={title}>
-          {` ${emoji}`}
+        <span
+          className='text-3xl'
+          data-testid='emoji'
+          title={happinessScore.title}
+        >
+          {` ${happinessScore.emoji}`}
         </span>
       </p>
     </Box>

diff --git a/src/components/recruiter-info/__snapshots__/SalaryHappinessTool.test.tsx.snap b/src/components/recruiter-info/__snapshots__/SalaryHappinessTool.test.tsx.snap