From b6a2278dd4c1a347c6b451d33cdfddd43e70b7e9 Mon Sep 17 00:00:00 2001 From: splincode Date: Thu, 1 Feb 2024 15:45:56 +0300 Subject: [PATCH] chore: add `zoom.cy.ts` --- .../zoom/test/zoom.directive.spec.ts | 100 ------------------ projects/demo-cypress/src/tests/zoom.cy.ts | 95 +++++++++++++++++ 2 files changed, 95 insertions(+), 100 deletions(-) delete mode 100644 projects/cdk/directives/zoom/test/zoom.directive.spec.ts create mode 100644 projects/demo-cypress/src/tests/zoom.cy.ts diff --git a/projects/cdk/directives/zoom/test/zoom.directive.spec.ts b/projects/cdk/directives/zoom/test/zoom.directive.spec.ts deleted file mode 100644 index 9babe44e938f..000000000000 --- a/projects/cdk/directives/zoom/test/zoom.directive.spec.ts +++ /dev/null @@ -1,100 +0,0 @@ -import {Component, DebugElement} from '@angular/core'; -import {ComponentFixture, TestBed} from '@angular/core/testing'; -import {By} from '@angular/platform-browser'; -import {tuiFloor, TuiZoom, TuiZoomModule} from '@taiga-ui/cdk'; - -// TODO: need mock Touch -xdescribe('TuiZoom directive', () => { - @Component({ - template: ` -
- `, - }) - class TestComponent { - scale = 1; - - onZoom({delta}: TuiZoom): void { - this.scale -= delta; - } - } - - let fixture: ComponentFixture; - let testComponent: TestComponent; - let testElement: DebugElement & {nativeElement: HTMLDivElement}; - - beforeEach(async () => { - TestBed.configureTestingModule({ - imports: [TuiZoomModule], - declarations: [TestComponent], - }); - await TestBed.compileComponents(); - fixture = TestBed.createComponent(TestComponent); - testComponent = fixture.componentInstance; - testElement = fixture.debugElement.query(By.css('.main')); - - fixture.detectChanges(); - }); - - it('pinch', () => { - sendTouchEvent([10, 10], [20, 20], testElement.nativeElement, 'touchstart'); - sendTouchEvent([5, 5], [25, 25], testElement.nativeElement, 'touchmove'); - sendTouchEvent([5, 5], [25, 25], testElement.nativeElement, 'touchend'); - - fixture.detectChanges(); - - expect(tuiFloor(testComponent.scale, 2)).toBe(0.85); - }); - - it('wheel', () => { - const wheel = new WheelEvent('wheel', {deltaY: 1.1}); - - testElement.nativeElement.dispatchEvent(wheel); - - fixture.detectChanges(); - - expect(tuiFloor(testComponent.scale, 2)).toBe(1.01); - }); - - function sendTouchEvent( - [x, y]: [number, number], - [x2, y2]: [number, number], - element: HTMLElement, - eventType: 'touchend' | 'touchmove' | 'touchstart', - ): void { - const touchObj1 = new Touch({ - identifier: Date.now(), - target: element, - clientX: x, - clientY: y, - radiusX: 2.5, - radiusY: 2.5, - rotationAngle: 10, - force: 0.5, - }); - - const touchObj2 = new Touch({ - identifier: Date.now(), - target: element, - clientX: x2, - clientY: y2, - radiusX: 2.5, - radiusY: 2.5, - rotationAngle: 10, - force: 0.5, - }); - - const touchEvent = new TouchEvent(eventType, { - cancelable: true, - bubbles: true, - touches: [touchObj1, touchObj2], - targetTouches: [], - changedTouches: [touchObj1, touchObj2], - shiftKey: true, - }); - - element.dispatchEvent(touchEvent); - } -}); diff --git a/projects/demo-cypress/src/tests/zoom.cy.ts b/projects/demo-cypress/src/tests/zoom.cy.ts new file mode 100644 index 000000000000..dd9ae18d1857 --- /dev/null +++ b/projects/demo-cypress/src/tests/zoom.cy.ts @@ -0,0 +1,95 @@ +import {Component} from '@angular/core'; +import {tuiFloor, TuiZoom, TuiZoomModule} from '@taiga-ui/cdk'; +import {TuiRootModule} from '@taiga-ui/core'; + +describe('TuiZoom', () => { + let component: TestComponent; + + @Component({ + template: ` + +
+ + `, + }) + class TestComponent { + scale = 1; + + onZoom({delta}: TuiZoom): void { + this.scale -= delta; + } + } + + beforeEach(() => + cy + .mount(TestComponent, { + imports: [TuiRootModule, TuiZoomModule], + }) + .then(wrapper => { + component = wrapper.component; + }), + ); + + it('pinch', () => { + cy.get('section') + .then(query => { + const element = query.get(0); + + sendTouchEvent([10, 10], [20, 20], element, 'touchstart'); + sendTouchEvent([5, 5], [25, 25], element, 'touchmove'); + sendTouchEvent([5, 5], [25, 25], element, 'touchend'); + }) + .then(() => expect(tuiFloor(component.scale, 2)).to.eql(0.85)); + }); + + it('wheel', () => { + cy.get('section') + .then(query => { + const element = query.get(0); + const wheel = new WheelEvent('wheel', {deltaY: 1.1}); + + element.dispatchEvent(wheel); + }) + .then(() => expect(tuiFloor(component.scale, 2)).to.eql(1.01)); + }); +}); + +function sendTouchEvent( + [x, y]: [number, number], + [x2, y2]: [number, number], + element: HTMLElement, + eventType: 'touchend' | 'touchmove' | 'touchstart', +): void { + const touchObj1 = new Touch({ + identifier: Date.now(), + target: element, + clientX: x, + clientY: y, + radiusX: 2.5, + radiusY: 2.5, + rotationAngle: 10, + force: 0.5, + }); + + const touchObj2 = new Touch({ + identifier: Date.now(), + target: element, + clientX: x2, + clientY: y2, + radiusX: 2.5, + radiusY: 2.5, + rotationAngle: 10, + force: 0.5, + }); + + const touchEvent = new TouchEvent(eventType, { + cancelable: true, + bubbles: true, + touches: [touchObj1, touchObj2], + targetTouches: [], + changedTouches: [touchObj1, touchObj2], + shiftKey: true, + }); + + element.dispatchEvent(touchEvent); +}