[Uptime] Fix Jest test with absolute time (#54684)

* fix test * update more skipped tests * update test
2020-01-14 15:18:07 +01:00 · 2020-01-14 15:18:07 +01:00 · 038c2b1ce3
parent c42d23347a
commit 038c2b1ce3
4 changed files with 88 additions and 46 deletions
--- a/x-pack/legacy/plugins/uptime/public/components/functional/location_map/tests/snapshots/location_status_tags.test.tsx.snap
+++ b/x-pack/legacy/plugins/uptime/public/components/functional/location_map/tests/snapshots/location_status_tags.test.tsx.snap
@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`StatusByLocation component renders when all locations are down 1`] = `
+exports[`LocationStatusTags component renders when all locations are down 1`] = `
 .c3 {
  display: inline-block;
  margin-left: 4px;
@ -58,7 +58,7 @@ exports[`StatusByLocation component renders when all locations are down 1`] = `
          <div
            class="euiTextColor euiTextColor--subdued"
          >
-            3d ago
+            5s ago
          </div>
        </div>
      </span>
@ -97,7 +97,7 @@ exports[`StatusByLocation component renders when all locations are down 1`] = `
          <div
            class="euiTextColor euiTextColor--subdued"
          >
-            3d ago
+            5m ago
          </div>
        </div>
      </span>
@ -107,7 +107,7 @@ exports[`StatusByLocation component renders when all locations are down 1`] = `
 </div>
 `;

-exports[`StatusByLocation component renders when all locations are up 1`] = `
+exports[`LocationStatusTags component renders when all locations are up 1`] = `
 .c3 {
  display: inline-block;
  margin-left: 4px;
@ -166,7 +166,7 @@ exports[`StatusByLocation component renders when all locations are up 1`] = `
          <div
            class="euiTextColor euiTextColor--subdued"
          >
-            3d ago
+            5s ago
          </div>
        </div>
      </span>
@ -205,7 +205,7 @@ exports[`StatusByLocation component renders when all locations are up 1`] = `
          <div
            class="euiTextColor euiTextColor--subdued"
          >
-            3d ago
+            5d ago
          </div>
        </div>
      </span>
@ -214,7 +214,7 @@ exports[`StatusByLocation component renders when all locations are up 1`] = `
 </div>
 `;

-exports[`StatusByLocation component renders when there are many location 1`] = `
+exports[`LocationStatusTags component renders when there are many location 1`] = `
 Array [
  .c3 {
  display: inline-block;
@ -273,7 +273,7 @@ Array [
            <div
              class="euiTextColor euiTextColor--subdued"
            >
-              3d ago
+              5s ago
            </div>
          </div>
        </span>
@ -312,7 +312,7 @@ Array [
            <div
              class="euiTextColor euiTextColor--subdued"
            >
-              3d ago
+              5m ago
            </div>
          </div>
        </span>
@ -351,7 +351,7 @@ Array [
            <div
              class="euiTextColor euiTextColor--subdued"
            >
-              3d ago
+              5h ago
            </div>
          </div>
        </span>
@ -375,7 +375,7 @@ Array [
                <div
                  class="c2"
                >
-                  Tokya
+                  Tokyo
                </div>
              </div>
            </span>
@ -390,7 +390,7 @@ Array [
            <div
              class="euiTextColor euiTextColor--subdued"
            >
-              3d ago
+              5d ago
            </div>
          </div>
        </span>
@ -429,7 +429,7 @@ Array [
            <div
              class="euiTextColor euiTextColor--subdued"
            >
-              3d ago
+              1 Mon ago
            </div>
          </div>
        </span>
@ -468,7 +468,7 @@ Array [
            <div
              class="euiTextColor euiTextColor--subdued"
            >
-              3d ago
+              5 Mon ago
            </div>
          </div>
        </span>
@ -507,7 +507,7 @@ Array [
            <div
              class="euiTextColor euiTextColor--subdued"
            >
-              3d ago
+              5 Yr ago
            </div>
          </div>
        </span>
@ -546,7 +546,7 @@ Array [
            <div
              class="euiTextColor euiTextColor--subdued"
            >
-              3d ago
+              5 Yr ago
            </div>
          </div>
        </span>
--- a/x-pack/legacy/plugins/uptime/public/components/functional/location_map/tests/location_status_tags.test.tsx
+++ b/x-pack/legacy/plugins/uptime/public/components/functional/location_map/tests/location_status_tags.test.tsx
@ -10,57 +10,66 @@ import { renderWithIntl } from 'test_utils/enzyme_helpers';
 import { MonitorLocation } from '../../../../../common/runtime_types/monitor';
 import { LocationStatusTags } from '../';

-// These tests use absolute time
-// Failing: https://github.com/elastic/kibana/issues/54672
-describe.skip('StatusByLocation component', () => {
+describe('LocationStatusTags component', () => {
  let monitorLocations: MonitorLocation[];

-  const start = moment('2020-01-10T12:22:32.567Z');
-  beforeAll(() => {
-    moment.prototype.fromNow = jest.fn((date: string) => start.from(date));
-  });
-
  it('renders when there are many location', () => {
    monitorLocations = [
      {
        summary: { up: 0, down: 1 },
        geo: { name: 'Islamabad', location: { lat: '52.487448', lon: ' 13.394798' } },
-        timestamp: '2020-01-09T12:22:32.567Z',
+        timestamp: moment()
+          .subtract('5', 's')
+          .toISOString(),
      },
      {
        summary: { up: 0, down: 1 },
        geo: { name: 'Berlin', location: { lat: '52.487448', lon: ' 13.394798' } },
-        timestamp: '2020-01-09T12:22:28.825Z',
+        timestamp: moment()
+          .subtract('5', 'm')
+          .toISOString(),
      },
      {
        summary: { up: 0, down: 1 },
        geo: { name: 'st-paul', location: { lat: '52.487448', lon: ' 13.394798' } },
-        timestamp: '2020-01-09T12:22:31.586Z',
+        timestamp: moment()
+          .subtract('5', 'h')
+          .toISOString(),
      },
      {
        summary: { up: 0, down: 1 },
-        geo: { name: 'Tokya', location: { lat: '52.487448', lon: ' 13.394798' } },
-        timestamp: '2020-01-09T12:22:25.771Z',
+        geo: { name: 'Tokyo', location: { lat: '52.487448', lon: ' 13.394798' } },
+        timestamp: moment()
+          .subtract('5', 'd')
+          .toISOString(),
      },
      {
        summary: { up: 0, down: 1 },
        geo: { name: 'New York', location: { lat: '52.487448', lon: ' 13.394798' } },
-        timestamp: '2020-01-09T12:22:27.485Z',
+        timestamp: moment()
+          .subtract('5', 'w')
+          .toISOString(),
      },
      {
        summary: { up: 0, down: 1 },
        geo: { name: 'Toronto', location: { lat: '52.487448', lon: ' 13.394798' } },
-        timestamp: '2020-01-09T12:22:28.815Z',
+        timestamp: moment()
+          .subtract('5', 'M')
+          .toISOString(),
      },
      {
        summary: { up: 0, down: 1 },
        geo: { name: 'Sydney', location: { lat: '52.487448', lon: ' 13.394798' } },
-        timestamp: '2020-01-09T12:22:32.132Z',
+        timestamp: moment()
+          .subtract('5', 'y')
+          .toISOString(),
      },
      {
        summary: { up: 0, down: 1 },
        geo: { name: 'Paris', location: { lat: '52.487448', lon: ' 13.394798' } },
-        timestamp: '2020-01-09T12:22:32.973Z',
+        timestamp: moment()
+          .subtract('5', 'y')
+          .toISOString(),
      },
    ];
    const component = renderWithIntl(<LocationStatusTags locations={monitorLocations} />);
@ -72,12 +81,16 @@ describe.skip('StatusByLocation component', () => {
      {
        summary: { up: 4, down: 0 },
        geo: { name: 'Islamabad', location: { lat: '52.487448', lon: ' 13.394798' } },
-        timestamp: '2020-01-09T12:22:32.567Z',
+        timestamp: moment()
+          .subtract('5', 's')
+          .toISOString(),
      },
      {
        summary: { up: 4, down: 0 },
        geo: { name: 'Berlin', location: { lat: '52.487448', lon: ' 13.394798' } },
-        timestamp: '2020-01-08T12:22:28.825Z',
+        timestamp: moment()
+          .subtract('5', 'd')
+          .toISOString(),
      },
    ];
    const component = renderWithIntl(<LocationStatusTags locations={monitorLocations} />);
@ -89,12 +102,16 @@ describe.skip('StatusByLocation component', () => {
      {
        summary: { up: 0, down: 2 },
        geo: { name: 'Islamabad', location: { lat: '52.487448', lon: ' 13.394798' } },
-        timestamp: '2020-01-06T12:22:32.567Z',
+        timestamp: moment()
+          .subtract('5', 's')
+          .toISOString(),
      },
      {
        summary: { up: 0, down: 2 },
        geo: { name: 'Berlin', location: { lat: '52.487448', lon: ' 13.394798' } },
-        timestamp: '2020-01-09T12:22:28.825Z',
+        timestamp: moment()
+          .subtract('5', 'm')
+          .toISOString(),
      },
    ];
    const component = renderWithIntl(<LocationStatusTags locations={monitorLocations} />);
--- a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_status_details/test/snapshots/status_by_location.test.tsx.snap
+++ b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_status_details/test/snapshots/status_by_location.test.tsx.snap
@ -10,6 +10,23 @@ exports[`StatusByLocation component renders all locations are down 1`] = `
 </div>
 `;

+exports[`StatusByLocation component renders properly against props 1`] = `
+<EuiText>
+  <h2>
+    <FormattedMessage
+      defaultMessage="{status} in {loc} Locations"
+      id="xpack.uptime.monitorStatusBar.locations.upStatus"
+      values={
+        Object {
+          "loc": "2",
+          "status": "Up",
+        }
+      }
+    />
+  </h2>
+</EuiText>
+`;
+
 exports[`StatusByLocation component renders when down in some locations 1`] = `
 <div
  class="euiText euiText--medium"
--- a/x-pack/legacy/plugins/uptime/public/components/functional/monitor_status_details/test/status_by_location.test.tsx
+++ b/x-pack/legacy/plugins/uptime/public/components/functional/monitor_status_details/test/status_by_location.test.tsx
@ -5,19 +5,33 @@
 */

 import React from 'react';
-import { renderWithIntl } from 'test_utils/enzyme_helpers';
+import { renderWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers';
 import { MonitorLocation } from '../../../../../common/runtime_types';
 import { StatusByLocations } from '../';

-describe.skip('StatusByLocation component', () => {
+describe('StatusByLocation component', () => {
  let monitorLocations: MonitorLocation[];

+  it('renders properly against props', () => {
+    monitorLocations = [
+      {
+        summary: { up: 4, down: 0 },
+        geo: { name: 'Berlin', location: { lat: '52.487448', lon: ' 13.394798' } },
+      },
+      {
+        summary: { up: 4, down: 0 },
+        geo: { name: 'st-paul', location: { lat: '52.487448', lon: ' 13.394798' } },
+      },
+    ];
+    const component = shallowWithIntl(<StatusByLocations locations={monitorLocations} />);
+    expect(component).toMatchSnapshot();
+  });
+
  it('renders when up in all locations', () => {
    monitorLocations = [
      {
        summary: { up: 4, down: 0 },
        geo: { name: 'Berlin', location: { lat: '52.487448', lon: ' 13.394798' } },
-        timestamp: '2020-01-09T12:22:32.567Z',
      },
      {
        summary: { up: 4, down: 0 },
@ -33,7 +47,6 @@ describe.skip('StatusByLocation component', () => {
      {
        summary: { up: 4, down: 0 },
        geo: { name: 'Berlin', location: { lat: '52.487448', lon: ' 13.394798' } },
-        timestamp: '2020-01-09T12:22:32.567Z',
      },
    ];
    const component = renderWithIntl(<StatusByLocations locations={monitorLocations} />);
@ -45,7 +58,6 @@ describe.skip('StatusByLocation component', () => {
      {
        summary: { up: 0, down: 4 },
        geo: { name: 'Berlin', location: { lat: '52.487448', lon: ' 13.394798' } },
-        timestamp: '2020-01-09T12:22:32.567Z',
      },
    ];
    const component = renderWithIntl(<StatusByLocations locations={monitorLocations} />);
@ -57,12 +69,10 @@ describe.skip('StatusByLocation component', () => {
      {
        summary: { up: 0, down: 4 },
        geo: { name: 'Berlin', location: { lat: '52.487448', lon: ' 13.394798' } },
-        timestamp: '2020-01-09T12:22:32.567Z',
      },
      {
        summary: { up: 0, down: 4 },
        geo: { name: 'st-paul', location: { lat: '52.487448', lon: ' 13.394798' } },
-        timestamp: '2020-01-09T12:22:32.567Z',
      },
    ];
    const component = renderWithIntl(<StatusByLocations locations={monitorLocations} />);
@ -74,12 +84,10 @@ describe.skip('StatusByLocation component', () => {
      {
        summary: { up: 0, down: 4 },
        geo: { name: 'Berlin', location: { lat: '52.487448', lon: ' 13.394798' } },
-        timestamp: '2020-01-09T12:22:32.567Z',
      },
      {
        summary: { up: 4, down: 0 },
        geo: { name: 'st-paul', location: { lat: '52.487448', lon: ' 13.394798' } },
-        timestamp: '2020-01-09T12:22:32.567Z',
      },
    ];
    const component = renderWithIntl(<StatusByLocations locations={monitorLocations} />);