From adb9d92082446bd4ec114f36dcd5d622705753a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 22 Oct 2017 12:48:20 +0200 Subject: [PATCH] test: added first react snapshot test --- docs/yarn.lock | 4 + package.json | 2 +- public/app/app.ts | 5 +- public/app/core/angular_wrappers.ts | 2 +- .../{ui => components}/PasswordStrength.tsx | 0 .../components/colorpicker/ColorPalette.tsx | 2 +- .../colorpicker/ColorPickerPopover.tsx | 8 +- .../components/colorpicker/SpectrumPicker.tsx | 2 +- public/app/core/core.ts | 3 +- public/app/core/specs/ColorPalette.jest.tsx | 10 + .../app/core/specs/PasswordStrength.jest.tsx | 2 +- .../__snapshots__/ColorPalette.jest.tsx.snap | 628 ++++++++++++++++++ .../{variable_specs.ts => variable.jest.ts} | 22 +- 13 files changed, 666 insertions(+), 24 deletions(-) create mode 100644 docs/yarn.lock rename public/app/core/{ui => components}/PasswordStrength.tsx (100%) create mode 100644 public/app/core/specs/ColorPalette.jest.tsx create mode 100644 public/app/core/specs/__snapshots__/ColorPalette.jest.tsx.snap rename public/app/features/templating/specs/{variable_specs.ts => variable.jest.ts} (79%) diff --git a/docs/yarn.lock b/docs/yarn.lock new file mode 100644 index 00000000000..fb57ccd13af --- /dev/null +++ b/docs/yarn.lock @@ -0,0 +1,4 @@ +# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. +# yarn lockfile v1 + + diff --git a/package.json b/package.json index abff7f92a04..9e47b02f7a6 100644 --- a/package.json +++ b/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": { diff --git a/public/app/app.ts b/public/app/app.ts index 369dce5d16f..8e345c6abed 100644 --- a/public/app/app.ts +++ b/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(() => { diff --git a/public/app/core/angular_wrappers.ts b/public/app/core/angular_wrappers.ts index 543b3a93d31..7acdc79d55a 100644 --- a/public/app/core/angular_wrappers.ts +++ b/public/app/core/angular_wrappers.ts @@ -1,5 +1,5 @@ import { react2AngularDirective } from 'app/core/utils/react2angular'; -import { PasswordStrength } from './ui/PasswordStrength'; +import { PasswordStrength } from './components/PasswordStrength'; export function registerAngularDirectives() { diff --git a/public/app/core/ui/PasswordStrength.tsx b/public/app/core/components/PasswordStrength.tsx similarity index 100% rename from public/app/core/ui/PasswordStrength.tsx rename to public/app/core/components/PasswordStrength.tsx diff --git a/public/app/core/components/colorpicker/ColorPalette.tsx b/public/app/core/components/colorpicker/ColorPalette.tsx index 127f2d328ca..07b25a32046 100644 --- a/public/app/core/components/colorpicker/ColorPalette.tsx +++ b/public/app/core/components/colorpicker/ColorPalette.tsx @@ -6,7 +6,7 @@ export interface IProps { onColorSelect: (c: string) => void; } -export class GfColorPalette extends React.Component { +export class ColorPalette extends React.Component { paletteColors: string[]; constructor(props) { diff --git a/public/app/core/components/colorpicker/ColorPickerPopover.tsx b/public/app/core/components/colorpicker/ColorPickerPopover.tsx index 270e82ffdd6..4677eee22a7 100644 --- a/public/app/core/components/colorpicker/ColorPickerPopover.tsx +++ b/public/app/core/components/colorpicker/ColorPickerPopover.tsx @@ -1,8 +1,8 @@ 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 { render() { const paletteTab = (
- +
); const spectrumTab = (
- +
); const currentTab = this.state.tab === 'palette' ? paletteTab : spectrumTab; diff --git a/public/app/core/components/colorpicker/SpectrumPicker.tsx b/public/app/core/components/colorpicker/SpectrumPicker.tsx index 254f06cf145..eef04545308 100644 --- a/public/app/core/components/colorpicker/SpectrumPicker.tsx +++ b/public/app/core/components/colorpicker/SpectrumPicker.tsx @@ -9,7 +9,7 @@ export interface IProps { onColorSelect: (c: string) => void; } -export class GfSpectrumPicker extends React.Component { +export class SpectrumPicker extends React.Component { elem: any; isMoving: boolean; diff --git a/public/app/core/core.ts b/public/app/core/core.ts index 9db978eabcd..9630fdac9c0 100644 --- a/public/app/core/core.ts +++ b/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, diff --git a/public/app/core/specs/ColorPalette.jest.tsx b/public/app/core/specs/ColorPalette.jest.tsx new file mode 100644 index 00000000000..f3b8e233fe5 --- /dev/null +++ b/public/app/core/specs/ColorPalette.jest.tsx @@ -0,0 +1,10 @@ +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().toJSON(); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/public/app/core/specs/PasswordStrength.jest.tsx b/public/app/core/specs/PasswordStrength.jest.tsx index b5f730e6bdd..a0a2df69029 100644 --- a/public/app/core/specs/PasswordStrength.jest.tsx +++ b/public/app/core/specs/PasswordStrength.jest.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {shallow} from 'enzyme'; -import {PasswordStrength} from '../ui/PasswordStrength'; +import {PasswordStrength} from '../components/PasswordStrength'; describe('PasswordStrength', () => { diff --git a/public/app/core/specs/__snapshots__/ColorPalette.jest.tsx.snap b/public/app/core/specs/__snapshots__/ColorPalette.jest.tsx.snap new file mode 100644 index 00000000000..38611cab7cc --- /dev/null +++ b/public/app/core/specs/__snapshots__/ColorPalette.jest.tsx.snap @@ -0,0 +1,628 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`CollorPalette renders correctly 1`] = ` +
+

+ +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + + +   + +

+
+`; diff --git a/public/app/features/templating/specs/variable_specs.ts b/public/app/features/templating/specs/variable.jest.ts similarity index 79% rename from public/app/features/templating/specs/variable_specs.ts rename to public/app/features/templating/specs/variable.jest.ts index 9f9c5ce6c22..f0bb7b89271 100644 --- a/public/app/features/templating/specs/variable_specs.ts +++ b/public/app/features/templating/specs/variable.jest.ts @@ -1,5 +1,3 @@ -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); }); });