From 8c860bd6e40218a8c5260794a9a437cd06980603 Mon Sep 17 00:00:00 2001 From: Sebastian J Date: Mon, 23 Nov 2020 23:11:53 -0500 Subject: [PATCH] Adding unit tests --- src/ButtonPanel.test.tsx | 43 ++++++++ src/ButtonPanel.tsx | 231 +++++++++++++++++++++------------------ 2 files changed, 165 insertions(+), 109 deletions(-) create mode 100644 src/ButtonPanel.test.tsx diff --git a/src/ButtonPanel.test.tsx b/src/ButtonPanel.test.tsx new file mode 100644 index 0000000..9b0d5f1 --- /dev/null +++ b/src/ButtonPanel.test.tsx @@ -0,0 +1,43 @@ +import { ButtonPanel } from './ButtonPanel'; +import { ButtonPanelOptions } from './types'; + +describe('ButtonPanel', () => { + + let underTest : ButtonPanel; + let props: any; + + beforeEach(() => { + let options : ButtonPanelOptions = { + url: '', + type: '', + contentType: '', + isAuth: false, + params: [], + text: '', + variant: 'primary', + orientation: '', + + }; + props = { + options + }; + underTest = new ButtonPanel(props); + }); + + it('should set a proper orientation', () => { + + expect(underTest.getOrientation()).toBe('center'); + + props.options.orientation = 'left'; + expect(underTest.getOrientation()).toBe('left'); + + props.options.orientation = 'right'; + expect(underTest.getOrientation()).toBe('right'); + + props.options.orientation = 'center'; + expect(underTest.getOrientation()).toBe('center'); + + }); + + }); + \ No newline at end of file diff --git a/src/ButtonPanel.tsx b/src/ButtonPanel.tsx index 8b5900f..b84df5d 100644 --- a/src/ButtonPanel.tsx +++ b/src/ButtonPanel.tsx @@ -1,3 +1,4 @@ +import "isomorphic-fetch"; import React, { PureComponent } from 'react'; import { Button, IconName, ButtonVariant } from '@grafana/ui'; import { PanelProps } from '@grafana/data'; @@ -19,52 +20,129 @@ export class ButtonPanel extends PureComponent { }; } - render() { - const { options } = this.props; - - const exeucte = () => { - this.setState({ api_call: 'IN_PROGRESS' }); + apiStateIcon(): IconName | undefined { + switch (this.state.api_call) { + case 'IN_PROGRESS': + return 'fa fa-spinner'; + case 'SUCCESS': + return 'check'; + case 'ERROR': + return 'exclamation-triangle'; + case 'READY': + default: + return this.props.options.icon;// options.icon; + } + } - const url = new URL(interpolateVariables(options.url)); - console.log(options.method, ' to ', url, ' with params as ', options.type); + apiStateClassName() { + switch (this.state.api_call) { + case 'IN_PROGRESS': + return 'spinning'; + default: + return ''; + } + }; - const requestHeaders: HeadersInit = new Headers(); - requestHeaders.set('Accept', 'application/json'); - - let fetchOpts: RequestInit = { - method: options.method, // *GET, POST, PUT, DELETE, etc. - mode: 'cors', // no-cors, *cors, same-origin - credentials: 'include', // include, *same-origin, omit - cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached - headers: requestHeaders, - redirect: 'follow', // manual, *follow, error - //referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url + getOrientation() { + if (!this.props.options.orientation) { + return 'center'; + } + switch (this.props.options.orientation) { + case 'left': + return 'left'; + case 'right': + return 'right'; + case 'center': + default: + return 'center'; + } + }; + + customStyle() { + if (this.props.options.variant === 'custom') { + return { + // Resaet Grafana defaults + background: 'none', + border: 'none', + // Set custom styles + backgroundColor: this.props.options.backgroundColor, + color: this.props.options.foregroundColor, }; + } else { + return {}; + } + } - if (options.method === 'POST') { - requestHeaders.set('Content-Type', options.contentType); - if (options.payload) { - fetchOpts.body = interpolateVariables(options.payload); - } - } + variant() : ButtonVariant | undefined { + if (this.props.options.variant === 'custom') { + return undefined; + } else { + return this.props.options.variant as ButtonVariant; + } + } + + buttonText() { + return this.interpolateVariables(this.props.options.text); + } + + interpolateVariables(text: string){ + return getTemplateSrv().replace(text, this.props.data.request?.scopedVars); + } + + prepareFetchOpts(url: URL) : RequestInit { + const { options } = this.props; + + const requestHeaders: HeadersInit = new Headers(); + requestHeaders.set('Accept', 'application/json'); + + let fetchOpts: RequestInit = { + method: options.method, // *GET, POST, PUT, DELETE, etc. + mode: 'cors', // no-cors, *cors, same-origin + credentials: 'include', // include, *same-origin, omit + cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached + headers: requestHeaders, + redirect: 'follow', // manual, *follow, error + //referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url + }; - if (options.isAuth) { - requestHeaders.set('Authorization', btoa(options.username + ':' + options.password)); + if (options.method === 'POST') { + requestHeaders.set('Content-Type', options.contentType); + if (options.payload) { + fetchOpts.body = this.interpolateVariables(options.payload); } + } - if (options.params) { - if (options.type === 'header') { - options.params.forEach(e => { - requestHeaders.set(interpolateVariables(e[0]), interpolateVariables(e[1])); - }); - } else if (options.type === 'query') { - options.params.forEach(e => { - url.searchParams.append(interpolateVariables(e[0]), interpolateVariables(e[1])); - }); - } else { - console.error('Unknown params type', options.type); - } + if (options.isAuth) { + requestHeaders.set('Authorization', btoa(options.username + ':' + options.password)); + } + + if (options.params) { + if (options.type === 'header') { + options.params.forEach(e => { + requestHeaders.set(this.interpolateVariables(e[0]), this.interpolateVariables(e[1])); + }); + } else if (options.type === 'query') { + options.params.forEach(e => { + url.searchParams.append(this.interpolateVariables(e[0]), this.interpolateVariables(e[1])); + }); + } else { + console.error('Unknown params type', options.type); } + } + + return fetchOpts; + } + + render() { + const { options } = this.props; + + const exeucte = () => { + this.setState({ api_call: 'IN_PROGRESS' }); + + const url = new URL(this.interpolateVariables(options.url)); + console.log(options.method, ' to ', url, ' with params as ', options.type); + + let fetchOpts = this.prepareFetchOpts(url); fetch(url.toString(), fetchOpts) .then(response => { @@ -94,83 +172,18 @@ export class ButtonPanel extends PureComponent { }); }; - const apiStateIcon = (): IconName | undefined => { - switch (this.state.api_call) { - case 'IN_PROGRESS': - return 'fa fa-spinner'; - case 'SUCCESS': - return 'check'; - case 'ERROR': - return 'exclamation-triangle'; - case 'READY': - default: - return options.icon; - } - }; - - const apiStateClassName = () => { - switch (this.state.api_call) { - case 'IN_PROGRESS': - return 'spinning'; - default: - return ''; - } - }; - const getOrientation = () => { - if (!this.props.options.orientation) { - return 'center'; - } - switch (this.props.options.orientation) { - case 'left': - return 'left'; - case 'right': - return 'right'; - case 'center': - default: - return 'center'; - } - }; - const customStyle = () => { - if (this.props.options.variant === 'custom') { - return { - // Resaet Grafana defaults - background: 'none', - border: 'none', - // Set custom styles - backgroundColor: this.props.options.backgroundColor, - color: this.props.options.foregroundColor, - }; - } else { - return {}; - } - }; - const variant = () : ButtonVariant | undefined => { - if (this.props.options.variant === 'custom') { - return undefined; - } else { - return this.props.options.variant as ButtonVariant; - } - } - const buttonText = () => { - return interpolateVariables(this.props.options.text); - }; - - const interpolateVariables = (text: string) => { - return getTemplateSrv().replace(text, this.props.data.request?.scopedVars); - }; - return ( -
+
);