Skip to content

Commit

Permalink
included tests of loading and failure states
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 102e158 commit b1cda6e
Show file tree
Hide file tree
Showing 3 changed files with 305 additions and 1 deletion.
2 changes: 1 addition & 1 deletion common/types/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,4 +79,4 @@ export interface CreateAccelerationForm {
formErrors: FormErrorsType;
}

export type AsyncQueryLoadingStatus = "SUCCESS" | "FAILED" | "RUNNING" | "SCHEDULED" | "CANCELLED";
export type AsyncQueryLoadingStatus = 'SUCCESS' | 'FAILED' | 'RUNNING' | 'SCHEDULED' | 'CANCELLED';
76 changes: 76 additions & 0 deletions public/components/QueryResults/QueryResults.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -287,3 +287,79 @@ describe('<QueryResults with data/> spec', () => {
await fireEvent.click(getAllByTestId('slide-down')[0]);
});
});

describe('<AsyncQueryResults /> spec', () => {
it('renders async query loading component', async () => {
const asyncTest = () => {
render(
<QueryResults
language="SQL"
queries={mockQueries}
queryResults={mockQueryResults}
queryResultsJDBC={''}
queryResultsJSON={''}
queryResultsCSV={''}
queryResultsTEXT={''}
messages={[]}
selectedTabId={'0'}
selectedTabName={MESSAGE_TAB_LABEL}
onSelectedTabIdChange={() => {}}
itemIdToExpandedRowMap={{}}
onQueryChange={() => {}}
updateExpandedMap={() => {}}
searchQuery={''}
tabsOverflow={true}
getJson={() => {}}
getJdbc={() => {}}
getCsv={() => {}}
getText={() => {}}
isResultFullScreen={false}
setIsResultFullScreen={() => {}}
asyncLoadingStatus="RUNNING"
asyncQueryError=""
selectedDatasource={[{ label: 'mys3' }]}
cancelAsyncQuery={() => {}}
/>
);
};
await asyncTest();
expect(document.body.children[0]).toMatchSnapshot();
});

it('renders async query failure component', async () => {
const asyncTest = () => {
render(
<QueryResults
language="SQL"
queries={mockQueries}
queryResults={mockQueryResults}
queryResultsJDBC={''}
queryResultsJSON={''}
queryResultsCSV={''}
queryResultsTEXT={''}
messages={[]}
selectedTabId={'0'}
selectedTabName={MESSAGE_TAB_LABEL}
onSelectedTabIdChange={() => {}}
itemIdToExpandedRowMap={{}}
onQueryChange={() => {}}
updateExpandedMap={() => {}}
searchQuery={''}
tabsOverflow={true}
getJson={() => {}}
getJdbc={() => {}}
getCsv={() => {}}
getText={() => {}}
isResultFullScreen={false}
setIsResultFullScreen={() => {}}
asyncLoadingStatus="FAILED"
asyncQueryError="custom error"
selectedDatasource={[{ label: 'mys3' }]}
cancelAsyncQuery={() => {}}
/>
);
};
await asyncTest();
expect(document.body.children[0]).toMatchSnapshot();
});
});
228 changes: 228 additions & 0 deletions public/components/QueryResults/__snapshots__/QueryResults.test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,233 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<AsyncQueryResults /> spec renders async query failure component 1`] = `
<div>
<div
class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow query-result-container"
>
<div
style="padding: 20px 20px 0px 20px;"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
>
<div
class="euiFlexItem"
>
<div
class="euiText euiText--medium query-result-panel-header"
>
<h3>
Results
</h3>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<button
class="euiButton euiButton--primary euiButton--small"
type="button"
>
<span
class="euiButtonContent 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 3v4h-1V4H9V3h4ZM3 3h4v1H4v3H3V3Zm10 10H9v-1h3V9h1v4ZM3 13V9h1v3h3v1H3ZM0 1.994C0 .893.895 0 1.994 0h12.012C15.107 0 16 .895 16 1.994v12.012A1.995 1.995 0 0 1 14.006 16H1.994A1.995 1.995 0 0 1 0 14.006V1.994Zm1 0v12.012c0 .548.446.994.994.994h12.012a.995.995 0 0 0 .994-.994V1.994A.995.995 0 0 0 14.006 1H1.994A.995.995 0 0 0 1 1.994Z"
fill-rule="evenodd"
/>
</svg>
<span
class="euiButton__text"
>
Full screen view
</span>
</span>
</button>
</div>
</div>
</div>
<hr
class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
/>
<div
class="euiSpacer euiSpacer--xl"
/>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionColumn euiFlexGroup--responsive"
>
<svg
aria-hidden="true"
class="euiIcon euiIcon--large euiIcon--danger euiIcon-isLoading"
focusable="false"
height="16"
role="img"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
/>
<div
class="euiText euiText--medium"
>
<h3>
Query failed
</h3>
</div>
<div
class="euiText euiText--medium"
>
The query failed to execute and the operation could not be complete.
</div>
<button
class="euiButton euiButton--primary"
type="button"
>
<span
class="euiButtonContent euiButton__content"
>
<span
class="euiButton__text"
>
View error details
</span>
</span>
</button>
</div>
</div>
<div
class="euiSpacer euiSpacer--xxl"
/>
<div
class="euiSpacer euiSpacer--m"
/>
</div>
</div>
`;

exports[`<AsyncQueryResults /> spec renders async query loading component 1`] = `
<div>
<div
class="euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow query-result-container"
>
<div
style="padding: 20px 20px 0px 20px;"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive"
>
<div
class="euiFlexItem"
>
<div
class="euiText euiText--medium query-result-panel-header"
>
<h3>
Results
</h3>
</div>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
>
<button
class="euiButton euiButton--primary euiButton--small"
type="button"
>
<span
class="euiButtonContent 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 3v4h-1V4H9V3h4ZM3 3h4v1H4v3H3V3Zm10 10H9v-1h3V9h1v4ZM3 13V9h1v3h3v1H3ZM0 1.994C0 .893.895 0 1.994 0h12.012C15.107 0 16 .895 16 1.994v12.012A1.995 1.995 0 0 1 14.006 16H1.994A1.995 1.995 0 0 1 0 14.006V1.994Zm1 0v12.012c0 .548.446.994.994.994h12.012a.995.995 0 0 0 .994-.994V1.994A.995.995 0 0 0 14.006 1H1.994A.995.995 0 0 0 1 1.994Z"
fill-rule="evenodd"
/>
</svg>
<span
class="euiButton__text"
>
Full screen view
</span>
</span>
</button>
</div>
</div>
</div>
<hr
class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginLarge"
/>
<div
class="euiSpacer euiSpacer--xl"
/>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--directionColumn euiFlexGroup--responsive"
>
<span
class="euiLoadingSpinner euiLoadingSpinner--large"
/>
<div
class="euiText euiText--medium"
>
<h3>
Query running
</h3>
</div>
<div
class="euiText euiText--medium"
>
Status:
RUNNING
</div>
<button
class="euiButton euiButton--primary"
type="button"
>
<span
class="euiButtonContent euiButton__content"
>
<span
class="euiButton__text"
>
Cancel
</span>
</span>
</button>
</div>
</div>
<div
class="euiSpacer euiSpacer--xxl"
/>
<div
class="euiSpacer euiSpacer--m"
/>
</div>
</div>
`;

exports[`<QueryResults /> spec renders the component with no data 1`] = `undefined`;

exports[`<QueryResults /> spec renders the component with no data 2`] = `undefined`;
Expand Down

0 comments on commit b1cda6e

Please sign in to comment.