kibana/test/functional/apps/dashboard/_embeddable_rendering.js

/*
 * Licensed to Elasticsearch B.V. under one or more contributor
 * license agreements. See the NOTICE file distributed with
 * this work for additional information regarding copyright
 * ownership. Elasticsearch B.V. 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 expect from 'expect.js';

/**
 * This tests both that one of each visualization can be added to a dashboard (as opposed to opening an existing
 * dashboard with the visualizations already on it), as well as conducts a rough type of snapshot testing by checking
 * for various ui components. The downside is these tests are a bit fragile to css changes (though not as fragile as
 * actual screenshot snapshot regression testing), and can be difficult to diagnose failures (which visualization
 * broke?).  The upside is that this offers very good coverage with a minimal time investment.
 */

export default function ({ getService, getPageObjects }) {
  const find = getService('find');
  const remote = getService('remote');
  const dashboardExpect = getService('dashboardExpect');
  const dashboardAddPanel = getService('dashboardAddPanel');
  const PageObjects = getPageObjects(['common', 'dashboard', 'header', 'visualize', 'discover']);

  const expectAllDataRenders = async () => {
    await dashboardExpect.pieSliceCount(16);
    await dashboardExpect.seriesElementCount(19);
    await dashboardExpect.dataTableRowCount(5);
    await dashboardExpect.savedSearchRowCount(50);
    await dashboardExpect.goalAndGuageLabelsExist(['63%', '56%', '11.915 GB']);
    await dashboardExpect.inputControlItemCount(5);
    await dashboardExpect.metricValuesExist(['7,544']);
    await dashboardExpect.markdownWithValuesExists(['I\'m a markdown!']);
    await dashboardExpect.lineChartPointsCount(5);
    await dashboardExpect.tagCloudWithValuesFound(['CN', 'IN', 'US', 'BR', 'ID']);
    await dashboardExpect.timelionLegendCount(0);
    const tsvbGuageExists = await find.existsByCssSelector('.thorHalfGauge');
    expect(tsvbGuageExists).to.be(true);
    await dashboardExpect.tsvbMetricValuesExist(['210,007,889,606']);
    await dashboardExpect.tsvbMarkdownWithValuesExists(['Hi Avg last bytes: 6286.674715909091']);
    await dashboardExpect.tsvbTableCellCount(20);
    await dashboardExpect.tsvbTimeSeriesLegendCount(1);
    await dashboardExpect.tsvbTopNValuesExist(['5,734.79', '6,286.675']);
    await dashboardExpect.vegaTextsExist(['5,000']);
  };

  const expectNoDataRenders = async () => {
    await dashboardExpect.pieSliceCount(0);
    await dashboardExpect.seriesElementCount(0);
    await dashboardExpect.dataTableRowCount(0);
    await dashboardExpect.savedSearchRowCount(0);
    await dashboardExpect.inputControlItemCount(5);
    await dashboardExpect.metricValuesExist(['0']);
    await dashboardExpect.markdownWithValuesExists(['I\'m a markdown!']);

    // Three instead of 0 because there is a visualization based off a non time based index that
    // should still show data.
    await dashboardExpect.lineChartPointsCount(3);

    await dashboardExpect.timelionLegendCount(0);
    const tsvbGuageExists = await find.existsByCssSelector('.thorHalfGauge');
    expect(tsvbGuageExists).to.be(true);
    await dashboardExpect.tsvbMetricValuesExist(['0']);
    await dashboardExpect.tsvbMarkdownWithValuesExists(['Hi Avg last bytes: 0']);
    await dashboardExpect.tsvbTableCellCount(0);
    await dashboardExpect.tsvbTimeSeriesLegendCount(1);
    await dashboardExpect.tsvbTopNValuesExist(['0']);
    await dashboardExpect.vegaTextsDoNotExist(['5,000']);
  };

  describe('dashboard embeddable rendering', function describeIndexTests() {
    before(async () => {
      await PageObjects.dashboard.clickNewDashboard();

      const fromTime = '2018-01-01 00:00:00.000';
      const toTime = '2018-04-13 00:00:00.000';
      await PageObjects.header.setAbsoluteRange(fromTime, toTime);
    });

    after(async () => {
      // Get rid of the timestamp added in this test, as well any global or app state.
      const currentUrl = await remote.getCurrentUrl();
      const newUrl = currentUrl.replace(/\?.*$/, '');
      await remote.get(newUrl, false);
    });

    it('adding visualizations', async () => {
      await dashboardAddPanel.addEveryVisualization('"Rendering Test"');

      // This one is rendered via svg which lets us do better testing of what is being rendered.
      await dashboardAddPanel.addVisualization('Filter Bytes Test: vega');

      await PageObjects.header.waitUntilLoadingHasFinished();
      const panelCount = await PageObjects.dashboard.getPanelCount();
      expect(panelCount).to.be(27);
    });

    it('adding saved searches', async () => {
      await dashboardAddPanel.addEverySavedSearch('"Rendering Test"');
      await dashboardAddPanel.closeAddPanel();
      await PageObjects.header.waitUntilLoadingHasFinished();
      const panelCount = await PageObjects.dashboard.getPanelCount();
      expect(panelCount).to.be(28);

      await PageObjects.dashboard.saveDashboard('embeddable rendering test', { storeTimeWithDashboard: true });
    });

    it('initial render test', async () => {
      await expectAllDataRenders();
    });

    it('data rendered correctly when dashboard is opened from listing page', async () => {
      // Change the time to make sure that it's updated when re-opened from the listing page.
      const fromTime = '2018-05-10 00:00:00.000';
      const toTime = '2018-05-11 00:00:00.000';
      await PageObjects.header.setAbsoluteRange(fromTime, toTime);
      await PageObjects.dashboard.loadSavedDashboard('embeddable rendering test');

      await expectAllDataRenders();
    });

    it('data rendered correctly when dashboard is hard refreshed', async () => {
      const currentUrl = await remote.getCurrentUrl();
      await remote.get(currentUrl, true);

      await expectAllDataRenders();
    });

    it('panels are updated when time changes outside of data', async () => {
      const fromTime = '2018-05-11 00:00:00.000';
      const toTime = '2018-05-12 00:00:00.000';
      await PageObjects.header.setAbsoluteRange(fromTime, toTime);

      await expectNoDataRenders();
    });

    it('panels are updated when time changes inside of data', async () => {
      const fromTime = '2018-01-01 00:00:00.000';
      const toTime = '2018-04-13 00:00:00.000';
      await PageObjects.header.setAbsoluteRange(fromTime, toTime);

      await expectAllDataRenders();
    });
  });
}