From 865d1567fc0da20bd5388ce425d42857bd9d5e6b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 6 Feb 2019 11:30:42 +0100 Subject: [PATCH] Added DashboardPage tests that tests view mode transition logic --- .../containers/DashboardPage.test.tsx | 126 ++++++++++ .../dashboard/containers/DashboardPage.tsx | 2 +- .../__snapshots__/DashboardPage.test.tsx.snap | 220 ++++++++++++++++++ 3 files changed, 347 insertions(+), 1 deletion(-) create mode 100644 public/app/features/dashboard/containers/DashboardPage.test.tsx create mode 100644 public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap diff --git a/public/app/features/dashboard/containers/DashboardPage.test.tsx b/public/app/features/dashboard/containers/DashboardPage.test.tsx new file mode 100644 index 00000000000..59e71c69757 --- /dev/null +++ b/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): ShallowWrapper { + 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(); +} + +describe('DashboardPage', () => { + let wrapper: ShallowWrapper; + + 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); + }); + }); + }); + }); +}); diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx index dfc0c1d2758..f71838d2aa0 100644 --- a/public/app/features/dashboard/containers/DashboardPage.tsx +++ b/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; diff --git a/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap b/public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap new file mode 100644 index 00000000000..d3808513e7b --- /dev/null +++ b/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`] = ` +
+ +
+ +
+ +
+ +
+
+`;