From 61535ed41f62653efbd966fbf3d15d0632e0eb44 Mon Sep 17 00:00:00 2001 From: Nate Butler Date: Fri, 16 Jun 2023 01:11:02 -0400 Subject: [PATCH] Update toggle, add tests --- styles/src/element/index.ts | 3 +- styles/src/element/toggle.test.ts | 52 +++++++++++++++++++++ styles/src/element/toggle.ts | 4 +- styles/src/styleTree/commandPalette.ts | 3 +- styles/src/styleTree/contactList.ts | 3 +- styles/src/styleTree/contextMenu.ts | 3 +- styles/src/styleTree/editor.ts | 3 +- styles/src/styleTree/picker.ts | 3 +- styles/src/styleTree/projectPanel.ts | 3 +- styles/src/styleTree/search.ts | 3 +- styles/src/styleTree/statusBar.ts | 3 +- styles/src/styleTree/tabBar.ts | 3 +- styles/src/styleTree/toolbarDropdownMenu.ts | 3 +- styles/src/styleTree/workspace.ts | 2 +- 14 files changed, 67 insertions(+), 24 deletions(-) create mode 100644 styles/src/element/toggle.test.ts diff --git a/styles/src/element/index.ts b/styles/src/element/index.ts index ad58b89e0e..b1e3cfe415 100644 --- a/styles/src/element/index.ts +++ b/styles/src/element/index.ts @@ -1,3 +1,4 @@ import { interactive } from "./interactive" +import { toggleable } from "./toggle" -export { interactive } +export { interactive, toggleable } diff --git a/styles/src/element/toggle.test.ts b/styles/src/element/toggle.test.ts new file mode 100644 index 0000000000..8018ce1039 --- /dev/null +++ b/styles/src/element/toggle.test.ts @@ -0,0 +1,52 @@ +import { + NO_ACTIVE_ERROR, + NO_INACTIVE_OR_BASE_ERROR, + toggleable, +} from "./toggle" +import { describe, it, expect } from "vitest" + +describe("toggleable", () => { + it("creates a Toggleable with base properties and states", () => { + const result = toggleable({ + base: { background: "#000000", color: "#CCCCCC" }, + state: { + active: { color: "#FFFFFF" }, + }, + }) + + expect(result).toEqual({ + inactive: { background: "#000000", color: "#CCCCCC" }, + active: { background: "#000000", color: "#FFFFFF" }, + }) + }) + + it("creates a Toggleable with no base properties", () => { + const result = toggleable({ + state: { + inactive: { background: "#000000", color: "#CCCCCC" }, + active: { background: "#000000", color: "#FFFFFF" }, + }, + }) + + expect(result).toEqual({ + inactive: { background: "#000000", color: "#CCCCCC" }, + active: { background: "#000000", color: "#FFFFFF" }, + }) + }) + + it("throws error when both inactive and base are missing", () => { + const state = { + active: { background: "#000000", color: "#FFFFFF" }, + } + + expect(() => toggleable({ state })).toThrow(NO_INACTIVE_OR_BASE_ERROR) + }) + + it("throws error when no active state is present", () => { + const state = { + inactive: { background: "#000000", color: "#CCCCCC" }, + } + + expect(() => toggleable({ state })).toThrow(NO_ACTIVE_ERROR) + }) +}) diff --git a/styles/src/element/toggle.ts b/styles/src/element/toggle.ts index 2b6858e15b..84390810c0 100644 --- a/styles/src/element/toggle.ts +++ b/styles/src/element/toggle.ts @@ -4,9 +4,9 @@ type ToggleState = "inactive" | "active" type Toggleable = Record -const NO_INACTIVE_OR_BASE_ERROR = +export const NO_INACTIVE_OR_BASE_ERROR = "A toggleable object must have an inactive state, or a base property." -const NO_ACTIVE_ERROR = "A toggleable object must have an active state." +export const NO_ACTIVE_ERROR = "A toggleable object must have an active state." interface ToggleableProps { base?: T diff --git a/styles/src/styleTree/commandPalette.ts b/styles/src/styleTree/commandPalette.ts index ae0aae2f81..59e12945db 100644 --- a/styles/src/styleTree/commandPalette.ts +++ b/styles/src/styleTree/commandPalette.ts @@ -1,8 +1,7 @@ import { ColorScheme } from "../theme/colorScheme" import { withOpacity } from "../theme/color" import { text, background } from "./components" -import { toggleable } from "./toggle" -import { interactive } from "../element" +import { interactive, toggleable } from "../element" export default function commandPalette(colorScheme: ColorScheme) { let layer = colorScheme.highest diff --git a/styles/src/styleTree/contactList.ts b/styles/src/styleTree/contactList.ts index 5c6068408e..2ac17a4584 100644 --- a/styles/src/styleTree/contactList.ts +++ b/styles/src/styleTree/contactList.ts @@ -1,7 +1,6 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, borderColor, foreground, text } from "./components" -import { toggleable } from "./toggle" -import { interactive } from "../element" +import { interactive, toggleable } from "../element" export default function contactsPanel(colorScheme: ColorScheme) { const nameMargin = 8 const sidePadding = 12 diff --git a/styles/src/styleTree/contextMenu.ts b/styles/src/styleTree/contextMenu.ts index 6f5eb53640..90ba0ce5b5 100644 --- a/styles/src/styleTree/contextMenu.ts +++ b/styles/src/styleTree/contextMenu.ts @@ -1,7 +1,6 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, borderColor, text } from "./components" -import { interactive } from "../element" -import { toggleable } from "./toggle" +import { interactive, toggleable } from "../element" export default function contextMenu(colorScheme: ColorScheme) { let layer = colorScheme.middle diff --git a/styles/src/styleTree/editor.ts b/styles/src/styleTree/editor.ts index 9dec64b0ce..e029a724a3 100644 --- a/styles/src/styleTree/editor.ts +++ b/styles/src/styleTree/editor.ts @@ -4,8 +4,7 @@ import { background, border, borderColor, foreground, text } from "./components" import hoverPopover from "./hoverPopover" import { buildSyntax } from "../theme/syntax" -import { interactive } from "../element" -import { toggleable } from "./toggle" +import { interactive, toggleable } from "../element" export default function editor(colorScheme: ColorScheme) { const { isLight } = colorScheme diff --git a/styles/src/styleTree/picker.ts b/styles/src/styleTree/picker.ts index 7730395ec9..12fecfa6f8 100644 --- a/styles/src/styleTree/picker.ts +++ b/styles/src/styleTree/picker.ts @@ -1,8 +1,7 @@ import { ColorScheme } from "../theme/colorScheme" import { withOpacity } from "../theme/color" import { background, border, text } from "./components" -import { toggleable } from "./toggle" -import { interactive } from "../element" +import { interactive, toggleable } from "../element" export default function picker(colorScheme: ColorScheme): any { let layer = colorScheme.lowest diff --git a/styles/src/styleTree/projectPanel.ts b/styles/src/styleTree/projectPanel.ts index 23df2fbf58..5f283e551d 100644 --- a/styles/src/styleTree/projectPanel.ts +++ b/styles/src/styleTree/projectPanel.ts @@ -1,8 +1,7 @@ import { ColorScheme } from "../theme/colorScheme" import { withOpacity } from "../theme/color" import { background, border, foreground, text } from "./components" -import { interactive } from "../element" -import { toggleable } from "./toggle" +import { interactive, toggleable } from "../element" export default function projectPanel(colorScheme: ColorScheme) { const { isLight } = colorScheme diff --git a/styles/src/styleTree/search.ts b/styles/src/styleTree/search.ts index a95296971c..4b0869f10e 100644 --- a/styles/src/styleTree/search.ts +++ b/styles/src/styleTree/search.ts @@ -1,8 +1,7 @@ import { ColorScheme } from "../theme/colorScheme" import { withOpacity } from "../theme/color" import { background, border, foreground, text } from "./components" -import { interactive } from "../element" -import { toggleable } from "./toggle" +import { interactive, toggleable } from "../element" export default function search(colorScheme: ColorScheme) { let layer = colorScheme.highest diff --git a/styles/src/styleTree/statusBar.ts b/styles/src/styleTree/statusBar.ts index 8a91b7eaac..d6d7eda732 100644 --- a/styles/src/styleTree/statusBar.ts +++ b/styles/src/styleTree/statusBar.ts @@ -1,7 +1,6 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, foreground, text } from "./components" -import { interactive } from "../element" -import { toggleable } from "./toggle" +import { interactive, toggleable } from "../element" export default function statusBar(colorScheme: ColorScheme) { let layer = colorScheme.lowest diff --git a/styles/src/styleTree/tabBar.ts b/styles/src/styleTree/tabBar.ts index c2b5de0215..e00f0b8b83 100644 --- a/styles/src/styleTree/tabBar.ts +++ b/styles/src/styleTree/tabBar.ts @@ -1,8 +1,7 @@ import { ColorScheme } from "../theme/colorScheme" import { withOpacity } from "../theme/color" import { text, border, background, foreground } from "./components" -import { toggleable } from "./toggle" -import { interactive } from "../element" +import { interactive, toggleable } from "../element" export default function tabBar(colorScheme: ColorScheme) { const height = 32 diff --git a/styles/src/styleTree/toolbarDropdownMenu.ts b/styles/src/styleTree/toolbarDropdownMenu.ts index 1f47c85f4e..3ce7ca7d7c 100644 --- a/styles/src/styleTree/toolbarDropdownMenu.ts +++ b/styles/src/styleTree/toolbarDropdownMenu.ts @@ -1,7 +1,6 @@ import { ColorScheme } from "../theme/colorScheme" import { background, border, text } from "./components" -import { interactive } from "../element" -import { toggleable } from "./toggle" +import { interactive, toggleable } from "../element" export default function dropdownMenu(colorScheme: ColorScheme) { let layer = colorScheme.middle diff --git a/styles/src/styleTree/workspace.ts b/styles/src/styleTree/workspace.ts index 79e7830aec..a2a21eaff4 100644 --- a/styles/src/styleTree/workspace.ts +++ b/styles/src/styleTree/workspace.ts @@ -1,6 +1,6 @@ import { ColorScheme } from "../theme/colorScheme" import { withOpacity } from "../theme/color" -import { toggleable } from "./toggle" +import { toggleable } from "../element" import { background, border,