[Uptime] Add pagination functional test (#47633) (#49793)

* Remove depdency on legacy interface.

* Remove custom interface, use common breadcrumb type.

* Add HTML template for app react entry point.

* Update app props.

* Add constant for react app entry point.

* Remove dependency on legacy capabilities provider.

* Delete legacy kibana framework adapter.

* Add New Platform adapter, reference in startup code.

* Remove dependency on legacy capabilities function.

* Delete reference to obsolete interface.

* Fix busted types in new adapter.

* Add new plugin class, delete old bootstrap code.

* Update routing/functional tests.

* Provide default for potentially-undefined value.

* run x-pack-ciGroup6 40 times

* Reinsert firefox skip tag.

* Update functional tests to work with newly-merged fixtures.

* Add functional test for pagination.

* Update obsolete test snapshots.

* Return CI to normal.

* Return CI to normal.

* Fix broken test expect.

* Fix type-related issue in test and update snapshot.
This commit is contained in:
Justin Kambic 2019-10-30 21:19:25 -04:00 committed by GitHub
parent 37d3618d2a
commit a3c7930e2e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 126 additions and 18 deletions

View file

@ -3,6 +3,7 @@
exports[`FilterStatusButton renders without errors for valid props 1`] = `
<EuiFilterButton
color="text"
data-test-subj="foo"
grow={true}
hasActiveFilters={false}
iconSide="right"

View file

@ -13,6 +13,7 @@ describe('FilterStatusButton', () => {
beforeEach(() => {
props = {
content: 'Up',
dataTestSubj: 'foo',
value: 'up',
withNext: true,
};

View file

@ -105,6 +105,7 @@ export const FilterGroupComponent = ({
content={i18n.translate('xpack.uptime.filterBar.filterUpLabel', {
defaultMessage: 'Up',
})}
dataTestSubj="xpack.uptime.filterBar.filterStatusUp"
value="up"
withNext={true}
/>
@ -112,6 +113,7 @@ export const FilterGroupComponent = ({
content={i18n.translate('xpack.uptime.filterBar.filterDownLabel', {
defaultMessage: 'Down',
})}
dataTestSubj="xpack.uptime.filterBar.filterStatusDown"
value="down"
withNext={false}
/>

View file

@ -10,15 +10,22 @@ import { useUrlParams } from '../../../hooks';
export interface FilterStatusButtonProps {
content: string;
dataTestSubj: string;
value: string;
withNext: boolean;
}
export const FilterStatusButton = ({ content, value, withNext }: FilterStatusButtonProps) => {
export const FilterStatusButton = ({
content,
dataTestSubj,
value,
withNext,
}: FilterStatusButtonProps) => {
const [getUrlParams, setUrlParams] = useUrlParams();
const { statusFilter: urlValue } = getUrlParams();
return (
<EuiFilterButton
data-test-subj={dataTestSubj}
hasActiveFilters={urlValue === value}
onClick={() => {
const nextFilter = { statusFilter: urlValue === value ? '' : value, pagination: '' };

View file

@ -88,6 +88,7 @@ exports[`MonitorList component renders a no items message when no data is provid
grow={false}
>
<OverviewPageLink
dataTestSubj="xpack.uptime.monitorList.prevButton"
direction="prev"
/>
</EuiFlexItem>
@ -95,6 +96,7 @@ exports[`MonitorList component renders a no items message when no data is provid
grow={false}
>
<OverviewPageLink
dataTestSubj="xpack.uptime.monitorList.nextButton"
direction="next"
/>
</EuiFlexItem>
@ -253,6 +255,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
grow={false}
>
<OverviewPageLink
dataTestSubj="xpack.uptime.monitorList.prevButton"
direction="prev"
/>
</EuiFlexItem>
@ -260,6 +263,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
grow={false}
>
<OverviewPageLink
dataTestSubj="xpack.uptime.monitorList.nextButton"
direction="next"
/>
</EuiFlexItem>

View file

@ -88,6 +88,7 @@ exports[`MonitorList component renders a no items message when no data is provid
grow={false}
>
<OverviewPageLink
dataTestSubj="xpack.uptime.monitorList.prevButton"
direction="prev"
/>
</EuiFlexItem>
@ -95,6 +96,7 @@ exports[`MonitorList component renders a no items message when no data is provid
grow={false}
>
<OverviewPageLink
dataTestSubj="xpack.uptime.monitorList.nextButton"
direction="next"
/>
</EuiFlexItem>
@ -253,6 +255,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
grow={false}
>
<OverviewPageLink
dataTestSubj="xpack.uptime.monitorList.prevButton"
direction="prev"
pagination="{\\"cursorKey\\":{\\"monitor_id\\":123},\\"cursorDirection\\":\\"BEFORE\\",\\"sortOrder\\":\\"ASC\\"}"
/>
@ -261,6 +264,7 @@ exports[`MonitorList component renders the monitor list 1`] = `
grow={false}
>
<OverviewPageLink
dataTestSubj="xpack.uptime.monitorList.nextButton"
direction="next"
pagination="{\\"cursorKey\\":{\\"monitor_id\\":456},\\"cursorDirection\\":\\"AFTER\\",\\"sortOrder\\":\\"ASC\\"}"
/>

View file

@ -248,10 +248,18 @@ export const MonitorListComponent = (props: Props) => {
<EuiSpacer size="s" />
<EuiFlexGroup>
<EuiFlexItem grow={false}>
<OverviewPageLink pagination={prevPagePagination} direction="prev" />
<OverviewPageLink
dataTestSubj="xpack.uptime.monitorList.prevButton"
direction="prev"
pagination={prevPagePagination}
/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<OverviewPageLink pagination={nextPagePagination} direction="next" />
<OverviewPageLink
dataTestSubj="xpack.uptime.monitorList.nextButton"
direction="next"
pagination={nextPagePagination}
/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>

View file

@ -10,13 +10,15 @@ import { i18n } from '@kbn/i18n';
import { useUrlParams } from '../../hooks';
interface OverviewPageLinkProps {
pagination: string;
dataTestSubj: string;
direction: string;
pagination: string;
}
export const OverviewPageLink: FunctionComponent<OverviewPageLinkProps> = ({
pagination,
dataTestSubj,
direction,
pagination,
}) => {
const [, updateUrlParams] = useUrlParams();
const icon = direction === 'prev' ? 'arrowLeft' : 'arrowRight';
@ -34,6 +36,7 @@ export const OverviewPageLink: FunctionComponent<OverviewPageLinkProps> = ({
return !!pagination ? (
<EuiLink
aria-label={ariaLabel}
data-test-subj={dataTestSubj}
onClick={() => {
updateUrlParams({ pagination });
}}

View file

@ -4,6 +4,7 @@
* you may not use this file except in compliance with the Elastic License.
*/
import expect from '@kbn/expect';
import { FtrProviderContext } from '../../ftr_provider_context';
export default ({ getPageObjects }: FtrProviderContext) => {
@ -23,11 +24,45 @@ export default ({ getPageObjects }: FtrProviderContext) => {
it('runs filter query without issues', async () => {
await pageObjects.uptime.inputFilterQuery(
DEFAULT_DATE_START,
DEFAULT_DATE_END,
'monitor.status:up and monitor.id:"0000-intermittent"',
'monitor-page-link-0000-intermittent'
'monitor.status:up and monitor.id:"0000-intermittent"'
);
await pageObjects.uptime.pageHasExpectedIds(['0000-intermittent']);
});
it('pagination is cleared when filter criteria changes', async () => {
await pageObjects.uptime.goToUptimePageAndSetDateRange(DEFAULT_DATE_START, DEFAULT_DATE_END);
await pageObjects.uptime.changePage('next');
// there should now be pagination data in the URL
const contains = await pageObjects.uptime.pageUrlContains('pagination');
expect(contains).to.be(true);
await pageObjects.uptime.pageHasExpectedIds([
'0010-down',
'0011-up',
'0012-up',
'0013-up',
'0014-up',
'0015-intermittent',
'0016-up',
'0017-up',
'0018-up',
'0019-up',
]);
await pageObjects.uptime.setStatusFilter('up');
// ensure that pagination is removed from the URL
const doesNotContain = await pageObjects.uptime.pageUrlContains('pagination');
expect(doesNotContain).to.be(false);
await pageObjects.uptime.pageHasExpectedIds([
'0000-intermittent',
'0001-up',
'0002-up',
'0003-up',
'0004-up',
'0005-up',
'0006-up',
'0007-up',
'0008-up',
'0009-up',
]);
});
});
};

View file

@ -11,6 +11,14 @@ export function UptimePageProvider({ getPageObjects, getService }: FtrProviderCo
const uptimeService = getService('uptime');
return new (class UptimePage {
public async goToUptimePageAndSetDateRange(
datePickerStartValue: string,
datePickerEndValue: string
) {
await pageObjects.common.navigateToApp('uptime');
await pageObjects.timePicker.setAbsoluteRange(datePickerStartValue, datePickerEndValue);
}
public async goToUptimeOverviewAndLoadData(
datePickerStartValue: string,
datePickerEndValue: string,
@ -35,16 +43,32 @@ export function UptimePageProvider({ getPageObjects, getService }: FtrProviderCo
}
}
public async inputFilterQuery(
datePickerStartValue: string,
datePickerEndValue: string,
filterQuery: string,
testId: string
) {
await pageObjects.common.navigateToApp('uptime');
await pageObjects.timePicker.setAbsoluteRange(datePickerStartValue, datePickerEndValue);
public async inputFilterQuery(filterQuery: string) {
await uptimeService.setFilterText(filterQuery);
await uptimeService.monitorIdExists(testId);
}
public async pageHasExpectedIds(monitorIdsToCheck: string[]) {
await Promise.all(monitorIdsToCheck.map(id => uptimeService.monitorPageLinkExists(id)));
}
public async pageUrlContains(value: string) {
return await uptimeService.urlContains(value);
}
public async changePage(direction: 'next' | 'prev') {
if (direction === 'next') {
await uptimeService.goToNextPage();
} else if (direction === 'prev') {
await uptimeService.goToPreviousPage();
}
}
public async setStatusFilter(value: 'up' | 'down') {
if (value === 'up') {
await uptimeService.setStatusFilterUp();
} else if (value === 'down') {
await uptimeService.setStatusFilterDown();
}
}
})();
}

View file

@ -19,6 +19,13 @@ export function UptimeProvider({ getService }: FtrProviderContext) {
async monitorIdExists(key: string) {
await testSubjects.existOrFail(key);
},
async monitorPageLinkExists(monitorId: string) {
await testSubjects.existOrFail(`monitor-page-link-${monitorId}`);
},
async urlContains(expected: string) {
const url = await browser.getCurrentUrl();
return url.indexOf(expected) >= 0;
},
async navigateToMonitorWithId(monitorId: string) {
await testSubjects.click(`monitor-page-link-${monitorId}`);
},
@ -30,5 +37,17 @@ export function UptimeProvider({ getService }: FtrProviderContext) {
await testSubjects.setValue('xpack.uptime.filterBar', filterQuery);
await browser.pressKeys(browser.keys.ENTER);
},
async goToNextPage() {
await testSubjects.click('xpack.uptime.monitorList.nextButton');
},
async goToPreviousPage() {
await testSubjects.click('xpack.uptime.monitorList.prevButton');
},
async setStatusFilterUp() {
await testSubjects.click('xpack.uptime.filterBar.filterStatusUp');
},
async setStatusFilterDown() {
await testSubjects.click('xpack.uptime.filterBar.filterStatusDown');
},
};
}