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