From 8815ea4a69b5c411e8540319c5c61abcf8ab3d92 Mon Sep 17 00:00:00 2001 From: Damian Peralta Date: Wed, 22 May 2019 17:41:27 +0200 Subject: [PATCH] Moving CSRFToken and fetchData to utils --- .../src/Policies/components/CustomPolicy.jsx | 14 +----- app/javascript/src/utilities/utils.js | 43 +++++++++++++++++++ .../Policies/components/CustomPolicy.spec.jsx | 24 +---------- spec/javascripts/utilities/utils.spec.jsx | 39 +++++++++++++++++ 4 files changed, 84 insertions(+), 36 deletions(-) create mode 100644 app/javascript/src/utilities/utils.js create mode 100644 spec/javascripts/utilities/utils.spec.jsx diff --git a/app/javascript/src/Policies/components/CustomPolicy.jsx b/app/javascript/src/Policies/components/CustomPolicy.jsx index e1fdcfce34..b5906f1bbb 100644 --- a/app/javascript/src/Policies/components/CustomPolicy.jsx +++ b/app/javascript/src/Policies/components/CustomPolicy.jsx @@ -8,6 +8,7 @@ import type { Policy, Schema } from 'Policies/types/Policies' import type {InputEvent} from 'Policies/types' import 'codemirror/mode/javascript/javascript' import 'Policies/styles/policies.scss' +import {CSRFToken} from 'utilities/utils' type OnChange = (InputEvent) => void @@ -32,18 +33,6 @@ const POLICY_TEMPLATE: Policy = { id: 0 } -function CSRFToken ({win = window}: {win?: Window}) { - const getMetaContent = meta => win.document.head.querySelector(`meta[name~=${meta}][content]`).content - const props = { - name: getMetaContent('csrf-param'), - value: getMetaContent('csrf-token'), - type: 'hidden' - } - return ( - - ) -} - function CustomPolicyForm ({policy, onChange, win = window}: {policy: Policy, onChange: OnChange, win?: Window}) { const isNewPolicy = !policy.id const [method, setMethod] = useState(isNewPolicy ? 'post' : 'put') @@ -145,7 +134,6 @@ function CustomPolicy ({policy = POLICY_TEMPLATE}: {policy: Policy}) { export { CustomPolicy, CustomPolicyForm, - CSRFToken, CustomPolicyEditor, POLICY_TEMPLATE } diff --git a/app/javascript/src/utilities/utils.js b/app/javascript/src/utilities/utils.js new file mode 100644 index 0000000000..9d9f505e26 --- /dev/null +++ b/app/javascript/src/utilities/utils.js @@ -0,0 +1,43 @@ +// @flow +import {fetch as fetchPolyfill} from 'whatwg-fetch' +import 'core-js/es6/promise' +import React from 'react' + +function CSRFToken ({win = window}: {win?: Window}) { + const getMetaContent = meta => win.document.head.querySelector(`meta[name~=${meta}][content]`).content + + try { + return ( + + ) + } catch (error) { + console.error(error) + return ( + + ) + } +} + +const fetchData = (url: string) => { + return fetchPolyfill(url) + .then((response) => { + return response.json() + }) + .then(data => data) + .catch(error => { + console.error(error) + }) +} + +export { + CSRFToken, + fetchData +} diff --git a/spec/javascripts/Policies/components/CustomPolicy.spec.jsx b/spec/javascripts/Policies/components/CustomPolicy.spec.jsx index 68fee514d3..ce5e4aae39 100644 --- a/spec/javascripts/Policies/components/CustomPolicy.spec.jsx +++ b/spec/javascripts/Policies/components/CustomPolicy.spec.jsx @@ -1,13 +1,11 @@ import React from 'react' -import Enzyme, { mount, shallow } from 'enzyme' +import Enzyme, { shallow } from 'enzyme' import Adapter from 'enzyme-adapter-react-16' -import {JSDOM} from 'jsdom' import { CustomPolicy, CustomPolicyEditor, CustomPolicyForm, - CSRFToken, POLICY_TEMPLATE } from 'Policies/components/CustomPolicy' @@ -92,23 +90,3 @@ describe('CustomPolicyForm', () => { expect(wrapper.find('input[name="_method"]').prop('value')).toBe('delete') }) }) - -describe('CSRFToken', () => { - function setup () { - const jsdom = new JSDOM( - ` - - - ` - ) - const { window } = jsdom - return mount() - } - - it('should render itself correctly', () => { - const wrapper = setup() - expect(wrapper.find(CSRFToken).exists()).toBe(true) - expect(wrapper.find('input').prop('name')).toBe('authenticity_token') - expect(wrapper.find('input').prop('value')).toBe('=42=') - }) -}) diff --git a/spec/javascripts/utilities/utils.spec.jsx b/spec/javascripts/utilities/utils.spec.jsx new file mode 100644 index 0000000000..7e96c961a2 --- /dev/null +++ b/spec/javascripts/utilities/utils.spec.jsx @@ -0,0 +1,39 @@ +import React from 'react' +import Enzyme, { mount } from 'enzyme' +import Adapter from 'enzyme-adapter-react-16' +import {CSRFToken} from 'utilities/utils' +import {JSDOM} from 'jsdom' +Enzyme.configure({ adapter: new Adapter() }) + +describe('CSRFToken', () => { + function setup () { + const jsdom = new JSDOM( + ` + + + ` + ) + const { window } = jsdom + return mount() + } + + it('should render itself correctly', () => { + const wrapper = setup() + expect(wrapper.find(CSRFToken).exists()).toBe(true) + expect(wrapper.find('input').prop('name')).toBe('authenticity_token') + expect(wrapper.find('input').prop('value')).toBe('=42=') + }) + + it('should return null values when csrf-param meta tag is not present', () => { + const { window } = new JSDOM( + ` + + + ` + ) + const wrapper = mount() + expect(wrapper.find(CSRFToken).exists()).toBe(true) + expect(wrapper.find('input').prop('name')).toBe(null) + expect(wrapper.find('input').prop('value')).toBe(null) + }) +})