Renovation: jest tests refactoring

js/renovation/button.tsx

@@ -30,7 +30,7 @@ const getCssClasses = (model: any) => {
     icon && classNames.push('dx-button-has-icon');
 
     return classNames.join(' ');
-}
+};
 
 export const viewModelFunction = (model: Button) => {
     let icon: any = void 0;
@@ -97,14 +97,14 @@ export const viewFunction = (viewModel: Button) => (
 })
 
 export default class Button extends Widget {
+    @Prop() activeStateEnabled?: boolean = true;
     @Prop() classNames?: string[];
     @Prop() contentRender?: any;
+    @Prop() focusStateEnabled?: boolean = true;
+    @Prop() hoverStateEnabled?: boolean = true;
     @Prop() icon?: string;
     @Prop() pressed?: boolean;
     @Prop() stylingMode?: string;
     @Prop() text?: string;
     @Prop() type?: string;
-    @Prop() focusStateEnabled?: boolean = true;
-    @Prop() activeStateEnabled?: boolean = true;
-    @Prop() hoverStateEnabled?: boolean = true;
 }

js/renovation/widget.tsx

@@ -250,7 +250,7 @@ export default class Widget {
         const selector = this.activeStateUnit;
         const namespace = 'UIFeedback';
 
-        if (this.activeStateEnabled) {
+        if (this.activeStateEnabled && !this.disabled) {
             active.on(this.widgetRef,
                 new Action(() => { this._active = true; }),
                 new Action(
@@ -284,6 +284,7 @@ export default class Widget {
     keyboardEffect() {
         const hasKeyboardEventHandler = !!this.onKeyboardHandled;
         const shouldAttach = this.focusStateEnabled || hasKeyboardEventHandler;
+        let id = null;
 
         if (shouldAttach) {
             const keyboardHandler = (options: any) => {
@@ -302,13 +303,13 @@ export default class Widget {
                 return true;
             };
 
-            keyboard.on(
+            id = keyboard.on(
                 this.widgetRef,
                 this.widgetRef,
                 opts => keyboardHandler(opts),
             );
         }
 
-        return () => keyboard.off(this._keyboardListenerId);
+        return () => keyboard.off(id);
     }
 }

package.json

@@ -36,11 +36,11 @@
     "turndown": "^5.0.1"
   },
   "devDependencies": {
-    "@types/jest": "^24.0.24",
     "@babel/core": "^7.7.7",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.7.4",
     "@babel/plugin-proposal-optional-chaining": "^7.7.5",
     "@babel/preset-env": "^7.7.7",
+    "@types/jest": "^24.0.24",
     "@types/jquery": "^2.0.34",
     "@types/react": "16.9.16",
     "angular": "^1.6.10",
@@ -60,7 +60,7 @@
     "devextreme-generator": "^1.0.19",
     "devextreme-internal-tools": "~1.2.24",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.2",
+    "enzyme-adapter-preact-pure": "^2.2.0",
     "eslint": "^6.8.0",
     "eslint-plugin-qunit": "^4.0.0",
     "eslint-plugin-spellcheck": "0.0.11",

testing/jest/button.tests.tsx

@@ -1,24 +1,39 @@
-import React from 'react';
-import Button, { viewModelFunction, viewFunction } from '../../js/renovation/button';
-import { shallow } from 'enzyme';
+import Button from '../../js/renovation/button.p.js';
+import { createElement } from 'preact';
+import { emit, EVENT } from './utils/events-mock';
+import { mount } from 'enzyme';
 
 describe('Button', () => {
-    const render = (props = {}) => shallow(
-        viewFunction(viewModelFunction({ ...new Button(), ...props } as Button)),
-    );
+    const render = (props = {}) => mount(createElement(Button, props)).childAt(0);
 
     describe('Props', () => {
         describe('onClick', () => {
-            it('should be clickable with onClick property only', () => {
+            it('should be called by mouse click', () => {
                 const clickHandler = jest.fn();
-                const button = render({ onClick: clickHandler });
 
+                render({ onClick: clickHandler });
                 expect(clickHandler).toHaveBeenCalledTimes(0);
+                emit(EVENT.click);
+                expect(clickHandler).toHaveBeenCalledTimes(1);
+            });
 
-                button.simulate('click');
+            // it('should be called by Enter', () => {
+            //     const clickHandler = jest.fn();
 
-                expect(clickHandler).toHaveBeenCalledTimes(1);
-            })
+            //     render({ onClick: clickHandler });
+            //     expect(clickHandler).toHaveBeenCalledTimes(0);
+            //     emit(EVENT.click);
+            //     expect(clickHandler).toHaveBeenCalledTimes(1);
+            // });
+
+            // it('should be called by Space', () => {
+            //     const clickHandler = jest.fn();
+
+            //     render({ onClick: clickHandler });
+            //     expect(clickHandler).toHaveBeenCalledTimes(0);
+            //     emit(EVENT.click);
+            //     expect(clickHandler).toHaveBeenCalledTimes(1);
+            // });
         });
 
         describe('stylingMode', () => {
@@ -78,11 +93,20 @@ describe('Button', () => {
             });
         });
 
+        describe('activeStateEnabled', () => {
+            it('should be enabled by default', () => {
+                const widget = render();
+
+                expect(widget.prop('activeStateEnabled')).toBeTruthy();
+                expect(widget.hasClass('dx-state-active')).toBeFalsy();
+            });
+        });
+
         describe('contentRender', () => {
             it('should render template', () => {
                 const button = render({
                     text: 'My button',
-                    contentRender: ({ text }) => (<div className="custom-content">{`${text}123`}</div>),
+                    contentRender: ({ text }) => createElement('div', { className: 'custom-content', children: `${text}123`})
                 });
                 const buttonContentChildren = button.find('.dx-button-content').children();
 

testing/jest/setup-enzyme.js

@@ -1,4 +1,4 @@
-const Enzyme = require('enzyme');
-const Adapter = require('enzyme-adapter-react-16');
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-preact-pure';
 
-Enzyme.configure({ adapter: new Adapter() });
+configure({ adapter: new Adapter });

testing/jest/utils/events-mock.js

@@ -0,0 +1,45 @@
+import eventsEngine from '../../../js/events/core/events_engine';
+
+const eventHandlers = {};
+
+export const EVENT = {
+    active: 'dxactive',
+    blur: 'focusout',
+    click: 'dxclick',
+    focus: 'focusin',
+    hoverEnd: 'dxhoverend',
+    hoverStart: 'dxhoverstart',
+    inactive: 'dxinactive'
+};
+
+export const fakeClickEvent = {
+    screenX: 0,
+    offsetX: 0,
+    pageX: 0,
+    stopImmediatePropagation: () => void 0
+};
+
+export const emit = (event, e = {}, element) => {
+    eventHandlers[event]?.forEach(({ handler, el }) => {
+        if(!element || el === element) {
+            handler(e);
+        }
+    });
+};
+
+eventsEngine.on = (...args) => {
+    const event = args[1].split('.')[0];
+
+    if(!eventHandlers[event]) {
+        eventHandlers[event] = [];
+    }
+
+    eventHandlers[event].push({
+        handler: args[args.length - 1],
+        el: args[0]
+    });
+};
+
+eventsEngine.off = (el, event) => {
+    eventHandlers[event] = [];
+};