Skip to content

Commit

Permalink
feat(kit): InputRange refactor (use InputNumber inside)
Browse files Browse the repository at this point in the history
  • Loading branch information
@nsbarsukov
nsbarsukov committed Apr 7, 2022
1 parent 0679400 commit b7795f7
Show file tree
Hide file tree
Showing 15 changed files with 795 additions and 580 deletions.
1 change: 1 addition & 0 deletions projects/demo-integrations/cypress/support/shared.entities.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export const EDITOR_PAGE_URL = 'components/editor-new';
export const MULTI_SELECT_PAGE_URL = 'components/multi-select';
export const SELECT_PAGE_URL = 'components/select';
export const SLIDER_PAGE_URL = 'components/slider';
export const INPUT_RANGE_PAGE_URL = 'components/input-range';
export const INPUT_SLIDER_PAGE_URL = 'components/input-slider';
export const INPUT_PAGE_URL = 'components/input';
export const RANGE_PAGE_URL = 'components/range';
177 changes: 177 additions & 0 deletions projects/demo-integrations/cypress/tests/kit/input-range/input-range.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,177 @@
import {INPUT_RANGE_PAGE_URL} from '../../../support/shared.entities';

describe('InputRange', () => {
beforeEach(() => {
cy.viewport('macbook-13');
});

describe('Keyboard interactions', () => {
beforeEach(() => {
cy.tuiVisit(`${INPUT_RANGE_PAGE_URL}/API?min=-100&max=100&quantum=5`);
initializeAliases('#demoContent tui-input-range', [0, 10]);
});

it('pressing Arrow Down decreases LEFT value when LEFT text input is focused', () => {
cy.get('@leftTextInput').focus();

cy.get('body').type('{downarrow}');

cy.get('@leftSlider').should('have.value', -5);
cy.get('@leftTextInput').should('have.value', -5);

cy.get('body').type('{downarrow}');

cy.get('@leftSlider').should('have.value', -10);
cy.get('@leftTextInput').should('have.value', -10);
});

it('pressing Arrow Down decreases RIGHT value when RIGHT text input is focused', () => {
cy.get('@rightTextInput').focus();

cy.get('body').type('{downarrow}');

cy.get('@rightSlider').should('have.value', 5);
cy.get('@rightTextInput').should('have.value', 5);

cy.get('body').type('{downarrow}');

cy.get('@rightSlider').should('have.value', 0);
cy.get('@rightTextInput').should('have.value', 0);
});

it('pressing Arrow Up increases LEFT value when LEFT text input is focused', () => {
cy.get('@leftTextInput').focus();

cy.get('body').type('{uparrow}');

cy.get('@leftSlider').should('have.value', 5);
cy.get('@leftTextInput').should('have.value', 5);

cy.get('body').type('{uparrow}');

cy.get('@leftSlider').should('have.value', 10);
cy.get('@leftTextInput').should('have.value', 10);
});

it('pressing Arrow Up increases RIGHT value when RIGHT text input is focused', () => {
cy.get('@rightTextInput').focus();

cy.get('body').type('{uparrow}');

cy.get('@rightSlider').should('have.value', 15);
cy.get('@rightTextInput').should('have.value', 15);

cy.get('body').type('{uparrow}');

cy.get('@rightSlider').should('have.value', 20);
cy.get('@rightTextInput').should('have.value', 20);
});

it('cannot set right value less than left value via ArrowDown', () => {
cy.get('@rightTextInput').focus();

cy.get('body').type('{downarrow}{downarrow}');
cy.get('body').type('{downarrow}{downarrow}');
cy.get('body').type('{downarrow}{downarrow}');

cy.get('@leftSlider').should('have.value', 0);
cy.get('@leftTextInput').should('have.value', 0);
cy.get('@rightSlider').should('have.value', 0);
cy.get('@rightTextInput').should('have.value', 0);
});

it('cannot set left value more than right value via ArrowUp', () => {
cy.get('@leftTextInput').focus();

cy.get('body').type('{uparrow}{uparrow}');
cy.get('body').type('{uparrow}{uparrow}');
cy.get('body').type('{uparrow}{uparrow}');

cy.get('@leftSlider').should('have.value', 10);
cy.get('@leftTextInput').should('have.value', 10);
cy.get('@rightSlider').should('have.value', 10);
cy.get('@rightTextInput').should('have.value', 10);
});

it('pressing ArrowRight does not change any value (this key is for caret navigation only)', () => {
cy.get('@leftTextInput').focus();
cy.get('body').type('{rightarrow}{rightarrow}');

cy.get('@rightTextInput').focus();
cy.get('body').type('{rightarrow}{rightarrow}');

cy.get('@leftSlider').should('have.value', 0);
cy.get('@leftTextInput').should('have.value', 0);
cy.get('@rightSlider').should('have.value', 10);
cy.get('@rightTextInput').should('have.value', 10);
});

it('pressing ArrowLeft does not change any value (this key is for caret navigation only)', () => {
cy.get('@leftTextInput').focus();
cy.get('body').type('{leftarrow}{leftarrow}');

cy.get('@rightTextInput').focus();
cy.get('body').type('{leftarrow}{leftarrow}');

cy.get('@leftSlider').should('have.value', 0);
cy.get('@leftTextInput').should('have.value', 0);
cy.get('@rightSlider').should('have.value', 10);
cy.get('@rightTextInput').should('have.value', 10);
});
});

describe('Rounding numbers (to the nearest step which satisfies quantum) (min=0 | max=10 | quantum=2.5)', () => {
beforeEach(() => {
cy.tuiVisit(`${INPUT_RANGE_PAGE_URL}/API?min=0&max=10&quantum=2.5`);
initializeAliases('#demoContent tui-input-range', [0, 10]);
});

const testsConditions = [
{typedValue: '9', expectedRoundedValue: '10'},
{typedValue: '8', expectedRoundedValue: '7,5'},
{typedValue: '7,6', expectedRoundedValue: '7,5'},
{typedValue: '7.4', expectedRoundedValue: '7,5'},
{typedValue: '7', expectedRoundedValue: '7,5'},
{typedValue: '6', expectedRoundedValue: '5'},
{typedValue: '3.2', expectedRoundedValue: '2,5'},
{typedValue: '1', expectedRoundedValue: '0'},
{typedValue: '0.1', expectedRoundedValue: '0'},
] as const;

for (const {typedValue, expectedRoundedValue} of testsConditions) {
it(`${typedValue} => ${expectedRoundedValue}`, () => {
cy.get('@rightTextInput')
.focus()
.clear()
.type(typedValue)
.blur()
.should('have.value', expectedRoundedValue);
});
}
});
});

function initializeAliases(
inputRangeSelector: string,
[expectedLeftValue, expectedRightValue]: [number, number],
) {
cy.get(`${inputRangeSelector} tui-input-number:first-of-type input`)
.should('be.visible')
.should('have.value', expectedLeftValue)
.as('leftTextInput');

cy.get(`${inputRangeSelector} tui-input-number:last-of-type input`)
.should('be.visible')
.should('have.value', expectedRightValue)
.as('rightTextInput');

cy.get(`${inputRangeSelector} tui-range [tuiSlider]:first-of-type`)
.should('exist')
.should('have.value', expectedLeftValue)
.as('leftSlider');

cy.get(`${inputRangeSelector} tui-range [tuiSlider]:last-of-type`)
.should('be.visible')
.should('have.value', expectedRightValue)
.as('rightSlider');
}
24 changes: 17 additions & 7 deletions projects/demo/src/modules/components/input-range/input-range.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {Component, forwardRef} from '@angular/core';
import {FormControl} from '@angular/forms';
import {changeDetection} from '@demo/emulate/change-detection';
import {TuiDocExample} from '@taiga-ui/addon-doc';
import {TuiContextWithImplicit} from '@taiga-ui/cdk';
import {TuiPluralize, TuiSizeL} from '@taiga-ui/core';
import {TuiKeySteps} from '@taiga-ui/kit';

Expand Down Expand Up @@ -35,7 +36,7 @@ export class ExampleTuiInputRangeComponent extends AbstractExampleTuiControl {
LESS: import('!!raw-loader!./examples/2/index.less'),
};

control = new FormControl();
control = new FormControl([0, 10]);

minVariants: readonly number[] = [0, 5, 7.77, -10];

Expand All @@ -45,13 +46,9 @@ export class ExampleTuiInputRangeComponent extends AbstractExampleTuiControl {

max = this.maxVariants[0];

segmentsVariants: readonly number[] = [0, 1, 5, 13];
segments = 0;

segments = this.segmentsVariants[0];

stepsVariants: readonly number[] = [0, 4, 10];

steps = this.stepsVariants[0];
steps = 0;

quantumVariants: readonly number[] = [1, 0.001, 10, 100];

Expand Down Expand Up @@ -85,4 +82,17 @@ export class ExampleTuiInputRangeComponent extends AbstractExampleTuiControl {
keyStepsVariants: readonly TuiKeySteps[] = [[[50, 1000]]];

keySteps = null;

readonly valueContentVariants = [
'',
'TOP SECRET',
({$implicit: val}: TuiContextWithImplicit<number>) =>
val === this.max ? 'MAX' : val,
({$implicit: val}: TuiContextWithImplicit<number>) =>
val === this.min ? 'MIN' : val,
({$implicit: val}: TuiContextWithImplicit<number>) => (val === 5 ? 'FIVE' : val),
];

leftValueContent = this.valueContentVariants[0];
rightValueContent = this.valueContentVariants[0];
}
7 changes: 6 additions & 1 deletion projects/demo/src/modules/components/input-range/input-range.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,11 @@ import {NgModule} from '@angular/core';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {RouterModule} from '@angular/router';
import {generateRoutes, TuiAddonDocModule} from '@taiga-ui/addon-doc';
import {TuiButtonModule, TuiLinkModule} from '@taiga-ui/core';
import {
TuiButtonModule,
TuiLinkModule,
TuiTextfieldControllerModule,
} from '@taiga-ui/core';
import {
TuiInputRangeModule,
TuiInputSliderModule,
Expand All @@ -27,6 +31,7 @@ import {ExampleTuiInputRangeComponent} from './input-range.component';
TuiAddonDocModule,
TuiButtonModule,
TuiLinkModule,
TuiTextfieldControllerModule,
RouterModule.forChild(generateRoutes(ExampleTuiInputRangeComponent)),
],
declarations: [
Expand Down
Loading

0 comments on commit b7795f7

Please sign in to comment.