feat(explore): Upgraded viz select gallery (#15303)

* add modal layout with description, rework styles

* thirty percent

* test correctly

* avoid any changes in modal height

* typescriptify

* feat(viz): add categories to the viz picker (#15304)

* feat(viz): add categories to the viz picker

* fix test types

* add a catch-all category

* tweak layout

* upgrade superset-ui to get new metadata

* do i look like i know what a jpeg is

* fix tests

* lint

* remove script count test requirement

* fix e2e test

* feat(explore): Viz picker search improvements (#15399)

* upgrade superset-ui, install fuse.js

* add metadata to plugin context

* get search working

* layout improvements

* fix tests

* Update superset-frontend/src/explore/components/controls/VizTypeControl/index.tsx

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

* use typography size instead of grid unit

* comments

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>

* feat(explore): Examples image gallery in the viz type control (#15489)

* feat(explore): add section for example images in viz type control

* fix jpg webpack config

* formatting

* feat(Explore): Viz gallery component tweaks (#15520)

* separate viz gallery from the modal

* use gallery directly in add slice view

* more formatting on the add slice container

* restyle the thumbnail list

* explicit thumbnail width and height

* remove crappy hack

* remove useless line

* comment

* sort categories

* comments

* tweak search behavior

* fix tests

* open gallery to the currently selected viz type

* null safety

* show all plugins when searching empty string

* get the new metadatas

* adjust categories scrolling behavior

* add time series table metadata

* upgrade superset-ui

* attempt fixing tests

* upgrade descriptions

* fix unit test

* attempt fixing e2e again

* max width for viz gallery

* update package lock

* undo unnecessary webpack changes

* don't show search results until something is entered

* force modal to open to selected viz type

* tweaks to search behavior

* gallery layout tweaks

* enshrine pivot table v2 in a place of honor

* feat(viz): Clear viz gallery when navigating between categories (#15577)

* start viz gallery with null selection, clear when switching categories

* fix AddSliceContainer tests

* show a message when there is no viz type selected

* composition > inheritance

* clarify searching code

* comment

Co-authored-by: Michael S. Molina <70410625+michael-s-molina@users.noreply.github.com>
This commit is contained in:
David Aaron Suddjian
2021-07-12 10:59:10 -07:00
committed by GitHub
parent d8a15e60b9
commit 257385e888
15 changed files with 943 additions and 404 deletions

View File

@@ -18,22 +18,31 @@
*/
import React from 'react';
import sinon from 'sinon';
import { shallow } from 'enzyme';
import userEvent from '@testing-library/user-event';
import { getChartMetadataRegistry, ChartMetadata } from '@superset-ui/core';
import { render, screen } from 'spec/helpers/testing-library';
import VizTypeControl from 'src/explore/components/controls/VizTypeControl';
import Modal from 'src/components/Modal';
import { Input } from 'src/common/components';
import { DynamicPluginProvider } from 'src/components/DynamicPlugins';
import { act } from 'react-dom/test-utils';
const defaultProps = {
name: 'viz_type',
label: 'Visualization Type',
value: 'vis1',
onChange: sinon.spy(),
isModalOpenInit: true,
};
describe('VizTypeControl', () => {
let wrapper;
/**
* AntD and/or the Icon component seems to be doing some kind of async changes,
* so even though the test passes, there is a warning an update to Icon was not
* wrapped in act(). This sufficiently act-ifies whatever side effects are going
* on and prevents those warnings.
*/
const waitForEffects = () =>
act(() => new Promise(resolve => setTimeout(resolve, 0)));
describe('VizTypeControl', () => {
const registry = getChartMetadataRegistry();
registry
.registerValue(
@@ -51,26 +60,33 @@ describe('VizTypeControl', () => {
}),
);
beforeEach(() => {
wrapper = shallow(<VizTypeControl {...defaultProps} />);
beforeEach(async () => {
render(
<DynamicPluginProvider>
<VizTypeControl {...defaultProps} />
</DynamicPluginProvider>,
);
await waitForEffects();
});
it('renders a Modal', () => {
expect(wrapper.find(Modal)).toExist();
});
it('calls onChange when toggled', () => {
const select = wrapper.find('.viztype-selector-container').first();
select.simulate('click');
it('calls onChange when submitted', () => {
const thumbnail = screen.getAllByTestId('viztype-selector-container')[0];
const submit = screen.getByText('Select');
userEvent.click(thumbnail);
expect(defaultProps.onChange.called).toBe(false);
userEvent.click(submit);
expect(defaultProps.onChange.called).toBe(true);
});
it('filters images based on text input', () => {
expect(wrapper.find('img')).toHaveLength(2);
wrapper.find(Input).simulate('change', {
target: {
value: 'vis2',
},
});
expect(wrapper.find('img')).toExist();
it('filters images based on text input', async () => {
const thumbnails = screen.getAllByTestId('viztype-selector-container');
expect(thumbnails).toHaveLength(2);
const searchInput = screen.getByPlaceholderText('Search');
userEvent.type(searchInput, '2');
await waitForEffects();
const thumbnail = screen.getByTestId('viztype-selector-container');
expect(thumbnail).toBeInTheDocument();
});
});