apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Added DashboardPage tests that tests view mode transition logic

Browse Source
pull/15212/head
Torkel Ödegaard 7 years ago
parent 1fbdd02464
commit 865d1567fc
3 changed files with 347 additions and 1 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 126
      public/app/features/dashboard/containers/DashboardPage.test.tsx
  2. 2
      public/app/features/dashboard/containers/DashboardPage.tsx
  3. 220
      public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap

126
public/app/features/dashboard/containers/DashboardPage.test.tsx
Unescape View File

@ -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);
});
});
});
});
});

2
public/app/features/dashboard/containers/DashboardPage.tsx
Unescape View File

@ -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;

220
public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap
Unescape View File

@ -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>
`;
Write Preview
Loading…
Cancel
Save