@configuratorware/configurator-admingui 1.41.1 → 1.42.1

package/src/Screens/Creator/Components/VisualizationAndMediaData/VisualizationAndMediaData.test.js

@@ -1,610 +0,0 @@
-import React from 'react';
-import { act } from 'react-dom/test-utils';
-import { VisualizationAndMediaData } from './VisualizationAndMediaData';
-import { mount, render } from 'enzyme';
-import FormControl from '@material-ui/core/FormControl';
-jest.mock('react-file-drop', () => props => <div>{props.children}</div>);
-
-const mockDispatch = jest.fn();
-jest.mock('react-redux', () => ({
-    useDispatch: () => mockDispatch,
-    connect: () => Component => Component,
-}));
-
-const mediaEditData = {
-    viewMediaInfo: [
-        {
-            id: 'view_1',
-            identifier: 'view_1',
-            sequenceNumber: '01',
-            thumbnail: {
-                fileName: 'view_1.png',
-                src: '/images/item/view_thumb/item_1/item_1/view_1.png',
-            },
-        },
-        {
-            id: 'view_2',
-            identifier: 'view_2',
-            sequenceNumber: '02',
-            thumbnail: {
-                fileName: 'view_2.png',
-                src: null,
-                expectedSrc: '/images/item/view_thumb/item_1/item_1/view_2.png',
-            },
-        },
-    ],
-    componentMediaInfo: [
-        {
-            identifier: 'component_1',
-            translated_title: 'Component 1',
-            images: {
-                componentThumbnail: {
-                    fileName: 'component_1.png',
-                    src: '/images/optionclassifications/component_1.png',
-                },
-            },
-            options: [
-                {
-                    identifier: 'option_1',
-                    translated_title: 'Option 1',
-                    images: {
-                        visualizationImages: {
-                            view_1: {
-                                fileName: 'option_1.png',
-                                src: '/images/options/option_1.png',
-                            },
-                            view_2: {
-                                fileName: 'option_1.png',
-                                src: '/images/options/option_2.png',
-                            },
-                        },
-                        optionThumbnail: {
-                            fileName: 'option_1_thumbnail.png',
-                            src: '/images/options/option_1_thumbnail.png',
-                        },
-                        optionDetailImage: {
-                            fileName: 'option_1_fullsize.jpg',
-                            src: null,
-                            expectedSrc: '/images/options/option_1_fullsize.png',
-                        },
-                    },
-                },
-                {
-                    identifier: 'option_2',
-                    translated_title: 'Option 2',
-                    images: {
-                        visualizationImages: {
-                            view_1: {
-                                fileName: 'option_2.png',
-                                src: '/images/configuratorimages/item_1/view_1/component_1/option_2.png',
-                            },
-                            view_2: {
-                                fileName: 'option_2.png',
-                                src: '/images/configuratorimages/item_1/view_2/component_1/option_2.png',
-                            },
-                        },
-                        optionThumbnail: {
-                            fileName: 'option_2_thumbnail.png',
-                            src: null,
-                        },
-                        optionDetailImage: {
-                            fileName: 'option_2_fullsize.jpg',
-                            src: null,
-                        },
-                    },
-                },
-                {
-                    identifier: 'option_3',
-                    translated_title: 'Option 3',
-                    images: {
-                        visualizationImages: {
-                            view_1: {
-                                fileName: 'option_3.png',
-                                src: '/images/configuratorimages/item_1/view_1/component_1/option_3.png',
-                            },
-                            view_2: {
-                                fileName: 'option_3.png',
-                                src: '/images/configuratorimages/item_1/view_2/component_1/option_3.png',
-                            },
-                        },
-                        optionThumbnail: {
-                            fileName: 'option_3_thumbnail.png',
-                            src: '/images/options/option_3_thumbnail.png',
-                        },
-                        optionDetailImage: {
-                            fileName: 'option_3_fullsize.jpg',
-                            src: '/images/options/option_3_fullsize.png',
-                        },
-                    },
-                },
-            ],
-        },
-        {
-            identifier: 'component_2',
-            translated_title: 'Component 2',
-            images: {
-                componentThumbnail: {
-                    fileName: 'component_2.png',
-                    src: null,
-                },
-            },
-            options: [
-                {
-                    identifier: 'option_4',
-                    translated_title: 'Option 4',
-                    images: {
-                        visualizationImages: {
-                            view_1: {
-                                fileName: 'option_4.png',
-                                src: null,
-                            },
-                            view_2: {
-                                fileName: 'option_4.png',
-                                src: null,
-                            },
-                        },
-                        optionThumbnail: {
-                            fileName: 'option_4_thumbnail.png',
-                            src: '/images/options/option_4_thumbnail.png',
-                        },
-                        optionDetailImage: {
-                            fileName: 'option_4_fullsize.jpg',
-                            src: null,
-                        },
-                    },
-                },
-            ],
-        },
-        {
-            identifier: 'component_3',
-            translated_title: 'Component 3',
-            images: {
-                componentThumbnail: {
-                    fileName: 'component_3.png',
-                    src: null,
-                },
-            },
-            options: [],
-        },
-        {
-            identifier: 'component_4',
-            translated_title: 'Component 4',
-            images: {
-                componentThumbnail: {
-                    fileName: 'component_4.png',
-                    src: null,
-                },
-            },
-            options: [
-                {
-                    identifier: 'option_5',
-                    translated_title: 'Option 5',
-                    images: {
-                        visualizationImages: {
-                            view_1: {
-                                fileName: 'option_5.png',
-                                src: null,
-                            },
-                            view_2: {
-                                fileName: 'option_5.png',
-                                src: null,
-                            },
-                        },
-                        optionThumbnail: {
-                            fileName: 'option_5_thumbnail.png',
-                            src: null,
-                        },
-                        optionDetailImage: {
-                            fileName: 'option_5_fullsize.jpg',
-                            src: null,
-                        },
-                    },
-                },
-            ],
-        },
-    ],
-    possibleNamingIssues: ['thumbnails/components/view_3.png', 'component_3/option_3.png'],
-};
-
-const mediaEditDataNoViews = {
-    viewMediaInfo: [],
-    componentMediaInfo: [
-        {
-            identifier: 'component_1',
-            translated_title: 'Component 1',
-            images: {
-                componentThumbnail: {
-                    fileName: 'component_1.png',
-                    src: '/images/optionclassifications/component_1.png',
-                },
-            },
-            options: [
-                {
-                    identifier: 'option_3',
-                    translated_title: 'Option 3',
-                    images: {
-                        visualizationImages: {
-                            view_1: {
-                                fileName: 'option_3.png',
-                                src: '/images/configuratorimages/item_1/view_1/component_1/option_3.png',
-                            },
-                            view_2: {
-                                fileName: 'option_3.png',
-                                src: '/images/configuratorimages/item_1/view_2/component_1/option_3.png',
-                            },
-                        },
-                        optionThumbnail: {
-                            fileName: 'option_3_thumbnail.png',
-                            src: '/images/options/option_3_thumbnail.png',
-                        },
-                        optionDetailImage: {
-                            fileName: 'option_3_fullsize.jpg',
-                            src: '/images/options/option_3_fullsize.png',
-                        },
-                    },
-                },
-            ],
-        },
-    ],
-    possibleNamingIssues: [],
-};
-
-function createProps(data) {
-    const loadDataPromise = Promise.resolve(data);
-    const updateViewPromise = Promise.resolve('');
-    return {
-        enabled: true,
-        item: {
-            identifier: 'bed_creator_2d',
-            translated_title: 'Bed Creator 2D',
-            settings: {
-                visualizationCreator: '2d',
-                visualizationDesigner: '2d',
-            },
-        },
-        loadData: () => loadDataPromise,
-        updateView: () => updateViewPromise,
-    };
-}
-
-describe('VisualizationAndMediaData editor', () => {
-    const getElementWithText = (text, wrapper) =>
-        wrapper.findWhere(n => n.children().length === 0 && n.text() === text);
-    const getButtonWithText = (text, wrapper) =>
-        wrapper.find('button').filterWhere(button => getElementWithText(text, button).length);
-    const getTabWithText = (text, wrapper) =>
-        wrapper.find('Tab').filterWhere(tab => getElementWithText(text, tab).length);
-
-    it('renders the open button correctly', () => {
-        const props = createProps(mediaEditData);
-        const tree = render(<VisualizationAndMediaData {...props} />);
-        expect(tree).toMatchSnapshot();
-    });
-
-    it('renders correctly', async () => {
-        const props = createProps(mediaEditData);
-        const wrapper = mount(<VisualizationAndMediaData {...props} />);
-
-        // helper functions
-        const getItemTileWithTitle = text =>
-            wrapper.find('ItemTile').filterWhere(tile => tile.props().title === text);
-
-        let openButton = getButtonWithText('Edit visualization and media data', wrapper);
-        openButton.simulate('click');
-        wrapper.update();
-        openButton = getButtonWithText('Edit visualization and media data', wrapper);
-
-        // the loader is shown inside the button
-        expect(openButton.find('CircularProgress')).toHaveLength(1);
-
-        await props.loadData();
-        wrapper.update();
-
-        // the dialog is shown
-        expect(
-            wrapper
-                .find('UIDialog')
-                .at(0)
-                .props().open
-        ).toBe(true);
-
-        // the notice is shown
-        expect(
-            getElementWithText('NOTICE: Not all options have images for all views and components', wrapper)
-        ).toHaveLength(1);
-
-        // switch to the Views and Visualization tab
-        const viewsTab = getTabWithText('Views and Visualization', wrapper);
-        viewsTab.simulate('click');
-
-        // tab1 shows the correct image
-        const tab1 = getTabWithText('view_1', wrapper);
-        expect(
-            tab1
-                .find('Image')
-                .find('img')
-                .props().src
-        ).toMatch(new RegExp('^/images/item/view_thumb/item_1/item_1/view_1\\.png*'));
-
-        // tab2 has no image
-        const tab2 = getTabWithText('view_2', wrapper);
-        expect(
-            tab2
-                .find('PathStructure')
-                .at(0)
-                .text()
-        ).toBe(
-            'images/item/view_thumb/item_1/item_1/view_2.png/images/item/view_thumb/item_1/item_1/view_2.png'
-        );
-
-        // component is shown correctly
-        const component1 = getItemTileWithTitle('Component 1');
-        expect(
-            component1
-                .find('Image')
-                .find('img')
-                .props().src
-        ).toMatch(new RegExp('^/images/optionclassifications/component_1\\.png*'));
-
-        // option is shown correctly
-        const option1 = getItemTileWithTitle('Option 1');
-        const [image1] = option1.find('ImageTile').map(v => v);
-        expect(image1.props().label).toBe('Visualization:');
-        expect(image1.props().src).toBe('/images/options/option_1.png');
-
-        // 'Add view' button is shown
-        expect(getButtonWithText('Add view', wrapper)).toHaveLength(1);
-
-        // 'wrong file naming' warning is shown with the list of files
-        expect(
-            getElementWithText(
-                'NOTICE: The following images do not belong to any dataset (this is often a sign for wrong file namings):',
-                wrapper
-            )
-        ).toHaveLength(1);
-        expect(getElementWithText('thumbnails/components/view_3.png', wrapper));
-        expect(getElementWithText('component_3/option_3.png', wrapper));
-    });
-
-    it('renders correctly if no views provided', async () => {
-        const props = createProps(mediaEditDataNoViews);
-        const wrapper = mount(<VisualizationAndMediaData {...props} />);
-
-        // helper functions
-        const getItemTileWithTitle = text =>
-            wrapper.find('ItemTile').filterWhere(tile => tile.props().title === text);
-
-        let openButton = getButtonWithText('Edit visualization and media data', wrapper);
-        openButton.simulate('click');
-        wrapper.update();
-        openButton = getButtonWithText('Edit visualization and media data', wrapper);
-
-        // the loader is shown inside the button
-        expect(openButton.find('CircularProgress')).toHaveLength(1);
-
-        await props.loadData();
-        wrapper.update();
-
-        // the dialog is shown
-        expect(
-            wrapper
-                .find('UIDialog')
-                .at(0)
-                .props().open
-        ).toBe(true);
-
-        // switch to the Views and Visualization tab
-        const viewsTab = getTabWithText('Views and Visualization', wrapper);
-        viewsTab.simulate('click');
-
-        // no tab is shown in the views
-        const viewTabsContainer = wrapper.find('Tabs').at(1);
-        expect(viewTabsContainer).toHaveLength(1);
-        expect(viewTabsContainer.find('Tab')).toHaveLength(0);
-
-        // no components are shown
-        const component1 = getItemTileWithTitle('Component 1');
-        expect(component1.find('Image').find('img')).toHaveLength(0);
-
-        // 'Add view' button is shown
-        expect(getButtonWithText('Add view', wrapper)).toHaveLength(1);
-    });
-
-    it('"Add view" button opens up the "Add new view" dialog', async () => {
-        const props = createProps(mediaEditData);
-        const saveViewPromise = Promise.resolve();
-        const saveViewAction = jest.fn(() => saveViewPromise);
-        const loadDataPromise = Promise.resolve(mediaEditData);
-        const loadDataAction = jest.fn(() => loadDataPromise);
-        const wrapper = mount(
-            <VisualizationAndMediaData
-                {...props}
-                saveView={saveViewAction}
-                loadData={loadDataAction}
-                itemId={'testItem'}
-            />
-        );
-
-        // helper functions
-        const getInputWithLabel = (label, context) =>
-            context
-                .find(FormControl)
-                .filterWhere(formControl => getElementWithText(label, formControl).length)
-                .find('input');
-
-        const openButton = getButtonWithText('Edit visualization and media data', wrapper);
-        openButton.simulate('click');
-        wrapper.update();
-
-        // switch to the Views and Visualization tab
-        const viewsTab = getTabWithText('Views and Visualization', wrapper);
-        viewsTab.simulate('click');
-
-        getButtonWithText('Add view', wrapper).simulate('click');
-        wrapper.update();
-
-        // the dialog is shown
-        const addViewDialog = wrapper.find('ViewEdit').find('UIDialog');
-        expect(addViewDialog.props().open).toBe(true);
-
-        // inputs are shown
-        expect(getInputWithLabel('Identifier', addViewDialog)).toHaveLength(1);
-
-        // buttons are shown
-        expect(getButtonWithText('Save', addViewDialog)).toHaveLength(1);
-        expect(getButtonWithText('Cancel', addViewDialog)).toHaveLength(1);
-
-        // change the identifier to 'test'
-        getInputWithLabel('Identifier', addViewDialog).simulate('change', {
-            target: {
-                name: 'identifier',
-                value: 'test',
-            },
-        });
-
-        // clicking "Save" calls the correct action
-        act(() => {
-            getButtonWithText('Save', addViewDialog).simulate('click');
-        });
-        await saveViewPromise;
-        await loadDataPromise;
-        expect(saveViewAction).toHaveBeenCalledWith({
-            identifier: 'test',
-            itemId: 'testItem',
-            sequenceNumber: '999',
-        });
-        wrapper.update();
-        expect(
-            wrapper
-                .find('ViewEdit')
-                .find('UIDialog')
-                .props().open
-        ).toBe(false);
-
-        // reopen
-        getButtonWithText('Add view', wrapper).simulate('click');
-        wrapper.update();
-        expect(
-            wrapper
-                .find('ViewEdit')
-                .find('UIDialog')
-                .props().open
-        ).toBe(true);
-        // pressing cancel hides the dialog
-        getButtonWithText('Cancel', addViewDialog).simulate('click');
-        wrapper.update();
-        expect(
-            wrapper
-                .find('ViewEdit')
-                .find('UIDialog')
-                .props().open
-        ).toBe(false);
-    });
-
-    it('Edit button for view name opens it for editing', async () => {
-        const props = createProps(mediaEditData);
-        const updateView = jest.fn();
-        const wrapper = mount(
-            <VisualizationAndMediaData {...props} updateView={updateView} itemId={'item99'} />
-        );
-        getButtonWithText('Edit visualization and media data', wrapper).simulate('click');
-        await props.loadData();
-        wrapper.update();
-
-        // switch to the Views and Visualization tab
-        const viewsTab = getTabWithText('Views and Visualization', wrapper);
-        viewsTab.simulate('click');
-
-        let viewTabsContainer = wrapper.find('Tabs').at(1);
-        expect(viewTabsContainer).toHaveLength(1);
-
-        act(() => {
-            viewTabsContainer
-                .find('Tab')
-                .at(0)
-                .find('button[aria-label="Edit"]')
-                .simulate('click');
-        });
-        wrapper.update();
-        viewTabsContainer = wrapper.find('Tabs').at(1);
-
-        // the edit button is not visible
-        expect(
-            viewTabsContainer
-                .find('Tab')
-                .at(0)
-                .find('button[aria-label="Edit"]')
-        ).toHaveLength(0);
-
-        // input is visible with the correct value
-        const input = viewTabsContainer
-            .find('Tab')
-            .at(0)
-            .find('[aria-label="identifier"]')
-            .find('input');
-        expect(input.props().value).toBe('view_1');
-
-        // the identifier can be changed and saved
-        input.simulate('change', { target: { value: 'something else' } });
-        viewTabsContainer
-            .find('Tab')
-            .at(0)
-            .find('button[aria-label="Save"]')
-            .simulate('click');
-        expect(updateView).toHaveBeenCalledWith({
-            id: 'view_1',
-            identifier: 'something else',
-            itemId: 'item99',
-            sequenceNumber: '01',
-        });
-        wrapper.update();
-        viewTabsContainer = wrapper.find('Tabs').at(1);
-
-        // the edit button is shown again
-        expect(
-            viewTabsContainer
-                .find('Tab')
-                .at(0)
-                .find('button[aria-label="Edit"]')
-        ).toHaveLength(1);
-    });
-
-    it('Remove button for view calls the correct function', async () => {
-        const props = createProps(mediaEditData);
-        const removeView = jest.fn();
-        const loadDataPromise = Promise.resolve(mediaEditData);
-        const loadData = jest.fn(() => loadDataPromise);
-        const wrapper = mount(
-            <VisualizationAndMediaData {...props} removeView={removeView} loadData={loadData} />
-        );
-        getButtonWithText('Edit visualization and media data', wrapper).simulate('click');
-        await props.loadData();
-        wrapper.update();
-
-        // switch to the Views and Visualization tab
-        const viewsTab = getTabWithText('Views and Visualization', wrapper);
-        viewsTab.simulate('click');
-
-        let viewTabsContainer = wrapper.find('Tabs').at(1);
-        expect(viewTabsContainer).toHaveLength(1);
-
-        viewTabsContainer
-            .find('Tab')
-            .at(0)
-            .find('button[aria-label="Remove"]')
-            .simulate('click');
-        wrapper.update();
-
-        const confirmDeleteDialog = wrapper.find('#confirmDeleteView');
-
-        expect(confirmDeleteDialog.props().open).toBe(true);
-
-        confirmDeleteDialog.find('button[aria-label="ok"]').simulate('click');
-        await loadDataPromise;
-        wrapper.update();
-
-        expect(removeView).toHaveBeenCalledWith('view_1');
-
-        expect(wrapper.find('#confirmDeleteView').props().open).toBe(false);
-    });
-});

package/src/Screens/Creator/Components/VisualizationAndMediaData/__snapshots__/VisualizationAndMediaData.test.js.snap

@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`VisualizationAndMediaData editor renders the open button correctly 1`] = `
-<button
-  class="MuiButtonBase-root-49 MuiButton-root-23 MuiButton-contained-34 MuiButton-containedPrimary-35 MuiButton-raised-37 MuiButton-raisedPrimary-38 MuiButton-sizeLarge-47"
-  tabindex="0"
-  type="button"
->
-  <span
-    class="MuiButton-label-24"
-  >
-    <span>
-      Edit visualization and media data
-    </span>
-  </span>
-</button>
-`;