diff --git a/src/renderer/components/drawer/__snapshots__/drawer-param-toggler.test.tsx.snap b/src/renderer/components/drawer/__snapshots__/drawer-param-toggler.test.tsx.snap
new file mode 100644
index 0000000000..25fc4bb574
--- /dev/null
+++ b/src/renderer/components/drawer/__snapshots__/drawer-param-toggler.test.tsx.snap
@@ -0,0 +1,105 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[` after clicking the toggle after clicking the toggle again renders 1`] = `
+
+
+
+
+
+ Foo
+
+
+
+ Show
+
+
+
+ arrow_drop_down
+
+
+
+
+
+
+
+`;
+
+exports[` after clicking the toggle renders 1`] = `
+
+
+
+
+
+ Foo
+
+
+
+ Hide
+
+
+
+ arrow_drop_up
+
+
+
+
+
+
+
+
+
+
+`;
+
+exports[` renders 1`] = `
+
+
+
+
+
+ Foo
+
+
+
+ Show
+
+
+
+ arrow_drop_down
+
+
+
+
+
+
+
+`;
diff --git a/src/renderer/components/drawer/drawer-param-toggler.scss b/src/renderer/components/drawer/drawer-param-toggler.module.scss
similarity index 68%
rename from src/renderer/components/drawer/drawer-param-toggler.scss
rename to src/renderer/components/drawer/drawer-param-toggler.module.scss
index a090575e5b..f992c9ffb1 100644
--- a/src/renderer/components/drawer/drawer-param-toggler.scss
+++ b/src/renderer/components/drawer/drawer-param-toggler.module.scss
@@ -4,24 +4,20 @@
*/
.DrawerParamToggler {
- .param-label {
+ .label {
flex-grow: 2
}
- .param-link {
+ .link {
cursor: pointer;
- .param-link-text {
+ .linkText {
color: var(--blue);
text-decoration: underline;
}
}
- .param-content {
- &.open {
- display: block;
- }
-
- display: none;
+ .content {
+ display: block;
}
}
diff --git a/src/renderer/components/drawer/drawer-param-toggler.test.tsx b/src/renderer/components/drawer/drawer-param-toggler.test.tsx
new file mode 100644
index 0000000000..e9d5104afe
--- /dev/null
+++ b/src/renderer/components/drawer/drawer-param-toggler.test.tsx
@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import type { RenderResult } from "@testing-library/react";
+import { render } from "@testing-library/react";
+import React from "react";
+import { DrawerParamToggler } from "./drawer-param-toggler";
+
+describe("", () => {
+ let result: RenderResult;
+
+ beforeEach(() => {
+ result = render((
+
+
+
+ ));
+ });
+
+ it("renders", () => {
+ expect(result.baseElement).toMatchSnapshot();
+ });
+
+ it("does not render children by default", () => {
+ expect(result.queryByTestId("drawer-child")).toBeNull();
+ });
+
+ describe("after clicking the toggle", () => {
+ beforeEach(() => {
+ result.getByTestId("drawer-param-toggler").click();
+ });
+
+ it("renders", () => {
+ expect(result.baseElement).toMatchSnapshot();
+ });
+
+ it("renders children", () => {
+ expect(result.queryByTestId("drawer-child")).not.toBeNull();
+ });
+
+ describe("after clicking the toggle again", () => {
+ beforeEach(() => {
+ result.getByTestId("drawer-param-toggler").click();
+ });
+
+ it("renders", () => {
+ expect(result.baseElement).toMatchSnapshot();
+ });
+
+ it("does not children", () => {
+ expect(result.queryByTestId("drawer-child")).toBeNull();
+ });
+ });
+ });
+});
diff --git a/src/renderer/components/drawer/drawer-param-toggler.tsx b/src/renderer/components/drawer/drawer-param-toggler.tsx
index ef0ab071de..88a0e81613 100644
--- a/src/renderer/components/drawer/drawer-param-toggler.tsx
+++ b/src/renderer/components/drawer/drawer-param-toggler.tsx
@@ -3,10 +3,9 @@
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
-import "./drawer-param-toggler.scss";
+import * as styles from "./drawer-param-toggler.module.scss";
import React from "react";
import { Icon } from "../icon";
-import { cssNames } from "../../utils";
export interface DrawerParamTogglerProps {
label: string | number;
@@ -30,16 +29,20 @@ export class DrawerParamToggler extends React.Component
+