Skip to content

Commit

Permalink
fix(kit): Time has invalid segment separator for MM:SS.MSS mode (#…
Browse files Browse the repository at this point in the history 
…1687)
  • Loading branch information
@nsbarsukov
nsbarsukov authored Sep 24, 2024
1 parent 522f3e0 commit 93972be
Show file tree
Hide file tree
Showing 6 changed files with 64 additions and 63 deletions.
84 changes: 42 additions & 42 deletions projects/demo-integrations/src/tests/kit/time/time-mode.cy.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -413,9 +413,9 @@ describe('Time', () => {
});
});

describe('MM.SS.MSS', () => {
describe('MM:SS.MSS', () => {
beforeEach(() => {
cy.visit(`/${DemoPath.Time}/API?mode=MM.SS.MSS`);
cy.visit(`/${DemoPath.Time}/API?mode=MM:SS.MSS`);
cy.get('#demo-content input')
.should('be.visible')
.first()
Expand All @@ -430,28 +430,28 @@ describe('Time', () => {
.type('5959999')
.type('{moveToStart}')
.type('0')
.should('have.value', '09.59.999')
.should('have.value', '09:59.999')
.should('have.prop', 'selectionStart', '0'.length)
.should('have.prop', 'selectionEnd', '0'.length)
.type('000')
.should('have.value', '00.00.999')
.should('have.prop', 'selectionStart', '00.00.'.length)
.should('have.prop', 'selectionEnd', '00.00.'.length)
.should('have.value', '00:00.999')
.should('have.prop', 'selectionStart', '00:00.'.length)
.should('have.prop', 'selectionEnd', '00:00.'.length)
.type('00')
.should('have.value', '00.00.009')
.should('have.prop', 'selectionStart', '00.00.00'.length)
.should('have.prop', 'selectionEnd', '00.00.00'.length);
.should('have.value', '00:00.009')
.should('have.prop', 'selectionStart', '00:00.00'.length)
.should('have.prop', 'selectionEnd', '00:00.00'.length);
});

it('moves cursor behind next character if new character is the same with the next one', () => {
cy.get('@input')
.type('59.59.999')
.type('59:59.999')
.type('{moveToStart}')
.type('{rightArrow}'.repeat('59.59.'.length))
.type('{rightArrow}'.repeat('59:59.'.length))
.type('9')
.should('have.value', '59.59.999')
.should('have.prop', 'selectionStart', '59.59.9'.length)
.should('have.prop', 'selectionEnd', '59.59.9'.length);
.should('have.value', '59:59.999')
.should('have.prop', 'selectionStart', '59:59.9'.length)
.should('have.prop', 'selectionEnd', '59:59.9'.length);
});
});

Expand All @@ -462,83 +462,83 @@ describe('Time', () => {
.should('have.prop', 'selectionStart', '06'.length)
.should('have.prop', 'selectionEnd', '06'.length)
.type('6')
.should('have.value', '06.06')
.should('have.prop', 'selectionStart', '06.06'.length)
.should('have.prop', 'selectionEnd', '06.06'.length)
.should('have.value', '06:06')
.should('have.prop', 'selectionStart', '06:06'.length)
.should('have.prop', 'selectionEnd', '06:06'.length)
.type('999')
.should('have.value', '06.06.999')
.should('have.prop', 'selectionStart', '06.06.999'.length)
.should('have.prop', 'selectionEnd', '06.06.999'.length);
.should('have.value', '06:06.999')
.should('have.prop', 'selectionStart', '06:06.999'.length)
.should('have.prop', 'selectionEnd', '06:06.999'.length);
});

describe('Select range and press new digit', () => {
it(
'|59|.59.999 => Type 2 => 2|0.59.999',
'|59|:59.999 => Type 2 => 2|0:59.999',
BROWSER_SUPPORTS_REAL_EVENTS,
() => {
cy.get('@input')
.type('5959999')
.should('have.value', '59.59.999')
.should('have.value', '59:59.999')
.realPress([
...new Array('.59.999'.length).fill('ArrowLeft'),
...new Array(':59.999'.length).fill('ArrowLeft'),
'Shift',
...new Array('59'.length).fill('ArrowLeft'),
]);

cy.get('@input')
.type('2')
.should('have.value', '20.59.999')
.should('have.value', '20:59.999')
.should('have.prop', 'selectionStart', '2'.length)
.should('have.prop', 'selectionEnd', '2'.length);
},
);

it(
'|59|.59.999 => Type 6 => 06.|59.999',
'|59|:59.999 => Type 6 => 06:|59.999',
BROWSER_SUPPORTS_REAL_EVENTS,
() => {
cy.get('@input')
.type('5959999')
.should('have.value', '59.59.999')
.should('have.value', '59:59.999')
.realPress([
...new Array('.59.999'.length).fill('ArrowLeft'),
...new Array(':59.999'.length).fill('ArrowLeft'),
'Shift',
...new Array('59'.length).fill('ArrowLeft'),
]);

cy.get('@input')
.type('6')
.should('have.value', '06.59.999')
.should('have.prop', 'selectionStart', '06.'.length)
.should('have.prop', 'selectionEnd', '06.'.length);
.should('have.value', '06:59.999')
.should('have.prop', 'selectionStart', '06:'.length)
.should('have.prop', 'selectionEnd', '06:'.length);
},
);
});

describe('accepts time segment separators typed by user', () => {
it('59 => Type . => 59.', () => {
it('59 => Type : => 59:', () => {
cy.get('@input')
.type('59')
.should('have.value', '59')
.type('.')
.should('have.value', '59.')
.should('have.prop', 'selectionStart', '59.'.length)
.should('have.prop', 'selectionEnd', '59.'.length);
.type(':')
.should('have.value', '59:')
.should('have.prop', 'selectionStart', '59:'.length)
.should('have.prop', 'selectionEnd', '59:'.length);
});

it('59.59 => Type . => 59:59.', () => {
it('59:59 => Type . => 59:59.', () => {
cy.get('@input')
.type('5959')
.should('have.value', '59.59')
.should('have.value', '59:59')
.type('.')
.should('have.value', '59.59.')
.should('have.prop', 'selectionStart', '59.59.'.length)
.should('have.prop', 'selectionEnd', '59.59.'.length);
.should('have.value', '59:59.')
.should('have.prop', 'selectionStart', '59:59.'.length)
.should('have.prop', 'selectionEnd', '59:59.'.length);
});
});

it('type 5959999 => 59.59.999', () => {
cy.get('@input').type('5959999').should('have.value', '59.59.999');
it('type 5959999 => 59:59.999', () => {
cy.get('@input').type('5959999').should('have.value', '59:59.999');
});
});

Expand Down
2 changes: 1 addition & 1 deletion projects/demo/src/pages/kit/time/time-mask-doc.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ export default class TimeMaskDocComponent implements GeneratorOptions {
'HH:MM:SS',
'HH:MM:SS.MSS',
'HH',
'MM.SS.MSS',
'MM:SS.MSS',
'SS.MSS',
] as const satisfies readonly MaskitoTimeMode[];

Expand Down
24 changes: 12 additions & 12 deletions projects/kit/src/lib/masks/time/utils/tests/parse-time.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ describe('maskitoParseTime', () => {
],
],
[
'MM.SS.MSS',
'MM:SS.MSS',
[
{text: '', ms: 0},
{text: '00:00.000', ms: 0},
Expand All @@ -93,18 +93,18 @@ describe('maskitoParseTime', () => {
{text: '10', ms: 600000},
{text: '12', ms: 720000},
{text: '12.', ms: 720000},
{text: '12.3', ms: 750000},
{text: '12.30', ms: 750000},
{text: '12.34', ms: 754000},
{text: '12.34.', ms: 754000},
{text: '12.34.5', ms: 754500},
{text: '12.34.50', ms: 754500},
{text: '12.34.500', ms: 754500},
{text: '12.34.56', ms: 754560},
{text: '12.34.560', ms: 754560},
{text: '12.34.567', ms: 754567},
{text: '12:3', ms: 750000},
{text: '12:30', ms: 750000},
{text: '12:34', ms: 754000},
{text: '12:34.', ms: 754000},
{text: '12:34.5', ms: 754500},
{text: '12:34.50', ms: 754500},
{text: '12:34.500', ms: 754500},
{text: '12:34.56', ms: 754560},
{text: '12:34.560', ms: 754560},
{text: '12:34.567', ms: 754567},

{text: '59.59.999', ms: 3599999},
{text: '59:59.999', ms: 3599999},
],
],
[
Expand Down
10 changes: 5 additions & 5 deletions projects/kit/src/lib/masks/time/utils/tests/stringify-time.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,12 +42,12 @@ describe('maskitoStringifyTime', () => {
],
],
[
'MM.SS.MSS',
'MM:SS.MSS',
[
{ms: 0, text: '00.00.000'},
{ms: 61001, text: '01.01.001'},
{ms: 754567, text: '12.34.567'},
{ms: 3599999, text: '59.59.999'},
{ms: 0, text: '00:00.000'},
{ms: 61001, text: '01:01.001'},
{ms: 754567, text: '12:34.567'},
{ms: 3599999, text: '59:59.999'},
],
],
[
Expand Down
3 changes: 2 additions & 1 deletion projects/kit/src/lib/types/time-mode.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,6 @@ export type MaskitoTimeMode =
| 'HH:MM:SS'
| 'HH:MM'
| 'HH'
| 'MM.SS.MSS'
| 'MM:SS.MSS'
| 'MM.SS.MSS' // TODO: delete in v4
| 'SS.MSS';
4 changes: 2 additions & 2 deletions projects/kit/src/lib/utils/time/tests/parse-time-string.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,8 @@ describe('parseTimeString', () => {
});
});

it('mm.ss.mss', () => {
expect(parseTimeString('12.30.001', 'MM.SS.MSS')).toEqual({
it('mm:ss.mss', () => {
expect(parseTimeString('12:30.001', 'MM:SS.MSS')).toEqual({
minutes: '12',
seconds: '30',
milliseconds: '001',
Expand Down

0 comments on commit 93972be

Please sign in to comment.