Refactor make bucket and upload components (#5521)

browser/app/js/buckets/__tests__/MakeBucketModal.test.js

@@ -0,0 +1,80 @@
+/*
+ * 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 { MakeBucketModal } from "../MakeBucketModal"
+
+describe("MakeBucketModal", () => {
+  it("should render without crashing", () => {
+    shallow(<MakeBucketModal />)
+  })
+
+  it("should call hideMakeBucketModal when close button is clicked", () => {
+    const hideMakeBucketModal = jest.fn()
+    const wrapper = shallow(
+      <MakeBucketModal hideMakeBucketModal={hideMakeBucketModal} />
+    )
+    wrapper.find("button").simulate("click")
+    expect(hideMakeBucketModal).toHaveBeenCalled()
+  })
+
+  it("bucketName should be cleared before hiding the modal", () => {
+    const hideMakeBucketModal = jest.fn()
+    const wrapper = shallow(
+      <MakeBucketModal hideMakeBucketModal={hideMakeBucketModal} />
+    )
+    wrapper.find("input").simulate("change", {
+      target: { value: "test" }
+    })
+    expect(wrapper.state("bucketName")).toBe("test")
+    wrapper.find("button").simulate("click")
+    expect(wrapper.state("bucketName")).toBe("")
+  })
+
+  it("should call makeBucket when the form is submitted", () => {
+    const makeBucket = jest.fn()
+    const hideMakeBucketModal = jest.fn()
+    const wrapper = shallow(
+      <MakeBucketModal
+        makeBucket={makeBucket}
+        hideMakeBucketModal={hideMakeBucketModal}
+      />
+    )
+    wrapper.find("input").simulate("change", {
+      target: { value: "test" }
+    })
+    wrapper.find("form").simulate("submit", { preventDefault: jest.fn() })
+    expect(makeBucket).toHaveBeenCalledWith("test")
+  })
+
+  it("should call hideMakeBucketModal and clear bucketName after the form is submited", () => {
+    const makeBucket = jest.fn()
+    const hideMakeBucketModal = jest.fn()
+    const wrapper = shallow(
+      <MakeBucketModal
+        makeBucket={makeBucket}
+        hideMakeBucketModal={hideMakeBucketModal}
+      />
+    )
+    wrapper.find("input").simulate("change", {
+      target: { value: "test" }
+    })
+    wrapper.find("form").simulate("submit", { preventDefault: jest.fn() })
+    expect(hideMakeBucketModal).toHaveBeenCalled()
+    expect(wrapper.state("bucketName")).toBe("")
+  })
+})

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

@@ -17,13 +17,21 @@
 import configureStore from "redux-mock-store"
 import thunk from "redux-thunk"
 import * as actionsBuckets from "../actions"
+import * as objectActions from "../../objects/actions"
 
 jest.mock("../../web", () => ({
   ListBuckets: jest.fn(() => {
     return Promise.resolve({ buckets: [{ name: "test1" }, { name: "test2" }] })
+  }),
+  MakeBucket: jest.fn(() => {
+    return Promise.resolve()
   })
 }))
 
+jest.mock("../../objects/actions", () => ({
+  selectPrefix: () => dispatch => {}
+}))
+
 const middlewares = [thunk]
 const mockStore = configureStore(middlewares)
 
@@ -40,24 +48,6 @@ describe("Buckets actions", () => {
     })
   })
 
-  it("creates buckets/SET_LIST directly", () => {
-    const store = mockStore()
-    const expectedActions = [
-      { type: "buckets/SET_LIST", buckets: ["test1", "test2"] }
-    ]
-    store.dispatch(actionsBuckets.setList(["test1", "test2"]))
-    const actions = store.getActions()
-    expect(actions).toEqual(expectedActions)
-  })
-
-  it("creates buckets/SET_FILTER directly", () => {
-    const store = mockStore()
-    const expectedActions = [{ type: "buckets/SET_FILTER", filter: "test" }]
-    store.dispatch(actionsBuckets.setFilter("test"))
-    const actions = store.getActions()
-    expect(actions).toEqual(expectedActions)
-  })
-
   it("should update browser url and creates buckets/SET_CURRENT_BUCKET action when selectBucket is called", () => {
     const store = mockStore()
     const expectedActions = [
@@ -68,4 +58,44 @@ describe("Buckets actions", () => {
     expect(actions).toEqual(expectedActions)
     expect(window.location.pathname).toBe("/test1")
   })
+
+  it("creates buckets/SHOW_MAKE_BUCKET_MODAL for showMakeBucketModal", () => {
+    const store = mockStore()
+    const expectedActions = [
+      { type: "buckets/SHOW_MAKE_BUCKET_MODAL", show: true }
+    ]
+    store.dispatch(actionsBuckets.showMakeBucketModal())
+    const actions = store.getActions()
+    expect(actions).toEqual(expectedActions)
+  })
+
+  it("creates buckets/SHOW_MAKE_BUCKET_MODAL for hideMakeBucketModal", () => {
+    const store = mockStore()
+    const expectedActions = [
+      { type: "buckets/SHOW_MAKE_BUCKET_MODAL", show: false }
+    ]
+    store.dispatch(actionsBuckets.hideMakeBucketModal())
+    const actions = store.getActions()
+    expect(actions).toEqual(expectedActions)
+  })
+
+  it("creates buckets/ADD action", () => {
+    const store = mockStore()
+    const expectedActions = [{ type: "buckets/ADD", bucket: "test" }]
+    store.dispatch(actionsBuckets.addBucket("test"))
+    const actions = store.getActions()
+    expect(actions).toEqual(expectedActions)
+  })
+
+  it("creates buckets/ADD and buckets/SET_CURRENT_BUCKET after creating the bucket", () => {
+    const store = mockStore()
+    const expectedActions = [
+      { type: "buckets/ADD", bucket: "test1" },
+      { type: "buckets/SET_CURRENT_BUCKET", bucket: "test1" }
+    ]
+    return store.dispatch(actionsBuckets.makeBucket("test1")).then(() => {
+      const actions = store.getActions()
+      expect(actions).toEqual(expectedActions)
+    })
+  })
 })

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

@@ -23,7 +23,8 @@ describe("buckets reducer", () => {
     expect(initialState).toEqual({
       list: [],
       filter: "",
-      currentBucket: ""
+      currentBucket: "",
+      showMakeBucketModal: false
     })
   })
 
@@ -35,6 +36,17 @@ describe("buckets reducer", () => {
     expect(newState.list).toEqual(["bk1", "bk2"])
   })
 
+  it("should handle ADD", () => {
+    const newState = reducer(
+      { list: ["test1", "test2"] },
+      {
+        type: actions.ADD,
+        bucket: "test3"
+      }
+    )
+    expect(newState.list).toEqual(["test3", "test1", "test2"])
+  })
+
   it("should handle SET_FILTER", () => {
     const newState = reducer(undefined, {
       type: actions.SET_FILTER,
@@ -50,4 +62,12 @@ describe("buckets reducer", () => {
     })
     expect(newState.currentBucket).toEqual("test")
   })
+
+  it("should handle SHOW_MAKE_BUCKET_MODAL", () => {
+    const newState = reducer(undefined, {
+      type: actions.SHOW_MAKE_BUCKET_MODAL,
+      show: true
+    })
+    expect(newState.showMakeBucketModal).toBeTruthy()
+  })
 })