test(mainview): cover Toggle Design Mode command (section 3)

Adds a "3. Toggle Design Mode command" describe block that uses the real
command + CCB click paths (no spies): asserts VIEW_TOGGLE_DESIGN_MODE
flips WorkspaceManager.isInDesignMode(), Command.getChecked() mirrors
the flag on entry and exit, clicking #ccbCollapseEditorBtn toggles
design mode, and the icon (pen-nib svg ↔ fa-code) and title
(CCB_SWITCH_TO_DESIGN_MODE ↔ CCB_SWITCH_TO_CODE_EDITOR) swap on state
change. afterEach exits design mode and closes Live Preview so the
baseline stays clean for later tests.

Author: abose

test/control-bar-tests-todo.md

@@ -11,34 +11,11 @@ Keep this file updated as we add coverage; remove lines as suites land.
 
 ---
 
-
-## 2a. #show-in-file-tree button (sidebar)
-
-- [ ] `#show-in-file-tree` is a child of `#project-files-header` and sits
-      before `#collapse-folders` in DOM order. Title equals
-      `Strings.CMD_SHOW_IN_TREE`.
-- [ ] Binoculars `<svg>` uses `fill="currentColor"` so the glyph tracks the
-      sidebar text color.
-- [ ] Button is hidden by default (`opacity: 0`, `visibility: hidden`) and
-      only shows on `#sidebar:hover`, matching the `#collapse-folders`
-      affordance.
-- [ ] Clicking `#show-in-file-tree` executes `NAVIGATE_SHOW_IN_FILE_TREE`.
-
-## 3. Toggle Design Mode command
-
-- [ ] `Commands.VIEW_TOGGLE_DESIGN_MODE === "view.toggleDesignMode"` is
-      registered at module load, visible via `CommandManager.get`.
-- [ ] Command's checked state mirrors `WorkspaceManager.isInDesignMode()` on
-      both entry and exit.
-- [ ] Clicking `#ccbCollapseEditorBtn`toggles design mode
-- [ ] Icon swap: `pen-nib svg` (expanded) ↔ `fa-code` (design mode). Title
-      swap: "Switch to desin mode" ↔ "Switch to Code Editor".(please see the exact string to check.)
-
 ## 4. Enter design mode
 
 - [ ] With live preview closed: executing the toggle first opens LP (verify a
       single execution of `FILE_LIVE_FILE_PREVIEW`), then applies collapsed
-      layout on its `.always()`.
+      layout
 - [ ] With live preview open: sidebar width is preserved, `.content` goes to
       `width: 0`, `#main-toolbar` gets `left: sidebarW + 30`, `width:
       innerWidth - sidebarW - 30` with `!important`, `right: auto`.

test/spec/CentralControlBar-integ-test.js

@@ -238,5 +238,101 @@ define(function (require, exports, module) {
                 expect(executed).toContain(Commands.NAVIGATE_SHOW_IN_FILE_TREE);
             });
         });
+
+        describe("3. Toggle Design Mode command", function () {
+            let WorkspaceManager;
+
+            beforeAll(function () {
+                WorkspaceManager = brackets.test.WorkspaceManager;
+            });
+
+            async function _enterDesignMode() {
+                CommandManager.execute(Commands.VIEW_TOGGLE_DESIGN_MODE);
+                await awaitsFor(function () { return WorkspaceManager.isInDesignMode(); },
+                    "design mode to activate", 10000);
+            }
+
+            async function _exitDesignMode() {
+                if (!WorkspaceManager.isInDesignMode()) {
+                    return;
+                }
+                CommandManager.execute(Commands.VIEW_TOGGLE_DESIGN_MODE);
+                await awaitsFor(function () { return !WorkspaceManager.isInDesignMode(); },
+                    "design mode to deactivate", 10000);
+            }
+
+            afterEach(async function () {
+                await _exitDesignMode();
+                // The toggle opens Live Preview if it wasn't already open; close it so later
+                // tests start from a clean baseline.
+                const lp = WorkspaceManager.getPanelForID && WorkspaceManager.getPanelForID("live-preview-panel");
+                if (lp && lp.isVisible()) {
+                    CommandManager.execute(Commands.FILE_LIVE_FILE_PREVIEW);
+                    await awaitsFor(function () { return !lp.isVisible(); },
+                        "live preview to close", 5000);
+                }
+            });
+
+            it("should execute VIEW_TOGGLE_DESIGN_MODE and flip isInDesignMode() from false to true and back", async function () {
+                expect(WorkspaceManager.isInDesignMode()).toBe(false);
+
+                await _enterDesignMode();
+                expect(WorkspaceManager.isInDesignMode()).toBe(true);
+
+                await _exitDesignMode();
+                expect(WorkspaceManager.isInDesignMode()).toBe(false);
+            });
+
+            it("should mirror Command.getChecked() against WorkspaceManager.isInDesignMode() on entry and exit", async function () {
+                const cmd = CommandManager.get(Commands.VIEW_TOGGLE_DESIGN_MODE);
+                expect(cmd).toBeDefined();
+
+                expect(!!cmd.getChecked()).toBe(false);
+                expect(WorkspaceManager.isInDesignMode()).toBe(false);
+
+                await _enterDesignMode();
+                expect(!!cmd.getChecked()).toBe(true);
+                expect(WorkspaceManager.isInDesignMode()).toBe(true);
+
+                await _exitDesignMode();
+                expect(!!cmd.getChecked()).toBe(false);
+                expect(WorkspaceManager.isInDesignMode()).toBe(false);
+            });
+
+            it("should toggle design mode when #ccbCollapseEditorBtn is clicked", async function () {
+                expect(WorkspaceManager.isInDesignMode()).toBe(false);
+
+                _$("#ccbCollapseEditorBtn").trigger("click");
+                await awaitsFor(function () { return WorkspaceManager.isInDesignMode(); },
+                    "design mode to activate from click", 10000);
+
+                _$("#ccbCollapseEditorBtn").trigger("click");
+                await awaitsFor(function () { return !WorkspaceManager.isInDesignMode(); },
+                    "design mode to deactivate from click", 10000);
+            });
+
+            it("should swap icon (pen-nib svg ↔ fa-code) and title on state change", async function () {
+                const $btn = _$("#ccbCollapseEditorBtn");
+
+                // Expanded (not in design mode): svg pen-nib + "Switch to Design Mode".
+                expect($btn.find("svg").length).toBe(1);
+                expect($btn.find("i.fa-code").length).toBe(0);
+                expect($btn.attr("title")).toBe(Strings.CCB_SWITCH_TO_DESIGN_MODE);
+
+                await _enterDesignMode();
+
+                // Design mode: <i class="fa-solid fa-code"> + "Switch to Code Editor".
+                expect($btn.find("i.fa-code").length).toBe(1);
+                expect($btn.find("svg").length).toBe(0);
+                expect($btn.attr("title")).toBe(Strings.CCB_SWITCH_TO_CODE_EDITOR);
+
+                await _exitDesignMode();
+
+                // Back to expanded — svg restored, title restored.
+                expect($btn.find("svg").length).toBe(1);
+                expect($btn.find("i.fa-code").length).toBe(0);
+                expect($btn.attr("title")).toBe(Strings.CCB_SWITCH_TO_DESIGN_MODE);
+            });
+        });
     });
 });