Skip to content

Commit

Permalink
fixed some test errors and added snapshots
Browse files Browse the repository at this point in the history 
Signed-off-by: Paul Sebastian <paulstn@amazon.com>
  • Loading branch information
@paulstn
paulstn committed Oct 18, 2023
1 parent 22cf6b4 commit 3234412
Show file tree
Hide file tree
Showing 4 changed files with 203 additions and 56 deletions.
170 changes: 115 additions & 55 deletions public/components/QueryResults/QueryResults.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,20 @@
* SPDX-License-Identifier: Apache-2.0
*/


import React from "react";
import "regenerator-runtime";
import "mutationobserver-shim";
import "@testing-library/jest-dom/extend-expect";
import { render, fireEvent, configure } from "@testing-library/react";
import { mockQueryResults, mockQueries } from "../../../test/mocks/mockData";
import { MESSAGE_TAB_LABEL } from "../../utils/constants";
import QueryResults from "./QueryResults";
import { Tab, ItemIdToExpandedRowMap, ResponseDetail, QueryResult } from "../Main/main";
import React from 'react';
import 'regenerator-runtime';
import 'mutationobserver-shim';
import '@testing-library/jest-dom/extend-expect';
import { render, fireEvent, configure } from '@testing-library/react';
import { mockQueryResults, mockQueries } from '../../../test/mocks/mockData';
import { MESSAGE_TAB_LABEL } from '../../utils/constants';
import QueryResults from './QueryResults';
import { Tab, ItemIdToExpandedRowMap, ResponseDetail, QueryResult } from '../Main/main';

configure({ testIdAttribute: 'data-test-subj' });

function renderSQLQueryResults(mockQueryResults: ResponseDetail<QueryResult>[],
function renderSQLQueryResults(
mockQueryResults: ResponseDetail<QueryResult>[],
mockQueries: string[] = [],
mockSearchQuery: string = '',
onSelectedTabIdChange: (tab: Tab) => void,
Expand All @@ -26,12 +26,12 @@ function renderSQLQueryResults(mockQueryResults: ResponseDetail<QueryResult>[],
getJdbc: (queries: string[]) => void,
getCsv: (queries: string[]) => void,
getText: (queries: string[]) => void,
setIsResultFullScreen: (isFullScreen: boolean) => void) {

setIsResultFullScreen: (isFullScreen: boolean) => void
) {
return {
...render(
<QueryResults
language='SQL'
language="SQL"
queries={mockQueries}
queryResults={mockQueryResults}
queryResultsJDBC={''}
Expand All @@ -53,34 +53,54 @@ function renderSQLQueryResults(mockQueryResults: ResponseDetail<QueryResult>[],
getText={getText}
isResultFullScreen={false}
setIsResultFullScreen={setIsResultFullScreen}
asyncLoadingStatus="SUCCESS"
asyncQueryError=""
selectedDatasource={[{ label: 'OpenSearch' }]}
cancelAsyncQuery={() => {}}
/>
),
};
}

describe("<QueryResults /> spec", () => {
it("renders the component with no data", async () => {
(window as any).HTMLElement.prototype.scrollBy = function () { };
describe('<QueryResults /> spec', () => {
it('renders the component with no data', async () => {
(window as any).HTMLElement.prototype.scrollBy = function () {};
expect(document.body.children[0]).toMatchSnapshot();
});
});

describe("<QueryResults with data/> spec", () => {
describe('<QueryResults with data/> spec', () => {
const onSelectedTabIdChange = jest.fn();
const onQueryChange = jest.fn();
const updateExpandedMap = jest.fn();
const mockSearchQuery = "";
const mockSearchQuery = '';
const getRawResponse = jest.fn();
const getJdbc = jest.fn();
const getCsv = jest.fn();
const getText = jest.fn();
const setIsResultFullScreen = jest.fn();
(window as any).HTMLElement.prototype.scrollBy = jest.fn();

it("renders the component with mock query results", async () => {
const { getAllByRole, getByText, getAllByText, getAllByTestId, getAllByLabelText } =
renderSQLQueryResults(mockQueryResults, mockQueries, mockSearchQuery, onSelectedTabIdChange, onQueryChange,
updateExpandedMap, getRawResponse, getJdbc, getCsv, getText, setIsResultFullScreen);
it('renders the component with mock query results', async () => {
const {
getAllByRole,
getByText,
getAllByText,
getAllByTestId,
getAllByLabelText,
} = renderSQLQueryResults(
mockQueryResults,
mockQueries,
mockSearchQuery,
onSelectedTabIdChange,
onQueryChange,
updateExpandedMap,
getRawResponse,
getJdbc,
getCsv,
getText,
setIsResultFullScreen
);

expect(document.body.children[0]).toMatchSnapshot();

Expand All @@ -101,28 +121,38 @@ describe("<QueryResults with data/> spec", () => {
// It tests pagination
await fireEvent.click(getAllByLabelText('Page 2 of 2')[0]);
await fireEvent.click(getAllByText('Rows per page', { exact: false })[0]);
expect(getByText("10 rows"));
expect(getByText("20 rows"));
expect(getByText("50 rows"));
expect(getByText("100 rows"));
await fireEvent.click(getByText("20 rows"));
expect(getByText('10 rows'));
expect(getByText('20 rows'));
expect(getByText('50 rows'));
expect(getByText('100 rows'));
await fireEvent.click(getByText('20 rows'));
});

it("renders the component to test tabs down arrow", async () => {
const { getAllByTestId } = renderSQLQueryResults(mockQueryResults, mockQueries, mockSearchQuery, onSelectedTabIdChange,
onQueryChange, updateExpandedMap, getRawResponse, getJdbc, getCsv, getText, setIsResultFullScreen);
it('renders the component to test tabs down arrow', async () => {
const { getAllByTestId } = renderSQLQueryResults(
mockQueryResults,
mockQueries,
mockSearchQuery,
onSelectedTabIdChange,
onQueryChange,
updateExpandedMap,
getRawResponse,
getJdbc,
getCsv,
getText,
setIsResultFullScreen
);

expect(document.body.children[0]).toMatchSnapshot();

// It tests right scrolling arrows
expect(getAllByTestId('slide-down'));
await fireEvent.click(getAllByTestId('slide-down')[0]);
});

});


function renderPPLQueryResults(mockQueryResults: ResponseDetail<QueryResult>[],
function renderPPLQueryResults(
mockQueryResults: ResponseDetail<QueryResult>[],
mockQueries: string[] = [],
mockSearchQuery: string = '',
onSelectedTabIdChange: (tab: Tab) => void,
Expand All @@ -132,12 +162,12 @@ function renderPPLQueryResults(mockQueryResults: ResponseDetail<QueryResult>[],
getJdbc: (queries: string[]) => void,
getCsv: (queries: string[]) => void,
getText: (queries: string[]) => void,
setIsResultFullScreen: (isFullScreen: boolean) => void) {

setIsResultFullScreen: (isFullScreen: boolean) => void
) {
return {
...render(
<QueryResults
language='PPL'
language="PPL"
queries={mockQueries}
queryResults={mockQueryResults}
queryResultsJDBC={''}
Expand All @@ -159,35 +189,55 @@ function renderPPLQueryResults(mockQueryResults: ResponseDetail<QueryResult>[],
getText={getText}
isResultFullScreen={false}
setIsResultFullScreen={setIsResultFullScreen}
asyncLoadingStatus="SUCCESS"
asyncQueryError=""
selectedDatasource={[{ label: 'OpenSearch' }]}
cancelAsyncQuery={() => {}}
/>
),
};
}

describe("<QueryResults /> spec", () => {
it("renders the component with no data", async () => {
(window as any).HTMLElement.prototype.scrollBy = function () { };
describe('<QueryResults /> spec', () => {
it('renders the component with no data', async () => {
(window as any).HTMLElement.prototype.scrollBy = function () {};

expect(document.body.children[0]).toMatchSnapshot();
});
});

describe("<QueryResults with data/> spec", () => {
describe('<QueryResults with data/> spec', () => {
const onSelectedTabIdChange = jest.fn();
const onQueryChange = jest.fn();
const updateExpandedMap = jest.fn();
const mockSearchQuery = "";
const mockSearchQuery = '';
const getRawResponse = jest.fn();
const getJdbc = jest.fn();
const getCsv = jest.fn();
const getText = jest.fn();
const setIsResultFullScreen = jest.fn();
(window as any).HTMLElement.prototype.scrollBy = jest.fn();

it("renders the component with mock query results", async () => {
const { getAllByRole, getByText, getAllByText, getAllByTestId, getAllByLabelText } =
renderPPLQueryResults(mockQueryResults, mockQueries, mockSearchQuery, onSelectedTabIdChange, onQueryChange,
updateExpandedMap, getRawResponse, getJdbc, getCsv, getText, setIsResultFullScreen);
it('renders the component with mock query results', async () => {
const {
getAllByRole,
getByText,
getAllByText,
getAllByTestId,
getAllByLabelText,
} = renderPPLQueryResults(
mockQueryResults,
mockQueries,
mockSearchQuery,
onSelectedTabIdChange,
onQueryChange,
updateExpandedMap,
getRawResponse,
getJdbc,
getCsv,
getText,
setIsResultFullScreen
);

expect(document.body.children[0]).toMatchSnapshot();

Expand All @@ -208,22 +258,32 @@ describe("<QueryResults with data/> spec", () => {
// It tests pagination
await fireEvent.click(getAllByLabelText('Page 2 of 2')[0]);
await fireEvent.click(getAllByText('Rows per page', { exact: false })[0]);
expect(getByText("10 rows"));
expect(getByText("20 rows"));
expect(getByText("50 rows"));
expect(getByText("100 rows"));
await fireEvent.click(getByText("20 rows"));
expect(getByText('10 rows'));
expect(getByText('20 rows'));
expect(getByText('50 rows'));
expect(getByText('100 rows'));
await fireEvent.click(getByText('20 rows'));
});

it("renders the component to test tabs down arrow", async () => {
const { getAllByTestId } = renderPPLQueryResults(mockQueryResults, mockQueries, mockSearchQuery, onSelectedTabIdChange,
onQueryChange, updateExpandedMap, getRawResponse, getJdbc, getCsv, getText, setIsResultFullScreen);
it('renders the component to test tabs down arrow', async () => {
const { getAllByTestId } = renderPPLQueryResults(
mockQueryResults,
mockQueries,
mockSearchQuery,
onSelectedTabIdChange,
onQueryChange,
updateExpandedMap,
getRawResponse,
getJdbc,
getCsv,
getText,
setIsResultFullScreen
);

expect(document.body.children[0]).toMatchSnapshot();

// It tests right scrolling arrows
expect(getAllByTestId('slide-down'));
await fireEvent.click(getAllByTestId('slide-down')[0]);
});

});
2 changes: 1 addition & 1 deletion public/components/QueryResults/QueryResults.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ import {
ResponseDetail,
Tab,
} from '../Main/main';
import { AsyncQueryBody } from './AsyncQueryBody';
import { AsyncQueryBody } from './async_query_body';
import QueryResultsBody from './QueryResultsBody';

interface QueryResultsProps {
Expand Down
87 changes: 87 additions & 0 deletions public/components/QueryResults/__snapshots__/QueryResults.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -328,6 +328,52 @@ exports[`<QueryResults with data/> spec renders the component to test tabs down
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
class="download-container"
>
<div
class="euiPopover euiPopover--anchorDownLeft download-button-container"
id="singlePanel"
>
<div
class="euiPopover__anchor"
>
<button
class="euiButton euiButton--primary euiButton--small"
type="button"
>
<span
class="euiButtonContent euiButtonContent--iconRight euiButton__content"
>
<svg
aria-hidden="true"
class="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
fill-rule="non-zero"
/>
</svg>
<span
class="euiButton__text"
>
Download
</span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div
class="sql-console-results-container"
Expand Down Expand Up @@ -9736,6 +9782,47 @@ exports[`<QueryResults with data/> spec renders the component with mock query re
</div>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<div
class="download-container"
>
<div
class="euiPopover euiPopover--anchorDownLeft download-button-container"
id="singlePanel"
>
<div
class="euiPopover__anchor"
>
<button
class="euiButton euiButton--primary euiButton--small"
type="button"
>
<span
class="euiButtonContent euiButtonContent--iconRight euiButton__content"
>
<svg
aria-hidden="true"
class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
/>
<span
class="euiButton__text"
>
Download
</span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div
class="sql-console-results-container"
Expand Down
0 ...omponents/QueryResults/AsyncQueryBody.tsx → ...ponents/QueryResults/async_query_body.tsx
View file
File renamed without changes.

0 comments on commit 3234412

Please sign in to comment.