molecule.test.tsx

import React from 'react';
import { render } from '@testing-library/react';
import '@testing-library/jest-dom';
import renderer from 'react-test-renderer';

import { select } from 'mo/common/dom';
import molecule, { MoleculeProvider, Workbench } from 'mo';

import { customExtensions } from '../../../stories/extensions';

describe('Test MoleculeProvider', () => {
    beforeEach(() => {
        // Reset the extensions loaded state
        molecule.extension.setLoaded(false);
    });

    test('Match The MoleculeProvider snapshot', () => {
        const component = renderer.create(
            <MoleculeProvider>
                <Workbench />
            </MoleculeProvider>
        );
        expect(component.toJSON()).toMatchSnapshot();
    });

    test('MoleculeProvider should render built-in Workbench extensions', () => {
        render(
            <MoleculeProvider>
                <Workbench />
            </MoleculeProvider>
        );
        expect(
            select('div[data-id="sidebar.explore.title"]')
        ).toBeInTheDocument();
        expect(
            select('div[data-id="sidebar.search.title"]')
        ).toBeInTheDocument();
        expect(select('.mo-welcome')).toBeInTheDocument();
        expect(
            select('div[id="statusbar.problems.title"]')
        ).toBeInTheDocument();
    });

    test('MoleculeProvider load the extensions', async () => {
        render(
            <MoleculeProvider extensions={customExtensions}>
                <Workbench />
            </MoleculeProvider>
        );
        await expect(
            select('div[data-id="ActivityBarTestPane"]')
        ).toBeInTheDocument();
    });

    test('MoleculeProvider load the locale language extensions', () => {
        localStorage.removeItem('mo.localeId');

        render(
            <MoleculeProvider
                extensions={customExtensions}
                defaultLocale="zh-CN"
            >
                <Workbench />
            </MoleculeProvider>
        );
    });
});