mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2026-01-25 20:54:18 +00:00
Copy jobs dark theme (#2308)
* added a dark theme toggle button on Copyjobs next to refresh button and covered full feature * Fix formatting in Utils.test.ts * updated infor icon , error icon and text on jobs details page * rebased from master * updated the conflicts * updated the conflicts * fixed the test suit * fixed review comments * test fix --------- Co-authored-by: Sakshi Gupta <sakshig@microsoft.com>
This commit is contained in:
@@ -50,7 +50,7 @@ describe("CommandBar Utils", () => {
|
||||
|
||||
describe("getCommandBarButtons", () => {
|
||||
it("should return an array of command button props", () => {
|
||||
const buttons = getCommandBarButtons(mockExplorer);
|
||||
const buttons = getCommandBarButtons(mockExplorer, false);
|
||||
|
||||
expect(buttons).toBeDefined();
|
||||
expect(Array.isArray(buttons)).toBe(true);
|
||||
@@ -58,7 +58,7 @@ describe("CommandBar Utils", () => {
|
||||
});
|
||||
|
||||
it("should include create copy job button", () => {
|
||||
const buttons = getCommandBarButtons(mockExplorer);
|
||||
const buttons = getCommandBarButtons(mockExplorer, false);
|
||||
const createButton = buttons[0];
|
||||
|
||||
expect(createButton).toBeDefined();
|
||||
@@ -70,7 +70,7 @@ describe("CommandBar Utils", () => {
|
||||
});
|
||||
|
||||
it("should include refresh button", () => {
|
||||
const buttons = getCommandBarButtons(mockExplorer);
|
||||
const buttons = getCommandBarButtons(mockExplorer, false);
|
||||
const refreshButton = buttons[1];
|
||||
|
||||
expect(refreshButton).toBeDefined();
|
||||
@@ -80,11 +80,11 @@ describe("CommandBar Utils", () => {
|
||||
});
|
||||
|
||||
it("should include feedback button when platform is Portal", () => {
|
||||
const buttons = getCommandBarButtons(mockExplorer);
|
||||
const buttons = getCommandBarButtons(mockExplorer, false);
|
||||
|
||||
expect(buttons.length).toBe(3);
|
||||
expect(buttons.length).toBe(4);
|
||||
|
||||
const feedbackButton = buttons[2];
|
||||
const feedbackButton = buttons[3];
|
||||
expect(feedbackButton).toBeDefined();
|
||||
expect(feedbackButton.ariaLabel).toBe("Provide feedback on copy jobs");
|
||||
expect(feedbackButton.tooltipText).toBe("Feedback");
|
||||
@@ -105,13 +105,13 @@ describe("CommandBar Utils", () => {
|
||||
}));
|
||||
|
||||
const { getCommandBarButtons: getCommandBarButtonsEmulator } = await import("./Utils");
|
||||
const buttons = getCommandBarButtonsEmulator(mockExplorer);
|
||||
const buttons = getCommandBarButtonsEmulator(mockExplorer, false);
|
||||
|
||||
expect(buttons.length).toBe(2);
|
||||
expect(buttons.length).toBe(3);
|
||||
});
|
||||
|
||||
it("should call openCreateCopyJobPanel when create button is clicked", () => {
|
||||
const buttons = getCommandBarButtons(mockExplorer);
|
||||
const buttons = getCommandBarButtons(mockExplorer, false);
|
||||
const createButton = buttons[0];
|
||||
|
||||
createButton.onCommandClick({} as React.SyntheticEvent);
|
||||
@@ -121,7 +121,7 @@ describe("CommandBar Utils", () => {
|
||||
});
|
||||
|
||||
it("should call refreshJobList when refresh button is clicked", () => {
|
||||
const buttons = getCommandBarButtons(mockExplorer);
|
||||
const buttons = getCommandBarButtons(mockExplorer, false);
|
||||
const refreshButton = buttons[1];
|
||||
|
||||
refreshButton.onCommandClick({} as React.SyntheticEvent);
|
||||
@@ -130,8 +130,8 @@ describe("CommandBar Utils", () => {
|
||||
});
|
||||
|
||||
it("should call openContainerCopyFeedbackBlade when feedback button is clicked", () => {
|
||||
const buttons = getCommandBarButtons(mockExplorer);
|
||||
const feedbackButton = buttons[2];
|
||||
const buttons = getCommandBarButtons(mockExplorer, false);
|
||||
const feedbackButton = buttons[3];
|
||||
|
||||
feedbackButton.onCommandClick({} as React.SyntheticEvent);
|
||||
|
||||
@@ -139,7 +139,7 @@ describe("CommandBar Utils", () => {
|
||||
});
|
||||
|
||||
it("should return buttons with correct icon sources", () => {
|
||||
const buttons = getCommandBarButtons(mockExplorer);
|
||||
const buttons = getCommandBarButtons(mockExplorer, false);
|
||||
|
||||
expect(buttons[0].iconSrc).toBeDefined();
|
||||
expect(buttons[0].iconAlt).toBe("Create Copy Job");
|
||||
@@ -148,7 +148,10 @@ describe("CommandBar Utils", () => {
|
||||
expect(buttons[1].iconAlt).toBe("Refresh");
|
||||
|
||||
expect(buttons[2].iconSrc).toBeDefined();
|
||||
expect(buttons[2].iconAlt).toBe("Feedback");
|
||||
expect(buttons[2].iconAlt).toBe("Dark Theme");
|
||||
|
||||
expect(buttons[3].iconSrc).toBeDefined();
|
||||
expect(buttons[3].iconAlt).toBe("Feedback");
|
||||
});
|
||||
|
||||
it("should handle null MonitorCopyJobsRefState ref gracefully", () => {
|
||||
@@ -157,14 +160,14 @@ describe("CommandBar Utils", () => {
|
||||
return selector(state);
|
||||
});
|
||||
|
||||
const buttons = getCommandBarButtons(mockExplorer);
|
||||
const buttons = getCommandBarButtons(mockExplorer, false);
|
||||
const refreshButton = buttons[1];
|
||||
|
||||
expect(() => refreshButton.onCommandClick({} as React.SyntheticEvent)).not.toThrow();
|
||||
});
|
||||
|
||||
it("should set hasPopup to false for all buttons", () => {
|
||||
const buttons = getCommandBarButtons(mockExplorer);
|
||||
const buttons = getCommandBarButtons(mockExplorer, false);
|
||||
|
||||
buttons.forEach((button) => {
|
||||
expect(button.hasPopup).toBe(false);
|
||||
@@ -172,7 +175,7 @@ describe("CommandBar Utils", () => {
|
||||
});
|
||||
|
||||
it("should set commandButtonLabel to undefined for all buttons", () => {
|
||||
const buttons = getCommandBarButtons(mockExplorer);
|
||||
const buttons = getCommandBarButtons(mockExplorer, false);
|
||||
|
||||
buttons.forEach((button) => {
|
||||
expect(button.commandButtonLabel).toBeUndefined();
|
||||
@@ -180,7 +183,7 @@ describe("CommandBar Utils", () => {
|
||||
});
|
||||
|
||||
it("should respect disabled state when provided", () => {
|
||||
const buttons = getCommandBarButtons(mockExplorer);
|
||||
const buttons = getCommandBarButtons(mockExplorer, false);
|
||||
|
||||
buttons.forEach((button) => {
|
||||
expect(button.disabled).toBe(false);
|
||||
@@ -188,7 +191,7 @@ describe("CommandBar Utils", () => {
|
||||
});
|
||||
|
||||
it("should return CommandButtonComponentProps with all required properties", () => {
|
||||
const buttons = getCommandBarButtons(mockExplorer);
|
||||
const buttons = getCommandBarButtons(mockExplorer, false);
|
||||
|
||||
buttons.forEach((button: CommandButtonComponentProps) => {
|
||||
expect(button).toHaveProperty("iconSrc");
|
||||
@@ -202,18 +205,19 @@ describe("CommandBar Utils", () => {
|
||||
});
|
||||
});
|
||||
|
||||
it("should maintain button order: create, refresh, feedback", () => {
|
||||
const buttons = getCommandBarButtons(mockExplorer);
|
||||
it("should maintain button order: create, refresh, themeToggle, feedback", () => {
|
||||
const buttons = getCommandBarButtons(mockExplorer, false);
|
||||
|
||||
expect(buttons[0].tooltipText).toBe("Create Copy Job");
|
||||
expect(buttons[1].tooltipText).toBe("Refresh");
|
||||
expect(buttons[2].tooltipText).toBe("Feedback");
|
||||
expect(buttons[2].tooltipText).toBe("Dark Theme");
|
||||
expect(buttons[3].tooltipText).toBe("Feedback");
|
||||
});
|
||||
});
|
||||
|
||||
describe("Button click handlers", () => {
|
||||
it("should execute click handlers without errors", () => {
|
||||
const buttons = getCommandBarButtons(mockExplorer);
|
||||
const buttons = getCommandBarButtons(mockExplorer, false);
|
||||
|
||||
buttons.forEach((button) => {
|
||||
expect(() => button.onCommandClick({} as React.SyntheticEvent)).not.toThrow();
|
||||
@@ -221,7 +225,7 @@ describe("CommandBar Utils", () => {
|
||||
});
|
||||
|
||||
it("should call correct action for each button", () => {
|
||||
const buttons = getCommandBarButtons(mockExplorer);
|
||||
const buttons = getCommandBarButtons(mockExplorer, false);
|
||||
|
||||
buttons[0].onCommandClick({} as React.SyntheticEvent);
|
||||
expect(Actions.openCreateCopyJobPanel).toHaveBeenCalledWith(mockExplorer);
|
||||
@@ -229,14 +233,14 @@ describe("CommandBar Utils", () => {
|
||||
buttons[1].onCommandClick({} as React.SyntheticEvent);
|
||||
expect(mockRefreshJobList).toHaveBeenCalled();
|
||||
|
||||
buttons[2].onCommandClick({} as React.SyntheticEvent);
|
||||
buttons[3].onCommandClick({} as React.SyntheticEvent);
|
||||
expect(mockOpenContainerCopyFeedbackBlade).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe("Accessibility", () => {
|
||||
it("should have aria labels for all buttons", () => {
|
||||
const buttons = getCommandBarButtons(mockExplorer);
|
||||
const buttons = getCommandBarButtons(mockExplorer, false);
|
||||
|
||||
buttons.forEach((button) => {
|
||||
expect(button.ariaLabel).toBeDefined();
|
||||
@@ -246,7 +250,7 @@ describe("CommandBar Utils", () => {
|
||||
});
|
||||
|
||||
it("should have tooltip text for all buttons", () => {
|
||||
const buttons = getCommandBarButtons(mockExplorer);
|
||||
const buttons = getCommandBarButtons(mockExplorer, false);
|
||||
|
||||
buttons.forEach((button) => {
|
||||
expect(button.tooltipText).toBeDefined();
|
||||
@@ -256,7 +260,7 @@ describe("CommandBar Utils", () => {
|
||||
});
|
||||
|
||||
it("should have icon alt text for all buttons", () => {
|
||||
const buttons = getCommandBarButtons(mockExplorer);
|
||||
const buttons = getCommandBarButtons(mockExplorer, false);
|
||||
|
||||
buttons.forEach((button) => {
|
||||
expect(button.iconAlt).toBeDefined();
|
||||
|
||||
Reference in New Issue
Block a user