Add unit test for testing axis label customization

ral-facilities · Aug 10, 2023 · 510dd12 · 510dd12
1 parent 67e582e
commit 510dd12
Showing 1 changed file with 47 additions and 1 deletion.
diff --git a/src/plotting/plotSettings/yAxisTab.component.test.tsx b/src/plotting/plotSettings/yAxisTab.component.test.tsx
@@ -11,7 +11,7 @@ import { staticChannels } from '../../api/channels';
 
 describe('y-axis tab', () => {
   let props: YAxisTabProps;
-  let user;
+  let user: ReturnType<typeof userEvent.setup>;
   const changeLeftYAxisScale = jest.fn();
   const changeRightYAxisScale = jest.fn();
   const changeSelectedPlotChannels = jest.fn();
@@ -21,6 +21,8 @@ describe('y-axis tab', () => {
   const changeRightYAxisMaximum = jest.fn();
   const changeSelectedColours = jest.fn();
   const changeRemainingColours = jest.fn();
+  const changeRightYAxisLabel = jest.fn();
+  const changeLeftYAxisLabel = jest.fn();
 
   const createView = (): RenderResult => {
     return render(<YAxisTab {...props} />);
@@ -46,6 +48,8 @@ describe('y-axis tab', () => {
       initialRemainingColours: COLOUR_ORDER.map((colour) => colour),
       changeSelectedColours,
       changeRemainingColours,
+      changeRightYAxisLabel,
+      changeLeftYAxisLabel,
     };
 
     user = userEvent.setup({ delay: null });
@@ -362,4 +366,46 @@ describe('y-axis tab', () => {
       expect(maxField).toHaveValue('0');
     });
   });
+
+  it('allows customization of left y-axis label', async () => {
+    function TestEnv() {
+      const [leftYAxisLabel, setLeftYAxisLabel] = React.useState('');
+      return (
+        <YAxisTab
+          {...props}
+          leftYAxisLabel={leftYAxisLabel}
+          changeLeftYAxisLabel={setLeftYAxisLabel}
+        />
+      );
+    }
+
+    render(<TestEnv />);
+
+    const axisLabelTextBox = screen.getByRole('textbox', { name: 'Label' });
+    expect(axisLabelTextBox).toHaveValue('');
+
+    await user.type(axisLabelTextBox, 'Left axis');
+    expect(axisLabelTextBox).toHaveValue('Left axis');
+  });
+
+  it('allows customization of right y-axis label', async () => {
+    function TestEnv() {
+      const [rightYAxisLabel, setRightYAxisLabel] = React.useState('');
+      return (
+        <YAxisTab
+          {...props}
+          leftYAxisLabel={rightYAxisLabel}
+          changeLeftYAxisLabel={setRightYAxisLabel}
+        />
+      );
+    }
+
+    render(<TestEnv />);
+
+    const axisLabelTextBox = screen.getByRole('textbox', { name: 'Label' });
+    expect(axisLabelTextBox).toHaveValue('');
+
+    await user.type(axisLabelTextBox, 'Right axis');
+    expect(axisLabelTextBox).toHaveValue('Right axis');
+  });
 });