diff --git a/projects/cdk/directives/pan/test/pan.directive.spec.ts b/projects/cdk/directives/pan/test/pan.directive.spec.ts deleted file mode 100644 index 6fea3024a9c4..000000000000 --- a/projects/cdk/directives/pan/test/pan.directive.spec.ts +++ /dev/null @@ -1,80 +0,0 @@ -import {Component, DebugElement} from '@angular/core'; -import {ComponentFixture, TestBed} from '@angular/core/testing'; -import {By} from '@angular/platform-browser'; -import {TuiPanModule} from '@taiga-ui/cdk'; - -// TODO: Move to cypress, jest doesn't support touch events -xdescribe('TuiPan directive', () => { - @Component({ - template: ` -
- `, - }) - class TestComponent { - coords = [0, 0]; - - pan(delta: [number, number]): void { - this.coords = delta; - } - } - - let fixture: ComponentFixture; - let testComponent: TestComponent; - let testElement: DebugElement & {nativeElement: HTMLDivElement}; - - beforeEach(async () => { - TestBed.configureTestingModule({ - imports: [TuiPanModule], - declarations: [TestComponent], - }); - await TestBed.compileComponents(); - fixture = TestBed.createComponent(TestComponent); - testComponent = fixture.componentInstance; - testElement = fixture.debugElement.query(By.css('.main')); - - fixture.detectChanges(); - }); - - it('emits delta', () => { - sendTouchEvent(0, 0, testElement.nativeElement, 'touchstart'); - sendTouchEvent(0, 0, testElement.nativeElement, 'touchmove'); - sendTouchEvent(0, 20, testElement.nativeElement, 'touchmove'); - sendTouchEvent(0, 20, testElement.nativeElement, 'touchend'); - - fixture.detectChanges(); - - expect(testComponent.coords).toEqual([0, 20]); - }); - - function sendTouchEvent( - x: number, - y: number, - element: HTMLElement, - eventType: 'touchend' | 'touchmove' | 'touchstart', - ): void { - const touchObj = new Touch({ - identifier: Date.now(), - target: element, - clientX: x, - clientY: y, - radiusX: 2.5, - radiusY: 2.5, - rotationAngle: 10, - force: 0.5, - }); - - const touchEvent = new TouchEvent(eventType, { - cancelable: true, - bubbles: true, - touches: [touchObj], - targetTouches: [], - changedTouches: [touchObj], - shiftKey: true, - }); - - element.dispatchEvent(touchEvent); - } -}); diff --git a/projects/demo-cypress/src/tests/pan.cy.ts b/projects/demo-cypress/src/tests/pan.cy.ts new file mode 100644 index 000000000000..7da790657165 --- /dev/null +++ b/projects/demo-cypress/src/tests/pan.cy.ts @@ -0,0 +1,74 @@ +import {Component} from '@angular/core'; +import {TuiPanModule} from '@taiga-ui/cdk'; +import {TuiRootModule} from '@taiga-ui/core'; + +describe('TuiPan', () => { + let component: TestComponent; + + @Component({ + template: ` + +
+
+ `, + }) + class TestComponent { + coords: readonly number[] = [0, 0]; + + pan(delta: readonly [number, number]): void { + this.coords = delta; + } + } + + beforeEach(() => + cy + .mount(TestComponent, { + imports: [TuiRootModule, TuiPanModule], + }) + .then(wrapper => { + component = wrapper.component; + }), + ); + + it('emits delta', () => { + cy.get('section') + .then(query => { + const element = query.get(0); + + sendTouchEvent(0, 0, element, 'touchstart'); + sendTouchEvent(0, 0, element, 'touchmove'); + sendTouchEvent(0, 20, element, 'touchmove'); + sendTouchEvent(0, 20, element, 'touchend'); + }) + .then(() => expect(component.coords).to.include.members([0, 20])); + }); +}); + +function sendTouchEvent( + x: number, + y: number, + element: HTMLElement, + eventType: 'touchend' | 'touchmove' | 'touchstart', +): void { + const touchObj = new Touch({ + identifier: Date.now(), + target: element, + clientX: x, + clientY: y, + radiusX: 2.5, + radiusY: 2.5, + rotationAngle: 10, + force: 0.5, + }); + + const touchEvent = new TouchEvent(eventType, { + cancelable: true, + bubbles: true, + touches: [touchObj], + targetTouches: [], + changedTouches: [touchObj], + shiftKey: true, + }); + + element.dispatchEvent(touchEvent); +}