Skip to content

N
nexpie-grafana-theme
Commit 3301f8f1 by Torkel Ödegaard
Options

react: trying to get enzyme and mobx tests working

parent 8f50795a
Showing with 300 additions and 16 deletions
public/app/containers/AlertRuleList/AlertRuleList.jest.tsx 0 → 100644
import React from 'react';
// import renderer from 'react-test-renderer';
import moment from 'moment';
import { AlertRuleList, AlertRuleItem } from './AlertRuleList';
import { RootStore } from 'app/stores/RootStore';
import { backendSrv, createNavTree } from 'test/mocks/common';
import { shallow } from 'enzyme';
describe('AlertRuleList', () => {
let page, store;
beforeAll(done => {
backendSrv.get.mockReturnValue(
Promise.resolve([
{
id: 11,
dashboardId: 58,
panelId: 3,
name: 'Panel Title alert',
state: 'ok',
newStateDate: moment()
.subtract(5, 'minutes')
.format(),
evalData: {},
executionError: '',
dashboardUri: 'db/mygool',
},
])
);
store = RootStore.create(
{},
{
backendSrv: backendSrv,
navTree: createNavTree('alerting', 'alert-list'),
}
);
page = shallow(<AlertRuleList store={store} />)
.first()
.shallow();
setTimeout(done, 100);
//page = renderer.create(<AlertRuleList store={store} />);
});
it('should call api to get rules', () => {
expect(backendSrv.get.mock.calls[0][0]).toEqual('/api/alerts');
});
it('should render 1 rule', () => {
console.log(page.find('.card-section').debug());
expect(page.find(AlertRuleItem)).toHaveLength(1);
});
});
public/app/containers/AlertRuleList/AlertRuleList.tsx
...@@ -25,19 +25,21 @@ export class AlertRuleList extends React.Component<AlertRuleListProps, any> { ...@@ -25,19 +25,21 @@ export class AlertRuleList extends React.Component<AlertRuleListProps, any> {
constructor(props) { constructor(props) {
super(props); super(props);
const store = this.props.store; this.props.store.nav.load('alerting', 'alert-list');
this.fetchRules();
store.nav.load('alerting', 'alert-list');
store.alertList.setStateFilter(store.view.query.get('state') || 'all');
store.alertList.loadRules();
} }
onStateFilterChanged = evt => { onStateFilterChanged = evt => {
this.props.store.alertList.setStateFilter(evt.target.value);
this.props.store.view.updateQuery({ state: evt.target.value }); this.props.store.view.updateQuery({ state: evt.target.value });
this.props.store.alertList.loadRules(); this.fetchRules();
}; };
fetchRules() {
this.props.store.alertList.loadRules({
state: this.props.store.view.query.get('state') || 'all',
});
}
onOpenHowTo = () => { onOpenHowTo = () => {
appEvents.emit('show-modal', { appEvents.emit('show-modal', {
src: 'public/app/features/alerting/partials/alert_howto.html', src: 'public/app/features/alerting/partials/alert_howto.html',
...@@ -48,6 +50,7 @@ export class AlertRuleList extends React.Component<AlertRuleListProps, any> { ...@@ -48,6 +50,7 @@ export class AlertRuleList extends React.Component<AlertRuleListProps, any> {
render() { render() {
const { nav, alertList } = this.props.store; const { nav, alertList } = this.props.store;
console.log('render', alertList.rules.length);
return ( return (
<div> <div>
......
public/app/containers/AlertRuleList/__snapshots__/AlertRuleList.jest.tsx.snap 0 → 100644
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`AlertRuleList should render page 1`] = `
<div>
<div
className="page-header-canvas"
>
<div
className="page-container"
>
<div
className="page-header"
>
<div
className="page-header__inner"
>
<span
className="page-header__logo"
>
</span>
<div
className="page-header__info-block"
>
<h1
className="page-header__title"
>
alerting-Text
</h1>
</div>
</div>
<nav>
<div
className="gf-form-select-wrapper width-20 page-header__select-nav"
>
<label
className="gf-form-select-icon "
htmlFor="page-header-select-nav"
/>
<select
className="gf-select-nav gf-form-input"
defaultValue="/url/alert-list"
id="page-header-select-nav"
onChange={[Function]}
>
<option
value="/url/alert-list"
>
alert-list-Text
</option>
</select>
</div>
<ul
className="gf-tabs page-header__tabs"
>
<li
className="gf-tabs-item"
>
<a
className="gf-tabs-link active"
href="/url/alert-list"
target={undefined}
>
<i
className=""
/>
alert-list-Text
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div
className="page-container page-body"
>
<div
className="page-action-bar"
>
<div
className="gf-form"
>
<label
className="gf-form-label"
>
Filter by state
</label>
<div
className="gf-form-select-wrapper width-13"
>
<select
className="gf-form-input"
onChange={[Function]}
value="all"
>
<option
value="all"
>
All
</option>
<option
value="ok"
>
OK
</option>
<option
value="not_ok"
>
Not OK
</option>
<option
value="alerting"
>
Alerting
</option>
<option
value="no_data"
>
No Data
</option>
<option
value="paused"
>
Paused
</option>
</select>
</div>
</div>
<div
className="page-action-bar__spacer"
/>
<a
className="btn btn-secondary"
onClick={[Function]}
>
<i
className="fa fa-info-circle"
/>
How to add an alert
</a>
</div>
<section
className="card-section card-list-layout-list"
>
<ol
className="card-list"
>
<li
className="card-item-wrapper"
>
<div
className="card-item card-item--alert"
>
<div
className="card-item-header"
>
<div
className="card-item-type"
>
<a
className="card-item-cog"
onClick={[Function]}
title="Pausing an alert rule prevents it from executing"
>
<i
className="fa fa-pause"
/>
</a>
<a
className="card-item-cog"
href="dashboard/db/mygool?panelId=3&fullscreen&edit&tab=alert"
title="Edit alert rule"
>
<i
className="icon-gf icon-gf-settings"
/>
</a>
</div>
</div>
<div
className="card-item-body"
>
<div
className="card-item-details"
>
<div
className="card-item-name"
>
<a
href="dashboard/db/mygool?panelId=3&fullscreen&edit&tab=alert"
>
Panel Title alert
</a>
</div>
<div
className="card-item-sub-name"
>
<span
className="alert-list-item-state alert-state-ok"
>
<i
className="icon-gf icon-gf-online"
/>
OK
</span>
<span>
for
5 minutes
</span>
</div>
</div>
</div>
</div>
</li>
</ol>
</section>
</div>
</div>
`;
public/app/core/specs/bridge_srv.jest.ts
import { GlobalEventSrv } from 'app/core/services/bridge_srv'; import { BridgeSrv } from 'app/core/services/bridge_srv';
jest.mock('app/core/config', () => { jest.mock('app/core/config', () => {
return { return {
...@@ -10,7 +10,7 @@ describe('BridgeSrv', () => { ...@@ -10,7 +10,7 @@ describe('BridgeSrv', () => {
let searchSrv; let searchSrv;
beforeEach(() => { beforeEach(() => {
searchSrv = new GlobalEventSrv(null, null, null); searchSrv = new BridgeSrv(null, null, null, null);
}); });
describe('With /subUrl as appSubUrl', () => { describe('With /subUrl as appSubUrl', () => {
......
public/app/stores/AlertListStore.ts
...@@ -55,13 +55,12 @@ export const AlertListStore = types ...@@ -55,13 +55,12 @@ export const AlertListStore = types
stateFilter: types.optional(types.string, 'all'), stateFilter: types.optional(types.string, 'all'),
}) })
.actions(self => ({ .actions(self => ({
setStateFilter: function(state) { loadRules: flow(function* load(filters) {
self.stateFilter = state;
},
loadRules: flow(function* load() {
let backendSrv = getEnv(self).backendSrv; let backendSrv = getEnv(self).backendSrv;
let filters = { state: self.stateFilter };
// store state filter used in api query
self.stateFilter = filters.state;
let apiRules = yield backendSrv.get('/api/alerts', filters); let apiRules = yield backendSrv.get('/api/alerts', filters);
self.rules.clear(); self.rules.clear();
......
public/app/stores/NavStore.ts
...@@ -25,6 +25,10 @@ export const NavStore = types ...@@ -25,6 +25,10 @@ export const NavStore = types
for (let id of args) { for (let id of args) {
node = _.find(children, { id: id }); node = _.find(children, { id: id });
if (!node) {
throw new Error(`NavItem with id ${id} not found`);
}
children = node.children; children = node.children;
parents.push(node); parents.push(node);
} }
......
yarn.lock
...@@ -10087,7 +10087,7 @@ whatwg-encoding@^1.0.1: ...@@ -10087,7 +10087,7 @@ whatwg-encoding@^1.0.1:
dependencies: dependencies:
iconv-lite "0.4.19" iconv-lite "0.4.19"
whatwg-fetch@>=0.10.0, whatwg-fetch@^2.0.3: whatwg-fetch@>=0.10.0:
version "2.0.3" version "2.0.3"
resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84" resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment