test: added tests for FluiTimePicker

carbon-design-system · Sep 20, 2024 · f814d1c · f814d1c
1 parent a179e4b
commit f814d1c
Showing 1 changed file with 77 additions and 1 deletion.
diff --git a/packages/react/src/components/FluidTimePicker/__tests__/FluidTimePicker-test.js b/packages/react/src/components/FluidTimePicker/__tests__/FluidTimePicker-test.js
@@ -9,7 +9,7 @@ import React from 'react';
 import FluidTimePicker from '../FluidTimePicker';
 import FluidTimePickerSelect from '../../FluidTimePickerSelect';
 import SelectItem from '../../SelectItem';
-import { render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 
 const prefix = 'cds';
 
@@ -60,5 +60,81 @@ describe('FluidTimePicker', () => {
 
       expect(container.firstChild).toHaveClass(`${prefix}--time-picker--fluid`);
     });
+
+    it('returns invalidText when invalid is true', async () => {
+      render(
+        <FluidTimePicker
+          className="custom-class"
+          id="time=picker-1"
+          data-testid="timePicker-1"
+          labelText="Time"
+          invalid
+          invalidText="Invalid text">
+          <FluidTimePickerSelect id="select-1" labelText="Clock">
+            <SelectItem value="am" text="AM" />
+            <SelectItem value="pm" text="PM" />
+          </FluidTimePickerSelect>
+          <FluidTimePickerSelect id="select-2" labelText="Timezone">
+            <SelectItem value="et" text="Eastern Time (ET)" />
+            <SelectItem value="ct" text="Central Time (CT)" />
+            <SelectItem value="mt" text="Mountain Time (MT)" />
+            <SelectItem value="pt" text="Pacific Time (PT)" />
+          </FluidTimePickerSelect>
+        </FluidTimePicker>
+      );
+      await expect(screen.getByText('Invalid text')).toBeInTheDocument();
+    });
+
+    it('returns warnText when warn is true', async () => {
+      render(
+        <FluidTimePicker
+          className="custom-class"
+          id="time=picker-1"
+          data-testid="timePicker-1"
+          labelText="Time"
+          warn
+          warnText="Warn text">
+          <FluidTimePickerSelect id="select-1" labelText="Clock">
+            <SelectItem value="am" text="AM" />
+            <SelectItem value="pm" text="PM" />
+          </FluidTimePickerSelect>
+          <FluidTimePickerSelect id="select-2" labelText="Timezone">
+            <SelectItem value="et" text="Eastern Time (ET)" />
+            <SelectItem value="ct" text="Central Time (CT)" />
+            <SelectItem value="mt" text="Mountain Time (MT)" />
+            <SelectItem value="pt" text="Pacific Time (PT)" />
+          </FluidTimePickerSelect>
+        </FluidTimePicker>
+      );
+      await expect(screen.getByText('Warn text')).toBeInTheDocument();
+    });
+
+    it('should set disabled as expected', () => {
+      const onClick = jest.fn();
+
+      render(
+        <FluidTimePicker
+          className="custom-class"
+          id="time=picker-1"
+          data-testid="timePicker-1"
+          labelText="Time"
+          onClick={onClick}
+          disabled>
+          <FluidTimePickerSelect id="select-1" labelText="Clock">
+            <SelectItem value="am" text="AM" />
+            <SelectItem value="pm" text="PM" />
+          </FluidTimePickerSelect>
+          <FluidTimePickerSelect id="select-2" labelText="Timezone">
+            <SelectItem value="et" text="Eastern Time (ET)" />
+            <SelectItem value="ct" text="Central Time (CT)" />
+            <SelectItem value="mt" text="Mountain Time (MT)" />
+            <SelectItem value="pt" text="Pacific Time (PT)" />
+          </FluidTimePickerSelect>
+        </FluidTimePicker>
+      );
+
+      fireEvent.click(screen.getByRole('textbox'));
+      expect(onClick).not.toHaveBeenCalled();
+    });
   });
 });