-
Notifications
You must be signed in to change notification settings - Fork 3
feat(dom): toBePressed and toBePartiallyPressed #172
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 8 commits
d4d40c5
582a782
8234a48
56226c6
f691b49
ba8a1ed
1c8407e
6259f5a
32ea7bc
55820fd
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,8 @@ | ||
| import { Assertion, AssertionError } from "@assertive-ts/core"; | ||
| import equal from "fast-deep-equal"; | ||
|
|
||
| import { getAccessibleDescription } from "./helpers/accessibility"; | ||
| import { isElementEmpty } from "./helpers/dom"; | ||
| import { getAccessibleDescription, isValidAriaPressed } from "./helpers/accessibility"; | ||
| import { isButtonElement, isElementEmpty } from "./helpers/dom"; | ||
| import { getExpectedAndReceivedStyles } from "./helpers/styles"; | ||
|
|
||
| export class ElementAssertion<T extends Element> extends Assertion<T> { | ||
|
|
@@ -355,6 +355,75 @@ export class ElementAssertion<T extends Element> extends Assertion<T> { | |
| }); | ||
| } | ||
|
|
||
| /** | ||
| * Asserts that the element is a pressed button. | ||
| * | ||
| * @returns the assertion instance. | ||
| */ | ||
|
|
||
| public toBePressed(): this { | ||
| if (!isButtonElement(this.actual) || !isValidAriaPressed(this.actual)) { | ||
| throw new Error( | ||
| '.toBePressed() requires a button, input[type="button"], or role="button" with valid aria-pressed', | ||
|
KeylaMunnoz marked this conversation as resolved.
Outdated
|
||
| ); | ||
| } | ||
|
|
||
| const pressedAttribute = this.actual.getAttribute("aria-pressed"); | ||
|
KeylaMunnoz marked this conversation as resolved.
Outdated
|
||
| const isPressed = pressedAttribute === "true"; | ||
|
|
||
| const error = new AssertionError({ | ||
| actual: pressedAttribute, | ||
| expected: "true", | ||
| message: `Expected the element to be pressed, but received aria-pressed="${pressedAttribute}"`, | ||
| }); | ||
|
|
||
| const invertedError = new AssertionError({ | ||
| actual: pressedAttribute, | ||
| expected: "false", | ||
| message: `Expected the element to NOT be pressed, but received aria-pressed="${pressedAttribute}"`, | ||
| }); | ||
|
|
||
| return this.execute({ | ||
| assertWhen: isPressed, | ||
| error, | ||
| invertedError, | ||
| }); | ||
| } | ||
|
|
||
| /** | ||
| * Asserts that the element is a partially pressed button. | ||
| * | ||
|
KeylaMunnoz marked this conversation as resolved.
|
||
| * @returns the assertion instance. | ||
| */ | ||
|
|
||
| public toBePartiallyPressed(): this { | ||
| if (!isButtonElement(this.actual) || !isValidAriaPressed(this.actual)) { | ||
| throw new Error( | ||
| '.toBePartiallyPressed() requires a button, input[type="button"], or role="button" with valid aria-pressed', | ||
|
KeylaMunnoz marked this conversation as resolved.
Outdated
|
||
| ); | ||
| } | ||
|
|
||
| const pressedAttribute = this.actual.getAttribute("aria-pressed"); | ||
|
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. maybe rename to pressedAttributeValue, since I get you could receive: true, false or mixed.
Contributor
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. can you explain what does mixed specifically involve ? (for context and understanding)
Collaborator
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Hey Su sure ! mixed represents a partially pressed state so it's typically used when a toggle button controls multiple items and only some of them are in the pressed state. |
||
| const isPartiallyPressed = pressedAttribute === "mixed"; | ||
|
|
||
| const error = new AssertionError({ | ||
| actual: pressedAttribute, | ||
| expected: "mixed", | ||
| message: `Expected the element to be partially pressed, but received aria-pressed="${pressedAttribute}"`, | ||
| }); | ||
|
|
||
| const invertedError = new AssertionError({ | ||
| actual: pressedAttribute, | ||
| message: `Expected the element to NOT be partially pressed, but received aria-pressed="${pressedAttribute}"`, | ||
| }); | ||
|
|
||
| return this.execute({ | ||
| assertWhen: isPartiallyPressed, | ||
| error, | ||
| invertedError, | ||
| }); | ||
| } | ||
|
|
||
| /** | ||
| * Helper method to assert the presence or absence of class names. | ||
| * | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import type { ReactElement } from "react"; | ||
|
|
||
| export function PressedTestComponent(): ReactElement { | ||
| return ( | ||
| <div> | ||
| {/* <button> variants */} | ||
| <button data-testid="button-pressed" aria-pressed="true">{"Pressed"}</button> | ||
| <button data-testid="button-not-pressed" aria-pressed="false">{"Not pressed"}</button> | ||
| <button data-testid="button-mixed" aria-pressed="mixed">{"Mixed"}</button> | ||
| <button data-testid="button-no-aria-pressed">{"No aria-pressed"}</button> | ||
|
|
||
| {/* <input type="button"> variants */} | ||
| <input data-testid="input-button-pressed" type="button" aria-pressed="true" /> | ||
| <input data-testid="input-button-not-pressed" type="button" aria-pressed="false" /> | ||
| <input data-testid="input-button-mixed" type="button" aria-pressed="mixed" /> | ||
|
|
||
| {/* role="button" variants */} | ||
| <div data-testid="role-button-pressed" role="button" aria-pressed="true">{"Pressed"}</div> | ||
| <div data-testid="role-button-not-pressed" role="button" aria-pressed="false">{"Not pressed"}</div> | ||
| <div data-testid="role-button-mixed" role="button" aria-pressed="mixed">{"Mixed"}</div> | ||
|
|
||
| {/* invalid element – no button role/tag */} | ||
| <div data-testid="non-button-element" aria-pressed="true">{"Not a button"}</div> | ||
| </div> | ||
| ); | ||
| } |
Uh oh!
There was an error while loading. Please reload this page.