[Uptime] Add functional UI tests

test/functional/page_objects/time_picker.js

@@ -47,6 +47,18 @@ export function TimePickerPageProvider({ getService, getPageObjects }) {
       await find.waitForElementStale(panelElement);
     }
 
+    async setAbsoluteStart(startTime) {
+      await this.showStartEndTimes();
+
+      await testSubjects.click('superDatePickerstartDatePopoverButton');
+      const panel = await this.getTimePickerPanel();
+      await testSubjects.click('superDatePickerAbsoluteTab');
+      await testSubjects.setValue('superDatePickerAbsoluteDateInput', startTime);
+      await testSubjects.click('superDatePickerstartDatePopoverButton');
+      await this.waitPanelIsGone(panel);
+      await PageObjects.header.awaitGlobalLoadingIndicatorHidden();
+    }
+
     /**
      * @param {String} fromTime YYYY-MM-DD HH:mm:ss.SSS
      * @param {String} fromTime YYYY-MM-DD HH:mm:ss.SSS
@@ -110,6 +122,8 @@ export function TimePickerPageProvider({ getService, getPageObjects }) {
     }
 
     async showStartEndTimes() {
+      // This first await makes sure the superDatePicker has loaded before we check for the ShowDatesButton
+      await testSubjects.exists('superDatePickerToggleQuickMenuButton', { timeout: 20000 });
       const isShowDatesButton = await testSubjects.exists('superDatePickerShowDatesButton');
       if (isShowDatesButton) {
         await testSubjects.click('superDatePickerShowDatesButton');

x-pack/plugins/uptime/public/components/functional/monitor_list.tsx

@@ -83,7 +83,7 @@ export const MonitorList = ({ dangerColor, loading, monitors, primaryColor }: Mo
               defaultMessage: 'ID',
             }),
             render: (id: string, monitor: LatestMonitor) => (
-              <Link to={`/monitor/${id}`}>
+              <Link data-test-subj={`monitor-page-link-${id}`} to={`/monitor/${id}`}>
                 {monitor.ping && monitor.ping.monitor && monitor.ping.monitor.name
                   ? monitor.ping.monitor.name
                   : id}

x-pack/plugins/uptime/public/components/functional/monitor_page_title.tsx

@@ -16,7 +16,7 @@ export const MonitorPageTitle = ({ pageTitle: { name, url, id } }: MonitorPageTi
   <EuiFlexGroup alignItems="baseline">
     <EuiFlexItem grow={false}>
       <EuiTitle>
-        <h2>{name ? name : url}</h2>
+        <h2 data-test-subj="monitor-page-title">{name ? name : url}</h2>
       </EuiTitle>
     </EuiFlexItem>
     <EuiFlexItem grow={false}>

x-pack/plugins/uptime/public/lib/adapters/framework/kibana_framework_adapter.ts

@@ -45,7 +45,7 @@ export class UMKibanaFrameworkAdapter implements UMFrameworkAdapter {
     const route = {
       controllerAs: 'uptime',
       // @ts-ignore angular
-      controller: ($scope, $route, $http, config) => {
+      controller: ($scope, $route, config, $location, $window) => {
         const graphQLClient = createGraphQLClient(this.uriPath, this.xsrfHeader);
         $scope.$$postDigest(() => {
           const elem = document.getElementById('uptimeReactRoot');
@@ -57,6 +57,23 @@ export class UMKibanaFrameworkAdapter implements UMFrameworkAdapter {
           const routerBasename = basePath.endsWith('/')
             ? `${basePath}/${PLUGIN.ROUTER_BASE_NAME}`
             : basePath + PLUGIN.ROUTER_BASE_NAME;
+
+          /**
+           * TODO: this is a redirect hack to deal with a problem that largely
+           * in testing but rarely occurs in the real world, where the specified
+           * URL contains `.../app/uptime{SOME_URL_PARAM_TEXT}#` instead of
+           * a path like `.../app/uptime#{SOME_URL_PARAM_TEXT}`.
+           *
+           * This redirect will almost never be triggered in practice, but it makes more
+           * sense to include it here rather than altering the existing testing
+           * infrastructure underlying the rest of Kibana.
+           *
+           * We welcome a more permanent solution that will result in the deletion of the
+           * block below.
+           */
+          if ($location.absUrl().indexOf(PLUGIN.ROUTER_BASE_NAME) === -1) {
+            $window.location.replace(routerBasename);
+          }
           const persistedState = this.initializePersistedState();
           const darkMode = config.get('theme:darkMode', false) || false;
           const {

x-pack/test/functional/apps/uptime/index.ts

@@ -6,11 +6,22 @@
 
 import { KibanaFunctionalTestDefaultProviders } from '../../../types/providers';
 
+const ARCHIVE = 'uptime/full_heartbeat';
+
 // tslint:disable-next-line:no-default-export
-export default ({ loadTestFile }: KibanaFunctionalTestDefaultProviders) => {
+export default ({ loadTestFile, getService }: KibanaFunctionalTestDefaultProviders) => {
+  const esArchiver = getService('esArchiver');
+  const kibanaServer = getService('kibanaServer');
+
   describe('Uptime app', function() {
+    before(async () => {
+      await esArchiver.load(ARCHIVE);
+      await kibanaServer.uiSettings.replace({ 'dateFormat:tz': 'UTC' });
+    });
+    after(async () => await esArchiver.unload(ARCHIVE));
     this.tags('ciGroup6');
 
     loadTestFile(require.resolve('./overview'));
+    loadTestFile(require.resolve('./monitor'));
   });
 };

x-pack/test/functional/apps/uptime/monitor.ts

@@ -0,0 +1,28 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { KibanaFunctionalTestDefaultProviders } from '../../../types/providers';
+
+// tslint:disable-next-line:no-default-export
+export default ({ getPageObjects, getService }: KibanaFunctionalTestDefaultProviders) => {
+  const esArchiver = getService('esArchiver');
+  const pageObjects = getPageObjects(['uptime']);
+  const archive = 'uptime/full_heartbeat';
+
+  describe('monitor page', () => {
+    before(async () => {
+      await esArchiver.load(archive);
+    });
+    after(async () => await esArchiver.unload(archive));
+    it('loads and displays uptime data based on date range', async () => {
+      await pageObjects.uptime.loadDataAndGoToMonitorPage(
+        '2019-01-28 12:40:08.078',
+        'auto-http-0X131221E73F825974',
+        'https://www.google.com/'
+      );
+    });
+  });
+};

x-pack/test/functional/apps/uptime/overview.ts

@@ -7,20 +7,15 @@
 import { KibanaFunctionalTestDefaultProviders } from '../../../types/providers';
 
 // tslint:disable-next-line:no-default-export
-export default ({ getPageObjects, getService }: KibanaFunctionalTestDefaultProviders) => {
-  const esArchiver = getService('esArchiver');
+export default ({ getPageObjects }: KibanaFunctionalTestDefaultProviders) => {
   // TODO: add UI functional tests
-  // const pageObjects = getPageObjects(['uptime']);
-  const archive = 'uptime/full_heartbeat';
-
-  describe('Overview page', () => {
-    describe('this is a simple test', () => {
-      beforeEach(async () => {
-        await esArchiver.load(archive);
-      });
-      afterEach(async () => await esArchiver.unload(archive));
-
-      // TODO: add UI functional tests
+  const pageObjects = getPageObjects(['uptime']);
+  describe('overview page', () => {
+    it('loads and displays uptime data based on date range', async () => {
+      await pageObjects.uptime.goToUptimeOverviewAndLoadData(
+        '2019-01-28 12:40:08.078',
+        'monitor-page-link-auto-http-0X131221E73F825974'
+      );
     });
   });
 };

x-pack/test/functional/page_objects/uptime_page.ts

@@ -10,13 +10,30 @@ export const UptimePageProvider = ({
   getPageObjects,
   getService,
 }: KibanaFunctionalTestDefaultProviders) => {
-  const pageObject = getPageObjects(['common']);
+  const pageObjects = getPageObjects(['common', 'timePicker']);
   const uptimeService = getService('uptime');
 
-  return {
-    async goToUptimeOverview() {
-      await pageObject.common.navigateToApp('uptime');
-      await uptimeService.assertExists();
-    },
-  };
+  return new class UptimePage {
+    public async goToUptimeOverviewAndLoadData(
+      datePickerStartValue: string,
+      monitorIdToCheck: string
+    ) {
+      await pageObjects.common.navigateToApp('uptime');
+      await pageObjects.timePicker.setAbsoluteStart(datePickerStartValue);
+      await uptimeService.monitorIdExists(monitorIdToCheck);
+    }
+
+    public async loadDataAndGoToMonitorPage(
+      datePickerStartValue: string,
+      monitorId: string,
+      monitorName: string
+    ) {
+      await pageObjects.common.navigateToApp('uptime');
+      await pageObjects.timePicker.setAbsoluteStart(datePickerStartValue);
+      await uptimeService.navigateToMonitorWithId(monitorId);
+      if ((await uptimeService.getMonitorNameDisplayedOnPageTitle()) !== monitorName) {
+        throw new Error('Expected monitor name not found');
+      }
+    }
+  }();
 };

x-pack/test/functional/services/uptime.ts

@@ -8,12 +8,20 @@ import { KibanaFunctionalTestDefaultProviders } from '../../types/providers';
 
 export const UptimeProvider = ({ getService }: KibanaFunctionalTestDefaultProviders) => {
   const testSubjects = getService('testSubjects');
-
   return {
     async assertExists(key: string) {
       if (!(await testSubjects.exists(key))) {
         throw new Error(`Couldn't find expected element with key "${key}".`);
       }
     },
+    async monitorIdExists(key: string) {
+      await testSubjects.existOrFail(key);
+    },
+    async navigateToMonitorWithId(monitorId: string) {
+      await testSubjects.click(`monitor-page-link-${monitorId}`);
+    },
+    async getMonitorNameDisplayedOnPageTitle() {
+      return await testSubjects.getVisibleText('monitor-page-title');
+    },
   };
 };

x-pack/test/types/providers.ts

@@ -5,9 +5,11 @@
  */
 
 import { EsArchiver } from '../../../src/es_archiver';
+import { UptimeProvider } from '../functional/services/uptime';
 
 export interface KibanaFunctionalTestDefaultProviders {
   getService(serviceName: 'esArchiver'): EsArchiver;
+  getService(serviceName: 'uptime'): ReturnType<typeof UptimeProvider>;
   getService(serviceName: string): any;
   getPageObjects(pageObjectNames: string[]): any;
   loadTestFile(path: string): void;