feat: add story, test and snapshot

src/components/recruiter-info/SalaryHappinessTool.test.tsx

@@ -0,0 +1,54 @@
+import { fireEvent, render, waitFor } from '@testing-library/react';
+import React from 'react';
+
+import { SalaryHappinessTool } from '@/components/recruiter-info/SalaryHappinessTool';
+
+describe('Salary', () => {
+  const testRange = {
+    min: 40000,
+    median: 80000,
+    max: 120000,
+  };
+
+  it('renders correctly', () => {
+    const { container } = render(
+      <SalaryHappinessTool salaryData={testRange} />
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it('switches the emoji when changing the range', async () => {
+    const { getByTestId } = render(
+      <SalaryHappinessTool salaryData={testRange} />
+    );
+    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);
+
+    fireEvent.change(rangeInput, { target: { value: '80000' } });
+    expect(emoji).toHaveAccessibleDescription(/pretty good/i);
+
+    fireEvent.change(rangeInput, { target: { value: '90000' } });
+    expect(emoji).toHaveAccessibleDescription(/even better/i);
+
+    fireEvent.change(rangeInput, { target: { value: '100000' } });
+    expect(emoji).toHaveAccessibleDescription(/that's amazing/i);
+
+    fireEvent.change(rangeInput, { target: { value: '110000' } });
+    expect(emoji).toHaveAccessibleDescription(/make it rain!/i);
+  });
+});

src/components/recruiter-info/SalaryHappinessTool.tsx

@@ -1,22 +1,94 @@
 import { Box, Slider } from '@mui/material';
 import * as React from 'react';
+import { useEffect, useState } from 'react';
 
-export default function SalaryHappinessTool() {
-  const min = 50;
-  const max = 150;
-  const defaultValue = 65;
+export interface SalaryHappinessProps {
+  salaryData: {
+    min: number;
+    median: number;
+    max: number;
+  };
+}
+
+const SalaryHappinessTool = ({ salaryData }: SalaryHappinessProps) => {
+  const { median } = salaryData;
+
+  const roundNum = (num: number) => {
+    return Math.round(num / 5000) * 5000;
+  };
+
+  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 [selectedSalary, setSelectedSalary] = useState(minAcceptable);
+  const [emoji, setEmoji] = useState('❓');
+  const [title, setTitle] = useState('❓');
+
+  useEffect(() => {
+    if (selectedSalary < minSad) {
+      setEmoji('🤬');
+      setTitle('Are you serious?');
+    } else if (selectedSalary >= minSad && selectedSalary < stillSad) {
+      setEmoji('😭');
+      setTitle('Way too low');
+    } else if (selectedSalary >= stillSad && selectedSalary < minAcceptable) {
+      setEmoji('😢');
+      setTitle('Still low');
+    } else if (selectedSalary >= minAcceptable && selectedSalary < median) {
+      setEmoji('😏');
+      setTitle('Getting there');
+    } else if (selectedSalary >= median && selectedSalary < veryHappy) {
+      setEmoji('🙂');
+      setTitle('Pretty good');
+    } else if (selectedSalary >= veryHappy && selectedSalary < overTheMoon) {
+      setEmoji('😀');
+      setTitle('Even better');
+    } else if (selectedSalary >= overTheMoon && selectedSalary < maxVisible) {
+      setEmoji('😃');
+      setTitle("That's amazing");
+    } else if (selectedSalary >= maxVisible) {
+      setEmoji('🤑');
+      setTitle('Make it rain!');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedSalary]);
 
   return (
-    <Box width={300}>
+    <Box width={300} className='m-2 '>
       <h3>Salary Happiness Tool</h3>
 
       <Slider
-        defaultValue={defaultValue}
-        min={min}
-        max={max}
-        aria-label='Default'
-        valueLabelDisplay='auto'
+        className='mt-2'
+        defaultValue={selectedSalary}
+        min={minVisible}
+        max={maxVisible}
+        step={5_000}
+        aria-label='Salary'
+        data-testid='salaryValue'
+        onChange={(e) =>
+          setSelectedSalary(Number((e.target as HTMLInputElement).value))
+        }
       />
+
+      <label htmlFor='salaryValue'>
+        {Intl.NumberFormat('en-GB', {
+          style: 'currency',
+          currency: 'EUR',
+        }).format(selectedSalary)}
+      </label>
+      <p>
+        <strong>Happiness Score:</strong>
+        <span className='text-3xl' data-testid='emoji' title={title}>
+          {` ${emoji}`}
+        </span>
+      </p>
     </Box>
   );
-}
+};
+
+export { SalaryHappinessTool };

src/components/recruiter-info/__snapshots__/SalaryHappinessTool.test.tsx.snap

@@ -0,0 +1,76 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Salary renders correctly 1`] = `
+<div>
+  <div
+    class="MuiBox-root css-1v5z18m"
+  >
+    <h3>
+      Salary Happiness Tool
+    </h3>
+    <span
+      class="MuiSlider-root MuiSlider-colorPrimary MuiSlider-sizeMedium css-187mznn-MuiSlider-root"
+      data-testid="salaryValue"
+    >
+      <span
+        class="MuiSlider-rail css-14pt78w-MuiSlider-rail"
+      />
+      <span
+        class="MuiSlider-track css-1gv0vcd-MuiSlider-track"
+        style="left: 0%; width: 31.25%;"
+      />
+      <span
+        class="MuiSlider-thumb MuiSlider-thumbSizeMedium MuiSlider-thumbColorPrimary MuiSlider-thumb MuiSlider-thumbSizeMedium MuiSlider-thumbColorPrimary css-eg0mwd-MuiSlider-thumb"
+        data-index="0"
+        style="left: 31.25%;"
+      >
+        <input
+          aria-label="Default"
+          aria-orientation="horizontal"
+          aria-valuemax="120000"
+          aria-valuemin="40000"
+          aria-valuenow="65000"
+          data-index="0"
+          max="120000"
+          min="40000"
+          step="5000"
+          style="border: 0px; height: 100%; margin: -1px; overflow: hidden; padding: 0px; position: absolute; white-space: nowrap; width: 100%; direction: ltr;"
+          type="range"
+          value="65000"
+        />
+        <span
+          aria-hidden="true"
+          class="MuiSlider-valueLabel css-nnid7-MuiSlider-valueLabel"
+        >
+          <span
+            class="MuiSlider-valueLabelCircle"
+          >
+            <span
+              class="MuiSlider-valueLabelLabel"
+            >
+              65000
+            </span>
+          </span>
+        </span>
+      </span>
+    </span>
+    <label
+      for="salaryValue"
+    >
+      €65,000.00
+    </label>
+    <p>
+      <strong>
+        Happiness Score:
+      </strong>
+      <span
+        class="text-3xl"
+        data-testid="emoji"
+        title="Getting there"
+      >
+         😏
+      </span>
+    </p>
+  </div>
+</div>
+`;

src/components/recruiter-info/__stories__/SalaryHappinessTool.stories.tsx

@@ -1,6 +1,9 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta } from '@storybook/react';
 
-import SalaryHappinessTool from '@/components/recruiter-info/SalaryHappinessTool';
+import {
+  SalaryHappinessProps,
+  SalaryHappinessTool,
+} from '@/components/recruiter-info/SalaryHappinessTool';
 
 const meta: Meta<typeof SalaryHappinessTool> = {
   title: 'Components/Recruiter-Info/SalaryHappinessTool',
@@ -10,6 +13,15 @@ const meta: Meta<typeof SalaryHappinessTool> = {
 
 export default meta;
 
-type Story = StoryObj<typeof SalaryHappinessTool>;
+export const SalaryStory = (args: SalaryHappinessProps) => (
+  <SalaryHappinessTool {...args} />
+);
 
-export const Euros: Story = {};
+SalaryStory.storyName = 'Salary';
+SalaryStory.args = {
+  salaryData: {
+    min: 40000,
+    median: 80000,
+    max: 120000,
+  },
+};