Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[8.8] [Infarstructure UI] Fix hosts view functional test (#155772) #156360

Merged
merged 1 commit into from
May 2, 2023
Merged

[8.8] [Infarstructure UI] Fix hosts view functional test (#155772) #156360

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion x-pack/plugins/infra/public/pages/metrics/hosts/components/tabs/metrics/metrics_grid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ const CHARTS_IN_ORDER: Array<Pick<MetricChartProps, 'title' | 'type'> & { fullRo

export const MetricsGrid = React.memo(() => {
return (
<EuiFlexGrid columns={2} gutterSize="s">
<EuiFlexGrid columns={2} gutterSize="s" data-test-subj="hostsView-metricChart">
{CHARTS_IN_ORDER.map(({ fullRow, ...chartProp }) => (
<EuiFlexItem key={chartProp.type} style={fullRow ? { gridColumn: '1/-1' } : {}}>
<MetricChart breakdownSize={DEFAULT_BREAKDOWN_SIZE} {...chartProp} />
Expand Down
46 changes: 33 additions & 13 deletions x-pack/test/functional/apps/infra/hosts_view.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,9 +149,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
const enableHostView = () => pageObjects.infraHostsView.clickEnableHostViewButton();

// Tests

// Failing: See https://github.com/elastic/kibana/issues/155429
describe.skip('Hosts View', function () {
describe('Hosts View', function () {
this.tags('includeFirefox');

before(async () => {
Expand Down Expand Up @@ -328,6 +326,13 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
START_DATE.format(timepickerFormat),
END_DATE.format(timepickerFormat)
);

await retry.waitFor(
'wait for table and KPI charts to load',
async () =>
(await pageObjects.infraHostsView.isHostTableLoading()) &&
(await pageObjects.infraHostsView.isKPIChartsLoaded())
);
});

after(async () => {
Expand Down Expand Up @@ -361,7 +366,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {

describe('KPI tiles', () => {
it('should render 5 metrics trend tiles', async () => {
const hosts = await pageObjects.infraHostsView.getAllMetricsTrendTiles();
const hosts = await pageObjects.infraHostsView.getAllKPITiles();
expect(hosts.length).to.equal(5);
});

Expand All @@ -373,15 +378,17 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
{ metric: 'rx', value: 'N/A' },
].forEach(({ metric, value }) => {
it(`${metric} tile should show ${value}`, async () => {
const tileValue = await pageObjects.infraHostsView.getMetricsTrendTileValue(metric);
expect(tileValue).to.eql(value);
await retry.try(async () => {
const tileValue = await pageObjects.infraHostsView.getKPITileValue(metric);
expect(tileValue).to.eql(value);
});
});
});
});

describe('Metrics Tab', () => {
before(async () => {
browser.scrollTop();
await browser.scrollTop();
await pageObjects.infraHostsView.visitMetricsTab();
});

Expand All @@ -391,18 +398,18 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
});

it('should have an option to open the chart in lens', async () => {
await pageObjects.infraHostsView.getOpenInLensOption();
await pageObjects.infraHostsView.clickAndValidateMetriChartActionOptions();
});
});

describe('Logs Tab', () => {
before(async () => {
browser.scrollTop();
await browser.scrollTop();
await pageObjects.infraHostsView.visitLogsTab();
});

it('should load the Logs tab section when clicking on it', async () => {
testSubjects.existOrFail('hostsView-logs');
await testSubjects.existOrFail('hostsView-logs');
});
});

Expand All @@ -413,7 +420,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
const COLUMNS = 5;

before(async () => {
browser.scrollTop();
await browser.scrollTop();
await pageObjects.infraHostsView.visitAlertTab();
});

Expand Down Expand Up @@ -474,7 +481,14 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
const query = filtererEntries.map((entry) => `host.name :"${entry.title}"`).join(' or ');

before(async () => {
await browser.scrollTop();
await pageObjects.infraHostsView.submitQuery(query);
await retry.waitFor(
'wait for table and KPI charts to load',
async () =>
(await pageObjects.infraHostsView.isHostTableLoading()) &&
(await pageObjects.infraHostsView.isKPIChartsLoaded())
);
});

after(async () => {
Expand Down Expand Up @@ -502,8 +516,10 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
{ metric: 'tx', value: 'N/A' },
{ metric: 'rx', value: 'N/A' },
].map(async ({ metric, value }) => {
const tileValue = await pageObjects.infraHostsView.getMetricsTrendTileValue(metric);
expect(tileValue).to.eql(value);
await retry.try(async () => {
const tileValue = await pageObjects.infraHostsView.getKPITileValue(metric);
expect(tileValue).to.eql(value);
});
})
);
});
Expand Down Expand Up @@ -531,6 +547,10 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
});

describe('Pagination and Sorting', () => {
before(async () => {
await browser.scrollTop();
});

beforeEach(async () => {
await pageObjects.infraHostsView.changePageSize(5);
});
Expand Down
77 changes: 42 additions & 35 deletions x-pack/test/functional/page_objects/infra_hosts_view.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,8 +73,16 @@ export function InfraHostsViewProvider({ getService }: FtrProviderContext) {
return await testSubjects.click('hostsView-enable-feature-button');
},

async getHostsTable() {
return testSubjects.find('hostsView-table');
},

async isHostTableLoading() {
return !(await testSubjects.exists('tbody[class*=euiBasicTableBodyLoading]'));
},

async getHostsTableData() {
const table = await testSubjects.find('hostsView-table');
const table = await this.getHostsTable();
return table.findAllByTestSubject('hostsView-tableRow');
},

Expand All @@ -95,48 +103,55 @@ export function InfraHostsViewProvider({ getService }: FtrProviderContext) {
return cellContent.getVisibleText();
},

async getMetricsTrendContainer() {
async getKPIContainer() {
return testSubjects.find('hostsView-metricsTrend');
},

async getChartsContainer() {
return testSubjects.find('hostsView-metricChart');
},

getMetricsTab() {
// MetricsTtab
async getMetricsTab() {
return testSubjects.find('hostsView-tabs-metrics');
},

async visitMetricsTab() {
const metricsTab = await this.getMetricsTab();
metricsTab.click();
},

async getAllMetricsTrendTiles() {
const container = await this.getMetricsTrendContainer();
return container.findAllByCssSelector('[data-test-subj*="hostsView-metricsTrend-"]');
},

async getMetricsTrendTileValue(type: string) {
const container = await this.getMetricsTrendContainer();
const element = await container.findByTestSubject(`hostsView-metricsTrend-${type}`);
const div = await element.findByClassName('echMetricText__value');
return await div.getAttribute('title');
await metricsTab.click();
},

async getAllMetricsCharts() {
const container = await this.getChartsContainer();
return container.findAllByCssSelector('[data-test-subj*="hostsView-metricChart-"]');
},

async getOpenInLensOption() {
const metricCharts = await this.getAllMetricsCharts();
const chart = metricCharts.at(-1)!;
await chart.moveMouseTo();
const button = await testSubjects.findDescendant('embeddablePanelToggleMenuIcon', chart);
async clickAndValidateMetriChartActionOptions() {
const element = await testSubjects.find('hostsView-metricChart-diskIOWrite');
await element.moveMouseTo();
const button = await element.findByTestSubject('embeddablePanelToggleMenuIcon');
await button.click();
await testSubjects.existOrFail('embeddablePanelContextMenuOpen');
return testSubjects.existOrFail('embeddablePanelAction-openInLens');
await testSubjects.existOrFail('embeddablePanelAction-openInLens');
// forces the modal to close
await element.click();
},

// KPIs
async isKPIChartsLoaded() {
return !(await testSubjects.exists(
'[data-test-subj=hostsView-metricsTrend] .echChartStatus[data-ech-render-complete=true]'
));
},

async getAllKPITiles() {
const container = await this.getKPIContainer();
return container.findAllByCssSelector('[data-test-subj*="hostsView-metricsTrend-"]');
},

async getKPITileValue(type: string) {
const element = await testSubjects.find(`hostsView-metricsTrend-${type}`);
const div = await element.findByClassName('echMetricText__value');
return await div.getAttribute('title');
},

// Flyout Tabs
Expand Down Expand Up @@ -187,7 +202,7 @@ export function InfraHostsViewProvider({ getService }: FtrProviderContext) {

async visitLogsTab() {
const logsTab = await this.getLogsTab();
logsTab.click();
await logsTab.click();
},

async getLogEntries() {
Expand All @@ -212,7 +227,7 @@ export function InfraHostsViewProvider({ getService }: FtrProviderContext) {

async visitAlertTab() {
const alertsTab = await this.getAlertsTab();
alertsTab.click();
await alertsTab.click();
},

setAlertStatusFilter(alertStatus?: AlertStatus) {
Expand All @@ -232,22 +247,14 @@ export function InfraHostsViewProvider({ getService }: FtrProviderContext) {
return testSubjects.find('queryInput');
},

async clearQueryBar() {
const queryBar = await this.getQueryBar();

return queryBar.clearValueWithKeyboard();
},

async typeInQueryBar(query: string) {
const queryBar = await this.getQueryBar();

await queryBar.clearValueWithKeyboard();
return queryBar.type(query);
},

async submitQuery(query: string) {
await this.typeInQueryBar(query);

await testSubjects.click('querySubmitButton');
},

Expand Down Expand Up @@ -288,13 +295,13 @@ export function InfraHostsViewProvider({ getService }: FtrProviderContext) {
async sortByDiskLatency() {
const diskLatency = await this.getDiskLatencyHeader();
const button = await testSubjects.findDescendant('tableHeaderSortButton', diskLatency);
return button.click();
await button.click();
},

async sortByTitle() {
const titleHeader = await this.getTitleHeader();
const button = await testSubjects.findDescendant('tableHeaderSortButton', titleHeader);
return button.click();
await button.click();
},
};
}