upgrading react and refactoring components (#5409) (#5444)

- upgraded react from v16.2.0
- upgraded react-router to v4.2.0 and re-writen the routes
- using prettier to format the code
- added jest to unit test components/reducers/selectors

This provides a skeleton to start of with. Only basic unit test
cases are added, remaining needs to be added.

In terms of functionality, it provides login, listing and searching
buckets. Remaining functionalities will be added in upcoming patches.

browser/app/js/components/__tests__/Bucket.test.js

@@ -0,0 +1,39 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { shallow } from "enzyme"
+import { Bucket } from "../Bucket"
+
+describe("Bucket", () => {
+  it("should render without crashing", () => {
+    shallow(<Bucket />)
+  })
+
+  it("should call selectBucket when clicked", () => {
+    const selectBucket = jest.fn()
+    const wrapper = shallow(
+      <Bucket bucket={"test"} selectBucket={selectBucket} />
+    )
+    wrapper.find("li").simulate("click", { preventDefault: jest.fn() })
+    expect(selectBucket).toHaveBeenCalledWith("test")
+  })
+
+  it("should highlight the selected bucket", () => {
+    const wrapper = shallow(<Bucket bucket={"test"} isActive={true} />)
+    expect(wrapper.find("li").hasClass("active")).toBeTruthy()
+  })
+})

browser/app/js/components/__tests__/BucketList.test.js

@@ -0,0 +1,29 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { shallow } from "enzyme"
+import { BucketList } from "../BucketList"
+
+describe("Bucket", () => {
+  it("should call fetchBuckets before component is mounted", () => {
+    const fetchBuckets = jest.fn()
+    const wrapper = shallow(
+      <BucketList visibleBuckets={[]} fetchBuckets={fetchBuckets} />
+    )
+    expect(fetchBuckets).toHaveBeenCalled()
+  })
+})

browser/app/js/components/__tests__/BucketSearch.test.js

@@ -0,0 +1,32 @@
+/*
+ * Minio Cloud Storage (C) 2018 Minio, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from "react"
+import { shallow } from "enzyme"
+import { BucketSearch } from "../BucketSearch"
+
+describe("BucketSearch", () => {
+  it("should render without crashing", () => {
+    shallow(<BucketSearch />)
+  })
+
+  it("should call onChange with search text", () => {
+    const onChange = jest.fn()
+    const wrapper = shallow(<BucketSearch onChange={onChange} />)
+    wrapper.find("input").simulate("change", { target: { value: "test" } })
+    expect(onChange).toHaveBeenCalledWith("test")
+  })
+})

browser/app/js/components/__tests__/Login-test.js

@@ -1,54 +0,0 @@
-/*
- * Minio Cloud Storage (C) 2016 Minio, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/*
-import React from 'react'
-import ReactTestUtils, {renderIntoDocument} from 'react-addons-test-utils'
-
-import expect from 'expect'
-import Login from '../Login'
-
-describe('Login', () => {
-  it('it should have empty credentials', () => {
-    const alert = {
-      show: false
-    }
-    const dispatch = () => {}
-    let loginComponent = renderIntoDocument(<Login alert={alert} dispatch={dispatch} />)
-    const accessKey = document.getElementById('accessKey')
-    const secretKey = document.getElementById('secretKey')
-    // Validate default value.
-    expect(accessKey.value).toEqual('')
-    expect(secretKey.value).toEqual('')
-  })
-  it('it should set accessKey and secretKey', () => {
-    const alert = {
-      show: false
-    }
-    const dispatch = () => {}
-    let loginComponent = renderIntoDocument(<Login alert={alert} dispatch={dispatch} />)
-    let accessKey = loginComponent.refs.accessKey
-    let secretKey = loginComponent.refs.secretKey
-    accessKey.value = 'demo-username'
-    secretKey.value = 'demo-password'
-    ReactTestUtils.Simulate.change(accessKey)
-    ReactTestUtils.Simulate.change(secretKey)
-    // Validate if the change has occurred.
-    expect(loginComponent.refs.accessKey.value).toEqual('demo-username')
-    expect(loginComponent.refs.secretKey.value).toEqual('demo-password')
-  })
-});
-*/