From 3301f8f19446fb7a1daef584fe09d9af57be8ce2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Mon, 1 Jan 2018 15:39:26 +0100 Subject: [PATCH] react: trying to get enzyme and mobx tests working --- .../AlertRuleList/AlertRuleList.jest.tsx | 54 +++++ .../AlertRuleList/AlertRuleList.tsx | 17 +- .../__snapshots__/AlertRuleList.jest.tsx.snap | 224 ++++++++++++++++++ public/app/core/specs/bridge_srv.jest.ts | 4 +- public/app/stores/AlertListStore.ts | 11 +- public/app/stores/NavStore.ts | 4 + yarn.lock | 2 +- 7 files changed, 300 insertions(+), 16 deletions(-) create mode 100644 public/app/containers/AlertRuleList/AlertRuleList.jest.tsx create mode 100644 public/app/containers/AlertRuleList/__snapshots__/AlertRuleList.jest.tsx.snap diff --git a/public/app/containers/AlertRuleList/AlertRuleList.jest.tsx b/public/app/containers/AlertRuleList/AlertRuleList.jest.tsx new file mode 100644 index 00000000000..b32b8194e47 --- /dev/null +++ b/public/app/containers/AlertRuleList/AlertRuleList.jest.tsx @@ -0,0 +1,54 @@ +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() + .first() + .shallow(); + setTimeout(done, 100); + //page = renderer.create(); + }); + + 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); + }); +}); diff --git a/public/app/containers/AlertRuleList/AlertRuleList.tsx b/public/app/containers/AlertRuleList/AlertRuleList.tsx index 1ec461925c2..03fbf75fcec 100644 --- a/public/app/containers/AlertRuleList/AlertRuleList.tsx +++ b/public/app/containers/AlertRuleList/AlertRuleList.tsx @@ -25,19 +25,21 @@ export class AlertRuleList extends React.Component { constructor(props) { super(props); - const store = this.props.store; - - store.nav.load('alerting', 'alert-list'); - store.alertList.setStateFilter(store.view.query.get('state') || 'all'); - store.alertList.loadRules(); + this.props.store.nav.load('alerting', 'alert-list'); + this.fetchRules(); } onStateFilterChanged = evt => { - this.props.store.alertList.setStateFilter(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 = () => { appEvents.emit('show-modal', { src: 'public/app/features/alerting/partials/alert_howto.html', @@ -48,6 +50,7 @@ export class AlertRuleList extends React.Component { render() { const { nav, alertList } = this.props.store; + console.log('render', alertList.rules.length); return (
diff --git a/public/app/containers/AlertRuleList/__snapshots__/AlertRuleList.jest.tsx.snap b/public/app/containers/AlertRuleList/__snapshots__/AlertRuleList.jest.tsx.snap new file mode 100644 index 00000000000..73072f487ea --- /dev/null +++ b/public/app/containers/AlertRuleList/__snapshots__/AlertRuleList.jest.tsx.snap @@ -0,0 +1,224 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`AlertRuleList should render page 1`] = ` +
+
+
+
+
+ + + + +
+

+ alerting-Text +

+ +
+
+ +
+
+
+
+
+
+ +
+ +
+
+ +
+
    +
  1. +
    +
    + +
    +
    +
    + +
    + + + + OK + + + for + 5 minutes + +
    + +
    +
    +
    +
    2. +
+
+
+
+`; diff --git a/public/app/core/specs/bridge_srv.jest.ts b/public/app/core/specs/bridge_srv.jest.ts index 08fc296986d..f29c88d7a05 100644 --- a/public/app/core/specs/bridge_srv.jest.ts +++ b/public/app/core/specs/bridge_srv.jest.ts @@ -1,4 +1,4 @@ -import { GlobalEventSrv } from 'app/core/services/bridge_srv'; +import { BridgeSrv } from 'app/core/services/bridge_srv'; jest.mock('app/core/config', () => { return { @@ -10,7 +10,7 @@ describe('BridgeSrv', () => { let searchSrv; beforeEach(() => { - searchSrv = new GlobalEventSrv(null, null, null); + searchSrv = new BridgeSrv(null, null, null, null); }); describe('With /subUrl as appSubUrl', () => { diff --git a/public/app/stores/AlertListStore.ts b/public/app/stores/AlertListStore.ts index 6abb4484bc6..a581ec0fedc 100644 --- a/public/app/stores/AlertListStore.ts +++ b/public/app/stores/AlertListStore.ts @@ -55,13 +55,12 @@ export const AlertListStore = types stateFilter: types.optional(types.string, 'all'), }) .actions(self => ({ - setStateFilter: function(state) { - self.stateFilter = state; - }, - - loadRules: flow(function* load() { + loadRules: flow(function* load(filters) { 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); self.rules.clear(); diff --git a/public/app/stores/NavStore.ts b/public/app/stores/NavStore.ts index 51bf39b803e..edd25d965ee 100644 --- a/public/app/stores/NavStore.ts +++ b/public/app/stores/NavStore.ts @@ -25,6 +25,10 @@ export const NavStore = types for (let id of args) { node = _.find(children, { id: id }); + if (!node) { + throw new Error(`NavItem with id ${id} not found`); + } + children = node.children; parents.push(node); } diff --git a/yarn.lock b/yarn.lock index 870cfd637bf..161927c0db8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10087,7 +10087,7 @@ whatwg-encoding@^1.0.1: dependencies: iconv-lite "0.4.19" -whatwg-fetch@>=0.10.0, whatwg-fetch@^2.0.3: +whatwg-fetch@>=0.10.0: version "2.0.3" resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84"