test: added first react snapshot test

docs/yarn.lock

+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+

package.json

@@ -102,7 +102,7 @@
     "test-ci": "./node_modules/.bin/grunt test --coverage=true",
     "lint": "./node_modules/.bin/tslint -c tslint.json --project tsconfig.json --type-check",
     "karma": "./node_modules/grunt-cli/bin/grunt karma:dev",
-    "jest": "./node_modules/jest-cli/bin/jest --notify --watch"
+    "jest": "./node_modules/jest-cli/bin/jest.js --notify --watch"
   },
   "license": "Apache-2.0",
   "dependencies": {

public/app/app.ts

@@ -27,7 +27,7 @@ _.move = function (array, fromIndex, toIndex) {
   return array;
 };
 
-import {coreModule} from './core/core';
+import {coreModule, registerAngularDirectives} from './core/core';
 
 export class GrafanaApp {
   registerFunctions: any;
@@ -109,6 +109,9 @@ export class GrafanaApp {
     // makes it possible to add dynamic stuff
     this.useModule(coreModule);
 
+    // register react angular wrappers
+    registerAngularDirectives();
+
     var preBootRequires = [System.import('app/features/all')];
 
     Promise.all(preBootRequires).then(() => {

public/app/core/angular_wrappers.ts

 import { react2AngularDirective } from 'app/core/utils/react2angular';
-import { PasswordStrength } from './ui/PasswordStrength';
+import { PasswordStrength } from './components/PasswordStrength';
 
 export function registerAngularDirectives() {
 

public/app/core/components/colorpicker/ColorPalette.tsx

@@ -6,7 +6,7 @@ export interface IProps {
   onColorSelect: (c: string) => void;
 }
 
-export class GfColorPalette extends React.Component<IProps, any> {
+export class ColorPalette extends React.Component<IProps, any> {
   paletteColors: string[];
 
   constructor(props) {

public/app/core/components/colorpicker/ColorPickerPopover.tsx

 import React from 'react';
 import $ from 'jquery';
 import tinycolor from 'tinycolor2';
-import { GfColorPalette } from './ColorPalette';
-import { GfSpectrumPicker } from './SpectrumPicker';
+import { ColorPalette } from './ColorPalette';
+import { SpectrumPicker } from './SpectrumPicker';
 
 const DEFAULT_COLOR = '#000000';
 
@@ -82,12 +82,12 @@ export class ColorPickerPopover extends React.Component<IProps, any> {
   render() {
     const paletteTab = (
       <div id="palette">
-        <GfColorPalette color={this.state.color} onColorSelect={this.sampleColorSelected.bind(this)} />
+        <ColorPalette color={this.state.color} onColorSelect={this.sampleColorSelected.bind(this)} />
       </div>
     );
     const spectrumTab = (
       <div id="spectrum">
-        <GfSpectrumPicker color={this.state.color} onColorSelect={this.spectrumColorSelected.bind(this)} options={{}} />
+        <SpectrumPicker color={this.state.color} onColorSelect={this.spectrumColorSelected.bind(this)} options={{}} />
       </div>
     );
     const currentTab = this.state.tab === 'palette' ? paletteTab : spectrumTab;

public/app/core/components/colorpicker/SpectrumPicker.tsx

@@ -9,7 +9,7 @@ export interface IProps {
   onColorSelect: (c: string) => void;
 }
 
-export class GfSpectrumPicker extends React.Component<IProps, any> {
+export class SpectrumPicker extends React.Component<IProps, any> {
   elem: any;
   isMoving: boolean;
 

public/app/core/core.ts

@@ -47,9 +47,8 @@ import {JsonExplorer} from './components/json_explorer/json_explorer';
 import {NavModelSrv, NavModel} from './nav_model_srv';
 import {registerAngularDirectives} from './angular_wrappers';
 
-registerAngularDirectives();
-
 export {
+  registerAngularDirectives,
   arrayJoin,
   coreModule,
   grafanaAppDirective,

public/app/core/specs/ColorPalette.jest.tsx

+import React from 'react';
+import renderer from 'react-test-renderer';
+import { ColorPalette } from '../components/colorpicker/ColorPalette';
+
+describe('CollorPalette', () => {
+  it('renders correctly', () => {
+    const tree = renderer.create(<ColorPalette color="#EAB839" />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

public/app/core/specs/PasswordStrength.jest.tsx

 import React from 'react';
 import {shallow} from 'enzyme';
 
-import {PasswordStrength} from '../ui/PasswordStrength';
+import {PasswordStrength} from '../components/PasswordStrength';
 
 describe('PasswordStrength', () => {
 

public/app/core/specs/__snapshots__/ColorPalette.jest.tsx.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CollorPalette renders correctly 1`] = `
+<div
+  className="graph-legend-popover"
+>
+  <p
+    className="m-b-0"
+  >
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#890f02",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#58140c",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#99440a",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#c15c17",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#967302",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#cca300",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#3f6833",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#2f575e",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#64b0c8",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#052b51",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#0a50a1",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#584477",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#3f2b5b",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#511749",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#e24d42",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#bf1b00",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#ef843c",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#f4d598",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#e5ac0e",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#9ac48a",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#508642",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#6ed0e0",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#65c5db",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#0a437c",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#447ebc",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#614d93",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#d683ce",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#6d1f62",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#ea6460",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#e0752d",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#f9934e",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#fceaca",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle-o"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#eab839",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#b7dbab",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#629e51",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#70dbed",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#82b5d8",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#1f78c1",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#aea2e0",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#705da0",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#e5a8e2",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#962d82",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#f29191",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#fce2de",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#f9ba8f",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#f9e2d2",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#f2c96d",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#e0f9d7",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#7eb26d",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#cffaff",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#badff4",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#5195ce",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#dedaf7",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#806eb7",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#f9d9f9",
+        }
+      }
+    >
+       
+    </i>
+    <i
+      className="pointer fa fa-circle"
+      onClick={[Function]}
+      style={
+        Object {
+          "color": "#ba43a9",
+        }
+      }
+    >
+       
+    </i>
+  </p>
+</div>
+`;

public/app/features/templating/specs/variable_specs.ts → public/app/features/templating/specs/variable.jest.ts

-import {describe, it, expect} from 'test/lib/common';
-
 import {containsVariable, assignModelProperties} from '../variable';
 
 describe('containsVariable', function() {
@@ -8,37 +6,37 @@ describe('containsVariable', function() {
 
     it('should find it with $var syntax', function() {
       var contains = containsVariable('this.$test.filters', 'test');
-      expect(contains).to.be(true);
+      expect(contains).toBe(true);
     });
 
     it('should not find it if only part matches with $var syntax', function() {
       var contains = containsVariable('this.$serverDomain.filters', 'server');
-      expect(contains).to.be(false);
+      expect(contains).toBe(false);
     });
 
     it('should find it if it ends with variable and passing multiple test strings', function() {
       var contains = containsVariable('show field keys from $pgmetric', 'test string2', 'pgmetric');
-      expect(contains).to.be(true);
+      expect(contains).toBe(true);
     });
 
     it('should find it with [[var]] syntax', function() {
       var contains = containsVariable('this.[[test]].filters', 'test');
-      expect(contains).to.be(true);
+      expect(contains).toBe(true);
     });
 
     it('should find it when part of segment', function() {
       var contains = containsVariable('metrics.$env.$group-*', 'group');
-      expect(contains).to.be(true);
+      expect(contains).toBe(true);
     });
 
     it('should find it its the only thing', function() {
       var contains = containsVariable('$env', 'env');
-      expect(contains).to.be(true);
+      expect(contains).toBe(true);
     });
 
     it('should be able to pass in multiple test strings', function() {
       var contains = containsVariable('asd','asd2.$env', 'env');
-      expect(contains).to.be(true);
+      expect(contains).toBe(true);
     });
 
   });
@@ -50,14 +48,14 @@ describe('assignModelProperties', function() {
   it('only set properties defined in defaults', function() {
     var target: any = {test: 'asd'};
     assignModelProperties(target, {propA: 1, propB: 2}, {propB: 0});
-    expect(target.propB).to.be(2);
-    expect(target.test).to.be('asd');
+    expect(target.propB).toBe(2);
+    expect(target.test).toBe('asd');
   });
 
   it('use default value if not found on source', function() {
     var target: any = {test: 'asd'};
     assignModelProperties(target, {propA: 1, propB: 2}, {propC: 10});
-    expect(target.propC).to.be(10);
+    expect(target.propC).toBe(10);
   });
 
 });