add tests

Author: guoda-puidokaite

packages/ui-components/src/components/SortButton/SortButton.component.tsx

@@ -4,7 +4,6 @@
  */
 
 import React from "react"
-
 import { ToggleButton } from "../ToggleButton/ToggleButton.component"
 import { Icon, KnownIcons } from "../Icon/Icon.component"
 
@@ -13,11 +12,8 @@ interface SortButtonProps {
   onOrderChange?: (_order: string) => void
 }
 
-export const SortButton: React.FC<SortButtonProps> = ({ order = "asc", onOrderChange, ...props }) => {
-  const options: { value: string; icon: KnownIcons }[] = [
-    { value: "sortShortWideArrowUp", icon: "sortShortWideArrowUp" },
-    { value: "sortShortWideArrowDown", icon: "sortShortWideArrowDown" },
-  ]
+export const SortButton: React.FC<SortButtonProps> = ({ order = "desc", onOrderChange, ...props }) => {
+  const options: { value: string }[] = [{ value: "sortShortWideArrowUp" }, { value: "sortShortWideArrowDown" }]
 
   const handleChange = (value: string) => {
     if (onOrderChange) {

packages/ui-components/src/components/ToggleButton/ThemeToggle.test.tsx

@@ -0,0 +1,65 @@
+/*
+ * SPDX-FileCopyrightText: 2024 SAP SE or an SAP affiliate company and Juno contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import { describe, expect, it, vi } from "vitest"
+
+import { ToggleButton } from "./ToggleButton.component"
+
+describe("ToggleButton Component", () => {
+  it("renders plain values as labels", async () => {
+    const options = ["state1", "state2"]
+    const handleChange = vi.fn()
+
+    render(<ToggleButton options={options} onChange={handleChange} />)
+    const button = screen.getByRole("button")
+
+    expect(button).toHaveTextContent("state1")
+
+    await userEvent.click(button)
+    expect(button).toHaveTextContent("state2")
+    expect(handleChange).toHaveBeenCalledWith("state2")
+
+    await userEvent.click(button)
+    expect(button).toHaveTextContent("state1")
+    expect(handleChange).toHaveBeenCalledWith("state1")
+  })
+
+  it("renders labels from array of objects with value and label", async () => {
+    const options = [
+      { value: "state1", label: "Label 1" },
+      { value: "state2", label: "Label 2" },
+    ]
+    const handleChange = vi.fn()
+
+    render(<ToggleButton options={options} onChange={handleChange} />)
+    const button = screen.getByRole("button")
+
+    expect(button).toHaveTextContent("Label 1")
+
+    await userEvent.click(button)
+    expect(button).toHaveTextContent("Label 2")
+    expect(handleChange).toHaveBeenCalledWith("state2")
+
+    await userEvent.click(button)
+    expect(button).toHaveTextContent("Label 1")
+    expect(handleChange).toHaveBeenCalledWith("state1")
+  })
+
+  it("uses renderLabel function for custom label rendering", async () => {
+    const options = ["state1", "state2"]
+    const customRenderLabel = vi.fn((value) => `Custom ${value}`)
+
+    render(<ToggleButton options={options} renderLabel={customRenderLabel} />)
+    const button = screen.getByRole("button")
+
+    expect(button).toHaveTextContent("Custom state1")
+
+    await userEvent.click(button)
+    expect(button).toHaveTextContent("Custom state2")
+  })
+})

packages/ui-components/src/components/ToggleButton/ToggleButton.component.tsx

@@ -4,11 +4,12 @@
  */
 
 import React, { useState, useEffect } from "react"
-import { Button } from "../Button"
+import { Button, ButtonProps } from "../Button"
+import { KnownIcons } from "../Icon/Icon.component"
 
 type Option<T> = T | { value: T; label?: React.ReactNode; icon?: KnownIcons }
 
-export interface ToggleButtonProps<T> {
+export interface ToggleButtonProps<T> extends Omit<ButtonProps, "onChange" | "value"> {
   options: Option<T>[]
   value?: T
   onChange?: (_value: T) => void
@@ -20,7 +21,7 @@ export const ToggleButton = <T extends string | number>({
   value: controlledValue,
   onChange,
   renderLabel,
-  ...buttonProps
+  ...props
 }: ToggleButtonProps<T>) => {
   const getValue = (option: Option<T>): T => (typeof option === "object" ? option.value : option)
   const initialValue = controlledValue !== undefined ? controlledValue : getValue(options[0])
@@ -51,5 +52,5 @@ export const ToggleButton = <T extends string | number>({
     return typeof currentOption === "object" ? currentOption.label : currentOption
   }
 
-  return <Button {...buttonProps} label={getLabel()} onClick={onButtonClick} />
+  return <Button {...props} label={getLabel()} onClick={onButtonClick} />
 }

packages/ui-components/src/components/ToggleButton/ToggleButton.stories.tsx

@@ -34,6 +34,13 @@ const meta: Meta<typeof ToggleButton> = {
       action: "toggleChanged",
       description: "Callback for whenever the toggle changes.",
     },
+    variant: {
+      control: {
+        type: "select",
+        options: ["primary", "default", "primary-danger", "subdued"],
+      },
+      description: "Variant styling for the button.",
+    },
   },
 }
 
@@ -55,6 +62,25 @@ export const Default: Story = {
   },
 }
 
+export const WithObjectOptions: Story = {
+  args: {
+    options: [
+      { value: "Theme 1", label: "Light Theme" },
+      { value: "Theme 2", label: "Dark Theme" },
+      { value: "Theme 3", label: "Colorful Theme" },
+    ],
+    value: "Theme 1",
+    onChange: (value) => console.log("Theme changed to:", value),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "ToggleButton using options with value-label objects.",
+      },
+    },
+  },
+}
+
 export const Disabled: Story = {
   args: {
     options: ["Option 1", "Option 2", "Option 3"],
@@ -71,20 +97,17 @@ export const Disabled: Story = {
   },
 }
 
-export const WithObjectOptions: Story = {
+export const PrimaryVariant: Story = {
   args: {
-    options: [
-      { value: "Theme 1", label: "Light Theme" },
-      { value: "Theme 2", label: "Dark Theme" },
-      { value: "Theme 3", label: "Colorful Theme" },
-    ],
-    value: "Theme 1",
-    onChange: (value) => console.log("Theme changed to:", value),
+    options: ["Option A", "Option B", "Option C"],
+    value: "Option A",
+    variant: "primary",
+    onChange: (value) => console.log("Changed to:", value),
   },
   parameters: {
     docs: {
       description: {
-        story: "ToggleButton using options with value-label objects.",
+        story: "ToggleButton rendered with primary variant styling.",
       },
     },
   },