Added DashboardPage tests that tests view mode transition logic

public/app/features/dashboard/containers/DashboardPage.test.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import { shallow, ShallowWrapper } from 'enzyme';
+import { DashboardPage, Props, State } from './DashboardPage';
+import { DashboardModel } from '../state';
+import { setDashboardModel } from '../state/actions';
+import { DashboardRouteInfo, DashboardLoadingState } from 'app/types';
+
+jest.mock('sass/_variables.scss', () => ({
+  panelhorizontalpadding: 10,
+  panelVerticalPadding: 10,
+}));
+
+jest.mock('app/features/dashboard/components/DashboardSettings/SettingsCtrl', () => ({
+}));
+
+function setup(propOverrides?: Partial<Props>): ShallowWrapper<Props, State, DashboardPage> {
+  const props: Props = {
+    urlUid: '11',
+    urlSlug: 'my-dash',
+    $scope: {},
+    $injector: {},
+    routeInfo: DashboardRouteInfo.Normal,
+    urlEdit: false,
+    urlFullscreen: false,
+    loadingState: DashboardLoadingState.Done,
+    isLoadingSlow: false,
+    initDashboard: jest.fn(),
+    updateLocation: jest.fn(),
+    notifyApp: jest.fn(),
+    dashboard: null,
+    setDashboardModel: setDashboardModel,
+  };
+
+  Object.assign(props, propOverrides);
+  return shallow(<DashboardPage {...props} />);
+}
+
+describe('DashboardPage', () => {
+  let wrapper: ShallowWrapper<Props, State, DashboardPage>;
+
+  beforeEach(() => {
+    wrapper = setup();
+  });
+
+  describe('Given dashboard has not loaded yet', () => {
+    it('should render nothing', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  describe('Given dashboard model', () => {
+    let dashboard: DashboardModel;
+
+    beforeEach(() => {
+      dashboard = new DashboardModel({
+        title: 'My dashboard',
+        panels: [
+          {
+            id: 1,
+            type: 'graph',
+            title: 'My graph',
+            gridPos: { x: 0, y: 0, w: 1, h: 1 }
+          }
+        ]
+      }, {
+        canEdit: true,
+        canSave: true,
+      });
+      wrapper.setProps({ dashboard, loadingState: DashboardLoadingState.Done });
+    });
+
+    it('Should update title', () => {
+      expect(document.title).toBe('My dashboard - Grafana');
+    });
+
+    it('After render dashboard', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    describe('Given user has scrolled down and goes into fullscreen edit', () => {
+      beforeEach(() => {
+        wrapper.setState({ scrollTop: 100 });
+        wrapper.setProps({
+          urlFullscreen: true,
+          urlEdit: true,
+          urlPanelId: '1',
+        });
+      });
+
+      it('Should update model state to fullscreen & edit', () => {
+        expect(dashboard.meta.fullscreen).toBe(true);
+        expect(dashboard.meta.isEditing).toBe(true);
+      });
+
+      it('Should update component state to fullscreen and edit', () => {
+        const state = wrapper.state();
+        expect(state.isEditing).toBe(true);
+        expect(state.isFullscreen).toBe(true);
+        expect(state.rememberScrollTop).toBe(100);
+      });
+
+      describe('Given user goes back to dashboard', () => {
+        beforeEach(() => {
+          wrapper.setState({ scrollTop: 0 });
+          wrapper.setProps({
+            urlFullscreen: false,
+            urlEdit: false,
+            urlPanelId: null,
+          });
+        });
+
+        it('Should update model state normal state', () => {
+          expect(dashboard.meta.fullscreen).toBe(false);
+          expect(dashboard.meta.isEditing).toBe(false);
+        });
+
+        it('Should update component state to normal and restore scrollTop', () => {
+          const state = wrapper.state();
+          expect(state.isEditing).toBe(false);
+          expect(state.isFullscreen).toBe(false);
+          expect(state.scrollTop).toBe(100);
+        });
+      });
+    });
+  });
+});

public/app/features/dashboard/containers/DashboardPage.tsx

@@ -39,7 +39,7 @@ export interface Props {
   urlFullscreen: boolean;
   loadingState: DashboardLoadingState;
   isLoadingSlow: boolean;
-  dashboard: DashboardModel;
+  dashboard: DashboardModel | null;
   initDashboard: typeof initDashboard;
   setDashboardModel: typeof setDashboardModel;
   notifyApp: typeof notifyApp;

public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap

@@ -0,0 +1,220 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DashboardPage Given dashboard has not loaded yet should render nothing 1`] = `""`;
+
+exports[`DashboardPage Given dashboard model After render dashboard 1`] = `
+<div
+  className=""
+>
+  <Connect(DashNav)
+    $injector={Object {}}
+    dashboard={
+      DashboardModel {
+        "annotations": Object {
+          "list": Array [
+            Object {
+              "builtIn": 1,
+              "datasource": "-- Grafana --",
+              "enable": true,
+              "hide": true,
+              "iconColor": "rgba(0, 211, 255, 1)",
+              "name": "Annotations & Alerts",
+              "type": "dashboard",
+            },
+          ],
+        },
+        "autoUpdate": undefined,
+        "description": undefined,
+        "editable": true,
+        "events": Emitter {
+          "emitter": EventEmitter {
+            "_events": Object {},
+            "_eventsCount": 0,
+          },
+        },
+        "gnetId": null,
+        "graphTooltip": 0,
+        "id": null,
+        "links": Array [],
+        "meta": Object {
+          "canEdit": true,
+          "canMakeEditable": false,
+          "canSave": true,
+          "canShare": true,
+          "canStar": true,
+          "fullscreen": false,
+          "isEditing": false,
+          "showSettings": true,
+        },
+        "originalTemplating": Array [],
+        "originalTime": Object {
+          "from": "now-6h",
+          "to": "now",
+        },
+        "panels": Array [
+          PanelModel {
+            "cachedPluginOptions": Object {},
+            "datasource": null,
+            "events": Emitter {
+              "emitter": EventEmitter {
+                "_events": Object {},
+                "_eventsCount": 0,
+              },
+            },
+            "gridPos": Object {
+              "h": 1,
+              "w": 1,
+              "x": 0,
+              "y": 0,
+            },
+            "id": 1,
+            "targets": Array [
+              Object {
+                "refId": "A",
+              },
+            ],
+            "title": "My graph",
+            "transparent": false,
+            "type": "graph",
+          },
+        ],
+        "refresh": undefined,
+        "revision": undefined,
+        "schemaVersion": 17,
+        "snapshot": undefined,
+        "style": "dark",
+        "tags": Array [],
+        "templating": Object {
+          "list": Array [],
+        },
+        "time": Object {
+          "from": "now-6h",
+          "to": "now",
+        },
+        "timepicker": Object {},
+        "timezone": "",
+        "title": "My dashboard",
+        "uid": null,
+        "version": 0,
+      }
+    }
+    isEditing={false}
+    isFullscreen={false}
+    onAddPanel={[Function]}
+  />
+  <div
+    className="scroll-canvas scroll-canvas--dashboard"
+  >
+    <CustomScrollbar
+      autoHeightMax="100%"
+      autoHeightMin="100%"
+      autoHide={false}
+      autoHideDuration={200}
+      autoHideTimeout={200}
+      customClassName="custom-scrollbars"
+      hideTracksWhenNotNeeded={false}
+      scrollTop={0}
+      setScrollTop={[Function]}
+    >
+      <div
+        className="dashboard-container"
+      >
+        <DashboardGrid
+          dashboard={
+            DashboardModel {
+              "annotations": Object {
+                "list": Array [
+                  Object {
+                    "builtIn": 1,
+                    "datasource": "-- Grafana --",
+                    "enable": true,
+                    "hide": true,
+                    "iconColor": "rgba(0, 211, 255, 1)",
+                    "name": "Annotations & Alerts",
+                    "type": "dashboard",
+                  },
+                ],
+              },
+              "autoUpdate": undefined,
+              "description": undefined,
+              "editable": true,
+              "events": Emitter {
+                "emitter": EventEmitter {
+                  "_events": Object {},
+                  "_eventsCount": 0,
+                },
+              },
+              "gnetId": null,
+              "graphTooltip": 0,
+              "id": null,
+              "links": Array [],
+              "meta": Object {
+                "canEdit": true,
+                "canMakeEditable": false,
+                "canSave": true,
+                "canShare": true,
+                "canStar": true,
+                "fullscreen": false,
+                "isEditing": false,
+                "showSettings": true,
+              },
+              "originalTemplating": Array [],
+              "originalTime": Object {
+                "from": "now-6h",
+                "to": "now",
+              },
+              "panels": Array [
+                PanelModel {
+                  "cachedPluginOptions": Object {},
+                  "datasource": null,
+                  "events": Emitter {
+                    "emitter": EventEmitter {
+                      "_events": Object {},
+                      "_eventsCount": 0,
+                    },
+                  },
+                  "gridPos": Object {
+                    "h": 1,
+                    "w": 1,
+                    "x": 0,
+                    "y": 0,
+                  },
+                  "id": 1,
+                  "targets": Array [
+                    Object {
+                      "refId": "A",
+                    },
+                  ],
+                  "title": "My graph",
+                  "transparent": false,
+                  "type": "graph",
+                },
+              ],
+              "refresh": undefined,
+              "revision": undefined,
+              "schemaVersion": 17,
+              "snapshot": undefined,
+              "style": "dark",
+              "tags": Array [],
+              "templating": Object {
+                "list": Array [],
+              },
+              "time": Object {
+                "from": "now-6h",
+                "to": "now",
+              },
+              "timepicker": Object {},
+              "timezone": "",
+              "title": "My dashboard",
+              "uid": null,
+              "version": 0,
+            }
+          }
+          isEditing={false}
+          isFullscreen={false}
+        />
+      </div>
+    </CustomScrollbar>
+  </div>
+</div>
+`;