Skip to content

Commit

Permalink
fix(kit): Time & DateTime has conflicts between step & AM/PM …
Browse files Browse the repository at this point in the history 
…features (#1791)
  • Loading branch information
@nsbarsukov
nsbarsukov authored Oct 22, 2024
1 parent 0049d91 commit 805f70b
Show file tree
Hide file tree
Showing 5 changed files with 228 additions and 90 deletions.
22 changes: 10 additions & 12 deletions projects/demo-integrations/src/tests/kit/date-time/date-time-meridiem.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -267,27 +267,27 @@ describe('DateTime | time modes with meridiem', () => {
});

describe('toggle meridiem value on ArrowUp / ArrowDown', () => {
describe('Initial value === "<any date>12:34|"', () => {
const beforeMeridiemValue = '01.01.2000, 12:34';
describe('Initial value === "<any date>12:34 |"', () => {
const beforeMeridiemValue = '01.01.2000, 12:34 ';

beforeEach(() => {
cy.get('@textfield')
.type('01.01.2000 1234')
.type('01.01.2000 1234 ')
.should('have.value', beforeMeridiemValue);
});

it('↑ --- 12:34| AM', () => {
it('↑ --- 12:34 |AM', () => {
cy.get('@textfield')
.type('{upArrow}')
.should('have.value', `${beforeMeridiemValue} AM`)
.should('have.value', `${beforeMeridiemValue}AM`)
.should('have.prop', 'selectionStart', beforeMeridiemValue.length)
.should('have.prop', 'selectionEnd', beforeMeridiemValue.length);
});

it('↓ --- 12:34| PM', () => {
it('↓ --- 12:34 |PM', () => {
cy.get('@textfield')
.type('{downArrow}')
.should('have.value', `${beforeMeridiemValue} PM`)
.should('have.value', `${beforeMeridiemValue}PM`)
.should('have.prop', 'selectionStart', beforeMeridiemValue.length)
.should('have.prop', 'selectionEnd', beforeMeridiemValue.length);
});
Expand All @@ -306,7 +306,6 @@ describe('DateTime | time modes with meridiem', () => {
});

[
`${beforeTimeValue}12:34`.length,
`${beforeTimeValue}12:34 `.length,
`${beforeTimeValue}12:34 A`.length,
`${beforeTimeValue}12:34 AM`.length,
Expand Down Expand Up @@ -353,7 +352,6 @@ describe('DateTime | time modes with meridiem', () => {
});

[
`${beforeTimeValue}01:01`.length,
`${beforeTimeValue}01:01 `.length,
`${beforeTimeValue}01:01 P`.length,
`${beforeTimeValue}01:01 PM`.length,
Expand Down Expand Up @@ -387,8 +385,8 @@ describe('DateTime | time modes with meridiem', () => {
});
});

describe('do nothing for partially completed time string', () => {
it('Empty textfield --- ↑↓ --- Empty textfield', () => {
describe('do nothing when caret is put after any time segment', () => {
it('Empty time part --- ↑↓ --- Empty time part', () => {
cy.get('@textfield')
.type('01.01.2000 ')
.should('have.value', '01.01.2000, ')
Expand All @@ -398,7 +396,7 @@ describe('DateTime | time modes with meridiem', () => {
.should('have.value', '01.01.2000, ');
});

['1', '12', '12:', '12:3'].forEach((textfieldValue) => {
['1', '12', '12:', '12:3', '12:34'].forEach((textfieldValue) => {
it(`${textfieldValue} --- ↑↓ --- ${textfieldValue}`, () => {
cy.get('@textfield')
.type(`01.01.2000 ${textfieldValue}`)
Expand Down
146 changes: 70 additions & 76 deletions projects/demo-integrations/src/tests/kit/time/time-meridiem.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -281,25 +281,25 @@ describe('Time | modes with meridiem', () => {
});

describe('toggle meridiem value on ArrowUp / ArrowDown', () => {
describe('Initial value === "12:34|"', () => {
describe('Initial value === "12:34 |"', () => {
beforeEach(() => {
cy.get('@textfield').type('1234');
cy.get('@textfield').type('1234 ');
});

it('↑ --- 12:34| AM', () => {
it('↑ --- 12:34 |AM', () => {
cy.get('@textfield')
.type('{upArrow}')
.should('have.value', '12:34 AM')
.should('have.prop', 'selectionStart', '12:34'.length)
.should('have.prop', 'selectionEnd', '12:34'.length);
.should('have.prop', 'selectionStart', '12:34 '.length)
.should('have.prop', 'selectionEnd', '12:34 '.length);
});

it('↓ --- 12:34| PM', () => {
it('↓ --- 12:34 |PM', () => {
cy.get('@textfield')
.type('{downArrow}')
.should('have.value', '12:34 PM')
.should('have.prop', 'selectionStart', '12:34'.length)
.should('have.prop', 'selectionEnd', '12:34'.length);
.should('have.prop', 'selectionStart', '12:34 '.length)
.should('have.prop', 'selectionEnd', '12:34 '.length);
});
});

Expand All @@ -314,39 +314,36 @@ describe('Time | modes with meridiem', () => {
.type('{moveToStart}');
});

[
'12:34'.length,
'12:34 '.length,
'12:34 A'.length,
'12:34 AM'.length,
].forEach((initialCaretIndex) => {
const initialValueWithCaretLabel = withCaretLabel(
initialValue,
initialCaretIndex,
);
const toggledValueWithCaretLabel = withCaretLabel(
toggledValue,
initialCaretIndex,
);

it(`${initialValueWithCaretLabel} --- ↑ --- ${toggledValueWithCaretLabel}`, () => {
cy.get('@textfield')
.type('{rightArrow}'.repeat(initialCaretIndex))
.type('{upArrow}')
.should('have.value', toggledValue)
.should('have.prop', 'selectionStart', initialCaretIndex)
.should('have.prop', 'selectionEnd', initialCaretIndex);
});

it(`${initialValueWithCaretLabel} --- ↓ --- ${toggledValueWithCaretLabel}`, () => {
cy.get('@textfield')
.type('{rightArrow}'.repeat(initialCaretIndex))
.type('{downArrow}')
.should('have.value', toggledValue)
.should('have.prop', 'selectionStart', initialCaretIndex)
.should('have.prop', 'selectionEnd', initialCaretIndex);
});
});
['12:34 '.length, '12:34 A'.length, '12:34 AM'.length].forEach(
(initialCaretIndex) => {
const initialValueWithCaretLabel = withCaretLabel(
initialValue,
initialCaretIndex,
);
const toggledValueWithCaretLabel = withCaretLabel(
toggledValue,
initialCaretIndex,
);

it(`${initialValueWithCaretLabel} --- ↑ --- ${toggledValueWithCaretLabel}`, () => {
cy.get('@textfield')
.type('{rightArrow}'.repeat(initialCaretIndex))
.type('{upArrow}')
.should('have.value', toggledValue)
.should('have.prop', 'selectionStart', initialCaretIndex)
.should('have.prop', 'selectionEnd', initialCaretIndex);
});

it(`${initialValueWithCaretLabel} --- ↓ --- ${toggledValueWithCaretLabel}`, () => {
cy.get('@textfield')
.type('{rightArrow}'.repeat(initialCaretIndex))
.type('{downArrow}')
.should('have.value', toggledValue)
.should('have.prop', 'selectionStart', initialCaretIndex)
.should('have.prop', 'selectionEnd', initialCaretIndex);
});
},
);
});

describe('Initial value === "01:01 PM"', () => {
Expand All @@ -360,42 +357,39 @@ describe('Time | modes with meridiem', () => {
.type('{moveToStart}');
});

[
'01:01'.length,
'01:01 '.length,
'01:01 P'.length,
'01:01 PM'.length,
].forEach((initialCaretIndex) => {
const initialValueWithCaretLabel = withCaretLabel(
initialValue,
initialCaretIndex,
);
const toggledValueWithCaretLabel = withCaretLabel(
toggledValue,
initialCaretIndex,
);

it(`${initialValueWithCaretLabel} --- ↑ --- ${toggledValueWithCaretLabel}`, () => {
cy.get('@textfield')
.type('{rightArrow}'.repeat(initialCaretIndex))
.type('{upArrow}')
.should('have.value', toggledValue)
.should('have.prop', 'selectionStart', initialCaretIndex)
.should('have.prop', 'selectionEnd', initialCaretIndex);
});

it(`${initialValueWithCaretLabel} --- ↓ --- ${toggledValueWithCaretLabel}`, () => {
cy.get('@textfield')
.type('{rightArrow}'.repeat(initialCaretIndex))
.type('{downArrow}')
.should('have.value', toggledValue)
.should('have.prop', 'selectionStart', initialCaretIndex)
.should('have.prop', 'selectionEnd', initialCaretIndex);
});
});
['01:01 '.length, '01:01 P'.length, '01:01 PM'.length].forEach(
(initialCaretIndex) => {
const initialValueWithCaretLabel = withCaretLabel(
initialValue,
initialCaretIndex,
);
const toggledValueWithCaretLabel = withCaretLabel(
toggledValue,
initialCaretIndex,
);

it(`${initialValueWithCaretLabel} --- ↑ --- ${toggledValueWithCaretLabel}`, () => {
cy.get('@textfield')
.type('{rightArrow}'.repeat(initialCaretIndex))
.type('{upArrow}')
.should('have.value', toggledValue)
.should('have.prop', 'selectionStart', initialCaretIndex)
.should('have.prop', 'selectionEnd', initialCaretIndex);
});

it(`${initialValueWithCaretLabel} --- ↓ --- ${toggledValueWithCaretLabel}`, () => {
cy.get('@textfield')
.type('{rightArrow}'.repeat(initialCaretIndex))
.type('{downArrow}')
.should('have.value', toggledValue)
.should('have.prop', 'selectionStart', initialCaretIndex)
.should('have.prop', 'selectionEnd', initialCaretIndex);
});
},
);
});

describe('do nothing for partially completed time string', () => {
describe('do nothing when caret is put after any time segment', () => {
it('Empty textfield --- ↑↓ --- Empty textfield', () => {
cy.get('@textfield')
.should('have.value', '')
Expand All @@ -405,7 +399,7 @@ describe('Time | modes with meridiem', () => {
.should('have.value', '');
});

['1', '12', '12:', '12:3'].forEach((textfieldValue) => {
['1', '12', '12:', '12:3', '12:34'].forEach((textfieldValue) => {
it(`${textfieldValue} --- ↑↓ --- ${textfieldValue}`, () => {
cy.get('@textfield')
.type(textfieldValue)
Expand Down
Loading

0 comments on commit 805f70b

Please sign in to comment.