@innovaccer/design-system 2.5.0-2 → 2.5.1

package/core/components/organisms/choiceList/index.tsx

@@ -0,0 +1,2 @@
+export { default } from './ChoiceList';
+export * from './ChoiceList';

package/core/components/organisms/datePicker/__tests__/DatePicker.test.tsx

@@ -19,68 +19,158 @@ afterAll(() => {
 const view = ['year', 'month', 'date'];
 const booleanValue = [true, false];
 const FunctionValue = jest.fn();
+const newDate = new Date(2020, 2, 1);
 
-describe('DatePicker component', () => {
-  const mapper: Record<string, any> = {
-    view: valueHelper(view, { required: true, iterate: true }),
-  };
+const testFunc = (props: Record<string, any>): void => {
+  const attr = filterUndefined(props) as Props;
 
-  const testFunc = (props: Record<string, any>): void => {
-    const attr = filterUndefined(props) as Props;
-
-    it(testMessageHelper(attr), () => {
-      const { baseElement } = render(<DatePicker date={new Date(2020, 2, 1)} {...attr} />);
-      expect(baseElement).toMatchSnapshot();
-    });
-  };
-
-  testHelper(mapper, testFunc);
-});
-
-describe('DatePicker component', () => {
-  const mapper: Record<string, any> = {
-    withInput: valueHelper(booleanValue, { required: true, iterate: true }),
-  };
-
-  const testFunc = (props: Record<string, any>): void => {
-    const attr = filterUndefined(props) as Props;
-
-    it(testMessageHelper(attr), () => {
-      const { baseElement } = render(<DatePicker date={new Date(2020, 2, 1)} {...attr} />);
-      expect(baseElement).toMatchSnapshot();
-    });
-  };
+  it(testMessageHelper(attr), () => {
+    const { baseElement } = render(<DatePicker date={newDate} {...attr} />);
+    expect(baseElement).toMatchSnapshot();
+  });
+};
+
+describe('DatePicker component snapshots', () => {
+  describe('renders snapshot for prop:view', () => {
+    const mapper: Record<string, any> = {
+      view: valueHelper(view, { required: true, iterate: true }),
+    };
+    testHelper(mapper, testFunc);
+  });
 
-  testHelper(mapper, testFunc);
-});
+  describe('renders snapshot for prop:withInput', () => {
+    const mapper: Record<string, any> = {
+      withInput: valueHelper(booleanValue, { required: true, iterate: true }),
+    };
+    testHelper(mapper, testFunc);
+  });
 
-describe('DatePicker component', () => {
-  const mapper: Record<string, any> = {
-    open: valueHelper(booleanValue, { required: true, iterate: true }),
-  };
+  describe('renders snapshot for prop:open', () => {
+    const mapper: Record<string, any> = {
+      open: valueHelper(booleanValue, { required: true, iterate: true }),
+    };
+    testHelper(mapper, testFunc);
+  });
 
-  const testFunc = (props: Record<string, any>): void => {
-    const attr = filterUndefined(props) as Props;
+  describe('renders snapshot for prop:disabledBefore, prop:disabledAfter', () => {
+    const mapper: Record<string, any> = {
+      disabledBefore: valueHelper('10/10/2020', { required: true }),
+      disabledAfter: valueHelper('10/10/2021', { required: true }),
+    };
+    testHelper(mapper, testFunc);
+  });
 
-    it(testMessageHelper(attr), () => {
-      const { baseElement } = render(<DatePicker date={new Date(2020, 2, 1)} withInput={true} {...attr} />);
-      expect(baseElement).toMatchSnapshot();
-    });
-  };
+  describe('renders snapshot for prop:disabledBefore', () => {
+    const mapper: Record<string, any> = {
+      disabledBefore: valueHelper('10/10/2020', { required: true }),
+    };
+    testHelper(mapper, testFunc);
+  });
 
-  testHelper(mapper, testFunc);
+  describe('renders snapshot for prop:disabledAfter', () => {
+    const mapper: Record<string, any> = {
+      disabledAfter: valueHelper('10/10/2021', { required: true }),
+    };
+    testHelper(mapper, testFunc);
+  });
 });
 
-describe('DatePicker component', () => {
+describe('DatePicker component today date chip', () => {
   it('renders component with today date chip', () => {
-    const { getByTestId } = render(<DatePicker date={new Date(2021, 9, 8)} />);
+    const { getByTestId } = render(<DatePicker date={newDate} />);
     expect(getByTestId('DesignSystem-Select--TodaysDate-wrapper')).toBeInTheDocument();
   });
 
   it('calls click handler', () => {
-    const { getByTestId } = render(<DatePicker onDateChange={FunctionValue} date={new Date(2021, 9, 25)} />);
+    const { getByTestId } = render(<DatePicker onDateChange={FunctionValue} date={newDate} />);
     const chip = getByTestId('DesignSystem-Chip--GenericChip');
     fireEvent.click(chip);
     expect(FunctionValue).toHaveBeenCalled();
   });
 });
+
+describe('renders DatePicker component Event Handlers ', () => {
+  it('checks for trigger popover on input field click', () => {
+    const { getByTestId } = render(<DatePicker onDateChange={FunctionValue} withInput={true} />);
+    const input = getByTestId('DesignSystem-InputWrapper');
+    fireEvent.click(input);
+    expect(getByTestId('DesignSystem-Popover')).toBeInTheDocument();
+  });
+
+  it('checks for input field onChange event', () => {
+    const { getByTestId } = render(<DatePicker onDateChange={FunctionValue} withInput={true} />);
+    const input = getByTestId('DesignSystem-Input');
+    fireEvent.change(input, { target: { value: newDate } });
+    expect(FunctionValue).toHaveBeenCalled();
+  });
+
+  it('checks onCancel Event', () => {
+    const { getByTestId } = render(<DatePicker onDateChange={FunctionValue} withInput={true} date={newDate} />);
+    const closeIcon = getByTestId('DesignSystem-Input--closeIcon');
+    expect(closeIcon).toBeInTheDocument();
+    fireEvent.click(closeIcon);
+    expect(getByTestId('DesignSystem-Popover')).toBeInTheDocument();
+  });
+
+  it('checks onCancel Event in case of required:true', () => {
+    const { getByTestId, getAllByTestId } = render(
+      <DatePicker
+        onDateChange={FunctionValue}
+        withInput={true}
+        date={newDate}
+        inputOptions={{
+          required: true,
+        }}
+      />
+    );
+    const closeIcon = getByTestId('DesignSystem-Input--closeIcon');
+    expect(closeIcon).toBeInTheDocument();
+    fireEvent.click(closeIcon);
+    expect(getByTestId('DesignSystem-Caption')).toBeInTheDocument();
+    expect(getAllByTestId('DesignSystem-Text')[0]).toHaveTextContent('Invalid value');
+  });
+
+  it('checks for custom caption onCancel Event', () => {
+    const { getByTestId, getAllByTestId } = render(
+      <DatePicker
+        onDateChange={FunctionValue}
+        withInput={true}
+        date={newDate}
+        inputOptions={{
+          required: true,
+          caption: 'Invalid Date Entered',
+        }}
+      />
+    );
+    const closeIcon = getByTestId('DesignSystem-Input--closeIcon');
+    fireEvent.click(closeIcon);
+    expect(getByTestId('DesignSystem-Caption')).toBeInTheDocument();
+    expect(getAllByTestId('DesignSystem-Text')[0]).toHaveTextContent('Invalid Date Entered');
+  });
+
+  it('checks for custom placeholderChar option onClose Event', () => {
+    const { getByTestId } = render(
+      <DatePicker
+        onDateChange={FunctionValue}
+        withInput={true}
+        date={newDate}
+        inputOptions={{
+          required: true,
+          placeholderChar: '*',
+        }}
+      />
+    );
+    const closeIcon = getByTestId('DesignSystem-Input--closeIcon');
+    fireEvent.click(closeIcon);
+    expect(getByTestId('DesignSystem-Input')).toHaveValue('**/**/****');
+  });
+
+  it('checks onBlur Event', () => {
+    const { getByTestId } = render(<DatePicker onDateChange={FunctionValue} withInput={true} date={newDate} />);
+    const closeIcon = getByTestId('DesignSystem-Input--closeIcon');
+    const input = getByTestId('DesignSystem-Input');
+    fireEvent.click(closeIcon);
+    fireEvent.blur(input);
+    expect(input).toHaveValue('__/__/____');
+  });
+});