tech: enzyme container test working

package.json

@@ -54,7 +54,7 @@
     "html-loader": "^0.5.1",
     "html-webpack-plugin": "^2.30.1",
     "husky": "^0.14.3",
-    "jest": "^21.2.1",
+    "jest": "^22.0.4",
     "jshint-stylish": "~2.2.1",
     "json-loader": "^0.5.7",
     "karma": "1.7.0",
@@ -83,12 +83,12 @@
     "sinon": "1.17.6",
     "systemjs": "0.20.19",
     "systemjs-plugin-css": "^0.1.36",
-    "ts-jest": "^21.1.3",
-    "ts-loader": "^2.3.7",
-    "tslint": "^5.7.0",
+    "ts-jest": "^22.0.0",
+    "ts-loader": "^3.2.0",
+    "tslint": "^5.8.0",
     "tslint-loader": "^3.5.3",
-    "typescript": "^2.5.2",
-    "webpack": "^3.6.0",
+    "typescript": "^2.6.2",
+    "webpack": "^3.10.0",
     "webpack-bundle-analyzer": "^2.9.0",
     "webpack-cleanup-plugin": "^0.5.1",
     "webpack-merge": "^4.1.0",
@@ -145,8 +145,8 @@
     "mousetrap": "^1.6.0",
     "perfect-scrollbar": "^1.2.0",
     "prop-types": "^15.6.0",
-    "react": "^16.1.1",
-    "react-dom": "^16.1.1",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
     "react-grid-layout": "^0.16.1",
     "react-sizeme": "^2.3.6",
     "remarkable": "^1.7.1",

public/app/containers/AlertRuleList/AlertRuleList.jest.tsx

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

public/app/containers/AlertRuleList/AlertRuleList.tsx

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

public/app/containers/AlertRuleList/__snapshots__/AlertRuleList.jest.tsx.snap

-// 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>
-`;