Moving CSRFToken and fetchData to utils

3scale · May 22, 2019 · 8815ea4 · 8815ea4
1 parent 526b0b0
commit 8815ea4
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 36 deletions.
diff --git 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 (
-    <input {...props} />
-  )
-}
-
 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
@@ -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 (
+      <input
+        name={getMetaContent('csrf-param')}
+        value={getMetaContent('csrf-token')}
+        type='hidden'
+      />
+    )
+  } catch (error) {
+    console.error(error)
+    return (
+      <input
+        name={null}
+        value={null}
+        type='hidden'
+      />
+    )
+  }
+}
+
+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
@@ -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(
-      `<!doctype html><html>
-         <head><meta name="csrf-param" content="authenticity_token"><meta name="csrf-token" content="=42="></head>
-         <body></body>
-       </html>`
-    )
-    const { window } = jsdom
-    return mount(<CSRFToken win={window} />)
-  }
-
-  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
@@ -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(
+      `<!doctype html><html>
+         <head><meta name="csrf-param" content="authenticity_token"><meta name="csrf-token" content="=42="></head>
+         <body></body>
+       </html>`
+    )
+    const { window } = jsdom
+    return mount(<CSRFToken win={window} />)
+  }
+
+  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(
+      `<!doctype html><html>
+         <head></head>
+         <body></body>
+       </html>`
+    )
+    const wrapper = mount(<CSRFToken win={window} />)
+    expect(wrapper.find(CSRFToken).exists()).toBe(true)
+    expect(wrapper.find('input').prop('name')).toBe(null)
+    expect(wrapper.find('input').prop('value')).toBe(null)
+  })
+})