diff --git a/web/src/js/__tests__/flow/utilsSpec.js b/web/src/js/__tests__/flow/utilsSpec.js
new file mode 100644
index 000000000..2d8f04564
--- /dev/null
+++ b/web/src/js/__tests__/flow/utilsSpec.js
@@ -0,0 +1,69 @@
+import * as utils from '../../flow/utils'
+
+describe('MessageUtils', () => {
+    it('should be possible to get first header', () => {
+        let msg = { headers: [["foo", "bar"]]}
+        expect(utils.MessageUtils.get_first_header(msg, "foo")).toEqual("bar")
+        expect(utils.MessageUtils.get_first_header(msg, "123")).toEqual(undefined)
+    })
+
+    it('should be possible to get Content-Type', () => {
+        let type = "text/html",
+            msg = { headers: [["Content-Type", type]]}
+        expect(utils.MessageUtils.getContentType(msg)).toEqual(type)
+    })
+
+    it('should be possible to match header', () => {
+        let h1 = ["foo", "bar"],
+            msg = {headers : [h1]}
+        expect(utils.MessageUtils.match_header(msg, /foo/i)).toEqual(h1)
+        expect(utils.MessageUtils.match_header(msg, /123/i)).toBeFalsy()
+    })
+
+    it('should be possible to get content URL', () => {
+        // request
+        let msg = "foo", view = "bar",
+            flow = { request: msg, id: 1}
+        expect(utils.MessageUtils.getContentURL(flow, msg, view)).toEqual(
+            "/flows/1/request/content/bar"
+        )
+        expect(utils.MessageUtils.getContentURL(flow, msg, '')).toEqual(
+            "/flows/1/request/content"
+        )
+        // response
+        flow = {response: msg, id: 2}
+        expect(utils.MessageUtils.getContentURL(flow, msg, view)).toEqual(
+            "/flows/2/response/content/bar"
+        )
+    })
+})
+
+describe('RequestUtils', () => {
+    it('should be possible prettify url', () => {
+        let request = {port: 4444, scheme: "http", pretty_host: "foo", path: "/bar"}
+        expect(utils.RequestUtils.pretty_url(request)).toEqual(
+            "http://foo:4444/bar"
+        )
+    })
+})
+
+describe('parseUrl', () => {
+    it('should be possible to parse url', () => {
+        let url = "http://foo:4444/bar"
+        expect(utils.parseUrl(url)).toEqual({
+            port: 4444,
+            scheme: 'http',
+            host: 'foo',
+            path: '/bar'
+        })
+
+        expect(utils.parseUrl("foo:foo")).toBeFalsy()
+    })
+})
+
+describe('isValidHttpVersion', () => {
+    it('should be possible to validate http version', () => {
+        expect(utils.isValidHttpVersion("HTTP/1.1")).toBeTruthy()
+        expect(utils.isValidHttpVersion("HTTP//1")).toBeFalsy()
+    })
+})
diff --git a/web/src/js/__tests__/utilsSpec.js b/web/src/js/__tests__/utilsSpec.js
new file mode 100644
index 000000000..9a1a0750f
--- /dev/null
+++ b/web/src/js/__tests__/utilsSpec.js
@@ -0,0 +1,95 @@
+import * as utils from '../utils'
+
+global.fetch = jest.fn()
+
+describe('formatSize', () => {
+    it('should return 0 when 0 byte', () => {
+        expect(utils.formatSize(0)).toEqual('0')
+    })
+
+    it('should return formatted size', () => {
+        expect(utils.formatSize(27104011)).toEqual("25.8mb")
+        expect(utils.formatSize(1023)).toEqual("1023b")
+    })
+})
+
+describe('formatTimeDelta', () => {
+    it('should return formatted time', () => {
+        expect(utils.formatTimeDelta(3600100)).toEqual("1h")
+    })
+})
+
+describe('formatTimeSTamp', () => {
+    it('should return formatted time', () => {
+        expect(utils.formatTimeStamp(1483228800)).toEqual("2017-01-01 00:00:00.000")
+    })
+})
+
+describe('reverseString', () => {
+    it('should return reversed string', () => {
+        let str1 = "abc", str2="xyz"
+        expect(utils.reverseString(str1) > utils.reverseString(str2)).toBeTruthy()
+    })
+})
+
+describe('fetchApi', () => {
+    it('should handle fetch operation', () => {
+        utils.fetchApi('http://foo/bar', {method: "POST"})
+        expect(fetch.mock.calls[0][0]).toEqual(
+            "http://foo/bar?_xsrf=undefined"
+        )
+        fetch.mockClear()
+
+        utils.fetchApi('http://foo?bar=1', {method: "POST"})
+        expect(fetch.mock.calls[0][0]).toEqual(
+            "http://foo?bar=1&_xsrf=undefined"
+        )
+
+    })
+
+    it('should be possible to do put request', () => {
+        fetch.mockClear()
+        utils.fetchApi.put("http://foo", [1, 2, 3], {})
+        expect(fetch.mock.calls[0]).toEqual(
+            [
+                "http://foo?_xsrf=undefined",
+                {
+                    body: "[1,2,3]",
+                    credentials: "same-origin",
+                    headers: { "Content-Type": "application/json" },
+                    method: "PUT"
+                },
+            ]
+        )
+    })
+})
+
+describe('getDiff', () => {
+    it('should return json object including only the changed keys value pairs', () => {
+        let obj1 = {a: 1, b:{ foo: 1} , c: [3]},
+            obj2 = {a: 1, b:{ foo: 2} , c: [4]}
+        expect(utils.getDiff(obj1, obj2)).toEqual({ b: {foo: 2}, c:[4]})
+    })
+})
+
+describe('pure', () => {
+    let tFunc = function({ className }) {
+        return (<p className={ className }>foo</p>)
+    },
+        puredFunc = utils.pure(tFunc),
+        f = new puredFunc('bar')
+
+    it('should display function name', () => {
+        expect(utils.pure(tFunc).displayName).toEqual('tFunc')
+    })
+
+    it('should suggest when should component update', () => {
+        expect(f.shouldComponentUpdate('foo')).toBeTruthy()
+        expect(f.shouldComponentUpdate('bar')).toBeFalsy()
+    })
+
+    it('should render properties', () => {
+        expect(f.render()).toEqual(tFunc('bar'))
+    })
+
+})