Merge pull request #86 from ljmotta/improve-time-field

Improvements on TextField and DateField components
aerogear · Jul 15, 2021 · 27b02f3 · 27b02f3
2 parents 733e3a8 + fd7a7d6
commit 27b02f3
Show file tree

Hide file tree

Showing 7 changed files with 454 additions and 105 deletions.
diff --git a/__tests__/DateField.tsx b/__tests__/DateField.tsx
@@ -88,17 +88,10 @@ test('<DateField> - renders a input with correct value (model)', () => {
     createContext({ x: { type: Date } }, { model: { x: now } })
   );
 
-  let isAm = true;
-  let hours = now.getHours();
-  if (hours > 12) {
-    hours %= 12;
-    isAm = false;
-  }
-  const minutes = now.getMinutes();
-  const time = `${hours}:${minutes} ${isAm ? 'AM' : 'PM'}`;
-
   expect(wrapper.find('input')).toHaveLength(2);
-  expect(wrapper.find('TimePicker').prop('value')).toEqual(time);
+  expect(wrapper.find('TimePicker').prop('value')).toEqual(
+    `${now.getUTCHours()}:${now.getUTCMinutes()}`
+  );
 });
 
 test('<DateField> - renders a input with correct value (specified)', () => {
@@ -128,7 +121,7 @@ test('<DateField> - renders a input which correctly reacts on change (DatePicker
     } as any);
   });
 
-  expect(onChange).toHaveBeenLastCalledWith('x', new Date(`${now}T00:00:00`));
+  expect(onChange).toHaveBeenLastCalledWith('x', new Date(`${now}T00:00:00Z`));
 });
 
 test('<DateField> - renders a input which correctly reacts on change (DatePicker - empty)', () => {
@@ -152,7 +145,7 @@ test('<DateField> - renders a input which correctly reacts on change (DatePicker
 test('<DateField> - renders a input which correctly reacts on change (TimePicker - invalid)', () => {
   const onChange = jest.fn();
 
-  const now = '10:00 AM';
+  const now = '10:00';
   const element = <DateField name="x" />;
   const wrapper = mount(
     element,
@@ -168,12 +161,12 @@ test('<DateField> - renders a input which correctly reacts on change (TimePicker
   expect(onChange).not.toHaveBeenCalled();
 });
 
-test.skip('<DateField> - renders a input which correctly reacts on change (TimePicker - valid)', () => {
+test('<DateField> - renders a input which correctly reacts on change (TimePicker - valid)', () => {
   const onChange = jest.fn();
 
   const date = '2000-04-04';
-  const time = '10:30 AM';
-  const element = <DateField name="x" value={new Date(`${date}T00:00:00`)} />;
+  const time = '10:30';
+  const element = <DateField name="x" value={new Date(`${date}T00:00:00Z`)} />;
   const wrapper = mount(
     element,
     createContext({ x: { type: Date } }, { onChange })
@@ -185,7 +178,7 @@ test.skip('<DateField> - renders a input which correctly reacts on change (TimeP
     } as any);
   });
 
-  expect(onChange).toHaveBeenLastCalledWith('x', new Date(`${date}T10:30:00`));
+  expect(onChange).toHaveBeenLastCalledWith('x', new Date(`${date}T10:30:00Z`));
 });
 
 test('<DateField> - renders a wrapper with unknown props', () => {
@@ -196,3 +189,67 @@ test('<DateField> - renders a wrapper with unknown props', () => {
   expect(wrapper.find('div').at(0).prop('data-y')).toBe('y');
   expect(wrapper.find('div').at(0).prop('data-z')).toBe('z');
 });
+
+test('<DateField> - test max property - valid', () => {
+  const onChange = jest.fn();
+
+  const date = '1998-12-31';
+  const max = '1999-01-01T00:00:00Z';
+  const element = (
+    <DateField name="x" max={max} value={new Date(`${date}T00:00:00Z`)} />
+  );
+  const wrapper = mount(
+    element,
+    createContext({ x: { type: Date } }, { onChange })
+  );
+
+  expect(wrapper.text().includes('Should be before')).toBe(false);
+});
+
+test('<DateField> - test max property - invalid', () => {
+  const onChange = jest.fn();
+
+  const date = '1999-01-02';
+  const max = '1999-01-01T00:00:00Z';
+  const element = (
+    <DateField name="x" max={max} value={new Date(`${date}T00:00:00Z`)} />
+  );
+  const wrapper = mount(
+    element,
+    createContext({ x: { type: Date } }, { onChange })
+  );
+
+  expect(wrapper.text().includes('Should be before')).toBe(true);
+});
+
+test('<DateField> - test min property - valid', () => {
+  const onChange = jest.fn();
+
+  const date = '1999-01-02';
+  const min = '1999-01-01T00:00:00Z';
+  const element = (
+    <DateField name="x" min={min} value={new Date(`${date}T00:00:00Z`)} />
+  );
+  const wrapper = mount(
+    element,
+    createContext({ x: { type: Date } }, { onChange })
+  );
+
+  expect(wrapper.text().includes('Should be after')).toBe(false);
+});
+
+test('<DateField> - test min property - invalid', () => {
+  const onChange = jest.fn();
+
+  const date = '1998-12-31';
+  const min = '1999-01-01T00:00:00Z';
+  const element = (
+    <DateField name="x" min={min} value={new Date(`${date}T00:00:00Z`)} />
+  );
+  const wrapper = mount(
+    element,
+    createContext({ x: { type: Date } }, { onChange })
+  );
+
+  expect(wrapper.text().includes('Should be after')).toBe(true);
+});
diff --git a/__tests__/TextField.tsx b/__tests__/TextField.tsx
@@ -243,3 +243,168 @@ test('<TextField> - renders a input which correctly reacts on change (DatePicker
 
   expect(onChange).toHaveBeenLastCalledWith('x', date);
 });
+
+test('<TextField> - renders a initial value on time field (TimePicker)', () => {
+  const time = '10:00';
+  const element = (
+    <TextField required={true} name="x" label="y" type={'time'} />
+  );
+  const wrapper = mount(
+    element,
+    createContext({ x: { type: String } }, { model: { x: time } })
+  );
+
+  expect(wrapper.find('TimePicker')).toHaveLength(1);
+  expect(wrapper.find('TimePicker').prop('value')).toBe(time);
+});
+
+test('<TextField> - renders a disabled date field (TimePicker)', () => {
+  const element = (
+    <TextField
+      required={true}
+      name="x"
+      label="y"
+      type={'time'}
+      disabled={true}
+    />
+  );
+  const wrapper = mount(element, createContext({ x: { type: String } }));
+
+  expect(wrapper.find('TimePicker')).toHaveLength(1);
+  expect(wrapper.find('input').prop('disabled')).toBe(true);
+});
+
+test('<TextField> - renders a input which correctly reacts on change (TimePicker)', () => {
+  const onChange = jest.fn();
+
+  const time = '10:10';
+  const element = (
+    <TextField required={true} name="x" label="y" type={'time'} />
+  );
+  const wrapper = mount(
+    element,
+    createContext({ x: { type: String } }, { onChange })
+  );
+
+  act(() => {
+    wrapper.find('TimePicker').find('input').prop('onChange')!({
+      currentTarget: { value: time },
+    } as any);
+  });
+
+  expect(wrapper.find('label')).toHaveLength(1);
+  expect(wrapper.find('label').text()).toBe('y *');
+  expect(onChange).toHaveBeenLastCalledWith('x', '10:10:00');
+});
+
+test('<TextField> - renders a input which correctly reacts on change (TimePicker - empty)', () => {
+  const onChange = jest.fn();
+
+  const time = '';
+  const element = (
+    <TextField required={true} name="x" label="y" type={'time'} />
+  );
+  const wrapper = mount(
+    element,
+    createContext({ x: { type: String } }, { onChange })
+  );
+
+  expect(wrapper.find('label')).toHaveLength(1);
+  expect(wrapper.find('label').text()).toBe('y *');
+
+  act(() => {
+    wrapper.find('TimePicker').find('input').prop('onChange')!({
+      currentTarget: { value: time },
+    } as any);
+  });
+
+  expect(onChange).toHaveBeenLastCalledWith('x', time);
+});
+
+test('<TextField> - test max property (TimePicker - valid)', () => {
+  const time = '10:00';
+  const max = '12:00';
+  const element = (
+    <TextField name="x" label="y" max={max} type={'time'} value={time} />
+  );
+  const wrapper = mount(element, createContext({ x: { type: String } }));
+
+  expect(wrapper.text().includes('Should be before')).toBe(false);
+});
+
+test('<TextField> - test max property (TimePicker - invalid)', () => {
+  const time = '13:00';
+  const max = '12:00';
+  const element = (
+    <TextField name="x" label="y" max={max} type={'time'} value={time} />
+  );
+  const wrapper = mount(element, createContext({ x: { type: String } }));
+
+  expect(wrapper.text().includes('Should be before')).toBe(true);
+});
+
+test('<TextField> - test min property (TimePicker - valid)', () => {
+  const time = '13:00';
+  const min = '12:00';
+  const element = (
+    <TextField name="x" label="y" min={min} type={'time'} value={time} />
+  );
+  const wrapper = mount(element, createContext({ x: { type: String } }));
+
+  expect(wrapper.text().includes('Should be after')).toBe(false);
+});
+
+test('<TextField> - test min property (TimePicker - invalid)', () => {
+  const time = '10:00';
+  const min = '12:00';
+  const element = (
+    <TextField name="x" label="y" min={min} type={'time'} value={time} />
+  );
+  const wrapper = mount(element, createContext({ x: { type: String } }));
+
+  expect(wrapper.text().includes('Should be after')).toBe(true);
+});
+
+test('<TextField> - test max property (DatePicker - valid)', () => {
+  const date = '2000-01-01';
+  const max = '2000-01-02';
+  const element = (
+    <TextField name="x" label="y" max={max} type={'date'} value={date} />
+  );
+  const wrapper = mount(element, createContext({ x: { type: String } }));
+
+  expect(wrapper.text().includes('Should be before')).toBe(false);
+});
+
+test('<TextField> - test max property (DatePicker - invalid)', () => {
+  const date = '2000-01-02';
+  const max = '2000-01-01';
+  const element = (
+    <TextField name="x" label="y" max={max} type={'date'} value={date} />
+  );
+  const wrapper = mount(element, createContext({ x: { type: String } }));
+
+  expect(wrapper.text().includes('Should be before')).toBe(true);
+});
+
+test('<TextField> - test min property (DatePicker - valid)', () => {
+  const date = '2000-01-02';
+  const min = '2000-01-01';
+  const element = (
+    <TextField name="x" label="y" min={min} type={'date'} value={date} />
+  );
+  const wrapper = mount(element, createContext({ x: { type: String } }));
+
+  expect(wrapper.text().includes('Should be after')).toBe(false);
+});
+
+test('<TextField> - test min property (DatePicker - invalid)', () => {
+  const date = '2000-01-01';
+  const min = '2000-01-02';
+  const element = (
+    <TextField name="x" label="y" min={min} type={'date'} value={date} />
+  );
+  const wrapper = mount(element, createContext({ x: { type: String } }));
+
+  expect(wrapper.text().includes('Should be after')).toBe(true);
+});
diff --git a/examples/package.json b/examples/package.json
@@ -7,8 +7,8 @@
     "start": "parcel serve  --no-cache index.html"
   },
   "dependencies": {
-    "@patternfly/react-core": "4.115.2",
-    "@patternfly/react-icons": "4.10.2",
+    "@patternfly/react-core": "4.135.0",
+    "@patternfly/react-icons": "4.11.0",
     "ajv": "6.10.2",
     "react": "16.13.1",
     "react-dom": "16.13.1",
@@ -19,7 +19,7 @@
     "uniforms-bridge-json-schema": "3.5.1",
     "uniforms-bridge-simple-schema": "3.5.1",
     "uniforms-bridge-simple-schema-2": "3.5.1",
-    "uniforms-patternfly": "4.6.1"
+    "uniforms-patternfly": "4.6.2"
   },
   "devDependencies": {
     "parcel-bundler": "^1.12.5",

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "uniforms-patternfly",
-  "version": "4.6.1",
+  "version": "4.6.2",
   "description": "Patternfly forms for uniforms",
   "repository": "git@github.com:aerogear/uniforms-patternfly.git",
   "author": "Gianluca <gzuccare@redhat.com>",
@@ -25,8 +25,8 @@
     "@babel/preset-env": "7.11.0",
     "@babel/preset-react": "7.10.4",
     "@babel/preset-typescript": "7.10.4",
-    "@patternfly/react-core": "4.115.2",
-    "@patternfly/react-icons": "4.10.2",
+    "@patternfly/react-core": "4.135.0",
+    "@patternfly/react-icons": "4.11.0",
     "@testing-library/react": "10.4.9",
     "@types/classnames": "2.2.11",
     "@types/enzyme": "3.10.8",
@@ -66,8 +66,8 @@
     "uniforms-bridge-simple-schema-2": "3.5.1"
   },
   "peerDependencies": {
-    "@patternfly/react-core": "^4.115.2",
-    "@patternfly/react-icons": "^4.10.2"
+    "@patternfly/react-core": "^4.135.0",
+    "@patternfly/react-icons": "^4.11.0"
   },
   "engines": {
     "npm": ">=5.0.0"