Refactor browser dropdown links and components (#5562)

* refactor browser links and about modal

Moved about modal to separate component and added unit tests.

* refactor change password modal component

* added unit tests for ChangePasswordModal

* fix logout function in browser dropdown

* remove older unused BrowserDropdown component

* remove unused variables from BrowserDropdown component

* show BrowserDropdown and StorageInfo only for LoggedIn users

Non-loggedIn users will see a 'Login' button

browser/app/js/browser/__tests__/AboutModal.test.js

@@ -0,0 +1,41 @@
+/*
+ * 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 { AboutModal } from "../AboutModal"
+
+describe("AboutModal", () => {
+  const serverInfo = {
+    version: "test",
+    memory: "test",
+    platform: "test",
+    runtime: "test"
+  }
+
+  it("should render without crashing", () => {
+    shallow(<AboutModal serverInfo={serverInfo} />)
+  })
+
+  it("should call hideAbout when close button is clicked", () => {
+    const hideAbout = jest.fn()
+    const wrapper = shallow(
+      <AboutModal serverInfo={serverInfo} hideAbout={hideAbout} />
+    )
+    wrapper.find("button").simulate("click")
+    expect(hideAbout).toHaveBeenCalled()
+  })
+})

browser/app/js/browser/__tests__/BrowserDropdown.test.js

@@ -0,0 +1,63 @@
+/*
+ * 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 { BrowserDropdown } from "../BrowserDropdown"
+
+describe("BrowserDropdown", () => {
+  const serverInfo = {
+    version: "test",
+    memory: "test",
+    platform: "test",
+    runtime: "test"
+  }
+
+  it("should render without crashing", () => {
+    shallow(
+      <BrowserDropdown serverInfo={serverInfo} fetchServerInfo={jest.fn()} />
+    )
+  })
+
+  it("should call fetchServerInfo after its mounted", () => {
+    const fetchServerInfo = jest.fn()
+    const wrapper = shallow(
+      <BrowserDropdown
+        serverInfo={serverInfo}
+        fetchServerInfo={fetchServerInfo}
+      />
+    )
+    expect(fetchServerInfo).toHaveBeenCalled()
+  })
+
+  it("should show AboutModal when About link is clicked", () => {
+    const wrapper = shallow(
+      <BrowserDropdown serverInfo={serverInfo} fetchServerInfo={jest.fn()} />
+    )
+    wrapper.find("#show-about").simulate("click", { preventDefault: jest.fn() })
+    wrapper.update()
+    expect(wrapper.state("showAboutModal")).toBeTruthy()
+    expect(wrapper.find("AboutModal").length).toBe(1)
+  })
+
+  it("should logout and redirect to /login when logout is clicked", () => {
+    const wrapper = shallow(
+      <BrowserDropdown serverInfo={serverInfo} fetchServerInfo={jest.fn()} />
+    )
+    wrapper.find("#logout").simulate("click", { preventDefault: jest.fn() })
+    expect(window.location.pathname.endsWith("/login")).toBeTruthy()
+  })
+})

browser/app/js/browser/__tests__/ChangePasswordModal.test.js

@@ -0,0 +1,109 @@
+/*
+ * 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, mount } from "enzyme"
+import { ChangePasswordModal } from "../ChangePasswordModal"
+
+jest.mock("../../web", () => ({
+  GetAuth: jest.fn(() => {
+    return Promise.resolve({ accessKey: "test1", secretKey: "test2" })
+  }),
+  GenerateAuth: jest.fn(() => {
+    return Promise.resolve({ accessKey: "gen1", secretKey: "gen2" })
+  }),
+  SetAuth: jest.fn(({ accessKey, secretKey }) => {
+    if (accessKey == "test3" && secretKey == "test4") {
+      return Promise.resolve({})
+    } else {
+      return Promise.reject({ message: "Error" })
+    }
+  })
+}))
+
+describe("ChangePasswordModal", () => {
+  const serverInfo = {
+    version: "test",
+    memory: "test",
+    platform: "test",
+    runtime: "test",
+    info: { isEnvCreds: false }
+  }
+
+  it("should render without crashing", () => {
+    shallow(<ChangePasswordModal serverInfo={serverInfo} />)
+  })
+
+  it("should get the keys when its rendered", () => {
+    const wrapper = shallow(<ChangePasswordModal serverInfo={serverInfo} />)
+    setImmediate(() => {
+      expect(wrapper.state("accessKey")).toBe("test1")
+      expect(wrapper.state("secretKey")).toBe("test2")
+    })
+  })
+
+  it("should show readonly keys when isEnvCreds is true", () => {
+    const newServerInfo = { ...serverInfo, info: { isEnvCreds: true } }
+    const wrapper = shallow(<ChangePasswordModal serverInfo={newServerInfo} />)
+    expect(wrapper.state("accessKey")).toBe("xxxxxxxxx")
+    expect(wrapper.state("secretKey")).toBe("xxxxxxxxx")
+    expect(wrapper.find("#accessKey").prop("readonly")).toBeTruthy()
+    expect(wrapper.find("#secretKey").prop("readonly")).toBeTruthy()
+    expect(wrapper.find("#generate-keys").hasClass("hidden")).toBeTruthy()
+    expect(wrapper.find("#update-keys").hasClass("hidden")).toBeTruthy()
+  })
+
+  it("should generate accessKey and secretKey when Generate buttons is clicked", () => {
+    const wrapper = shallow(<ChangePasswordModal serverInfo={serverInfo} />)
+    wrapper.find("#generate-keys").simulate("click")
+    setImmediate(() => {
+      expect(wrapper.state("accessKey")).toBe("gen1")
+      expect(wrapper.state("secretKey")).toBe("gen2")
+    })
+  })
+
+  it("should update accessKey and secretKey when Update button is clicked", () => {
+    const showAlert = jest.fn()
+    const wrapper = shallow(
+      <ChangePasswordModal serverInfo={serverInfo} showAlert={showAlert} />
+    )
+    wrapper
+      .find("#accessKey")
+      .simulate("change", { target: { value: "test3" } })
+    wrapper
+      .find("#secretKey")
+      .simulate("change", { target: { value: "test4" } })
+    wrapper.find("#update-keys").simulate("click")
+    setImmediate(() => {
+      expect(showAlert).toHaveBeenCalledWith({
+        type: "success",
+        message: "Changed credentials"
+      })
+    })
+  })
+
+  it("should call hideChangePassword when Cancel button is clicked", () => {
+    const hideChangePassword = jest.fn()
+    const wrapper = shallow(
+      <ChangePasswordModal
+        serverInfo={serverInfo}
+        hideChangePassword={hideChangePassword}
+      />
+    )
+    wrapper.find("#cancel-change-password").simulate("click")
+    expect(hideChangePassword).toHaveBeenCalled()
+  })
+})

browser/app/js/browser/__tests__/Header.test.js

@@ -18,8 +18,25 @@ import React from "react"
 import { shallow } from "enzyme"
 import Header from "../Header"
 
+jest.mock("../../web", () => ({
+  LoggedIn: jest
+    .fn(() => true)
+    .mockReturnValueOnce(true)
+    .mockReturnValueOnce(false)
+}))
 describe("Header", () => {
   it("should render without crashing", () => {
     shallow(<Header />)
   })
+
+  it("should render Login button when the user has not LoggedIn", () => {
+    const wrapper = shallow(<Header />)
+    expect(wrapper.find("a").text()).toBe("Login")
+  })
+
+  it("should render StorageInfo and BrowserDropdown when the user has LoggedIn", () => {
+    const wrapper = shallow(<Header />)
+    expect(wrapper.find("Connect(BrowserDropdown)").length).toBe(1)
+    expect(wrapper.find("Connect(StorageInfo)").length).toBe(1)
+  })
 })

browser/app/js/browser/__tests__/actions.test.js

@@ -21,6 +21,15 @@ import * as actionsCommon from "../actions"
 jest.mock("../../web", () => ({
   StorageInfo: jest.fn(() => {
     return Promise.resolve({ storageInfo: { Total: 100, Free: 60 } })
+  }),
+  ServerInfo: jest.fn(() => {
+    return Promise.resolve({
+      MinioVersion: "test",
+      MinioMemory: "test",
+      MinioPlatform: "test",
+      MinioRuntime: "test",
+      MinioGlobalInfo: "test"
+    })
   })
 }))
 
@@ -38,4 +47,24 @@ describe("Common actions", () => {
       expect(actions).toEqual(expectedActions)
     })
   })
+
+  it("creates common/SET_SERVER_INFO after fetching the server details", () => {
+    const store = mockStore()
+    const expectedActions = [
+      {
+        type: "common/SET_SERVER_INFO",
+        serverInfo: {
+          version: "test",
+          memory: "test",
+          platform: "test",
+          runtime: "test",
+          info: "test"
+        }
+      }
+    ]
+    return store.dispatch(actionsCommon.fetchServerInfo()).then(() => {
+      const actions = store.getActions()
+      expect(actions).toEqual(expectedActions)
+    })
+  })
 })

browser/app/js/browser/__tests__/reducer.test.js

@@ -24,7 +24,8 @@ describe("common reducer", () => {
       storageInfo: {
         total: 0,
         free: 0
-      }
+      },
+      serverInfo: {}
     })
   })
 
@@ -67,4 +68,25 @@ describe("common reducer", () => {
       storageInfo: { total: 100, free: 40 }
     })
   })
+
+  it("should handle SET_SERVER_INFO", () => {
+    expect(
+      reducer(undefined, {
+        type: actionsCommon.SET_SERVER_INFO,
+        serverInfo: {
+          version: "test",
+          memory: "test",
+          platform: "test",
+          runtime: "test",
+          info: "test"
+        }
+      }).serverInfo
+    ).toEqual({
+      version: "test",
+      memory: "test",
+      platform: "test",
+      runtime: "test",
+      info: "test"
+    })
+  })
 })