tech: enzyme container test working

This commit is contained in:
Torkel Ödegaard
2018-01-01 16:04:32 +01:00
parent 3301f8f194
commit 644adef465
5 changed files with 354 additions and 289 deletions

View File

@@ -39,8 +39,11 @@ describe('AlertRuleList', () => {
page = shallow(<AlertRuleList store={store} />)
.first()
.shallow();
setTimeout(done, 100);
//page = renderer.create(<AlertRuleList store={store} />);
setTimeout(() => {
page.update();
done();
});
});
it('should call api to get rules', () => {
@@ -48,7 +51,6 @@ describe('AlertRuleList', () => {
});
it('should render 1 rule', () => {
console.log(page.find('.card-section').debug());
expect(page.find(AlertRuleItem)).toHaveLength(1);
});
});

View File

@@ -50,7 +50,6 @@ export class AlertRuleList extends React.Component<AlertRuleListProps, any> {
render() {
const { nav, alertList } = this.props.store;
console.log('render', alertList.rules.length);
return (
<div>

View File

@@ -1,224 +0,0 @@
// 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>
`;