fix(fe): clean up and fix utests

src/client/web/src/components/__test__/pane_login.test.tsx

@@ -1,22 +1,22 @@
 import { List, Set, Map } from "immutable";
-import { mock, instance } from "ts-mockito";
 
+import { initMockWorker } from "../../test/helpers";
 import { User, UploadInfo } from "../../client";
 import { AuthPane } from "../pane_login";
 import { ICoreState, newState } from "../core_state";
-import { initUploadMgr } from "../../worker/upload_mgr";
 import { updater } from "../state_updater";
-import { MockWorker, UploadState, UploadEntry } from "../../worker/interface";
+import { UploadState, UploadEntry } from "../../worker/interface";
 import { MockUsersClient, resps as usersResps } from "../../client/users_mock";
 import { MockFilesClient, resps as filesResps } from "../../client/files_mock";
 import { MockSettingsClient } from "../../client/settings_mock";
+import { controlName as panelTabs } from "../root_frame";
+import { settingsDialogCtrl } from "../layers";
+import { settingsTabsCtrl } from "../dialog_settings";
 
 describe("Login", () => {
-  test("login", async () => {
-    const mockWorkerClass = mock(MockWorker);
-    const mockWorker = instance(mockWorkerClass);
-    initUploadMgr(mockWorker);
+  initMockWorker();
 
+  test("login", async () => {
     const coreState = newState();
     const pane = new AuthPane({
       login: coreState.login,
@@ -34,7 +34,7 @@ describe("Login", () => {
 
     // TODO: state is not checked
 
-    // browser
+    // files, uploadings, sharings
     expect(coreState.filesInfo.dirPath.join("/")).toEqual("mock_home/files");
     expect(coreState.filesInfo.isSharing).toEqual(true);
     expect(coreState.sharingsInfo.sharings).toEqual(
@@ -98,5 +98,34 @@ describe("Login", () => {
       users: usersMap,
       roles: roles,
     });
+
+    // ui
+    expect(coreState.ui).toEqual({
+      isVertical: false,
+      siteName: "",
+      siteDesc: "",
+      bg: {
+        url: "clientCfg_bg_url",
+        repeat: "clientCfg_bg_repeat",
+        position: "clientCfg_bg_position",
+        align: "clientCfg_bg_align",
+      },
+      control: {
+        controls: Map<string, string>({
+          [panelTabs]: "filesPanel",
+          [settingsDialogCtrl]: "off",
+          [settingsTabsCtrl]: "preferencePane",
+        }),
+        options: Map<string, Set<string>>({
+          [panelTabs]: Set<string>([
+            "filesPanel",
+            "uploadingsPanel",
+            "sharingsPanel",
+          ]),
+          [settingsDialogCtrl]: Set<string>(["on", "off"]),
+          [settingsTabsCtrl]: Set<string>(["preferencePane", "managementPane"]),
+        }),
+      },
+    });
   });
 });

src/client/web/src/components/__test__/panel_files.test.tsx

@@ -1,20 +1,17 @@
 import { mock, instance, verify, when, anything } from "ts-mockito";
 import { List } from "immutable";
 
+import { initMockWorker } from "../../test/helpers";
 import { FilesPanel } from "../panel_files";
-import { initUploadMgr } from "../../worker/upload_mgr";
 import { ICoreState, newState } from "../core_state";
 import { updater } from "../state_updater";
-import { MockWorker } from "../../worker/interface";
 import { MockUsersClient, resps as usersResps } from "../../client/users_mock";
 import { MockFilesClient, resps as filesResps } from "../../client/files_mock";
 import { MockSettingsClient } from "../../client/settings_mock";
 
 describe("FilesPanel", () => {
   const initFilesPanel = (): any => {
-    const mockWorkerClass = mock(MockWorker);
-    const mockWorker = instance(mockWorkerClass);
-    initUploadMgr(mockWorker);
+    initMockWorker();
 
     const coreState = newState();
     const usersCl = new MockUsersClient("");

src/client/web/src/components/__test__/panel_uploadings.test.tsx

@@ -1,5 +1,4 @@
-import { mock, instance, verify, when, anything } from "ts-mockito";
-import { List } from "immutable";
+import { mock, instance } from "ts-mockito";
 
 import { UploadingsPanel } from "../panel_uploadings";
 import { initUploadMgr } from "../../worker/upload_mgr";

src/client/web/src/components/__test__/state_mgr.test.tsx

@@ -1,8 +1,8 @@
 import { List, Set, Map } from "immutable";
 import { mock, instance } from "ts-mockito";
 
+import { initMockWorker } from "../../test/helpers";
 import { StateMgr } from "../state_mgr";
-import { initUploadMgr } from "../../worker/upload_mgr";
 import { User, UploadInfo } from "../../client";
 import { MockFilesClient, resps as filesResps } from "../../client/files_mock";
 import { MockUsersClient, resps as usersResps } from "../../client/users_mock";
@@ -11,19 +11,17 @@ import {
   resps as settingsResps,
 } from "../../client/settings_mock";
 import { ICoreState, newState } from "../core_state";
-import { MockWorker, UploadState, UploadEntry } from "../../worker/interface";
+import { UploadState, UploadEntry } from "../../worker/interface";
 import { MsgPackage } from "../../i18n/msger";
 
 describe("State Manager", () => {
+  initMockWorker();
+
   test("initUpdater for admin", async () => {
     const usersCl = new MockUsersClient("");
     const filesCl = new MockFilesClient("");
     const settingsCl = new MockSettingsClient("");
 
-    const mockWorkerClass = mock(MockWorker);
-    const mockWorker = instance(mockWorkerClass);
-    initUploadMgr(mockWorker);
-
     const mgr = new StateMgr({}); // it will call initUpdater
     mgr.setUsersClient(usersCl);
     mgr.setFilesClient(filesCl);

src/client/web/src/components/__test__/topbar.test.tsx

@@ -1,11 +1,9 @@
 import { List, Set, Map } from "immutable";
-import { mock, instance } from "ts-mockito";
 
+import { initMockWorker } from "../../test/helpers";
 import { TopBar } from "../topbar";
-import { initUploadMgr } from "../../worker/upload_mgr";
 import { ICoreState, newState } from "../core_state";
 import { updater } from "../state_updater";
-import { MockWorker } from "../../worker/interface";
 import { MockUsersClient, resps as usersResps } from "../../client/users_mock";
 import { MockFilesClient, resps as filesResps } from "../../client/files_mock";
 import { MockSettingsClient } from "../../client/settings_mock";
@@ -13,17 +11,14 @@ import { MockSettingsClient } from "../../client/settings_mock";
 import { UploadInfo, visitorID, roleVisitor, MetadataResp } from "../../client";
 import { UploadEntry, UploadState } from "../../worker/interface";
 
-
-
 describe("TopBar", () => {
+  initMockWorker();
   // stub confirm
-  window.confirm = (message?: string): boolean => {return true;};
+  window.confirm = (message?: string): boolean => {
+    return true;
+  };
 
   test("logout as visitor without sharing", async () => {
-    const mockWorkerClass = mock(MockWorker);
-    const mockWorker = instance(mockWorkerClass);
-    initUploadMgr(mockWorker);
-
     const coreState = newState();
 
     const isSharingMockResp = { status: 404, statusText: "", data: {} };
@@ -42,7 +37,7 @@ describe("TopBar", () => {
     const listHomeMockResp = {
       status: 401,
       statusText: "",
-      data: { cwd: "", metadatas: new Array<MetadataResp>() }
+      data: { cwd: "", metadatas: new Array<MetadataResp>() },
     };
     const mockFileResps = {
       ...filesResps,
@@ -50,7 +45,7 @@ describe("TopBar", () => {
       isSharingMockResp,
       listSharingsMockResp,
       listUploadingsMockResp,
-    }
+    };
 
     const selfMockResp = {
       status: 401,
@@ -66,7 +61,7 @@ describe("TopBar", () => {
           downloadSpeedLimit: 0,
         },
       },
-    }
+    };
     const isAuthedMockResp = { status: 401, statusText: "", data: {} };
     const mockUserResps = {
       ...usersResps,
@@ -91,8 +86,10 @@ describe("TopBar", () => {
 
     await topbar.logout();
 
-    // browser
-    expect(coreState.filesInfo.dirPath.join("/")).toEqual(mockFileResps.listHomeMockResp.data.cwd);
+    // files, uploadings, sharings
+    expect(coreState.filesInfo.dirPath.join("/")).toEqual(
+      mockFileResps.listHomeMockResp.data.cwd
+    );
     expect(coreState.filesInfo.isSharing).toEqual(false);
     expect(coreState.filesInfo.items).toEqual(List());
     expect(coreState.sharingsInfo.sharings).toEqual(List());
@@ -121,7 +118,7 @@ describe("TopBar", () => {
         cssURL: "",
         lanPackURL: "",
         lan: "en_US",
-      }
+      },
     });
 
     // admin

src/client/web/src/components/core_state.ts

@@ -2,7 +2,7 @@ import { List, Set, Map } from "immutable";
 
 import { UploadEntry } from "../worker/interface";
 
-import { loginDialogCtrl, settingsDialogCtrl } from "./layers";
+import { settingsDialogCtrl } from "./layers";
 import { FilesProps } from "./panel_files";
 import { UploadingsProps } from "./panel_uploadings";
 import { SharingsProps } from "./panel_sharings";
@@ -61,6 +61,10 @@ export function initState(): ICoreState {
     sharingsInfo: {
       sharings: List<string>([]),
     },
+    admin: {
+      users: Map<string, User>(),
+      roles: Set<string>(),
+    },
     login: {
       userID: "",
       userName: "",
@@ -85,10 +89,6 @@ export function initState(): ICoreState {
         lan: "en_US",
       },
     },
-    admin: {
-      users: Map<string, User>(),
-      roles: Set<string>(),
-    },
     msg: {
       lan: "en_US",
       pkg: MsgPackage.get("en_US"),
@@ -106,7 +106,6 @@ export function initState(): ICoreState {
       control: {
         controls: Map<string, string>({
           [panelTabs]: "filesPanel",
-          [loginDialogCtrl]: "on",
           [settingsDialogCtrl]: "off",
           [settingsTabsCtrl]: "preferencePane",
         }),
@@ -116,7 +115,6 @@ export function initState(): ICoreState {
             "uploadingsPanel",
             "sharingsPanel",
           ]),
-          [loginDialogCtrl]: Set<string>(["on", "off"]),
           [settingsDialogCtrl]: Set<string>(["on", "off"]),
           [settingsTabsCtrl]: Set<string>(["preferencePane", "managementPane"]),
         }),

src/client/web/src/components/layers.tsx

@@ -10,7 +10,6 @@ import { AuthPane, LoginProps } from "./pane_login";
 import { Flexbox } from "./layout/flexbox";
 import { Container } from "./layout/container";
 
-export const loginDialogCtrl = "loginDialog";
 export const settingsDialogCtrl = "settingsDialog";
 
 export interface Props {

src/client/web/src/components/root_frame.tsx

@@ -31,7 +31,7 @@ export class RootFrame extends React.Component<Props, State, {}> {
     super(p);
   }
 
-  render() {
+  makeBgStyle = (): Object => {
     let bgStyle = undefined;
     if (
       this.props.login.preferences != null &&
@@ -48,13 +48,13 @@ export class RootFrame extends React.Component<Props, State, {}> {
       bgStyle = {};
     }
 
-    const fontSizeClass = "font-m";
+    return bgStyle;
+  };
+
+  render() {
+    const bgStyle = this.makeBgStyle();
     const theme = "theme-default";
-    const showBrowser =
-      this.props.login.userRole === roleVisitor &&
-      !this.props.filesInfo.isSharing
-        ? "hidden"
-        : "";
+    const fontSizeClass = "font-m";
 
     const displaying = this.props.ui.control.controls.get(controlName);
     const filesPanelClass = displaying === "filesPanel" ? "" : "hidden";
@@ -107,7 +107,7 @@ export class RootFrame extends React.Component<Props, State, {}> {
             />
           </div>
 
-          <div className={`container-center ${showBrowser}`}>
+          <div className="container-center">
             <span className={filesPanelClass}>
               <FilesPanel
                 filesInfo={this.props.filesInfo}

src/client/web/src/components/state_updater.ts

@@ -303,10 +303,6 @@ export class Updater {
       .then(() => {
         return this.isSharing(this.props.filesInfo.dirPath.join("/"));
       })
-      .then(() => {
-        // init settings
-        return this.getClientCfg();
-      })
       .then(() => {
         if (this.props.login.userRole !== roleVisitor) {
           // init panels for authned users
@@ -317,6 +313,10 @@ export class Updater {
           ]);
         }
       })
+      .then(() => {
+        // init settings
+        return this.getClientCfg();
+      })
       .then(() => {
         // init i18n
         // TOOD: status is ignored, should return alert
@@ -341,6 +341,8 @@ export class Updater {
       downloadSpeedLimit: 0,
       spaceLimit: "0",
     };
+    this.props.login.authed = false;
+    this.props.login.captchaID = "";
     this.props.login.preferences = {
       bg: {
         url: "",
@@ -460,7 +462,6 @@ export class Updater {
 
   logout = async (): Promise<boolean> => {
     const resp = await this.usersClient.logout();
-    updater().setAuthed(false);
     this.resetUser();
     return resp.status === 200;
   };
@@ -511,23 +512,6 @@ export class Updater {
     }
   };
 
-  setTab = (tabName: string) => {
-    // switch (tabName) {
-    //   case "item":
-    //     this.props.panels.displaying = tabName;
-    //     break;
-    //   case "uploading":
-    //     this.props.panels.displaying = tabName;
-    //     break;
-    //   case "sharing":
-    //     this.props.panels.displaying = tabName;
-    //     break;
-    //   default:
-    //     this.props.panels.displaying = "item";
-    //     break;
-    // }
-  };
-
   setControlOption = (controlName: string, option: string): boolean => {
     const controlExists = this.props.ui.control.controls.has(controlName);
     const optionsExists = this.props.ui.control.options.has(controlName);

src/client/web/src/components/topbar.tsx

@@ -82,22 +82,11 @@ export class TopBar extends React.Component<Props, State, {}> {
 
             <Flexbox
               children={List([
-                // <span className={`${showUserInfo}`}>
-                //   <span id="topbar-user-info">{this.props.login.userName}</span>
-                // </span>,
-
                 <button onClick={this.showSettings} className={`margin-r-m`}>
                   {this.props.msg.pkg.get("settings")}
                   {/* {getIcon("RiSettings4Line", "1.8rem", "cyan0")} */}
                 </button>,
 
-                // <button
-                //   onClick={this.showAdmin}
-                //   className={`margin-r-m ${showAdmin}`}
-                // >
-                //   {this.props.msg.pkg.get("admin")}
-                // </button>,
-
                 <button onClick={this.logout} className={`${showLogin}`}>
                   {this.props.msg.pkg.get("login.logout")}
                 </button>,

src/client/web/src/test/helpers.ts

@@ -1,6 +1,10 @@
+import { mock, instance } from "ts-mockito";
+import { List } from "immutable";
+
+import { MockWorker } from "../worker/interface";
+import { initUploadMgr } from "../worker/upload_mgr";
 import { Response } from "../client";
 import { ICoreState, initState } from "../components/core_state";
-import { List } from "immutable";
 
 export const makePromise = (ret: any): Promise<any> => {
   return new Promise<any>((resolve) => {
@@ -38,3 +42,9 @@ export function mockFileList(filePaths: Array<string>): List<File> {
   })
   return List<File>(files);
 }
+
+export function initMockWorker() {
+  const mockWorkerClass = mock(MockWorker);
+  const mockWorker = instance(mockWorkerClass);
+  initUploadMgr(mockWorker);
+}