scratch-www/test/unit/components/studio-admin-panel.test.jsx

import React from 'react';
import {act} from 'react-dom/test-utils';

import {mountWithIntl} from '../../helpers/intl-helpers.jsx';
import AdminPanel from '../../../src/components/adminpanel/adminpanel.jsx';
import {
    StudioAdminPanel, adminPanelOpenClass, adminPanelOpenKey
} from '../../../src/views/studio/studio-admin-panel.jsx';

let viewEl;
describe('Studio comments', () => {
    beforeAll(() => {
        viewEl = global.document.createElement('div');
        viewEl.id = 'view';
        global.document.body.appendChild(viewEl);
    });
    beforeEach(() => {
        global.localStorage.clear();
        viewEl.classList.remove(adminPanelOpenClass);
    });
    describe('gets stored state from local storage if available', () => {
        test('stored as open', () => {
            global.localStorage.setItem(adminPanelOpenKey, 'open');
            const component = mountWithIntl(<StudioAdminPanel showAdminPanel />);
            const child = component.find(AdminPanel);
            expect(child.prop('isOpen')).toBe(true);
        });
        test('stored as closed', () => {
            global.localStorage.setItem(adminPanelOpenKey, 'closed');
            const component = mountWithIntl(<StudioAdminPanel showAdminPanel />);
            const child = component.find(AdminPanel);
            expect(child.prop('isOpen')).toBe(false);
        });
        test('not stored', () => {
            const component = mountWithIntl(
                <StudioAdminPanel showAdminPanel />
            );
            const child = component.find(AdminPanel);
            expect(child.prop('isOpen')).toBe(false);
        });
    });
    describe('non admins', () => {
        test('should not have localStorage set with a false value', () => {
            mountWithIntl(<StudioAdminPanel showAdminPanel={false} />);
            expect(global.localStorage.getItem(adminPanelOpenKey)).toBe(null);
        });
        test('should not have css class set even if localStorage contains open key', () => {
            // Regression test for situation where admin logs out but localStorage still
            // contains "open", causing extra space to appear
            global.localStorage.setItem(adminPanelOpenKey, 'open');
            mountWithIntl(<StudioAdminPanel showAdminPanel={false} />);
            expect(viewEl.classList.contains(adminPanelOpenClass)).toBe(false);
        });
    });
    test('calling onOpen sets a class on the #viewEl and records in local storage', () => {
        const component = mountWithIntl(<StudioAdminPanel showAdminPanel />);
        const child = component.find(AdminPanel);
        expect(viewEl.classList.contains(adminPanelOpenClass)).toBe(false);
        // `act` is a test-util function for making react state updates sync
        act(child.prop('onOpen'));
        expect(viewEl.classList.contains(adminPanelOpenClass)).toBe(true);
        expect(global.localStorage.getItem(adminPanelOpenKey)).toBe('open');
    });
    test('renders the correct iframe when open', () => {
        global.localStorage.setItem(adminPanelOpenKey, 'open');
        const component = mountWithIntl(
            <StudioAdminPanel
                studioId={123}
                showAdminPanel
            />
        );
        const child = component.find('iframe');
        expect(child.getDOMNode().src).toMatch('/scratch2-studios/123/adminpanel');
    });
    test('responds to closePanel MessageEvent from the iframe', () => {
        global.localStorage.setItem(adminPanelOpenKey, 'open');
        mountWithIntl(<StudioAdminPanel showAdminPanel />);
        expect(viewEl.classList.contains(adminPanelOpenClass)).toBe(true);
        act(() => {
            global.window.dispatchEvent(new global.MessageEvent('message', {data: 'closePanel'}));
        });
        expect(viewEl.classList.contains(adminPanelOpenClass)).toBe(false);
        expect(global.localStorage.getItem(adminPanelOpenKey)).toBe('closed');
    });
});