Version 1.4.4: Fixed bug when inputing a value smaller than 0 in a field

package.json

@@ -10,7 +10,7 @@
 		"duration-picker",
 		"durations"
 	],
-	"version": "1.4.3",
+	"version": "1.4.4",
 	"license": "MIT",
 	"main": "dist/index.js",
 	"author": "tran-simon",

src/__tests__/__snapshots__/durationField.test.tsx.snap

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`durationField can match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
+  >
+    <label
+      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-filled"
+      data-shrink="true"
+    >
+      Minutes
+    </label>
+    <div
+      class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"
+    >
+      <input
+        aria-invalid="false"
+        class="MuiInputBase-input MuiInput-input"
+        type="number"
+        value="30"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`durationField can match snapshot with custom labels 1`] = `
+<DocumentFragment>
+  <div
+    class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
+  >
+    <label
+      class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiFormLabel-filled"
+      data-shrink="true"
+    >
+      CUSTOM_LABEL
+    </label>
+    <div
+      class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl"
+    >
+      <input
+        aria-invalid="false"
+        class="MuiInputBase-input MuiInput-input"
+        type="number"
+        value="30"
+      />
+    </div>
+  </div>
+</DocumentFragment>
+`;

src/__tests__/durationField.test.tsx

@@ -0,0 +1,64 @@
+import {fireEvent, render, screen, waitFor} from "@testing-library/react";
+import * as React from "react";
+import {DurationField} from "../durationField";
+
+describe('durationField', ()=>{
+
+  it('can match snapshot', async () => {
+    await waitFor(() => {
+      expect(
+        render(
+          <DurationField
+            view={"minutes"}
+            duration={{minutes: 30}}
+            onConfirm={() => {
+            }}
+          />
+        ).asFragment()
+      ).toMatchSnapshot();
+    });
+  })
+
+  it('can match snapshot with custom labels', async () => {
+    await waitFor(() => {
+      expect(
+        render(
+          <DurationField
+            labels={{
+              minutes: 'CUSTOM_LABEL'
+            }}
+            view={"minutes"}
+            duration={{minutes: 30}}
+            onConfirm={() => {
+            }}
+          />
+        ).asFragment()
+      ).toMatchSnapshot();
+    });
+  })
+
+
+  it('can confirm value when value is invalid', async () => {
+
+    const mockOnConfirm = jest.fn()
+
+    const utils = render(
+      <DurationField
+        view={"minutes"}
+        duration={{minutes: 30}}
+        onConfirm={mockOnConfirm}
+        inputProps={{
+          title: 'fieldTitle'
+        }}
+        />
+    )
+
+    const field: any= utils.getByTitle('fieldTitle')
+
+    expect(field.value).toBe('30')
+    fireEvent.change(field, {target: {value: NaN}})
+    fireEvent.blur(field)
+    expect(field.value).toBe('')
+    expect(mockOnConfirm).toHaveBeenCalledWith(undefined)
+  })
+})

src/__tests__/durationFieldsContainer.test.tsx

@@ -1,22 +1,24 @@
 import * as React from 'react'
 import {render, waitFor, screen, fireEvent} from '@testing-library/react'
 import {DurationFieldsContainer, DurationFieldsContainerProps} from "../durationFieldsContainer";
+import {durationToTime, timeToDuration} from "../utils";
+import {useState} from "react";
 
 describe('DurationFieldsContainer', () => {
-  const setDurationMock = jest.fn()
+  const setValueMock = jest.fn()
 
   const Comp = ({
     views = ['hours', 'minutes'],
     duration = {hours: 5, minutes: 2},
-    setDuration = setDurationMock,
+    setValue= setValueMock,
     ...props
-  }: Partial<DurationFieldsContainerProps>) => {
+  }: any) => {
     return (
       <DurationFieldsContainer
         {...{
           views,
-          duration,
-          setDuration,
+          value: durationToTime(duration),
+          setValue,
           DurationFieldProps: {
             inputProps: {
               title: 'fieldTitle',
@@ -79,13 +81,10 @@ describe('DurationFieldsContainer', () => {
 
     expect(fields[0].value).toBe('61')
 
-    expect(setDurationMock).toHaveBeenCalledWith({
-      weeks: undefined,
-      days: undefined,
+    expect(setValueMock).toHaveBeenCalledWith(durationToTime({
       hours: 61,
       minutes: 1,
-      seconds: undefined
-    })
+    }));
   })
 
   it('can setDuration to smaller than views show', async () => {
@@ -103,12 +102,45 @@ describe('DurationFieldsContainer', () => {
 
     expect(fields[1].value).toBe('0.5')
 
-    expect(setDurationMock).toHaveBeenCalledWith({
-      weeks: undefined,
-      days: undefined,
+    expect(setValueMock).toHaveBeenCalledWith(durationToTime({
       hours: 1,
       minutes: 0.5,
-      seconds: undefined
-    })
+    }));
+  })
+
+  it('can set a view to a value smaller than 0', async ()=>{
+
+    const Comp = () => {
+
+      const [value, setValue] = useState<number | undefined>(60)
+
+      return <DurationFieldsContainer
+        {...{
+          views: ['days', 'minutes'],
+          value: value,
+          setValue,
+          DurationFieldProps: {
+            inputProps: {
+              title: 'fieldTitle',
+            },
+          },
+        }}
+      />
+    }
+
+    const utils = render(
+      <Comp/>
+    );
+
+    const fields: any[] = utils.getAllByTitle('fieldTitle')
+
+    fireEvent.change(fields[0], {target: {value: '0.5'}})
+
+    expect(fields[0].value).toBe('0.5')
+
+    fireEvent.blur(fields[0])
+
+    expect(fields[0].value).toBe('')
+    expect(fields[1].value).toBe('721')
   })
 })

src/__tests__/durationPicker.test.tsx

@@ -2,13 +2,12 @@ import * as React from 'react'
 import {render, waitFor} from "@testing-library/react";
 import {DurationPicker} from "../durationPicker";
 import * as DurationDialog from '../durationDialog'
+import {DurationField} from "../durationField";
+import {timeToDuration} from "../utils";
 
 
-jest.mock('../durationDialog', () => {
-  return {
-    DurationDialog: ({duration}: any) => (<div>{JSON.stringify(duration)}</div>)
-  }
-})
+jest.spyOn(DurationDialog, 'DurationDialog')
+  .mockImplementation(({time}: any)=> <div>{JSON.stringify(timeToDuration(time))}</div>)
 
 describe('durationPicker', () => {
   const onValueChange = jest.fn()