Skip to content

Commit

Permalink
chore(@clayui/date-picker): update time picker tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@matuzalemsteles
matuzalemsteles committed Jul 22, 2019
1 parent a22e825 commit 9b80a59
Show file tree
Hide file tree
Showing 3 changed files with 238 additions and 70 deletions.
24 changes: 9 additions & 15 deletions packages/clay-date-picker/src/__tests__/IncrementalInteractions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -357,13 +357,9 @@ describe('IncrementalInteractions', () => {
);

const input: any = getByLabelText(ariaLabels.input);
const inputTimePicker: any = getByTestId('time-picker-input');
const hoursEl = getByTestId('hours') as HTMLInputElement;

fireEvent.change(inputTimePicker, {
target: {
value: '00:20',
},
});
fireEvent.keyDown(hoursEl, {key: '10'});

expect(input.value).toBe('');
});
Expand All @@ -381,17 +377,13 @@ describe('IncrementalInteractions', () => {

const input: any = getByLabelText(ariaLabels.input);
const dayNumber = getByLabelText('2019 04 24');
const inputTimePicker: any = getByTestId('time-picker-input');
const hoursEl = getByTestId('hours') as HTMLInputElement;

fireEvent.click(dayNumber);

fireEvent.change(inputTimePicker, {
target: {
value: '00:20',
},
});
fireEvent.keyDown(hoursEl, {key: '10'});

expect(input.value).toBe('2019-04-24 00:20');
expect(input.value).toBe('2019-04-24 10:0');
});

it('value entered in the input value must be reflected in the time picker', () => {
Expand All @@ -406,15 +398,17 @@ describe('IncrementalInteractions', () => {
);

const input: any = getByLabelText(ariaLabels.input);
const inputTimePicker: any = getByTestId('time-picker-input');
const hoursEl = getByTestId('hours') as HTMLInputElement;
const minutesEl = getByTestId('minutes') as HTMLInputElement;

fireEvent.change(input, {
target: {
value: '2019-04-18 01:20',
},
});

expect(inputTimePicker.value).toBe('01:20');
expect(hoursEl.value).toBe('1');
expect(minutesEl.value).toBe('20');
});
});
});
151 changes: 119 additions & 32 deletions packages/clay-date-picker/src/__tests__/__snapshots__/BasicRendering.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1609,43 +1609,130 @@ exports[`BasicRendering renders date picker with time 1`] = `
class="time-picker"
>
<div
class="input-group"
class="clay-time"
>
<div
class="input-group-item input-group-item-shrink"
class="input-group"
>
<span
class="input-group-text"
<div
class="input-group-item input-group-item-shrink"
>
<svg
class="lexicon-icon lexicon-icon-time"
role="presentation"
<div
class="input-group-text"
>
<use
xlink:href="icons.svg#time"
/>
</svg>
</span>
</div>
<div
class="input-group-item"
>
<input
class="form-control"
data-testid="time-picker-input"
name="timer"
type="time"
value="00:00"
/>
</div>
<div
class="input-group-item input-group-item-shrink"
>
<span
class="input-group-text"
>
(GMT+01:00)
</span>
<svg
class="lexicon-icon lexicon-icon-time"
role="presentation"
>
<use
xlink:href="icons.svg#time"
/>
</svg>
</div>
</div>
<div
class="input-group-item input-group-item-shrink"
>
<div
class="form-control"
data-testid="formControl"
>
<div
class="clay-time-edit"
>
<input
class="clay-time-hours form-control-inset"
data-testid="hours"
maxlength="2"
type="text"
value="0"
/>
<span
class="clay-time-divider"
>
:
</span>
<input
class="clay-time-minutes form-control-inset"
data-testid="minutes"
maxlength="2"
type="text"
value="0"
/>
</div>
<div
class="clay-time-action-group"
>
<div
class="clay-time-action-group-item"
data-testid="containerReset"
style="opacity: 0; pointer-events: none;"
>
<button
class="clay-time-clear-btn btn btn-unstyled"
type="button"
>
<svg
class="lexicon-icon lexicon-icon-times-circle"
role="presentation"
>
<use
xlink:href="icons.svg#times-circle"
/>
</svg>
</button>
</div>
<div
class="clay-time-action-group-item"
data-testid="containerSpin"
style="opacity: 0;"
>
<div
class="btn-group-vertical clay-time-inner-spin"
role="group"
>
<button
class="clay-time-inner-spin-btn clay-time-inner-spin-btn-inc btn btn-secondary"
data-testid="spinInc"
type="button"
>
<svg
class="lexicon-icon lexicon-icon-angle-up"
role="presentation"
>
<use
xlink:href="icons.svg#angle-up"
/>
</svg>
</button>
<button
class="clay-time-inner-spin-btn clay-time-inner-spin-btn-dec btn btn-secondary"
data-testid="spinDec"
type="button"
>
<svg
class="lexicon-icon lexicon-icon-angle-down"
role="presentation"
>
<use
xlink:href="icons.svg#angle-down"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
<div
class="input-group-item input-group-item-shrink"
>
<span
class="input-group-text"
>
(GMT+01:00)
</span>
</div>
</div>
</div>
</div>
Expand Down
133 changes: 110 additions & 23 deletions packages/clay-date-picker/src/__tests__/__snapshots__/Internationalization.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4412,34 +4412,121 @@ exports[`Internationalization should render the date picker in russian 1`] = `
class="time-picker"
>
<div
class="input-group"
class="clay-time"
>
<div
class="input-group-item input-group-item-shrink"
class="input-group"
>
<span
class="input-group-text"
<div
class="input-group-item input-group-item-shrink"
>
<svg
class="lexicon-icon lexicon-icon-time"
role="presentation"
<div
class="input-group-text"
>
<use
xlink:href="icons.svg#time"
/>
</svg>
</span>
</div>
<div
class="input-group-item"
>
<input
class="form-control"
data-testid="time-picker-input"
name="timer"
type="time"
value="00:00"
/>
<svg
class="lexicon-icon lexicon-icon-time"
role="presentation"
>
<use
xlink:href="icons.svg#time"
/>
</svg>
</div>
</div>
<div
class="input-group-item input-group-item-shrink"
>
<div
class="form-control"
data-testid="formControl"
>
<div
class="clay-time-edit"
>
<input
class="clay-time-hours form-control-inset"
data-testid="hours"
maxlength="2"
type="text"
value="0"
/>
<span
class="clay-time-divider"
>
:
</span>
<input
class="clay-time-minutes form-control-inset"
data-testid="minutes"
maxlength="2"
type="text"
value="0"
/>
</div>
<div
class="clay-time-action-group"
>
<div
class="clay-time-action-group-item"
data-testid="containerReset"
style="opacity: 0; pointer-events: none;"
>
<button
class="clay-time-clear-btn btn btn-unstyled"
type="button"
>
<svg
class="lexicon-icon lexicon-icon-times-circle"
role="presentation"
>
<use
xlink:href="icons.svg#times-circle"
/>
</svg>
</button>
</div>
<div
class="clay-time-action-group-item"
data-testid="containerSpin"
style="opacity: 0;"
>
<div
class="btn-group-vertical clay-time-inner-spin"
role="group"
>
<button
class="clay-time-inner-spin-btn clay-time-inner-spin-btn-inc btn btn-secondary"
data-testid="spinInc"
type="button"
>
<svg
class="lexicon-icon lexicon-icon-angle-up"
role="presentation"
>
<use
xlink:href="icons.svg#angle-up"
/>
</svg>
</button>
<button
class="clay-time-inner-spin-btn clay-time-inner-spin-btn-dec btn btn-secondary"
data-testid="spinDec"
type="button"
>
<svg
class="lexicon-icon lexicon-icon-angle-down"
role="presentation"
>
<use
xlink:href="icons.svg#angle-down"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Expand Down

0 comments on commit 9b80a59

Please sign in to comment.