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);
+}