Browser: Update UI with new components and elements (#5671)

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

@@ -20,18 +20,26 @@ import { ChangePasswordModal } from "../ChangePasswordModal"
 
 jest.mock("../../web", () => ({
   GetAuth: jest.fn(() => {
-    return Promise.resolve({ accessKey: "test1", secretKey: "test2" })
+    return Promise.resolve({
+      accessKey: "test1",
+      secretKey: "test2",
+    })
   }),
   GenerateAuth: jest.fn(() => {
-    return Promise.resolve({ accessKey: "gen1", secretKey: "gen2" })
+    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" })
+      return Promise.reject({
+        message: "Error",
+      })
     }
-  })
+  }),
 }))
 
 describe("ChangePasswordModal", () => {
@@ -40,7 +48,9 @@ describe("ChangePasswordModal", () => {
     memory: "test",
     platform: "test",
     runtime: "test",
-    info: { isEnvCreds: false }
+    info: {
+      isEnvCreds: false,
+    },
   }
 
   it("should render without crashing", () => {
@@ -56,7 +66,12 @@ describe("ChangePasswordModal", () => {
   })
 
   it("should show readonly keys when isEnvCreds is true", () => {
-    const newServerInfo = { ...serverInfo, info: { isEnvCreds: 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")
@@ -78,19 +93,23 @@ describe("ChangePasswordModal", () => {
   it("should update accessKey and secretKey when Update button is clicked", () => {
     const showAlert = jest.fn()
     const wrapper = shallow(
-      <ChangePasswordModal serverInfo={serverInfo} showAlert={showAlert} />
+      <ChangePasswordModal serverInfo={serverInfo} showAlert={showAlert} />,
     )
-    wrapper
-      .find("#accessKey")
-      .simulate("change", { target: { value: "test3" } })
-    wrapper
-      .find("#secretKey")
-      .simulate("change", { target: { value: "test4" } })
+    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"
+        message: "Changed credentials",
       })
     })
   })
@@ -101,7 +120,7 @@ describe("ChangePasswordModal", () => {
       <ChangePasswordModal
         serverInfo={serverInfo}
         hideChangePassword={hideChangePassword}
-      />
+      />,
     )
     wrapper.find("#cancel-change-password").simulate("click")
     expect(hideChangePassword).toHaveBeenCalled()