mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Added DashboardPage tests that tests view mode transition logic
This commit is contained in:
Torkel Ödegaard
126
public/app/features/dashboard/containers/DashboardPage.test.tsx
Normal file
126
public/app/features/dashboard/containers/DashboardPage.test.tsx
Normal 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);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
`;
|
||||
Reference in New Issue
Block a user