Refactor of components (#5499)

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

@@ -0,0 +1,36 @@
+/*
+ * 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 { MobileHeader } from "../MobileHeader"
+
+describe("Bucket", () => {
+  it("should render without crashing", () => {
+    shallow(<MobileHeader sidebarOpen={false} />)
+  })
+
+  it("should toggleSidebar when trigger is clicked", () => {
+    const toggleSidebar = jest.fn()
+    const wrapper = shallow(
+      <MobileHeader sidebarOpen={false} toggleSidebar={toggleSidebar} />
+    )
+    wrapper
+      .find("#sidebar-toggle")
+      .simulate("click", { stopPropagation: jest.fn() })
+    expect(toggleSidebar).toHaveBeenCalled()
+  })
+})

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

@@ -0,0 +1,61 @@
+/*
+ * 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 { ObjectsHeader } from "../ObjectsHeader"
+
+describe("ObjectsHeader", () => {
+  it("should render without crashing", () => {
+    const sortObjects = jest.fn()
+    shallow(<ObjectsHeader sortObjects={sortObjects} />)
+  })
+
+  it("should render columns with asc classes by default", () => {
+    const sortObjects = jest.fn()
+    const wrapper = shallow(<ObjectsHeader sortObjects={sortObjects} />)
+    expect(
+      wrapper.find("#sort-by-name i").hasClass("fa-sort-alpha-asc")
+    ).toBeTruthy()
+    expect(
+      wrapper.find("#sort-by-size i").hasClass("fa-sort-amount-asc")
+    ).toBeTruthy()
+    expect(
+      wrapper.find("#sort-by-last-modified i").hasClass("fa-sort-numeric-asc")
+    ).toBeTruthy()
+  })
+
+  it("should render name column with desc class when objects are sorted by name", () => {
+    const sortObjects = jest.fn()
+    const wrapper = shallow(
+      <ObjectsHeader sortObjects={sortObjects} sortNameOrder={true} />
+    )
+    expect(
+      wrapper.find("#sort-by-name i").hasClass("fa-sort-alpha-desc")
+    ).toBeTruthy()
+  })
+
+  it("should call sortObjects when a column is clicked", () => {
+    const sortObjects = jest.fn()
+    const wrapper = shallow(<ObjectsHeader sortObjects={sortObjects} />)
+    wrapper.find("#sort-by-name").simulate("click")
+    expect(sortObjects).toHaveBeenCalledWith("name")
+    wrapper.find("#sort-by-size").simulate("click")
+    expect(sortObjects).toHaveBeenCalledWith("size")
+    wrapper.find("#sort-by-last-modified").simulate("click")
+    expect(sortObjects).toHaveBeenCalledWith("last-modified")
+  })
+})

browser/app/js/components/__tests__/ObjectsList.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 { ObjectsList } from "../ObjectsList"
+
+describe("ObjectsList", () => {
+  it("should render without crashing", () => {
+    shallow(<ObjectsList objects={[]} />)
+  })
+
+  it("should render ObjectContainer for every object", () => {
+    const wrapper = shallow(
+      <ObjectsList objects={[{ name: "test1.jpg" }, { name: "test2.jpg" }]} />
+    )
+    expect(wrapper.find("ObjectContainer").length).toBe(2)
+  })
+
+  it("should render PrefixContainer for every prefix", () => {
+    const wrapper = shallow(
+      <ObjectsList objects={[{ name: "abc/" }, { name: "xyz/" }]} />
+    )
+    expect(wrapper.find("Connect(PrefixContainer)").length).toBe(2)
+  })
+})

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

@@ -0,0 +1,57 @@
+/*
+ * 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 { ObjectsListContainer } from "../ObjectsListContainer"
+
+describe("ObjectsList", () => {
+  it("should render without crashing", () => {
+    shallow(<ObjectsListContainer loadObjects={jest.fn()} />)
+  })
+
+  it("should render ObjectsList with objects", () => {
+    const wrapper = shallow(
+      <ObjectsListContainer
+        objects={[{ name: "test1.jpg" }, { name: "test2.jpg" }]}
+        loadObjects={jest.fn()}
+      />
+    )
+    expect(wrapper.find("ObjectsList").length).toBe(1)
+    expect(wrapper.find("ObjectsList").prop("objects")).toEqual([
+      { name: "test1.jpg" },
+      { name: "test2.jpg" }
+    ])
+  })
+
+  it("should call loadObjects when currentBucket is changed", () => {
+    const loadObjects = jest.fn()
+    const wrapper = shallow(
+      <ObjectsListContainer currentBucket="test1" loadObjects={loadObjects} />
+    )
+    wrapper.setProps({ currentBucket: "test2" })
+    expect(loadObjects).toHaveBeenCalled()
+  })
+
+  it("should call loadObjects when currentPrefix is changed", () => {
+    const loadObjects = jest.fn()
+    const wrapper = shallow(
+      <ObjectsListContainer currentPrefix="abc/" loadObjects={loadObjects} />
+    )
+    wrapper.setProps({ currentPrefix: "abc/xyz/" })
+    expect(loadObjects).toHaveBeenCalled()
+  })
+})

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

@@ -0,0 +1,37 @@
+/*
+ * 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 { ObjectItem } from "../ObjectItem"
+
+describe("ObjectItem", () => {
+  it("should render without crashing", () => {
+    shallow(<ObjectItem name={"test"} />)
+  })
+
+  it("should render with content type", () => {
+    const wrapper = shallow(<ObjectItem name={"test.jpg"} contentType={""} />)
+    expect(wrapper.prop("data-type")).toBe("image")
+  })
+
+  it("should call onClick when the object isclicked", () => {
+    const onClick = jest.fn()
+    const wrapper = shallow(<ObjectItem name={"test"} onClick={onClick} />)
+    wrapper.find("a").simulate("click", { preventDefault: jest.fn() })
+    expect(onClick).toHaveBeenCalled()
+  })
+})

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

@@ -0,0 +1,72 @@
+/*
+ * 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 { Path } from "../Path"
+
+describe("Path", () => {
+  it("should render without crashing", () => {
+    shallow(<Path currentBucket={"test1"} currentPrefix={"test2"} />)
+  })
+
+  it("should render only bucket if there is no prefix", () => {
+    const wrapper = shallow(<Path currentBucket={"test1"} currentPrefix={""} />)
+    expect(wrapper.find("span").length).toBe(1)
+    expect(wrapper.text()).toBe("test1")
+  })
+
+  it("should render bucket and prefix", () => {
+    const wrapper = shallow(
+      <Path currentBucket={"test1"} currentPrefix={"a/b/"} />
+    )
+    expect(wrapper.find("span").length).toBe(3)
+    expect(
+      wrapper
+        .find("span")
+        .at(0)
+        .text()
+    ).toBe("test1")
+    expect(
+      wrapper
+        .find("span")
+        .at(1)
+        .text()
+    ).toBe("a")
+    expect(
+      wrapper
+        .find("span")
+        .at(2)
+        .text()
+    ).toBe("b")
+  })
+
+  it("should call selectPrefix when a prefix part is clicked", () => {
+    const selectPrefix = jest.fn()
+    const wrapper = shallow(
+      <Path
+        currentBucket={"test1"}
+        currentPrefix={"a/b/"}
+        selectPrefix={selectPrefix}
+      />
+    )
+    wrapper
+      .find("a")
+      .at(2)
+      .simulate("click", { preventDefault: jest.fn() })
+    expect(selectPrefix).toHaveBeenCalledWith("a/b/")
+  })
+})

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

@@ -0,0 +1,44 @@
+/*
+ * 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 { PrefixContainer } from "../PrefixContainer"
+
+describe("PrefixContainer", () => {
+  it("should render without crashing", () => {
+    shallow(<PrefixContainer object={{ name: "abc/" }} />)
+  })
+
+  it("should render ObjectItem with props", () => {
+    const wrapper = shallow(<PrefixContainer object={{ name: "abc/" }} />)
+    expect(wrapper.find("ObjectItem").length).toBe(1)
+    expect(wrapper.find("ObjectItem").prop("name")).toBe("abc/")
+  })
+
+  it("should call selectPrefix when the prefix is clicked", () => {
+    const selectPrefix = jest.fn()
+    const wrapper = shallow(
+      <PrefixContainer
+        object={{ name: "abc/" }}
+        currentPrefix={"xyz/"}
+        selectPrefix={selectPrefix}
+      />
+    )
+    wrapper.find("ObjectItem").prop("onClick")()
+    expect(selectPrefix).toHaveBeenCalledWith("xyz/abc/")
+  })
+})

browser/app/js/components/__tests__/StorageInfo.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 { StorageInfo } from "../StorageInfo"
+
+describe("StorageInfo", () => {
+  it("should render without crashing", () => {
+    shallow(
+      <StorageInfo
+        storageInfo={{ total: 100, free: 60 }}
+        fetchStorageInfo={jest.fn()}
+      />
+    )
+  })
+
+  it("should fetchStorageInfo before component is mounted", () => {
+    const fetchStorageInfo = jest.fn()
+    shallow(
+      <StorageInfo
+        storageInfo={{ total: 100, free: 60 }}
+        fetchStorageInfo={fetchStorageInfo}
+      />
+    )
+    expect(fetchStorageInfo).toHaveBeenCalled()
+  })
+})