Skip to content

Commit

Permalink
add UT
Browse files Browse the repository at this point in the history
  • Loading branch information
zhaoyongjie committed Jun 8, 2022
1 parent 9165c58 commit 001e8c0
Show file tree
Hide file tree
Showing 4 changed files with 400 additions and 108 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@
* specific language governing permissions and limitations
* under the License.
*/

import React from 'react';
import userEvent from '@testing-library/user-event';
import fetchMock from 'fetch-mock';
Expand All @@ -26,58 +25,8 @@ import {
screen,
waitForElementToBeRemoved,
} from 'spec/helpers/testing-library';
import { DatasourceType } from '@superset-ui/core';
import { exploreActions } from 'src/explore/actions/exploreActions';
import { ChartStatus } from 'src/explore/types';
import { DataTablesPane } from '.';

const createProps = () => ({
queryFormData: {
viz_type: 'heatmap',
datasource: '34__table',
slice_id: 456,
url_params: {},
time_range: 'Last week',
all_columns_x: 'source',
all_columns_y: 'target',
metric: 'sum__value',
adhoc_filters: [],
row_limit: 10000,
linear_color_scheme: 'blue_white_yellow',
xscale_interval: null,
yscale_interval: null,
canvas_image_rendering: 'pixelated',
normalize_across: 'heatmap',
left_margin: 'auto',
bottom_margin: 'auto',
y_axis_bounds: [null, null],
y_axis_format: 'SMART_NUMBER',
show_perc: true,
sort_x_axis: 'alpha_asc',
sort_y_axis: 'alpha_asc',
extra_form_data: {},
},
queryForce: false,
chartStatus: 'rendered' as ChartStatus,
onCollapseChange: jest.fn(),
queriesResponse: [
{
colnames: [],
coltypes: [],
data: [],
},
],
datasource: {
id: 34,
name: '',
type: DatasourceType.Table,
columns: [],
metrics: [],
columnFormats: {},
verboseMap: {},
},
actions: exploreActions,
});
import { DataTablesPane } from '..';
import { createDataTablesPaneProps } from './fixture';

describe('DataTablesPane', () => {
// Collapsed/expanded state depends on local storage
Expand All @@ -91,15 +40,15 @@ describe('DataTablesPane', () => {
});

test('Rendering DataTablesPane correctly', () => {
const props = createProps();
const props = createDataTablesPaneProps(0);
render(<DataTablesPane {...props} />, { useRedux: true });
expect(screen.getByText('Results')).toBeVisible();
expect(screen.getByText('Samples')).toBeVisible();
expect(screen.getByLabelText('Expand data panel')).toBeVisible();
});

test('Collapse/Expand buttons', async () => {
const props = createProps();
const props = createDataTablesPaneProps(0);
render(<DataTablesPane {...props} />, {
useRedux: true,
});
Expand All @@ -114,7 +63,7 @@ describe('DataTablesPane', () => {
});

test('Should show tabs: View results', async () => {
const props = createProps();
const props = createDataTablesPaneProps(0);
render(<DataTablesPane {...props} />, {
useRedux: true,
});
Expand All @@ -124,7 +73,7 @@ describe('DataTablesPane', () => {
localStorage.clear();
});
test('Should show tabs: View samples', async () => {
const props = createProps();
const props = createDataTablesPaneProps(0);
render(<DataTablesPane {...props} />, {
useRedux: true,
});
Expand All @@ -147,31 +96,10 @@ describe('DataTablesPane', () => {
},
);
const copyToClipboardSpy = jest.spyOn(copyUtils, 'default');
const props = createProps();
render(
<DataTablesPane
{...{
...props,
chartStatus: 'rendered',
queriesResponse: [
{
colnames: ['__timestamp', 'genre'],
coltypes: [2, 1],
},
],
}}
/>,
{
useRedux: true,
initialState: {
explore: {
originalFormattedTimeColumns: {
'34__table': ['__timestamp'],
},
},
},
},
);
const props = createDataTablesPaneProps(456);
render(<DataTablesPane {...props} />, {
useRedux: true,
});
userEvent.click(screen.getByText('Results'));
expect(await screen.findByText('1 row')).toBeVisible();

Expand All @@ -185,7 +113,7 @@ describe('DataTablesPane', () => {

test('Search table', async () => {
fetchMock.post(
'glob:*/api/v1/chart/data?form_data=%7B%22slice_id%22%3A456%7D',
'glob:*/api/v1/chart/data?form_data=%7B%22slice_id%22%3A789%7D',
{
result: [
{
Expand All @@ -199,31 +127,10 @@ describe('DataTablesPane', () => {
],
},
);
const props = createProps();
render(
<DataTablesPane
{...{
...props,
chartStatus: 'rendered',
queriesResponse: [
{
colnames: ['__timestamp', 'genre'],
coltypes: [2, 1],
},
],
}}
/>,
{
useRedux: true,
initialState: {
explore: {
originalFormattedTimeColumns: {
'34__table': ['__timestamp'],
},
},
},
},
);
const props = createDataTablesPaneProps(789);
render(<DataTablesPane {...props} />, {
useRedux: true,
});
userEvent.click(screen.getByText('Results'));
expect(await screen.findByText('2 rows')).toBeVisible();
expect(screen.getByText('Action')).toBeVisible();
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
/**
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements. See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership. The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing,
* software distributed under the License is distributed on an
* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
* KIND, either express or implied. See the License for the
* specific language governing permissions and limitations
* under the License.
*/
import React from 'react';
import fetchMock from 'fetch-mock';
import userEvent from '@testing-library/user-event';
import {
render,
waitForElementToBeRemoved,
} from 'spec/helpers/testing-library';
import { exploreActions } from 'src/explore/actions/exploreActions';
import { promiseTimeout } from '@superset-ui/core';
import { ResultsPaneOnDashboard } from '../components';
import { createResultsPaneOnDashboardProps } from './fixture';

describe('ResultsPaneOnDashboard', () => {
// render and render errorMessage
fetchMock.post(
'end:/api/v1/chart/data?form_data=%7B%22slice_id%22%3A121%7D',
{
result: [],
},
);

// force query, render and search
fetchMock.post(
'end:/api/v1/chart/data?form_data=%7B%22slice_id%22%3A144%7D&force=true',
{
result: [
{
data: [
{ __timestamp: 1230768000000, genre: 'Action' },
{ __timestamp: 1230768000010, genre: 'Horror' },
],
colnames: ['__timestamp', 'genre'],
coltypes: [2, 1],
},
],
},
);

// error response
fetchMock.post(
'end:/api/v1/chart/data?form_data=%7B%22slice_id%22%3A169%7D',
400,
);

// multiple results pane
fetchMock.post(
'end:/api/v1/chart/data?form_data=%7B%22slice_id%22%3A196%7D',
{
result: [
{
data: [
{ __timestamp: 1230768000000 },
{ __timestamp: 1230768000010 },
],
colnames: ['__timestamp'],
coltypes: [2],
},
{
data: [{ genre: 'Action' }, { genre: 'Horror' }],
colnames: ['genre'],
coltypes: [1],
},
],
},
);

const setForceQuery = jest.spyOn(exploreActions, 'setForceQuery');

afterAll(() => {
fetchMock.reset();
jest.resetAllMocks();
});

test('render', async () => {
const props = createResultsPaneOnDashboardProps({ sliceId: 121 });
const { findByText } = render(<ResultsPaneOnDashboard {...props} />, {
useRedux: true,
});
expect(
await findByText('No results were returned for this query'),
).toBeVisible();
});

test('render errorMessage', async () => {
const props = createResultsPaneOnDashboardProps({
sliceId: 121,
errorMessage: <p>error</p>,
});
const { findByText } = render(<ResultsPaneOnDashboard {...props} />, {
useRedux: true,
});
expect(await findByText('Run a query to display results')).toBeVisible();
});

test('error response', async () => {
const props = createResultsPaneOnDashboardProps({
sliceId: 169,
});
const { findByText } = render(<ResultsPaneOnDashboard {...props} />, {
useRedux: true,
});
expect(await findByText('0 rows')).toBeVisible();
expect(await findByText('Bad Request')).toBeVisible();
});

test('force query, render and search', async () => {
const props = createResultsPaneOnDashboardProps({
sliceId: 144,
queryForce: true,
});
const { queryByText, getByPlaceholderText } = render(
<ResultsPaneOnDashboard {...props} />,
{
useRedux: true,
},
);

await promiseTimeout(() => {
expect(setForceQuery).toHaveBeenCalledTimes(1);
}, 10);
expect(queryByText('2 rows')).toBeVisible();
expect(queryByText('Action')).toBeVisible();
expect(queryByText('Horror')).toBeVisible();

userEvent.type(getByPlaceholderText('Search'), 'hor');
await waitForElementToBeRemoved(() => queryByText('Action'));
expect(queryByText('Horror')).toBeVisible();
expect(queryByText('Action')).not.toBeInTheDocument();
});

test('multiple results pane', async () => {
const props = createResultsPaneOnDashboardProps({
sliceId: 196,
vizType: 'mixed_timeseries',
});
const { findByText } = render(<ResultsPaneOnDashboard {...props} />, {
useRedux: true,
});
expect(await findByText('Results')).toBeVisible();
expect(await findByText('Results 1')).toBeVisible();
});
});
Loading

0 comments on commit 001e8c0

Please sign in to comment.