test: replace sinon with jest mock (#688)

Author: MarcusNotheis

package.json

@@ -57,11 +57,9 @@
     "@types/jest": "^26.0.8",
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.6",
-    "@types/sinon": "^9.0.0",
     "@typescript-eslint/eslint-plugin": "^3.7.0",
     "@typescript-eslint/parser": "^3.7.0",
     "@ui5/webcomponents-tools": "^1.0.0-rc.8",
-    "babel-jest": "^26.2.2",
     "babel-loader": "^8.1.0",
     "chalk": "^4.0.0",
     "dedent": "^0.7.0",
@@ -94,10 +92,7 @@
     "rimraf": "^3.0.1",
     "rollup": "^2.23.0",
     "rollup-plugin-terser": "^6.1.0",
-    "shelljs": "^0.8.3",
-    "sinon": "^9.0.2",
     "targz": "^1.0.1",
-    "tmp": "^0.1.0",
     "typescript": "^3.9.7"
   },
   "resolutions": {

packages/base/src/Device/EventRegistry.test.ts

@@ -1,19 +1,18 @@
-import * as sinon from 'sinon';
 import { EventRegistry } from './EventRegistry';
 
 describe('Device - Event Registry', () => {
   test('Add, fire and remove event', () => {
-    const callback = sinon.spy();
+    const callback = jest.fn();
     EventRegistry.attachEvent('test', callback);
     expect(EventRegistry.mEventRegistry.hasOwnProperty('test')).toBe(true);
     EventRegistry.fireEvent('test');
-    expect(callback.called).toBe(true);
+    expect(callback).toBeCalled();
     EventRegistry.detachEvent('test', callback);
     expect(EventRegistry.mEventRegistry.hasOwnProperty('test')).toBe(false);
   });
 
   test('Add and remove events with different listeners', () => {
-    const callback = sinon.spy();
+    const callback = jest.fn();
     const a = {};
     const b = {};
     EventRegistry.attachEvent('test', callback, a);
@@ -26,7 +25,7 @@ describe('Device - Event Registry', () => {
   });
 
   test('Remove not existing event should not crash', () => {
-    const callback = sinon.spy();
+    const callback = jest.fn();
     expect(() => {
       EventRegistry.detachEvent('test', callback);
     }).not.toThrow();

packages/base/src/Device/Media.test.ts

@@ -1,4 +1,3 @@
-import * as sinon from 'sinon';
 import { setupMatchMedia } from '../../../../config/jestsetup';
 import { EventRegistry } from './EventRegistry';
 import { Media, RANGESETS } from './Media';
@@ -45,12 +44,12 @@ describe('Device - Media', () => {
 
   test('Attach, fire and Detach Event', () => {
     const media = new Media(defaultSupportInstance);
-    const callback = sinon.spy();
+    const callback = jest.fn();
     // @ts-ignore
     media.attachHandler(callback, this);
     expect(EventRegistry.mEventRegistry.hasOwnProperty('media_Std'));
     EventRegistry.fireEvent('media_Std');
-    expect(callback.called).toBe(true);
+    expect(callback).toBeCalled();
     // @ts-ignore
     media.detachHandler(callback, this);
     expect(EventRegistry.mEventRegistry.hasOwnProperty('media_Std')).toBe(false);

packages/base/src/Device/Orientation.test.ts

@@ -1,11 +1,10 @@
-import * as sinon from 'sinon';
 import { EventRegistry } from './EventRegistry';
 import { Orientation } from './Orientation';
 
 describe('Device - Orientation', () => {
   test('Add and remove handler', () => {
     const instance = new Orientation();
-    const callback = sinon.spy();
+    const callback = jest.fn();
     // @ts-ignore
     instance.attachHandler(callback, this);
     // @ts-ignore

packages/base/src/Device/Resize.test.ts

@@ -1,11 +1,10 @@
-import * as sinon from 'sinon';
 import { EventRegistry } from './EventRegistry';
 import { Resize } from './Resize';
 
 describe('Device - Resize', () => {
   test('Add and remove handler', () => {
     const instance = new Resize();
-    const callback = sinon.spy();
+    const callback = jest.fn();
     // @ts-ignore
     instance.attachHandler(callback, this);
     // @ts-ignore

packages/base/src/utils/Logger.test.ts

@@ -1,43 +1,42 @@
 import { modifyObjectProperty } from '@shared/tests/utils';
-import * as sinon from 'sinon';
 import { LOG_LEVEL, Logger } from './Logger';
 
 describe('Logger', () => {
   test('fatal', () => {
-    const spy = sinon.spy(console, 'error');
+    const spy = jest.spyOn(console, 'error').mockImplementation();
     Logger.log(LOG_LEVEL.FATAL, 'Test');
-    expect(spy.called).toBe(true);
-    spy.restore();
+    expect(spy).toBeCalled();
+    spy.mockRestore();
   });
   test('error', () => {
-    const spy = sinon.spy(console, 'error');
+    const spy = jest.spyOn(console, 'error').mockImplementation();
     Logger.log(LOG_LEVEL.ERROR, 'Test');
-    expect(spy.called).toBe(true);
-    spy.restore();
+    expect(spy).toBeCalled();
+    spy.mockRestore();
   });
   test('warning', () => {
-    const spy = sinon.spy(console, 'warn');
+    const spy = jest.spyOn(console, 'warn').mockImplementation();
     Logger.log(LOG_LEVEL.WARNING, 'Test');
-    expect(spy.called).toBe(true);
-    spy.restore();
+    expect(spy).toBeCalled();
+    spy.mockRestore();
   });
   test('info', () => {
-    const spy = sinon.spy(console, 'info');
+    const spy = jest.spyOn(console, 'info').mockImplementation();
     Logger.log(LOG_LEVEL.INFO, 'Test');
-    expect(spy.called).toBe(true);
-    spy.restore();
+    expect(spy).toBeCalled();
+    spy.mockRestore();
   });
   test('debug', () => {
-    const spy = sinon.spy(console, 'debug');
+    const spy = jest.spyOn(console, 'debug').mockImplementation();
     Logger.log(LOG_LEVEL.DEBUG, 'Test');
-    expect(spy.called).toBe(true);
-    spy.restore();
+    expect(spy).toBeCalled();
+    spy.mockRestore();
   });
   test('trace', () => {
-    const spy = sinon.spy(console, 'trace');
+    const spy = jest.spyOn(console, 'trace').mockImplementation();
     Logger.log(LOG_LEVEL.TRACE, 'Test');
-    expect(spy.called).toBe(true);
-    spy.restore();
+    expect(spy).toBeCalled();
+    spy.mockRestore();
   });
 
   test('Not to crash if no console', () => {
@@ -51,40 +50,40 @@ describe('Logger', () => {
     const { debug, trace } = window.console;
     modifyObjectProperty(window.console, 'debug', false);
     modifyObjectProperty(window.console, 'trace', false);
-    const spy = sinon.spy(console, 'log');
+    const spy = jest.spyOn(console, 'log').mockImplementation();
     // @ts-ignore
     Logger.trace();
-    expect(spy.called).toBe(true);
+    expect(spy).toBeCalled();
     Logger.debug('debug');
-    expect(spy.calledTwice).toBe(true);
-    spy.restore();
+    expect(spy).toBeCalledTimes(2);
+    spy.mockRestore();
     modifyObjectProperty(window.console, 'debug', debug);
     modifyObjectProperty(window.console, 'trace', trace);
   });
   test('iOS specific', () => {
     const { info } = window.console;
     modifyObjectProperty(window.console, 'info', false);
-    const spy = sinon.spy(console, 'log');
+    const spy = jest.spyOn(console, 'log').mockImplementation();
     Logger.info('info');
-    expect(spy.called).toBe(true);
-    spy.restore();
+    expect(spy).toBeCalled();
+    spy.mockRestore();
     modifyObjectProperty(window.console, 'info', info);
   });
 
   test('Public API', () => {
-    const spy = sinon.spy(Logger, 'log');
+    const spy = jest.spyOn(Logger, 'log').mockImplementation();
     Logger.fatal('fatal', 'test');
-    expect(spy.calledWith(LOG_LEVEL.FATAL, 'fatal', 'test')).toBe(true);
+    expect(spy).toBeCalledWith(LOG_LEVEL.FATAL, 'fatal', 'test');
     Logger.error('error', 'test');
-    expect(spy.calledWith(LOG_LEVEL.ERROR, 'error', 'test')).toBe(true);
+    expect(spy).toBeCalledWith(LOG_LEVEL.ERROR, 'error', 'test');
     Logger.warning('warning', 'test');
-    expect(spy.calledWith(LOG_LEVEL.WARNING, 'warning', 'test')).toBe(true);
+    expect(spy).toBeCalledWith(LOG_LEVEL.WARNING, 'warning', 'test');
     Logger.info('info', 'test');
-    expect(spy.calledWith(LOG_LEVEL.INFO, 'info', 'test')).toBe(true);
+    expect(spy).toBeCalledWith(LOG_LEVEL.INFO, 'info', 'test');
     Logger.debug('debug', 'test');
-    expect(spy.calledWith(LOG_LEVEL.DEBUG, 'debug', 'test')).toBe(true);
+    expect(spy).toBeCalledWith(LOG_LEVEL.DEBUG, 'debug', 'test');
     Logger.trace('trace', 'test');
-    expect(spy.calledWith(LOG_LEVEL.TRACE, 'trace', 'test')).toBe(true);
+    expect(spy).toBeCalledWith(LOG_LEVEL.TRACE, 'trace', 'test');
   });
 
   test('Custom Component', () => {

packages/main/src/components/AutoCloseOnOutsideClick/AutoCloseOnOutsideClick.test.tsx

@@ -3,7 +3,6 @@ import { mount } from 'enzyme';
 import { FlexBox } from '@ui5/webcomponents-react/lib/FlexBox';
 import { FlexBoxJustifyContent } from '@ui5/webcomponents-react/lib/FlexBoxJustifyContent';
 import * as React from 'react';
-import sinon from 'sinon';
 
 describe('FlexBox', () => {
   test('JustifyContent: End', () => {
@@ -46,17 +45,5 @@ describe('FlexBox', () => {
     expect(wrapper.render()).toMatchSnapshot();
   });
 
-  test('pass through click handler', () => {
-    const callback = sinon.spy();
-    const wrapper = mount(
-      // @ts-ignore
-      <FlexBox onClick={callback}>
-        <span>Test 1</span>
-      </FlexBox>
-    );
-    wrapper.simulate('click');
-    expect(callback.called).toBe(true);
-  });
-
   createPassThroughPropsTest(FlexBox);
 });

packages/main/src/components/AutoCloseOnOutsideClick/index.tsx

@@ -1,4 +1,3 @@
-import { getEventFromCallback } from '@shared/tests/utils';
 import { mount } from 'enzyme';
 import { Breadcrumbs } from '@ui5/webcomponents-react/lib/Breadcrumbs';
 import { Button } from '@ui5/webcomponents-react/lib/Button';
@@ -12,7 +11,6 @@ import { Text } from '@ui5/webcomponents-react/lib/Text';
 import { Title } from '@ui5/webcomponents-react/lib/Title';
 import { TitleLevel } from '@ui5/webcomponents-react/lib/TitleLevel';
 import React from 'react';
-import * as sinon from 'sinon';
 
 const headerContent = (
   <div style={{ display: 'flex', flexDirection: 'column' }}>
@@ -153,15 +151,15 @@ describe('ObjectPage', () => {
   });
 
   test.skip('onSelectedSectionChangedHandler', () => {
-    const callback = sinon.spy();
+    const callback = jest.fn();
     const wrapper = mount(
       <ObjectPage selectedSectionId={'2'} mode={ObjectPageMode.IconTabBar} onSelectedSectionChanged={callback}>
         <ObjectPageSection id={'1'}>Test</ObjectPageSection>
         <ObjectPageSection id={'2'}>Test 2</ObjectPageSection>
       </ObjectPage>
     );
     wrapper.find('section[role="navigation"] ui5-button').first().simulate('click');
-    expect(getEventFromCallback(callback).detail.selectedSectionId).toEqual('1');
+    expect(callback.mock[0][0].detail.selectedSectionId).toEqual('1');
   });
 
   test('No Header', () => {

packages/main/src/components/FlexBox/FlexBox.test.tsx

@@ -10,7 +10,6 @@ const { asyncCopyTo, highlightLog } = require('../utils');
 const replace = require('@rollup/plugin-replace');
 const glob = require('glob');
 const { terser } = require('rollup-plugin-terser');
-const sh = require('shelljs');
 const { spawnSync } = require('child_process');
 
 process.env.BABEL_ENV = 'production';