-
Notifications
You must be signed in to change notification settings - Fork 37
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
STCOM-1119 Timepicker vs React-fin- er, um Redux-form (aka stsmacom's…
… ChangeDueDateDialog) (#1988) * use current time in timedropdown if no time is selected - also address overuse of padZero * add test for bug fix * if only I had a dime for every time I used only * add mapping for onBlur, onFocus props to timepicker * add onBlur/onFocus handlers to Timepicker * correctly apply props- useInput and outputBackendValue for react-final-form usage in timepicker * lint and wash code * update timepicker test * mild timepicker test refactor * split out timepicker redux-form tests/interactor * maybe not use *actual redux-form * Conform to the ICU update in node/chrome * add to comment regarding onBlur
Showing
7 changed files
with
210 additions
and
98 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,56 @@ | ||
import React from 'react'; | ||
import { describe, beforeEach, it } from 'mocha'; | ||
import sinon from 'sinon'; | ||
import { Field } from 'redux-form'; | ||
import { | ||
converge, | ||
} from '@folio/stripes-testing'; | ||
|
||
import { mountWithContext } from '../../../tests/helpers'; | ||
import TestForm from '../../../tests/TestForm'; | ||
|
||
import Timepicker from '../Timepicker'; | ||
|
||
import { | ||
Timepicker as TimepickerInteractor, | ||
TimeDropdown as TimepickerDropdownInteractor | ||
} from './timepicker-interactor-bt'; | ||
|
||
describe('Timepicker with redux form', () => { | ||
const timepicker = TimepickerInteractor({ id: 'test-time' }); | ||
const timedropdown = TimepickerDropdownInteractor(); | ||
describe('selecting a time', () => { | ||
let timeOutput; | ||
const handleChange = sinon.spy((e) => { | ||
timeOutput = e.target.value; | ||
}); | ||
beforeEach(async () => { | ||
timeOutput = ''; | ||
await handleChange.resetHistory(); | ||
const input = { | ||
onChange: (e) => handleChange(e), | ||
onBlur: (e) => handleChange(e) | ||
} | ||
await mountWithContext( | ||
<Timepicker | ||
input={input} | ||
id="test-time" | ||
/> | ||
); | ||
|
||
await timepicker.fillIn('5:00 PM'); | ||
}); | ||
|
||
it('returns an ISO 8601 time string at UTC', () => converge(() => timeOutput === '17:00:00.000Z')); | ||
it('calls the handler multiple times - on change and onBlur', () => converge(() => handleChange.calledTwice)); | ||
|
||
describe('opening the dropdown', () => { | ||
beforeEach(async () => { | ||
await timepicker.clickDropdownToggle(); | ||
}); | ||
|
||
it('focuses the timeDropdown', () => timedropdown.has({ focused: true })); | ||
it('retains the correct value in the input', () => timepicker.has({ value: '5:00 PM' })); | ||
}); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,52 @@ | ||
import { | ||
HTML, | ||
TextField, | ||
IconButton, | ||
Button, | ||
including, | ||
} from '@folio/stripes-testing'; | ||
|
||
export const TimeDropdown = HTML.extend('time dropdown') | ||
.selector('[data-test-timepicker-dropdown]') | ||
.filters({ | ||
periodToggle: Button({ id: including('period-toggle') }).exists(), | ||
hour: (el) => { | ||
const node = el.querySelector('input[data-test-timepicker-dropdown-hours-input]'); | ||
return node.value ? parseInt(node.value, 10) : ''; | ||
}, | ||
minute: (el) => { | ||
const node = el.querySelector('input[data-test-timepicker-dropdown-minutes-input]'); | ||
return node.value ? parseInt(node.value, 10) : ''; | ||
}, | ||
focused: (el) => el.contains(document.activeElement) | ||
}) | ||
.actions({ | ||
clickPeriodToggle: ({ find }) => find(Button({ id: including('period-toggle') })).click(), | ||
fillHour: ({ find }, value) => find(TextField({ id: including('hour-input') })) | ||
.perform((el) => { | ||
const node = el.querySelector('input'); | ||
const property = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(node), 'value'); | ||
property.set.call(node, value); | ||
node.dispatchEvent(new InputEvent('input', { inputType: 'insertFromPaste', bubbles: true, cancelable: false })); | ||
}), | ||
fillMinute: ({ find }, value) => find(TextField({ id: including('minute-input') })) | ||
.perform((el) => { | ||
const node = el.querySelector('input'); | ||
const property = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(node), 'value'); | ||
property.set.call(node, value); | ||
node.dispatchEvent(new InputEvent('input', { inputType: 'insertFromPaste', bubbles: true, cancelable: false })); | ||
}), | ||
clickConfirm: ({ find }) => find(Button({ id: including('set-time') })).click(), | ||
clickAddMinute: ({ find }) => find(IconButton({ id: including('next-minute') })).click(), | ||
clickAddHour: ({ find }) => find(IconButton({ id: including('next-hour') })).click(), | ||
clickDecrementMinute: ({ find }) => find(IconButton({ id: including('prev-minute') })).click(), | ||
clickDecrementHour: ({ find }) => find(IconButton({ id: including('prev-hour') })).click(), | ||
}); | ||
|
||
export const Timepicker = TextField.extend('timepicker') | ||
.actions({ | ||
clickDropdownToggle: ({ find }) => find(IconButton({ icon: 'clock' })).click(), | ||
clickInput: ({ perform }) => perform((el) => el.querySelector('input').click()), | ||
focusDropdownButton: ({ find }) => find(IconButton({ icon: 'clock' })).focus(), | ||
clickClear: ({ find }) => find(IconButton({ icon: 'times-circle-solid' })).click(), | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters