generated from Tinkoff/angular-open-source-starter
-
Notifications
You must be signed in to change notification settings - Fork 35
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(kit):
Date & DateRange & DateTime has improved zero-paddin…
…g support for browser autofill & IME composition (#1027)
- Loading branch information
1 parent
4838a2d
commit 77ac01c
Showing
13 changed files
with
402 additions
and
23 deletions.
There are no files selected for viewing
99 changes: 99 additions & 0 deletions
99
projects/demo-integrations/src/tests/kit/date/date-segments-zero-padding.cy.ts
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,99 @@ | ||
| import {DemoPath} from '@demo/constants'; | ||
|
|
||
| import {BROWSER_SUPPORTS_REAL_EVENTS} from '../../../support/constants'; | ||
|
|
||
| describe('Date | Date segments zero padding (pads digits with zero if date segment exceeds its max possible value)', () => { | ||
| describe('[mode]="dd.mm.yyyy"', () => { | ||
| beforeEach(() => { | ||
| cy.visit(`/${DemoPath.Date}/API?mode=dd%2Fmm%2Fyyyy&dateSeparator=.`); | ||
| cy.get('#demo-content input') | ||
| .should('be.visible') | ||
| .first() | ||
| .focus() | ||
| .as('input'); | ||
| }); | ||
|
|
||
| describe('pads digit > 3 with zero for days', () => { | ||
| [0, 1, 2, 3].forEach(digit => { | ||
| it(`Type ${digit} => ${digit}`, () => { | ||
| cy.get('@input') | ||
| .type(`${digit}`) | ||
| .should('have.value', `${digit}`) | ||
| .should('have.prop', 'selectionStart', 1) | ||
| .should('have.prop', 'selectionEnd', 1); | ||
| }); | ||
| }); | ||
|
|
||
| [4, 5, 6, 7, 8, 9].forEach(digit => { | ||
| it(`Type ${digit} => 0${digit}`, () => { | ||
| cy.get('@input') | ||
| .type(`${digit}`) | ||
| .should('have.value', `0${digit}`) | ||
| .should('have.prop', 'selectionStart', `0${digit}`.length) | ||
| .should('have.prop', 'selectionEnd', `0${digit}`.length); | ||
| }); | ||
| }); | ||
|
|
||
| it( | ||
| '|11|.11.2011 => Type 7 => 07.|11.2011', | ||
| BROWSER_SUPPORTS_REAL_EVENTS, | ||
| () => { | ||
| cy.get('@input') | ||
| .type('11.11.2011') | ||
| .type('{moveToStart}') | ||
| .realPress(['Shift', 'ArrowRight', 'ArrowRight']); | ||
|
|
||
| cy.get('@input') | ||
| .should('have.prop', 'selectionStart', 0) | ||
| .should('have.prop', 'selectionEnd', '07'.length) | ||
| .type('7') | ||
| .should('have.value', '07.11.2011') | ||
| .should('have.prop', 'selectionStart', '07.'.length) | ||
| .should('have.prop', 'selectionEnd', '07.'.length); | ||
| }, | ||
| ); | ||
| }); | ||
|
|
||
| describe('pads digit > 1 with zero for months', () => { | ||
| [0, 1].forEach(digit => { | ||
| it(`Type 01.${digit} => 01.${digit}`, () => { | ||
| cy.get('@input') | ||
| .type(`01${digit}`) | ||
| .should('have.value', `01.${digit}`) | ||
| .should('have.prop', 'selectionStart', `01.${digit}`.length) | ||
| .should('have.prop', 'selectionEnd', `01.${digit}`.length); | ||
| }); | ||
| }); | ||
|
|
||
| [2, 3, 4, 5, 6, 7, 8, 9].forEach(digit => { | ||
| it(`Type 01.${digit} => 01.0${digit}`, () => { | ||
| cy.get('@input') | ||
| .type(`01${digit}`) | ||
| .should('have.value', `01.0${digit}`) | ||
| .should('have.prop', 'selectionStart', `01.0${digit}`.length) | ||
| .should('have.prop', 'selectionEnd', `01.0${digit}`.length); | ||
| }); | ||
| }); | ||
|
|
||
| it( | ||
| '11.|11|.2011 => Type 2 => 11.02.|2011', | ||
| BROWSER_SUPPORTS_REAL_EVENTS, | ||
| () => { | ||
| cy.get('@input') | ||
| .type('11.11.2011') | ||
| .type('{moveToEnd}') | ||
| .type('{leftArrow}'.repeat('.2011'.length)) | ||
| .realPress(['Shift', 'ArrowLeft', 'ArrowLeft']); | ||
|
|
||
| cy.get('@input') | ||
| .should('have.prop', 'selectionStart', '11.'.length) | ||
| .should('have.prop', 'selectionEnd', '11.11'.length) | ||
| .type('2') | ||
| .should('have.value', '11.02.2011') | ||
| .should('have.prop', 'selectionStart', '01.02.'.length) | ||
| .should('have.prop', 'selectionEnd', '01.02.'.length); | ||
| }, | ||
| ); | ||
| }); | ||
| }); | ||
| }); |
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,7 @@ | ||
| import {MaskitoDateSegments} from '../types'; | ||
|
|
||
| export const DATE_SEGMENTS_MAX_VALUES: MaskitoDateSegments<number> = { | ||
| day: 31, | ||
| month: 12, | ||
| year: 9999, | ||
| }; |
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
66 changes: 66 additions & 0 deletions
66
projects/kit/src/lib/masks/date-range/tests/date-segments-zero-padding.spec.ts
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,66 @@ | ||
| import {MASKITO_DEFAULT_OPTIONS, MaskitoOptions, maskitoTransform} from '@maskito/core'; | ||
| import {maskitoDateRangeOptionsGenerator} from '@maskito/kit'; | ||
|
|
||
| describe('DateRange (maskitoTransform) | Date segments zero padding', () => { | ||
| describe('[mode]="yyyy/mm/dd"', () => { | ||
| let options: MaskitoOptions = MASKITO_DEFAULT_OPTIONS; | ||
|
|
||
| beforeEach(() => { | ||
| options = maskitoDateRangeOptionsGenerator({ | ||
| mode: 'yyyy/mm/dd', | ||
| dateSeparator: '/', | ||
| rangeSeparator: '-', | ||
| }); | ||
| }); | ||
|
|
||
| describe('pads digits with zero if date segment exceeds its max possible value', () => { | ||
| describe('pads digit > 1 with zero for months', () => { | ||
| [0, 1].forEach(digit => { | ||
| it(`1234/${digit} => 1234/${digit}`, () => { | ||
| expect(maskitoTransform(`1234${digit}`, options)).toBe( | ||
| `1234/${digit}`, | ||
| ); | ||
| expect( | ||
| maskitoTransform(`1234/01/01-1234/${digit}`, options), | ||
| ).toBe(`1234/01/01-1234/${digit}`); | ||
| }); | ||
| }); | ||
|
|
||
| [2, 3, 4, 5, 6, 7, 8, 9].forEach(digit => { | ||
| it(`1234/${digit} => 1234/0${digit}`, () => { | ||
| expect(maskitoTransform(`1234${digit}`, options)).toBe( | ||
| `1234/0${digit}`, | ||
| ); | ||
| expect( | ||
| maskitoTransform(`1234/01/01-1234/${digit}`, options), | ||
| ).toBe(`1234/01/01-1234/0${digit}`); | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| describe('pads digit > 3 with zero for days', () => { | ||
| [0, 1, 2, 3].forEach(digit => { | ||
| it(`1234/12/${digit} => 1234/12/${digit}`, () => { | ||
| expect(maskitoTransform(`123412${digit}`, options)).toBe( | ||
| `1234/12/${digit}`, | ||
| ); | ||
| expect( | ||
| maskitoTransform(`1234/01/01-1234/12/${digit}`, options), | ||
| ).toBe(`1234/01/01-1234/12/${digit}`); | ||
| }); | ||
| }); | ||
|
|
||
| [4, 5, 6, 7, 8, 9].forEach(digit => { | ||
| it(`1234/12/${digit} => 1234/12/0${digit}`, () => { | ||
| expect(maskitoTransform(`123412${digit}`, options)).toBe( | ||
| `1234/12/0${digit}`, | ||
| ); | ||
| expect( | ||
| maskitoTransform(`1234/01/01-1234/12/${digit}`, options), | ||
| ).toBe(`1234/01/01-1234/12/0${digit}`); | ||
| }); | ||
| }); | ||
| }); | ||
| }); | ||
| }); | ||
| }); |
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
50 changes: 50 additions & 0 deletions
50
projects/kit/src/lib/masks/date-time/tests/date-segments-zero-padding.spec.ts
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,50 @@ | ||
| import {MASKITO_DEFAULT_OPTIONS, MaskitoOptions, maskitoTransform} from '@maskito/core'; | ||
| import {maskitoDateTimeOptionsGenerator} from '@maskito/kit'; | ||
|
|
||
| describe('DateTime (maskitoTransform) | Date segments zero padding', () => { | ||
| describe('[dateMode]="dd/mm/yyyy" & [timeMode]="HH:MM:SS.MSS"', () => { | ||
| let options: MaskitoOptions = MASKITO_DEFAULT_OPTIONS; | ||
|
|
||
| beforeEach(() => { | ||
| options = maskitoDateTimeOptionsGenerator({ | ||
| dateMode: 'dd/mm/yyyy', | ||
| timeMode: 'HH:MM:SS.MSS', | ||
| dateSeparator: '/', | ||
| }); | ||
| }); | ||
|
|
||
| describe('pads digits with zero if date segment exceeds its max possible value', () => { | ||
| describe('pads digit > 1 with zero for months', () => { | ||
| [0, 1].forEach(digit => { | ||
| it(`01/${digit} => 01/${digit}`, () => { | ||
| expect(maskitoTransform(`01${digit}`, options)).toBe( | ||
| `01/${digit}`, | ||
| ); | ||
| }); | ||
| }); | ||
|
|
||
| [2, 3, 4, 5, 6, 7, 8, 9].forEach(digit => { | ||
| it(`01/${digit} => 01/0${digit}`, () => { | ||
| expect(maskitoTransform(`01${digit}`, options)).toBe( | ||
| `01/0${digit}`, | ||
| ); | ||
| }); | ||
| }); | ||
| }); | ||
|
|
||
| describe('pads digit > 3 with zero for days', () => { | ||
| [0, 1, 2, 3].forEach(digit => { | ||
| it(`${digit} => ${digit}`, () => { | ||
| expect(maskitoTransform(`${digit}`, options)).toBe(`${digit}`); | ||
| }); | ||
| }); | ||
|
|
||
| [4, 5, 6, 7, 8, 9].forEach(digit => { | ||
| it(`${digit} => 0${digit}`, () => { | ||
| expect(maskitoTransform(`${digit}`, options)).toBe(`0${digit}`); | ||
| }); | ||
| }); | ||
| }); | ||
| }); | ||
| }); | ||
| }); |
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
Oops, something went wrong.