SymphonyElectron/spec/screenPicker.spec.ts

import { shallow } from 'enzyme';
import * as React from 'react';
import ScreenPicker from '../src/renderer/components/screen-picker';
import { ipcRenderer } from './__mocks__/electron';

jest.mock('../src/common/env', () => {
    return {
        isWindowsOS: false,
        isLinux: false,
        isMac: true,
    };
});

describe('screen picker', () => {
        const keyCode = {
            pageDown: { keyCode: 34 },
            rightArrow: { keyCode: 39 },
            pageUp: { keyCode: 33 },
            leftArrow: { keyCode: 37 },
            homeKey: { keyCode: 36 },
            upArrow: { keyCode: 38 },
            endKey: { keyCode: 35 },
            downArrow: { keyCode: 40 },
            enterKey: { keyCode: 13 },
            escapeKey: { keyCode: 27 },
            random: { keyCode: 100 },
        };
        const sendEventLabel = 'send';
        const screenSourceSelectedLabel = 'screen-source-selected';
        const symphonyApiLabel = 'symphony-api';
        const screenTabCustomSelector = '#screen-tab';
        const applicationTabCustomSelector = '#application-tab';
        const screenPickerDataLabel = 'screen-picker-data';
        const events = {
            keyup: jest.fn(),
        };
        const stateMock = {
            sources: [
                { display_id: '0', id: '0', name: 'Application screen 0', thumbnail: undefined },
                { display_id: '1', id: '1', name: 'Application screen 1', thumbnail: undefined },
                { display_id: '2', id: '2', name: 'Application screen 2', thumbnail: undefined },
            ],
                selectedSource: { display_id: '1', id: '1', name: 'Application screen 1', thumbnail: undefined },
        };

    it('should render correctly', () => {
        const wrapper = shallow(React.createElement(ScreenPicker));
        expect(wrapper).toMatchSnapshot();
    });

    it('should call `close` correctly', () => {
        const wrapper = shallow(React.createElement(ScreenPicker));
        const spy = jest.spyOn(ipcRenderer, sendEventLabel);
        const customSelector = 'button.ScreenPicker-cancel-button';
        const expectedValue = { cmd: 'close-window', windowType: 'screen-picker' };
        wrapper.find(customSelector).simulate('click');
        expect(spy).nthCalledWith(1, screenSourceSelectedLabel, null);
        expect(spy).nthCalledWith(2, symphonyApiLabel, expectedValue);
    });

    it('should call `submit` correctly', () => {
        const wrapper = shallow(React.createElement(ScreenPicker));
        const spy = jest.spyOn(ipcRenderer, sendEventLabel);
        const selectedSource = { display_id: '1', id: '1', name: 'Entire screen', thumbnail: undefined };
        const customSelector = 'button.ScreenPicker-share-button';
        wrapper.setState({ selectedSource });
        wrapper.find(customSelector).simulate('click');
        expect(spy).lastCalledWith(screenSourceSelectedLabel, selectedSource);
    });

    it('should call `updateState` correctly', () => {
        const spy = jest.spyOn(ScreenPicker.prototype, 'setState');
        const updateState = {
            sources: [ { display_id: '0', id: '0', name: 'Entire screen', thumbnail: undefined } ],
            selectedSource: undefined,
            selectedTab: 'screens',
        };
        shallow(React.createElement(ScreenPicker));
        ipcRenderer.send(screenPickerDataLabel, updateState);
        expect(spy).toBeCalledWith(updateState);
    });

    describe('`onToggle` event', () => {
        const entireScreenStateMock = {
            sources: [
                { display_id: '0', id: '0', name: 'Entire screen', thumbnail: undefined },
            ],
            selectedSource: { display_id: '0', id: '0', name: 'Entire screen', thumbnail: undefined },
        };
        const applicationScreenStateMock = {
            sources: [
                { display_id: '', id: '1', name: 'Application 1', thumbnail: undefined },
            ],
            selectedSource: { display_id: '', id: '1', name: 'Application 1', thumbnail: undefined },
        };

        it('should call `onToggle` when screen tab is changed', () => {
            const wrapper = shallow(React.createElement(ScreenPicker));
            const spy = jest.spyOn(ScreenPicker.prototype, 'setState');
            const expectedValue = { selectedTab: 'screens' };
            wrapper.setState(entireScreenStateMock);
            wrapper.find(screenTabCustomSelector).simulate('change');
            expect(spy).lastCalledWith(expectedValue);
        });

        it('should call `onToggle` when application tab is changed', () => {
            const wrapper = shallow(React.createElement(ScreenPicker));
            const spy = jest.spyOn(ScreenPicker.prototype, 'setState');
            const expectedValue = { selectedTab: 'applications' };
            wrapper.setState(applicationScreenStateMock);
            wrapper.find(applicationTabCustomSelector).simulate('change');
            expect(spy).lastCalledWith(expectedValue);
        });
    });

    describe('onSelect event', () => {
        it('should call `onSelect` when `ScreenPicker-item-container` in Entire screen is clicked', () => {
            const wrapper = shallow(React.createElement(ScreenPicker));
            const spy = jest.spyOn(ScreenPicker.prototype, 'setState');
            const expectedValue = { selectedSource: { display_id: '0', fileName: 'fullscreen', id: '0', name: 'Entire screen', thumbnail: undefined }};
            const customSelector = '.ScreenPicker-item-container';
            const applicationScreenStateMock = {
                sources: [
                    { display_id: '0', id: '0', name: 'Entire screen', thumbnail: undefined },
                    { display_id: '1', id: '1', name: 'Application screen 1', thumbnail: undefined },
                    { display_id: '2', id: '2', name: 'Application screen 2', thumbnail: undefined },
                ],
                selectedSource: { display_id: '1', fileName: 'fullscreen', id: '1', name: 'Application screen 1', thumbnail: undefined },
            };
            wrapper.setState(applicationScreenStateMock);
            wrapper.find(customSelector).first().simulate('click');
            expect(spy).lastCalledWith(expectedValue);
        });

        it('should call `onSelect` when `ScreenPicker-item-container` in Application screen is clicked', () => {
            const wrapper = shallow(React.createElement(ScreenPicker));
            const spy = jest.spyOn(ScreenPicker.prototype, 'setState');
            const expectedValue = { selectedSource: { display_id: '2', fileName: 'fullscreen', id: '2', name: 'Application screen 2', thumbnail: undefined }};
            const customSelector = '.ScreenPicker-item-container';
            const applicationScreenStateMock = {
                sources: [
                    { display_id: '0', id: '0', name: 'Entire screen', thumbnail: undefined },
                    { display_id: '1', id: '1', name: 'Application screen 1', thumbnail: undefined },
                    { display_id: '2', id: '2', name: 'Application screen 2', thumbnail: undefined },
                ],
                selectedSource: { display_id: '1', fileName: 'fullscreen', id: '1', name: 'Application screen 1', thumbnail: undefined },
            };
            wrapper.setState(applicationScreenStateMock);
            wrapper.find(customSelector).at(2).simulate('click');
            expect(spy).lastCalledWith(expectedValue);
        });
    });

    describe('handle keyUp', () => {
        beforeAll(() => {
            document.addEventListener = jest.fn((event, cb) => {
                events[event] = cb;
            });
        });

        it('should register `keyup` when component is mounted', () => {
            const spy = jest.spyOn(document, 'addEventListener');
            shallow(React.createElement(ScreenPicker));
            events.keyup(keyCode.random);
            expect(spy).lastCalledWith('keyup', expect.any(Function), true);
        });

        it('should remove event `keyup` when component is unmounted', () => {
            const spy = jest.spyOn(document, 'removeEventListener');
            shallow(React.createElement(ScreenPicker)).unmount();
            expect(spy).lastCalledWith('keyup', expect.any(Function), true);
        });

        it('should call `handleKeyUpPress` pageDown key correctly', () => {
            const spy = jest.spyOn(ScreenPicker.prototype, 'setState');
            const expectedValue = { selectedSource: { display_id: '2', fileName: 'fullscreen', id: '2', name: 'Application screen 2', thumbnail: undefined }};
            const wrapper = shallow(React.createElement(ScreenPicker));
            wrapper.setState(stateMock);
            events.keyup(keyCode.pageDown);
            expect(spy).lastCalledWith(expectedValue);
        });

        it('should call `handleKeyUpPress` right arrow key correctly', () => {
            const spy = jest.spyOn(ScreenPicker.prototype, 'setState');
            const expectedValue = { selectedSource: { display_id: '2', fileName: 'fullscreen', id: '2', name: 'Application screen 2', thumbnail: undefined }};
            const wrapper = shallow(React.createElement(ScreenPicker));
            wrapper.setState(stateMock);
            events.keyup(keyCode.rightArrow);
            expect(spy).lastCalledWith(expectedValue);
        });

        it('should call `handleKeyUpPress` pageUp key correctly', () => {
            const spy = jest.spyOn(ScreenPicker.prototype, 'setState');
            const expectedValue = { selectedSource: { display_id: '0', fileName: 'fullscreen', id: '0', name: 'Application screen 0', thumbnail: undefined }};
            const wrapper = shallow(React.createElement(ScreenPicker));
            wrapper.setState(stateMock);
            events.keyup(keyCode.pageUp);
            expect(spy).lastCalledWith(expectedValue);
        });

        it('should call `handleKeyUpPress` left arrow key correctly', () => {
            const spy = jest.spyOn(ScreenPicker.prototype, 'setState');
            const expectedValue = { selectedSource: { display_id: '0', fileName: 'fullscreen', id: '0', name: 'Application screen 0', thumbnail: undefined }};
            const wrapper = shallow(React.createElement(ScreenPicker));
            wrapper.setState(stateMock);
            events.keyup(keyCode.leftArrow);
            expect(spy).lastCalledWith(expectedValue);
        });

        it('should call `handleKeyUpPress` down arrow key correctly', () => {
            const spy = jest.spyOn(ScreenPicker.prototype, 'setState');
            const expectedValue = { selectedSource: { display_id: '0', fileName: 'fullscreen', id: '0', name: 'Application screen 0', thumbnail: undefined }};
            const wrapper = shallow(React.createElement(ScreenPicker));
            wrapper.setState(stateMock);
            events.keyup(keyCode.downArrow);
            expect(spy).lastCalledWith(expectedValue);
        });

        it('should call `handleKeyUpPress` up arrow key correctly', () => {
            const spy = jest.spyOn(ScreenPicker.prototype, 'setState');
            const expectedValue = { selectedSource: { display_id: '2', fileName: 'fullscreen', id: '2', name: 'Application screen 2', thumbnail: undefined }};
            const wrapper = shallow(React.createElement(ScreenPicker));
            wrapper.setState(stateMock);
            events.keyup(keyCode.upArrow);
            expect(spy).lastCalledWith(expectedValue);
        });

        it('should call `handleKeyUpPress` enter key correctly', () => {
            const spy = jest.spyOn(ipcRenderer, sendEventLabel);
            const expectedValue = { display_id: '1', id: '1', name: 'Application screen 1', thumbnail: undefined };
            const wrapper = shallow(React.createElement(ScreenPicker));
            wrapper.setState(stateMock);
            events.keyup(keyCode.enterKey);
            expect(spy).lastCalledWith(screenSourceSelectedLabel, expectedValue);
        });

        it('should call `handleKeyUpPress` escape key correctly', () => {
            const spy = jest.spyOn(ipcRenderer, sendEventLabel);
            const expectedValue = { cmd: 'close-window', windowType: 'screen-picker' };
            const wrapper = shallow(React.createElement(ScreenPicker));
            wrapper.setState(stateMock);
            events.keyup(keyCode.escapeKey);
            expect(spy).nthCalledWith(1, screenSourceSelectedLabel, null);
            expect(spy).nthCalledWith(2, symphonyApiLabel, expectedValue);
        });

        it('should call `handleKeyUpPress` end key correctly', () => {
            const spy = jest.spyOn(ScreenPicker.prototype, 'setState');
            const expectedValue = { selectedSource: { display_id: '0', fileName: 'fullscreen', id: '0', name: 'Application screen 0', thumbnail: undefined }};
            const wrapper = shallow(React.createElement(ScreenPicker));
            wrapper.setState(stateMock);
            events.keyup(keyCode.endKey);
            expect(spy).lastCalledWith(expectedValue);
        });

    });

    describe('tab titles', () => {
        it('should show `application-tab` when display_id is empty', () => {
            const wrapper = shallow(React.createElement(ScreenPicker));
            const applicationScreenStateMock = {
                sources: [
                    { display_id: '', id: '1', name: 'Application Screen', thumbnail: undefined },
                    { display_id: '', id: '2', name: 'Application Screen 2', thumbnail: undefined },
                    { display_id: '', id: '3', name: 'Application Screen 3', thumbnail: undefined },
                ],
            };
            wrapper.setState(applicationScreenStateMock);
            expect(wrapper.find(applicationTabCustomSelector)).toHaveLength(1);
            expect(wrapper.find(screenTabCustomSelector)).toHaveLength(0);
        });

        it('should show `screen-tab` when source name is Entire screen', () => {
            const wrapper = shallow(React.createElement(ScreenPicker));
            const entireScreenStateMock = {
                sources: [
                    { display_id: '1', id: '1', name: 'Entire screen', thumbnail: undefined },
                    { display_id: '2', id: '2', name: 'Screen 2', thumbnail: undefined },
                    { display_id: '3', id: '3', name: 'screen 3', thumbnail: undefined },
                ],
            };
            wrapper.setState(entireScreenStateMock);
            expect(wrapper.find(screenTabCustomSelector)).toHaveLength(1);
            expect(wrapper.find(applicationTabCustomSelector)).toHaveLength(0);
        });

        it('should show `screen-tab` for Windows when source name is Entire screen and display_id is not present', () => {
            const env = require('../src/common/env');
            const wrapper = shallow(React.createElement(ScreenPicker));
            const entireScreenStateMock = {
                sources: [
                    { display_id: '', id: '1', name: 'Entire screen', thumbnail: undefined },
                    { display_id: '', id: '2', name: 'Screen 2', thumbnail: undefined },
                    { display_id: '', id: '3', name: 'screen 3', thumbnail: undefined },
                ],
            };
            env.isWindowsOS = true;
            env.isLinux = false;
            env.isMac = false;
            wrapper.setState(entireScreenStateMock);
            expect(wrapper.find(screenTabCustomSelector)).toHaveLength(1);
            expect(wrapper.find(applicationTabCustomSelector)).toHaveLength(0);
        });

        it('should not show `screen-tab` for Mac when source name is Entire screen and display_id is not present', () => {
            const env = require('../src/common/env');
            const wrapper = shallow(React.createElement(ScreenPicker));
            const entireScreenStateMock = {
                sources: [
                    { display_id: '', id: '1', name: 'Entire screen', thumbnail: undefined },
                    { display_id: '', id: '2', name: 'Screen 2', thumbnail: undefined },
                    { display_id: '', id: '3', name: 'screen 3', thumbnail: undefined },
                ],
            };
            env.isWindowsOS = false;
            env.isLinux = false;
            env.isMac = true;
            wrapper.setState(entireScreenStateMock);
            expect(wrapper.find(screenTabCustomSelector)).toHaveLength(0);
            expect(wrapper.find(applicationTabCustomSelector)).toHaveLength(1);
        });

        it('should show `screen-tab` and `application-tab` when `isScreensAvailable` and `isApplicationsAvailable` is true', () => {
            const wrapper = shallow(React.createElement(ScreenPicker));
            const customState = {
                sources: [
                    { display_id: '1', id: '1', name: 'Entire screen', thumbnail: undefined },
                    { display_id: '', id: '1', name: 'Application screen', thumbnail: undefined },
                ],
            };
            wrapper.setState(customState);
            expect(wrapper.find(applicationTabCustomSelector)).toHaveLength(1);
            expect(wrapper.find(screenTabCustomSelector)).toHaveLength(1);
        });

        it('should show `error-message` when source is empty', () => {
            const errorSelector = '.error-message';
            const wrapper = shallow(React.createElement(ScreenPicker));
            wrapper.setState({ sources: []});
            expect(wrapper.find(errorSelector)).toHaveLength(1);
        });
    });

    describe('`screen-picker-data` event', () => {
        it('should call `screen-picker-data` when component is mounted', () => {
            const onEventLabel = 'on';
            const spy = jest.spyOn(ipcRenderer, onEventLabel);
            shallow(React.createElement(ScreenPicker));
            expect(spy).lastCalledWith(screenPickerDataLabel, expect.any(Function));
        });

        it('should remove listen `screen-picker-data` when component is unmounted', () => {
            const removeListenerEventLabel = 'removeListener';
            const spy = jest.spyOn(ipcRenderer, removeListenerEventLabel);
            shallow(React.createElement(ScreenPicker)).unmount();
            expect(spy).lastCalledWith(screenPickerDataLabel, expect.any(Function));
        });
    });

    it('should call `ScreenPicker-window-border` event when component is mounted and is WindowsOS', () => {
        const env = require('../src/common/env');
        const spy = jest.spyOn(document.body.classList, 'add');
        const expectedValue = 'ScreenPicker-window-border';
        env.isWindowsOS = true;
        shallow(React.createElement(ScreenPicker));
        expect(spy).toBeCalledWith(expectedValue);
    });
});