From e078bad3290bb68eee213fd2370e0e1f8aa2a933 Mon Sep 17 00:00:00 2001 From: splincode Date: Fri, 2 Feb 2024 15:42:47 +0300 Subject: [PATCH] chore: add `range.cy.ts` --- .../src/support/component-index.html | 5 + projects/demo-cypress/src/tests/range.cy.ts | 275 ++++++++++++++++ .../range/test/range.component.spec.ts | 295 ------------------ 3 files changed, 280 insertions(+), 295 deletions(-) create mode 100644 projects/demo-cypress/src/tests/range.cy.ts delete mode 100644 projects/kit/components/range/test/range.component.spec.ts diff --git a/projects/demo-cypress/src/support/component-index.html b/projects/demo-cypress/src/support/component-index.html index 39ca75702d5f..2f4a28efa7aa 100644 --- a/projects/demo-cypress/src/support/component-index.html +++ b/projects/demo-cypress/src/support/component-index.html @@ -12,6 +12,11 @@ /> Components App +
diff --git a/projects/demo-cypress/src/tests/range.cy.ts b/projects/demo-cypress/src/tests/range.cy.ts new file mode 100644 index 000000000000..2fc23d02d5d5 --- /dev/null +++ b/projects/demo-cypress/src/tests/range.cy.ts @@ -0,0 +1,275 @@ +import {Component, ElementRef, ViewChild} from '@angular/core'; +import {ComponentFixture} from '@angular/core/testing'; +import {FormControl, ReactiveFormsModule} from '@angular/forms'; +import {TuiRootModule} from '@taiga-ui/core'; +import {TuiKeySteps, TuiRangeComponent, TuiRangeModule} from '@taiga-ui/kit'; + +describe('TuiRange', () => { + let component: TestComponent; + let fixture: ComponentFixture; + + @Component({ + template: ` + + + + `, + }) + class TestComponent { + @ViewChild(TuiRangeComponent, {static: true}) + component!: TuiRangeComponent; + + @ViewChild(TuiRangeComponent, {static: true, read: ElementRef}) + el!: ElementRef; + + testValue = new FormControl([3, 5]); + max = 11; + min = 1; + segments = 10; + step = 1; + keySteps: TuiKeySteps | null = null; + } + + const keydownArrowLeft = new KeyboardEvent('keydown', { + bubbles: true, + key: 'ArrowLeft', + }); + + const keydownArrowRight = new KeyboardEvent('keydown', { + bubbles: true, + key: 'ArrowRight', + }); + + beforeEach(() => + cy + .mount(TestComponent, { + imports: [TuiRootModule, TuiRangeModule, ReactiveFormsModule], + }) + .then(wrapper => { + component = wrapper.component; + fixture = wrapper.fixture; + }), + ); + + it('The bar is filled from 20% to 40%', () => { + expect(getFilledRangeOffset(component).left).to.equal('20%'); + expect(getFilledRangeOffset(component).right).to.equal('60%'); + }); + + describe('Changing values', () => { + describe('Left point', () => { + it('Pressing the left arrow decreases the value by one step', () => { + getLeft(component)?.dispatchEvent(keydownArrowLeft); + expect(component.testValue.value?.[0]).to.equal(2); + expect(component.testValue.value?.[1]).to.equal(5); + }); + + it('Pressing the right arrow increases the value by one step', () => { + getLeft(component)?.dispatchEvent(keydownArrowRight); + expect(component.testValue.value?.[0]).to.equal(4); + expect(component.testValue.value?.[1]).to.equal(5); + }); + + it('Pressing the left arrow correctly paints the strip', () => { + getLeft(component)?.dispatchEvent(keydownArrowLeft); + expect(getFilledRangeOffset(component).left).to.equal('10%'); + expect(getFilledRangeOffset(component).right).to.equal('60%'); + }); + + it('Pressing the right arrow correctly paints the strip', () => { + getLeft(component)?.dispatchEvent(keydownArrowRight); + expect(getFilledRangeOffset(component).left).to.equal('30%'); + expect(getFilledRangeOffset(component).right).to.equal('60%'); + }); + }); + + describe('Right point', () => { + it('Pressing the left arrow decreases the value by one step', () => { + getRight(component)?.dispatchEvent(keydownArrowLeft); + expect(component.testValue.value?.[0]).to.equal(3); + expect(component.testValue.value?.[1]).to.equal(4); + }); + + it('Pressing the right arrow increases the value by one step', () => { + getRight(component)?.dispatchEvent(keydownArrowRight); + expect(component.testValue.value?.[0]).to.equal(3); + expect(component.testValue.value?.[1]).to.equal(6); + }); + + it('Pressing the left arrow correctly paints the strip', () => { + getRight(component)?.dispatchEvent(keydownArrowLeft); + expect(getFilledRangeOffset(component).left).to.equal('20%'); + expect(getFilledRangeOffset(component).right).to.equal('70%'); + }); + + it('Pressing the right arrow correctly paints the strip', () => { + getRight(component)?.dispatchEvent(keydownArrowRight); + expect(getFilledRangeOffset(component).left).to.equal('20%'); + expect(getFilledRangeOffset(component).right).to.equal('50%'); + }); + }); + + describe('Borders', () => { + it('Prevents the left border from exceeding the right', () => { + component.testValue.setValue([5, 5]); + getLeft(component)?.dispatchEvent(keydownArrowRight); + expect(component.testValue.value?.[0]).to.equal(5); + }); + + it('Prevents the right border from dropping below the left', () => { + component.testValue.setValue([5, 5]); + getLeft(component)?.dispatchEvent(keydownArrowLeft); + expect(component.testValue.value?.[1]).to.equal(5); + }); + + it('Prevents the value from decreasing below the minimum', () => { + component.testValue.setValue([1, 11]); + getLeft(component)?.dispatchEvent(keydownArrowLeft); + expect(component.testValue.value?.[0]).to.equal(1); + }); + + it('Prevents the value from exceeding the maximum', () => { + component.testValue.setValue([1, 11]); + getRight(component)?.dispatchEvent(keydownArrowRight); + expect(component.testValue.value?.[1]).to.equal(11); + }); + + it('Adds a value to the closest allowed step', () => { + component.testValue.setValue([3.3, 5]); + getLeft(component)?.dispatchEvent(keydownArrowRight); + expect(component.testValue.value?.[0]).to.equal(4); + }); + }); + + describe('[step] prop', () => { + beforeEach(() => { + component.min = 0; + component.max = 10; + component.step = 0.1; + component.testValue.setValue([1, 5]); + }); + + it('Pressing the right arrow increases the value by one step (step = 1)', () => { + getLeft(component)?.dispatchEvent(keydownArrowRight); + expect(component.testValue.value?.[0]).to.equal(1.1); + }); + + it('Pressing the left arrow decreases the value by one step', () => { + getRight(component)?.dispatchEvent(keydownArrowLeft); + expect(component.testValue.value?.[1]).to.equal(4.9); + }); + + it('Pressing the right arrow increases the value by one step (step = 3)', () => { + component.testValue.setValue([0, 10]); + component.step = 3; + getLeft(component)?.dispatchEvent(keydownArrowRight); + expect(component.testValue.value?.[0]).to.equal(3); + }); + }); + + describe('keySteps', () => { + beforeEach(() => { + component.keySteps = [ + [0, 0], + [25, 10_000], + [50, 100_000], + [75, 500_000], + [100, 1_000_000], + ]; + component.step = (component.max - component.min) / 10; + component.testValue.setValue([0, 0]); + fixture.detectChanges(); + }); + + const testsContexts = [ + { + value: [0, 10_000], + leftOffset: '0%', + rightOffset: '75%', + }, + { + value: [10_000, 10_000], + leftOffset: '25%', + rightOffset: '75%', + }, + { + value: [10_000, 100_000], + leftOffset: '25%', + rightOffset: '50%', + }, + { + value: [100_000, 100_000], + leftOffset: '50%', + rightOffset: '50%', + }, + { + value: [100_000, 500_000], + leftOffset: '50%', + rightOffset: '25%', + }, + { + value: [500_000, 500_000], + leftOffset: '75%', + rightOffset: '25%', + }, + { + value: [500_000, 750_000], + leftOffset: '75%', + rightOffset: '12.5%', + }, + { + value: [750_000, 1_000_000], + leftOffset: '87.5%', + rightOffset: '0%', + }, + ] as const; + + testsContexts.forEach(({value, leftOffset, rightOffset}) => { + it(`${JSON.stringify(value)}`, () => { + component.testValue.setValue(value as unknown as number[]); + fixture.detectChanges(); + + expect(getFilledRangeOffset(component).left).to.equal(leftOffset); + expect(getFilledRangeOffset(component).right).to.equal(rightOffset); + }); + }); + }); + }); + + interface Offset { + left: string; + right: string; + } + + function getFilledRangeOffset(component: TestComponent): Offset { + const computedStyles = component.el.nativeElement; + + return { + left: getComputedStyle(computedStyles).getPropertyValue('--left'), + right: getComputedStyle(computedStyles).getPropertyValue('--right'), + }; + } + + function getLeft(component: TestComponent): HTMLElement | null { + return ( + component.el.nativeElement.querySelector( + '[automation-id="tui-range__left"]', + ) ?? null + ); + } + + function getRight(component: TestComponent): HTMLElement | null { + return ( + component.el.nativeElement.querySelector( + '[automation-id="tui-range__right"]', + ) ?? null + ); + } +}); diff --git a/projects/kit/components/range/test/range.component.spec.ts b/projects/kit/components/range/test/range.component.spec.ts deleted file mode 100644 index 304fa860ac53..000000000000 --- a/projects/kit/components/range/test/range.component.spec.ts +++ /dev/null @@ -1,295 +0,0 @@ -import {Component, ElementRef, ViewChild} from '@angular/core'; -import {ComponentFixture, TestBed} from '@angular/core/testing'; -import {FormControl, ReactiveFormsModule} from '@angular/forms'; -import {TuiRootModule} from '@taiga-ui/core'; -import {TuiKeySteps, TuiRangeComponent, TuiRangeModule} from '@taiga-ui/kit'; -import {tuiCreateKeyboardEvent, TuiPageObject} from '@taiga-ui/testing'; - -// TODO: TypeError: getComputedStyle(...).getPropertyValue is not a function -// TODO: move to cypress component testing -xdescribe('Range', () => { - @Component({ - template: ` - - - - `, - }) - class TestComponent { - @ViewChild(TuiRangeComponent, {static: true}) - component!: TuiRangeComponent; - - @ViewChild(TuiRangeComponent, {static: true, read: ElementRef}) - el!: ElementRef; - - testValue = new FormControl([3, 5]); - max = 11; - min = 1; - segments = 10; - step = 1; - keySteps: TuiKeySteps | null = null; - } - - let fixture: ComponentFixture; - let testComponent: TestComponent; - let pageObject: TuiPageObject; - const keydownArrowLeft = tuiCreateKeyboardEvent('ArrowLeft', 'keydown'); - const keydownArrowRight = tuiCreateKeyboardEvent('ArrowRight', 'keydown'); - const testContext = { - get prefix() { - return 'tui-range__'; - }, - }; - - function getLeft(): HTMLElement { - return pageObject.getByAutomationId(`${testContext.prefix}left`)!.nativeElement; - } - - function getRight(): HTMLElement { - return pageObject.getByAutomationId(`${testContext.prefix}right`)!.nativeElement; - } - - function getFilledRangeOffset(): {left: string; right: string} { - const computedStyles = testComponent.el.nativeElement; - - return { - left: getComputedStyle(computedStyles).getPropertyValue('--left'), - right: getComputedStyle(computedStyles).getPropertyValue('--right'), - }; - } - - beforeEach(() => { - TestBed.configureTestingModule({ - imports: [ReactiveFormsModule, TuiRootModule, TuiRangeModule], - declarations: [TestComponent], - }); - - fixture = TestBed.createComponent(TestComponent); - pageObject = new TuiPageObject(fixture); - testComponent = fixture.componentInstance; - fixture.detectChanges(); - }); - - it('The bar is filled from 20% to 40%', () => { - expect(getFilledRangeOffset().left).toBe('20%'); - expect(getFilledRangeOffset().right).toBe('60%'); - }); - - describe('Changing values', () => { - describe('Left point', () => { - it('Pressing the left arrow decreases the value by one step', () => { - getLeft().dispatchEvent(keydownArrowLeft); - - expect(testComponent.testValue.value[0]).toBe(2); - expect(testComponent.testValue.value[1]).toBe(5); - }); - - it('Pressing the right arrow increases the value by one step', () => { - getLeft().dispatchEvent(keydownArrowRight); - - expect(testComponent.testValue.value[0]).toBe(4); - expect(testComponent.testValue.value[1]).toBe(5); - }); - - it('Pressing the left arrow correctly paints the strip', () => { - getLeft().dispatchEvent(keydownArrowLeft); - fixture.detectChanges(); - - expect(getFilledRangeOffset().left).toBe('10%'); - expect(getFilledRangeOffset().right).toBe('60%'); - }); - - it('Pressing the right arrow correctly paints the strip', () => { - getLeft().dispatchEvent(keydownArrowRight); - fixture.detectChanges(); - - expect(getFilledRangeOffset().left).toBe('30%'); - expect(getFilledRangeOffset().right).toBe('60%'); - }); - }); - - describe('Right point', () => { - it('Pressing the left arrow decreases the value by one step', () => { - getRight().dispatchEvent(keydownArrowLeft); - - expect(testComponent.testValue.value[0]).toBe(3); - expect(testComponent.testValue.value[1]).toBe(4); - }); - - it('Pressing the right arrow increases the value by one step', () => { - getRight().dispatchEvent(keydownArrowRight); - - expect(testComponent.testValue.value[0]).toBe(3); - expect(testComponent.testValue.value[1]).toBe(6); - }); - - it('Pressing the left arrow correctly paints the strip', () => { - getRight().dispatchEvent(keydownArrowLeft); - fixture.detectChanges(); - - expect(getFilledRangeOffset().left).toBe('20%'); - expect(getFilledRangeOffset().right).toBe('70%'); - }); - - it('Pressing the right arrow correctly paints the strip', () => { - getRight().dispatchEvent(keydownArrowRight); - fixture.detectChanges(); - - expect(getFilledRangeOffset().left).toBe('20%'); - expect(getFilledRangeOffset().right).toBe('50%'); - }); - }); - - describe('Borders', () => { - it('Prevents the left border from exceeding the right', () => { - testComponent.testValue.setValue([5, 5]); - getLeft().dispatchEvent(keydownArrowRight); - fixture.detectChanges(); - - expect(testComponent.testValue.value[0]).toBe(5); - }); - - it('Prevents the right border from dropping below the left', () => { - testComponent.testValue.setValue([5, 5]); - getRight().dispatchEvent(keydownArrowLeft); - fixture.detectChanges(); - - expect(testComponent.testValue.value[1]).toBe(5); - }); - - it('Prevents the value from decreasing below the minimum', () => { - testComponent.testValue.setValue([1, 11]); - getLeft().dispatchEvent(keydownArrowLeft); - fixture.detectChanges(); - - expect(testComponent.testValue.value[0]).toBe(1); - }); - - it('Prevents the value from exceeding the maximum', () => { - testComponent.testValue.setValue([1, 11]); - getRight().dispatchEvent(keydownArrowRight); - fixture.detectChanges(); - - expect(testComponent.testValue.value[1]).toBe(11); - }); - - it('Adds a value to the closest allowed step', () => { - testComponent.testValue.setValue([3.3, 5]); - getLeft().dispatchEvent(keydownArrowRight); - fixture.detectChanges(); - - expect(testComponent.testValue.value[0]).toBe(4); - }); - }); - - describe('[step] prop', () => { - beforeEach(() => { - testComponent.min = 0; - testComponent.max = 10; - testComponent.step = 0.1; - testComponent.testValue.setValue([1, 5]); - fixture.detectChanges(); - }); - - it('Pressing the right arrow increases the value by one step (step = 1)', () => { - getLeft().dispatchEvent(keydownArrowRight); - fixture.detectChanges(); - - expect(testComponent.testValue.value[0]).toBe(1.1); - }); - - it('Pressing the left arrow decreases the value by one step', () => { - getRight().dispatchEvent(keydownArrowLeft); - fixture.detectChanges(); - - expect(testComponent.testValue.value[1]).toBe(4.9); - }); - - it('Pressing the right arrow increases the value by one step (step = 3)', () => { - testComponent.testValue.setValue([0, 10]); - testComponent.step = 3; - fixture.detectChanges(); - - getLeft().dispatchEvent(keydownArrowRight); - fixture.detectChanges(); - - expect(testComponent.testValue.value[0]).toBe(3); - }); - }); - - describe('keySteps', () => { - beforeEach(() => { - testComponent.keySteps = [ - [0, 0], - [25, 10_000], - [50, 100_000], - [75, 500_000], - [100, 1_000_000], - ]; - testComponent.step = (testComponent.max - testComponent.min) / 10; - testComponent.testValue.setValue([0, 0]); - fixture.detectChanges(); - }); - - const testsContexts = [ - { - value: [0, 10_000], - leftOffset: '0%', - rightOffset: '75%', - }, - { - value: [10_000, 10_000], - leftOffset: '25%', - rightOffset: '75%', - }, - { - value: [10_000, 100_000], - leftOffset: '25%', - rightOffset: '50%', - }, - { - value: [100_000, 100_000], - leftOffset: '50%', - rightOffset: '50%', - }, - { - value: [100_000, 500_000], - leftOffset: '50%', - rightOffset: '25%', - }, - { - value: [500_000, 500_000], - leftOffset: '75%', - rightOffset: '25%', - }, - { - value: [500_000, 750_000], - leftOffset: '75%', - rightOffset: '12.5%', - }, - { - value: [750_000, 1_000_000], - leftOffset: '87.5%', - rightOffset: '0%', - }, - ] as const; - - testsContexts.forEach(({value, leftOffset, rightOffset}) => { - it(`${JSON.stringify(value)}`, () => { - testComponent.testValue.setValue(value); - fixture.detectChanges(); - - expect(getFilledRangeOffset().left).toBe(leftOffset); - expect(getFilledRangeOffset().right).toBe(rightOffset); - }); - }); - }); - }); -});