-
Notifications
You must be signed in to change notification settings - Fork 3.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: disabledWhenInvalid in ButtonGroupWidget (#38656)
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: rahul.barwal@appsmith.com <rahul.barwal@appsmith.com>
- Loading branch information
1 parent
4e7a2a0
commit b3e5e43
Showing
3 changed files
with
142 additions
and
6 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
101 changes: 101 additions & 0 deletions
101
app/client/src/widgets/ButtonGroupWidget/widget/__tests__/ButtonGroupWidget.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| import { render } from "@testing-library/react"; | ||
| import React from "react"; | ||
| import ButtonGroupWidget from "../index"; | ||
| import { RenderModes } from "constants/WidgetConstants"; | ||
| import type { ButtonGroupWidgetProps } from "../index"; | ||
| import { klona } from "klona"; | ||
|
|
||
| describe("ButtonGroupWidget disabledWhenInvalid", () => { | ||
| const defaultProps: ButtonGroupWidgetProps = { | ||
| widgetId: "test-button-group", | ||
| renderMode: RenderModes.CANVAS, | ||
| version: 1, | ||
| parentColumnSpace: 1, | ||
| parentRowSpace: 1, | ||
| leftColumn: 0, | ||
| rightColumn: 0, | ||
| topRow: 0, | ||
| bottomRow: 0, | ||
| isLoading: false, | ||
| orientation: "horizontal", | ||
| isDisabled: false, | ||
| buttonVariant: "PRIMARY", | ||
| type: "BUTTON_GROUP_WIDGET", | ||
| widgetName: "ButtonGroup1", | ||
| groupButtons: { | ||
| groupButton1: { | ||
| label: "Test Button 1", | ||
| id: "groupButton1", | ||
| widgetId: "", | ||
| buttonType: "SIMPLE", | ||
| placement: "CENTER", | ||
| isVisible: true, | ||
| isDisabled: false, | ||
| disabledWhenInvalid: true, | ||
| index: 0, | ||
| menuItems: {}, | ||
| }, | ||
| groupButton2: { | ||
| label: "Test Button 2", | ||
| id: "groupButton2", | ||
| widgetId: "", | ||
| buttonType: "SIMPLE", | ||
| placement: "CENTER", | ||
| isVisible: true, | ||
| isDisabled: false, | ||
| disabledWhenInvalid: true, | ||
| index: 1, | ||
| menuItems: {}, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| it("disables buttons when disabledWhenInvalid is true and form is invalid", () => { | ||
| const props = klona(defaultProps); | ||
|
|
||
| props.isFormValid = false; | ||
|
|
||
| const { container } = render(<ButtonGroupWidget {...props} />); | ||
| const buttons = container.querySelectorAll("button"); | ||
|
|
||
| buttons.forEach((button) => { | ||
| expect(button.hasAttribute("disabled")).toBe(true); | ||
| }); | ||
| }); | ||
|
|
||
| it("enables buttons when disabledWhenInvalid is true but form is valid", () => { | ||
| const props = klona(defaultProps); | ||
|
|
||
| props.isFormValid = true; | ||
|
|
||
| const { container } = render(<ButtonGroupWidget {...props} />); | ||
| const buttons = container.querySelectorAll("button"); | ||
|
|
||
| buttons.forEach((button) => { | ||
| expect(button.hasAttribute("disabled")).toBe(false); | ||
| }); | ||
| }); | ||
|
|
||
| it("enables buttons when disabledWhenInvalid is false regardless of form validity", () => { | ||
| const props = klona(defaultProps); | ||
|
|
||
| props.groupButtons = { | ||
| ...defaultProps.groupButtons, | ||
| groupButton1: { | ||
| ...defaultProps.groupButtons.groupButton1, | ||
| disabledWhenInvalid: false, | ||
| }, | ||
| groupButton2: { | ||
| ...defaultProps.groupButtons.groupButton2, | ||
| disabledWhenInvalid: false, | ||
| }, | ||
| }; | ||
|
|
||
| const { container } = render(<ButtonGroupWidget {...props} />); | ||
| const buttons = container.querySelectorAll("button"); | ||
|
|
||
| buttons.forEach((button) => { | ||
| expect(button.hasAttribute("disabled")).toBe(false); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters