From c67cad4b41bd38a7ed4c288952ac3bf6c022949d Mon Sep 17 00:00:00 2001 From: Shaneeza Date: Mon, 18 Dec 2023 16:49:16 -0500 Subject: [PATCH 1/2] add tests --- .../src/DatePicker/DatePicker.spec.tsx | 74 ++++++++++++------- .../DatePickerInput/DatePickerInput.spec.tsx | 18 +++++ .../DatePickerInput/DatePickerInput.tsx | 9 ++- 3 files changed, 71 insertions(+), 30 deletions(-) diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx index b60b7a66b0..c44b4d5282 100644 --- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx +++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx @@ -2122,37 +2122,59 @@ describe('packages/date-picker', () => { }); describe('updating a segment', () => { - test('clearing the segment updates the input', () => { - const { yearInput, monthInput, dayInput } = renderDatePicker({}); - userEvent.type(yearInput, '2020'); - userEvent.type(monthInput, '7'); - userEvent.type(dayInput, '4'); + describe('backspace', () => { + test('clearing the segment updates the input', () => { + const { yearInput, monthInput, dayInput } = renderDatePicker({}); + userEvent.type(yearInput, '2020'); + userEvent.type(monthInput, '7'); + userEvent.type(dayInput, '4'); - yearInput.setSelectionRange(0, 4); - userEvent.type(yearInput, '{backspace}'); - expect(yearInput).toHaveValue(''); - }); + yearInput.setSelectionRange(0, 4); + userEvent.type(yearInput, '{backspace}'); + expect(yearInput).toHaveValue(''); + }); - test('clearing and typing a new value does not format the input', () => { - const { yearInput, monthInput, dayInput } = renderDatePicker({}); - userEvent.type(yearInput, '2020'); - userEvent.type(monthInput, '7'); - userEvent.type(dayInput, '4'); + test('keeps the focus inside the segment if it is not empty', () => { + const { monthInput } = renderDatePicker({}); - yearInput.setSelectionRange(0, 4); - userEvent.type(yearInput, '{backspace}'); - userEvent.type(yearInput, '2'); - expect(yearInput).toHaveValue('2'); - }); + userEvent.type(monthInput, '0'); + userEvent.type(monthInput, '{backspace}'); - test('deleting characters does not format the segment', () => { - const { yearInput, monthInput, dayInput } = renderDatePicker({}); - userEvent.type(yearInput, '2020'); - userEvent.type(monthInput, '7'); - userEvent.type(dayInput, '4'); + expect(monthInput).toHaveValue(''); + expect(monthInput).toHaveFocus(); + }); + + test('moves the focus to the next segment', () => { + const { yearInput, monthInput } = renderDatePicker({}); - userEvent.type(yearInput, '{backspace}{backspace}'); - expect(yearInput).toHaveValue('20'); + userEvent.type(monthInput, '0'); + userEvent.type(monthInput, '{backspace}{backspace}'); + + expect(monthInput).toHaveValue(''); + expect(yearInput).toHaveFocus(); + }); + + test('clearing and typing a new value does not format the input', () => { + const { yearInput, monthInput, dayInput } = renderDatePicker({}); + userEvent.type(yearInput, '2020'); + userEvent.type(monthInput, '7'); + userEvent.type(dayInput, '4'); + + yearInput.setSelectionRange(0, 4); + userEvent.type(yearInput, '{backspace}'); + userEvent.type(yearInput, '2'); + expect(yearInput).toHaveValue('2'); + }); + + test('deleting characters does not format the segment', () => { + const { yearInput, monthInput, dayInput } = renderDatePicker({}); + userEvent.type(yearInput, '2020'); + userEvent.type(monthInput, '7'); + userEvent.type(dayInput, '4'); + + userEvent.type(yearInput, '{backspace}{backspace}'); + expect(yearInput).toHaveValue('20'); + }); }); describe('typing new characters', () => { diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx index 405e49f903..3636047298 100644 --- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx +++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx @@ -103,6 +103,24 @@ describe('packages/date-picker/date-picker-input', () => { userEvent.keyboard('{arrowleft}{arrowleft}{arrowleft}'); expect(yearInput).toHaveFocus(); }); + + test('moves the cursor when the value starts with 0', () => { + const { monthInput } = renderDatePickerInput({}); + userEvent.type(monthInput, '04{arrowleft}{arrowleft}'); + expect(monthInput).toHaveFocus(); + }); + + test('moves the cursor when the value is 0', () => { + const { monthInput } = renderDatePickerInput({}); + userEvent.type(monthInput, '0{arrowleft}'); + expect(monthInput).toHaveFocus(); + }); + + test('moves the cursor to the next segment when the value is 0', () => { + const { yearInput, monthInput } = renderDatePickerInput({}); + userEvent.type(monthInput, '0{arrowleft}{arrowleft}'); + expect(yearInput).toHaveFocus(); + }); }); describe('Right Arrow', () => { diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx index c676f3f3e9..b0bb090d07 100644 --- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx +++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.tsx @@ -7,7 +7,6 @@ import React, { } from 'react'; import { isSameUTCDay } from '@leafygreen-ui/date-utils'; -import { isZeroLike } from '@leafygreen-ui/lib'; import { createSyntheticEvent, keyMap } from '@leafygreen-ui/lib'; import { DateFormField, DateInputBox } from '../../shared/components/DateInput'; @@ -88,7 +87,7 @@ export const DatePickerInput = forwardRef( // if target is not a segment, do nothing if (!isSegment) return; - const isSegmentEmpty = isZeroLike(target.value); + const isSegmentEmpty = !target.value; const { selectionStart, selectionEnd } = target; @@ -97,7 +96,7 @@ export const DatePickerInput = forwardRef( // if input is empty, // or the cursor is at the beginning of the input // set focus to prev. input (if it exists) - if (isSegmentEmpty || selectionStart === 0) { + if (selectionStart === 0) { const segmentToFocus = getRelativeSegmentRef('prev', { segment: target, formatParts, @@ -115,7 +114,7 @@ export const DatePickerInput = forwardRef( // if input is empty, // or the cursor is at the end of the input // set focus to next. input (if it exists) - if (isSegmentEmpty || selectionEnd === target.value.length) { + if (selectionEnd === target.value.length) { const segmentToFocus = getRelativeSegmentRef('next', { segment: target, formatParts, @@ -137,6 +136,8 @@ export const DatePickerInput = forwardRef( case keyMap.Backspace: { if (isSegmentEmpty) { + // prevent the backspace in the previous segment + e.preventDefault(); const segmentToFocus = getRelativeSegmentRef('prev', { segment: target, formatParts, From 3112ac21356e2a7d5a0db9e01a9f1f2e42961df3 Mon Sep 17 00:00:00 2001 From: Shaneeza Date: Mon, 18 Dec 2023 17:05:00 -0500 Subject: [PATCH 2/2] move test --- .../src/DatePicker/DatePicker.spec.tsx | 20 +++++++++++++++++++ .../DatePickerInput/DatePickerInput.spec.tsx | 18 ----------------- 2 files changed, 20 insertions(+), 18 deletions(-) diff --git a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx index c44b4d5282..57f9a24f4c 100644 --- a/packages/date-picker/src/DatePicker/DatePicker.spec.tsx +++ b/packages/date-picker/src/DatePicker/DatePicker.spec.tsx @@ -1250,6 +1250,26 @@ describe('packages/date-picker', () => { */ describe('Arrow key', () => { describe('Input', () => { + describe('Left Arrow', () => { + test('moves the cursor when the value starts with 0', () => { + const { monthInput } = renderDatePicker({}); + userEvent.type(monthInput, '04{arrowleft}{arrowleft}'); + expect(monthInput).toHaveFocus(); + }); + + test('moves the cursor when the value is 0', () => { + const { monthInput } = renderDatePicker({}); + userEvent.type(monthInput, '0{arrowleft}'); + expect(monthInput).toHaveFocus(); + }); + + test('moves the cursor to the next segment when the value is 0', () => { + const { yearInput, monthInput } = renderDatePicker({}); + userEvent.type(monthInput, '0{arrowleft}{arrowleft}'); + expect(yearInput).toHaveFocus(); + }); + }); + test('right arrow moves focus through segments', () => { const { yearInput, monthInput, dayInput } = renderDatePicker(); userEvent.click(yearInput); diff --git a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx index 3636047298..405e49f903 100644 --- a/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx +++ b/packages/date-picker/src/DatePicker/DatePickerInput/DatePickerInput.spec.tsx @@ -103,24 +103,6 @@ describe('packages/date-picker/date-picker-input', () => { userEvent.keyboard('{arrowleft}{arrowleft}{arrowleft}'); expect(yearInput).toHaveFocus(); }); - - test('moves the cursor when the value starts with 0', () => { - const { monthInput } = renderDatePickerInput({}); - userEvent.type(monthInput, '04{arrowleft}{arrowleft}'); - expect(monthInput).toHaveFocus(); - }); - - test('moves the cursor when the value is 0', () => { - const { monthInput } = renderDatePickerInput({}); - userEvent.type(monthInput, '0{arrowleft}'); - expect(monthInput).toHaveFocus(); - }); - - test('moves the cursor to the next segment when the value is 0', () => { - const { yearInput, monthInput } = renderDatePickerInput({}); - userEvent.type(monthInput, '0{arrowleft}{arrowleft}'); - expect(yearInput).toHaveFocus(); - }); }); describe('Right Arrow', () => {