@epam/uui 5.5.0 → 5.5.2

package/components/inputs/__tests__/InputAddon.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { renderer } from '@epam/uui-test-utils';
+import { InputAddon } from '../InputAddon';
+
+describe('InputAddon', () => {
+    describe('InputAddon', () => {
+        it('should be rendered correctly', () => {
+            const tree = renderer.create(<InputAddon content="Test Content" cx="custom-class" />).toJSON();
+            expect(tree).toMatchSnapshot();
+        });
+    });
+});

package/components/inputs/__tests__/MultiSwitch.test.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { MultiSwitch } from '../MultiSwitch';
+import { renderer } from '@epam/uui-test-utils';
+
+it('should be rendered correctly', () => {
+    const tree = renderer
+        .create(
+            <MultiSwitch
+                value={ 1 }
+                onValueChange={ jest.fn }
+                items={ [{ id: 1, caption: 'On' }, { id: 2, caption: 'Off' }] }
+            />,
+        )
+        .toJSON();
+    expect(tree).toMatchSnapshot();
+});

package/components/inputs/__tests__/NumericInput.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { NumericInput } from '../NumericInput';
+import {
+    renderSnapshotWithContextAsync,
+} from '@epam/uui-test-utils';
+
+describe('NumericInput', () => {
+    describe('snapshots', () => {
+        it('should be rendered with minimum props', async () => {
+            const tree = await renderSnapshotWithContextAsync(<NumericInput value={ null } onValueChange={ jest.fn } min={ 0 } max={ 50 } />);
+            expect(tree).toMatchSnapshot();
+        });
+
+        it('should be rendered with maximum props', async () => {
+            const tree = await renderSnapshotWithContextAsync(<NumericInput value={ null } onValueChange={ jest.fn } min={ 0 } max={ 50 } size="36" mode="inline" />);
+            expect(tree).toMatchSnapshot();
+        });
+    });
+});

package/components/inputs/__tests__/RadioInput.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { RadioInput } from '../RadioInput';
+import { renderer } from '@epam/uui-test-utils';
+
+describe('RadioInput', () => {
+    it('should be rendered correctly', () => {
+        const tree = renderer.create(<RadioInput value={ null } onValueChange={ jest.fn } />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should be rendered correctly', () => {
+        const tree = renderer.create(<RadioInput value={ null } onValueChange={ jest.fn } size="18" label="Open" />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});

package/components/inputs/__tests__/Slider.test.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { Slider } from '../Slider';
+import {
+    mockReactPortalsForSnapshots,
+    renderSnapshotWithContextAsync,
+} from '@epam/uui-test-utils';
+
+describe('Slider', () => {
+    it('should render with minimum props', async () => {
+        const { mockClear } = mockReactPortalsForSnapshots();
+        const tree = await renderSnapshotWithContextAsync(<Slider value={ null } onValueChange={ jest.fn } min={ 0 } max={ 50 } step={ 1 } />);
+        mockClear();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should render with maximum props', async () => {
+        const { mockClear } = mockReactPortalsForSnapshots();
+        const tree = await renderSnapshotWithContextAsync(<Slider value={ null } onValueChange={ jest.fn } min={ 0 } max={ 50 } step={ 1 } renderLabel={ (num) => `${num}` } />);
+        mockClear();
+        expect(tree).toMatchSnapshot();
+    });
+});

package/components/inputs/__tests__/Switch.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Switch } from '../Switch';
+import { renderer } from '@epam/uui-test-utils';
+
+describe('Switch', () => {
+    it('should be rendered correctly', () => {
+        const tree = renderer.create(<Switch value={ null } onValueChange={ jest.fn } />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should be rendered correctly', () => {
+        const tree = renderer.create(<Switch value={ null } onValueChange={ jest.fn } size="18" label="Open" />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});

package/components/inputs/__tests__/TextArea.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { TextArea } from '../TextArea';
+import { renderer } from '@epam/uui-test-utils';
+
+describe('TextArea', () => {
+    it('should be rendered correctly', () => {
+        const tree = renderer.create(<TextArea value={ null } onValueChange={ jest.fn } />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should be rendered correctly', () => {
+        const tree = renderer.create(<TextArea value={ null } onValueChange={ jest.fn } placeholder="Type here" size="36" maxLength={ 200 } rows={ 4 } mode="inline" />).toJSON();
+        expect(tree).toMatchSnapshot();
+    });
+});

package/components/inputs/__tests__/TextInput.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { TextInput } from '../TextInput';
+import { renderSnapshotWithContextAsync } from '@epam/uui-test-utils';
+import { ReactComponent as CalendarIcon } from '../../../icons/calendar-18.svg';
+
+describe('TextInput', () => {
+    it('should be rendered correctly', async () => {
+        const tree = await renderSnapshotWithContextAsync(<TextInput value={ null } onValueChange={ jest.fn } />);
+
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should be rendered correctly', async () => {
+        const tree = await renderSnapshotWithContextAsync(
+            <TextInput value={ null } onValueChange={ jest.fn } onAccept={ jest.fn } onCancel={ jest.fn } icon={ CalendarIcon } iconPosition="right" size="36" isDropdown isOpen />,
+        );
+
+        expect(tree).toMatchSnapshot();
+    });
+});

package/components/inputs/__tests__/TimePicker.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { TimePicker } from '../TimePicker';
+import { renderSnapshotWithContextAsync } from '@epam/uui-test-utils';
+
+describe('TimePicker', () => {
+    it('should be rendered correctly', async () => {
+        const tree = await renderSnapshotWithContextAsync(<TimePicker value={ null } onValueChange={ jest.fn } />);
+
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should be rendered correctly', async () => {
+        const tree = await renderSnapshotWithContextAsync(
+            <TimePicker value={ { hours: 1, minutes: 5 } } onValueChange={ jest.fn } format={ 24 } minutesStep={ 5 } size="36" isDisabled />,
+        );
+
+        expect(tree).toMatchSnapshot();
+    });
+});

package/components/inputs/__tests__/TimePickerBody.test.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { TimePickerBody } from '../TimePickerBody';
+import { renderSnapshotWithContextAsync } from '@epam/uui-test-utils';
+import MockDate from 'mockdate';
+import { systemIcons } from '../../../icons/icons';
+
+const arrowIcon = systemIcons[30].foldingArrow;
+
+beforeEach(() => {
+    MockDate.set(new Date('2020-12-09T01:02:03+00:00'));
+});
+
+afterEach(() => {
+    MockDate.reset();
+});
+
+describe('TimePickerBody', () => {
+    it('should be rendered with minimum props', async () => {
+        const tree = await renderSnapshotWithContextAsync(<TimePickerBody value={ { hours: 12, minutes: 30 } } onValueChange={ jest.fn } />);
+
+        expect(tree).toMatchSnapshot();
+    });
+
+    it('should be rendered with maximum props', async () => {
+        const tree = await renderSnapshotWithContextAsync(
+            <TimePickerBody
+                value={ { hours: 12, minutes: 30 } }
+                onValueChange={ jest.fn }
+                format={ 12 }
+                minutesStep={ 5 }
+                addIcon={ arrowIcon }
+                subtractIcon={ arrowIcon }
+            />,
+        );
+
+        expect(tree).toMatchSnapshot();
+    });
+});

package/components/inputs/__tests__/__snapshots__/Checkbox.test.tsx.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Checkbox should be rendered correctly 1`] = `
+<label
+  className="container uui-checkbox-container root size-18 mode-form uui-color-primary -clickable"
+>
+  <div
+    className="uui-checkbox"
+  >
+    <input
+      aria-checked={false}
+      checked={false}
+      onChange={[Function]}
+      tabIndex={0}
+      type="checkbox"
+    />
+  </div>
+</label>
+`;
+
+exports[`Checkbox should be rendered correctly 2`] = `
+<label
+  className="container uui-checkbox-container root size-18 mode-cell uui-color-primary -clickable"
+>
+  <div
+    className="uui-checkbox"
+  >
+    <input
+      aria-checked={false}
+      checked={false}
+      onChange={[Function]}
+      tabIndex={0}
+      type="checkbox"
+    />
+  </div>
+</label>
+`;

package/components/inputs/__tests__/__snapshots__/InputAddon.test.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InputAddon InputAddon should be rendered correctly 1`] = `
+<div
+  className="prefixWrapper root custom-class uui-input-addon"
+>
+  Test Content
+</div>
+`;

package/components/inputs/__tests__/__snapshots__/MultiSwitch.test.tsx.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should be rendered correctly 1`] = `
+<div
+  className="container root"
+  role="tablist"
+>
+  <button
+    aria-current={true}
+    className="container uui-button-box uui-enabled -clickable root uui-button uui-fill-solid uui-color-primary uui-size-36"
+    onClick={[Function]}
+    role="tab"
+    tabIndex={0}
+    type="button"
+  >
+    <div
+      className="uui-caption"
+    >
+      On
+    </div>
+  </button>
+  <button
+    aria-current={false}
+    className="container uui-button-box uui-enabled -clickable root uui-button uui-fill-outline uui-color-primary uui-size-36"
+    onClick={[Function]}
+    role="tab"
+    tabIndex={0}
+    type="button"
+  >
+    <div
+      className="uui-caption"
+    >
+      Off
+    </div>
+  </button>
+</div>
+`;

package/components/inputs/__tests__/__snapshots__/NumericInput.test.tsx.snap

@@ -0,0 +1,95 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NumericInput snapshots should be rendered with maximum props 1`] = `
+<div
+  className="container uui-input-box -clickable root root size-36 size-36 mode-inline"
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  tabIndex={-1}
+>
+  <input
+    className="uui-input"
+    inputMode="numeric"
+    max={50}
+    min={0}
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    placeholder="0"
+    tabIndex={0}
+    type="number"
+    value=""
+  />
+  <div
+    className="uui-numeric-input-button-group"
+  >
+    <div
+      className="container uui-icon uui-enabled -clickable uui-numeric-input-up-button"
+      onClick={[Function]}
+      role="button"
+      style={Object {}}
+    >
+      <svg
+        className=""
+      />
+    </div>
+    <div
+      className="container uui-icon uui-enabled -clickable uui-numeric-input-down-button"
+      onClick={[Function]}
+      role="button"
+      style={Object {}}
+    >
+      <svg
+        className=""
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`NumericInput snapshots should be rendered with minimum props 1`] = `
+<div
+  className="container uui-input-box -clickable root root size-36 size-36 mode-form"
+  onFocus={[Function]}
+  onKeyDown={[Function]}
+  tabIndex={-1}
+>
+  <input
+    className="uui-input"
+    inputMode="numeric"
+    max={50}
+    min={0}
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    placeholder="0"
+    tabIndex={0}
+    type="number"
+    value=""
+  />
+  <div
+    className="uui-numeric-input-button-group"
+  >
+    <div
+      className="container uui-icon uui-enabled -clickable uui-numeric-input-up-button"
+      onClick={[Function]}
+      role="button"
+      style={Object {}}
+    >
+      <svg
+        className=""
+      />
+    </div>
+    <div
+      className="container uui-icon uui-enabled -clickable uui-numeric-input-down-button"
+      onClick={[Function]}
+      role="button"
+      style={Object {}}
+    >
+      <svg
+        className=""
+      />
+    </div>
+  </div>
+</div>
+`;

package/components/inputs/__tests__/__snapshots__/RadioInput.test.tsx.snap

@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RadioInput should be rendered correctly 1`] = `
+<label
+  className="container root size-18 uui-radio-input-container uui-color-primary -clickable"
+>
+  <div
+    className="uui-radioinput"
+  >
+    <input
+      aria-checked={false}
+      checked={false}
+      onChange={[Function]}
+      type="radio"
+    />
+  </div>
+</label>
+`;
+
+exports[`RadioInput should be rendered correctly 2`] = `
+<label
+  className="container root size-18 uui-radio-input-container uui-color-primary -clickable"
+>
+  <div
+    className="uui-radioinput"
+  >
+    <input
+      aria-checked={false}
+      checked={false}
+      onChange={[Function]}
+      type="radio"
+    />
+  </div>
+  <div
+    className="uui-input-label"
+  >
+    Open
+  </div>
+</label>
+`;

package/components/inputs/__tests__/__snapshots__/Slider.test.tsx.snap

@@ -0,0 +1,157 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Slider should render with maximum props 1`] = `
+<div
+  className="uui-slider-container root root uui-color-neutral"
+  onClick={[Function]}
+  onMouseDown={[Function]}
+>
+  <div
+    className="uui-slider"
+  />
+  <div
+    className="uui-slider-filled"
+    style={
+      Object {
+        "width": 0,
+      }
+    }
+  />
+  <div
+    className="uui-slider-scale"
+  >
+    <div
+      className="uui-slider-scale-dot"
+      style={
+        Object {
+          "transform": "translateX(0px)",
+        }
+      }
+    />
+    <div
+      className="uui-slider-scale-number"
+      style={
+        Object {
+          "transform": "translateX(0px)",
+        }
+      }
+    >
+      0
+    </div>
+    <div
+      className="uui-slider-scale-dot"
+      style={
+        Object {
+          "transform": "translateX(0px)",
+        }
+      }
+    />
+    <div
+      className="uui-slider-scale-number"
+      style={
+        Object {
+          "transform": "translateX(0px)",
+        }
+      }
+    >
+      50
+    </div>
+  </div>
+  <div
+    aria-valuemax={50}
+    aria-valuemin={0}
+    aria-valuenow={null}
+    className="uui-slider-handle root uui-color-neutral"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDown={[Function]}
+    onMouseUp={[Function]}
+    role="slider"
+    style={
+      Object {
+        "transform": "translateX(0px)",
+      }
+    }
+    tabIndex={0}
+  />
+</div>
+`;
+
+exports[`Slider should render with minimum props 1`] = `
+<div
+  className="uui-slider-container root root uui-color-neutral"
+  onClick={[Function]}
+  onMouseDown={[Function]}
+>
+  <div
+    className="uui-slider"
+  />
+  <div
+    className="uui-slider-filled"
+    style={
+      Object {
+        "width": 0,
+      }
+    }
+  />
+  <div
+    className="uui-slider-scale"
+  >
+    <div
+      className="uui-slider-scale-dot"
+      style={
+        Object {
+          "transform": "translateX(0px)",
+        }
+      }
+    />
+    <div
+      className="uui-slider-scale-number"
+      style={
+        Object {
+          "transform": "translateX(0px)",
+        }
+      }
+    >
+      0
+    </div>
+    <div
+      className="uui-slider-scale-dot"
+      style={
+        Object {
+          "transform": "translateX(0px)",
+        }
+      }
+    />
+    <div
+      className="uui-slider-scale-number"
+      style={
+        Object {
+          "transform": "translateX(0px)",
+        }
+      }
+    >
+      50
+    </div>
+  </div>
+  <div
+    aria-valuemax={50}
+    aria-valuemin={0}
+    aria-valuenow={null}
+    className="uui-slider-handle root uui-color-neutral"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onMouseDown={[Function]}
+    onMouseUp={[Function]}
+    role="slider"
+    style={
+      Object {
+        "transform": "translateX(0px)",
+      }
+    }
+    tabIndex={0}
+  />
+</div>
+`;

package/components/inputs/__tests__/__snapshots__/Switch.test.tsx.snap

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Switch should be rendered correctly 1`] = `
+<label
+  className="uui-switch container root size-18 uui-color-primary -clickable"
+>
+  <div
+    className="uui-switch-body"
+  >
+    <input
+      aria-checked={false}
+      checked={false}
+      onChange={[Function]}
+      role="switch"
+      type="checkbox"
+    />
+    <div
+      className="uui-switch-toggler"
+    />
+  </div>
+</label>
+`;
+
+exports[`Switch should be rendered correctly 2`] = `
+<label
+  className="uui-switch container root size-18 uui-color-primary -clickable"
+>
+  <div
+    className="uui-switch-body"
+  >
+    <input
+      aria-checked={false}
+      checked={false}
+      onChange={[Function]}
+      role="switch"
+      type="checkbox"
+    />
+    <div
+      className="uui-switch-toggler"
+    />
+  </div>
+  <div
+    className="uui-input-label"
+  >
+    Open
+  </div>
+</label>
+`;

package/components/inputs/__tests__/__snapshots__/TextArea.test.tsx.snap

@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TextArea should be rendered correctly 1`] = `
+<div
+  className="container uui-input-box root size-36 mode-form"
+  onFocus={[Function]}
+  tabIndex={-1}
+>
+  <textarea
+    className="-clickable noAutoSize uui-input"
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    tabIndex={0}
+    value=""
+  />
+</div>
+`;
+
+exports[`TextArea should be rendered correctly 2`] = `
+<div
+  className="container uui-input-box root size-36 mode-inline"
+  onFocus={[Function]}
+  tabIndex={-1}
+>
+  <textarea
+    className="-clickable noAutoSize uui-input"
+    maxLength={200}
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    placeholder="Type here"
+    rows={4}
+    tabIndex={0}
+    value=""
+  />
+</div>
+`;