diff --git a/.gitignore b/.gitignore index c5032eb..22ad643 100644 --- a/.gitignore +++ b/.gitignore @@ -17,5 +17,8 @@ node_modules/ # VSCode .vscode/ +# idea +.idea/ + # Packages *.tgz diff --git a/packages/native/package.json b/packages/native/package.json index 4fc063b..cae4d30 100644 --- a/packages/native/package.json +++ b/packages/native/package.json @@ -34,12 +34,13 @@ "test": "NODE_ENV=test mocha" }, "dependencies": { + "dot-prop-immutable": "^2.1.1", "fast-deep-equal": "^3.1.3", "tslib": "^2.6.2" }, "devDependencies": { "@assertive-ts/core": "workspace:^", - "@testing-library/react-native": "^12.4.4", + "@testing-library/react-native": "^12.9.0", "@types/mocha": "^10.0.6", "@types/node": "^20.11.19", "@types/react": "^18.2.70", diff --git a/packages/native/src/lib/ElementAssertion.ts b/packages/native/src/lib/ElementAssertion.ts new file mode 100644 index 0000000..d1350b9 --- /dev/null +++ b/packages/native/src/lib/ElementAssertion.ts @@ -0,0 +1,90 @@ +import { Assertion, AssertionError } from "@assertive-ts/core"; +import { get } from "dot-prop-immutable"; +import { ReactTestInstance } from "react-test-renderer"; + +export class ElementAssertion extends Assertion { + public constructor(actual: ReactTestInstance) { + super(actual); + } + + public override toString = (): string => { + if (this.actual === null) { + return "null"; + } + + return `<${this.actual.type.toString()} ... />`; + }; + + /** + * Check if the component is disabled or has been disabled by an ancestor. + * + * @example + * ``` + * expect(component).toBeDisabled(); + * ``` + * + * @returns the assertion instance + */ + public toBeDisabled(): this { + const error = new AssertionError({ + actual: this.actual, + message: `Expected element ${this.toString()} to be disabled.`, + }); + const invertedError = new AssertionError({ + actual: this.actual, + message: `Expected element ${this.toString()} to NOT be disabled.`, + }); + + return this.execute({ + assertWhen: this.isElementDisabled(this.actual) || this.isAncestorDisabled(this.actual), + error, + invertedError, + }); + } + + /** + * Check if the component is enabled. + * + * @example + * ``` + * expect(component).toBeEnabled(); + * ``` + * @returns the assertion instance + */ + public toBeEnabled(): this { + const error = new AssertionError({ + actual: this.actual, + message: `Expected element ${this.toString()} to be enabled.`, + }); + const invertedError = new AssertionError({ + actual: this.actual, + message: `Expected element ${this.toString()} to NOT be enabled.`, + }); + + return this.execute({ + assertWhen: !this.isElementDisabled(this.actual) && !this.isAncestorDisabled(this.actual), + error, + invertedError, + }); + } + + private isElementDisabled(element: ReactTestInstance): boolean { + const { type } = element; + const elementType = type.toString(); + if (elementType === "TextInput" && element?.props?.editable === false) { + return true; + } + + return ( + get(element, "props.aria-disabled") + || get(element, "props.disabled", false) + || get(element, "props.accessibilityState.disabled", false) + || get(element, "props.accessibilityStates", []).includes("disabled") + ); + } + + private isAncestorDisabled(element: ReactTestInstance): boolean { + const { parent } = element; + return parent !== null && (this.isElementDisabled(element) || this.isAncestorDisabled(parent)); + } +} diff --git a/packages/native/src/main.ts b/packages/native/src/main.ts index e69de29..a6fe8a1 100644 --- a/packages/native/src/main.ts +++ b/packages/native/src/main.ts @@ -0,0 +1,32 @@ +import { Plugin } from "@assertive-ts/core"; +import { ReactTestInstance } from "react-test-renderer"; + +import { ElementAssertion } from "./lib/ElementAssertion"; + +declare module "@assertive-ts/core" { + + export interface Expect { + // eslint-disable-next-line @typescript-eslint/prefer-function-type + (actual: ReactTestInstance): ElementAssertion; + } +} + +const ElementPlugin: Plugin = { + Assertion: ElementAssertion, + insertAt: "top", + predicate: (actual): actual is ReactTestInstance => + typeof actual === "object" + && actual !== null + && "instance" in actual + && typeof actual.instance === "object" + && "type" in actual + && typeof actual.type === "object" + && "props" in actual + && typeof actual.props === "object" + && "parent" in actual + && typeof actual.parent === "object" + && "children" in actual + && typeof actual.children === "object", +}; + +export const NativePlugin = [ElementPlugin]; diff --git a/packages/native/test/lib/ElementAssertion.test.tsx b/packages/native/test/lib/ElementAssertion.test.tsx new file mode 100644 index 0000000..6db8aba --- /dev/null +++ b/packages/native/test/lib/ElementAssertion.test.tsx @@ -0,0 +1,132 @@ +import { AssertionError, expect } from "@assertive-ts/core"; +import { render } from "@testing-library/react-native"; +import { + View, + TextInput, +} from "react-native"; + +import { ElementAssertion } from "../../src/lib/ElementAssertion"; + +describe("[Unit] ElementAssertion.test.ts", () => { + describe(".toBeDisabled", () => { + context("when the element is TextInput", () => { + context("and the element is not editable", () => { + it("returns the assertion instance", () => { + const element = render( + , + ); + const test = new ElementAssertion(element.getByTestId("id")); + expect(test.toBeDisabled()).toBe(test); + expect(test.not.toBeEnabled()).toBeEqual(test); + expect(() => test.toBeEnabled()) + .toThrowError(AssertionError) + .toHaveMessage("Expected element to be enabled."); + }); + }); + + context("and the element is editable", () => { + it("throws an error", () => { + const reactElement = render(); + const test = new ElementAssertion(reactElement.getByTestId("id")); + + expect(() => test.toBeDisabled()) + .toThrowError(AssertionError) + .toHaveMessage("Expected element to be disabled."); + expect(() => test.not.toBeEnabled()) + .toThrowError(AssertionError) + .toHaveMessage("Expected element to NOT be enabled."); + }); + }); + }); + + context("when the parent has property aria-disabled", () => { + context("if parent aria-disabled = true", () => { + it("returns assertion instance for parent and child element", () => { + const element = render( + + + + + , + ); + + const parent = new ElementAssertion(element.getByTestId("parentId")); + const child = new ElementAssertion(element.getByTestId("childId")); + expect(parent.toBeDisabled()).toBe(parent); + expect(child.toBeDisabled()).toBe(child); + expect(() => parent.toBeEnabled()) + .toThrowError(AssertionError) + .toHaveMessage("Expected element to be enabled."); + expect(() => parent.not.toBeDisabled()) + .toThrowError(AssertionError) + .toHaveMessage("Expected element to NOT be disabled."); + }); + }); + + context("if parent aria-disabled = false", () => { + it("throws an error for parent and child element", () => { + const element = render( + + + + + , + ); + + const parent = new ElementAssertion(element.getByTestId("parentId")); + const child = new ElementAssertion(element.getByTestId("childId")); + + expect(parent.toBeEnabled()).toBeEqual(parent); + expect(parent.not.toBeDisabled()).toBeEqual(parent); + expect(() => parent.toBeDisabled()) + .toThrowError(AssertionError) + .toHaveMessage("Expected element to be disabled."); + expect(() => parent.not.toBeEnabled()) + .toThrowError(AssertionError) + .toHaveMessage("Expected element to NOT be enabled."); + expect(() => child.toBeDisabled()) + .toThrowError(AssertionError) + .toHaveMessage("Expected element to be disabled."); + expect(() => child.not.toBeEnabled()) + .toThrowError(AssertionError) + .toHaveMessage("Expected element to NOT be enabled."); + }); + }); + }); + + context("when the element contains property aria-disabled", () => { + const element = render( + + + + + , + ); + + const parent = new ElementAssertion(element.getByTestId("parentId")); + const child = new ElementAssertion(element.getByTestId("childId")); + + context("if child contains aria-disabled = true", () => { + it("returns assertion instance for child element", () => { + expect(child.toBeDisabled()).toBe(child); + expect(() => child.toBeEnabled()) + .toThrowError(AssertionError) + .toHaveMessage("Expected element to be enabled."); + expect(() => child.not.toBeDisabled()) + .toThrowError(AssertionError) + .toHaveMessage("Expected element to NOT be disabled."); + }); + + it("returns error for parent element", () => { + expect(parent.toBeEnabled()).toBeEqual(parent); + expect(() => parent.toBeDisabled()) + .toThrowError(AssertionError) + .toHaveMessage("Expected element to be disabled."); + expect(() => parent.not.toBeEnabled()) + .toThrowError(AssertionError) + .toHaveMessage("Expected element to NOT be enabled."); + }); + }); + }); + }); +}); diff --git a/yarn.lock b/yarn.lock index 7617f03..6d0e447 100644 --- a/yarn.lock +++ b/yarn.lock @@ -86,12 +86,13 @@ __metadata: resolution: "@assertive-ts/native@workspace:packages/native" dependencies: "@assertive-ts/core": "workspace:^" - "@testing-library/react-native": "npm:^12.4.4" + "@testing-library/react-native": "npm:^12.9.0" "@types/mocha": "npm:^10.0.6" "@types/node": "npm:^20.11.19" "@types/react": "npm:^18.2.70" "@types/react-test-renderer": "npm:^18.0.7" "@types/sinon": "npm:^17.0.3" + dot-prop-immutable: "npm:^2.1.1" fast-deep-equal: "npm:^3.1.3" mocha: "npm:^10.3.0" react: "npm:^18.2.0" @@ -2958,9 +2959,9 @@ __metadata: languageName: node linkType: hard -"@testing-library/react-native@npm:^12.4.4": - version: 12.8.1 - resolution: "@testing-library/react-native@npm:12.8.1" +"@testing-library/react-native@npm:^12.9.0": + version: 12.9.0 + resolution: "@testing-library/react-native@npm:12.9.0" dependencies: jest-matcher-utils: "npm:^29.7.0" pretty-format: "npm:^29.7.0" @@ -2973,7 +2974,7 @@ __metadata: peerDependenciesMeta: jest: optional: true - checksum: 10/eaa09cb560a469c686b8eb0ee8085bb54654a481e6bcf9eb5bc7b756c5303ca6b5c17ab2ef1479b8c245ac153ac69907d47c30ec9b496a29a6e459baa3d3f5d9 + checksum: 10/dcee1d836e76198a2c397fbcb7db24a40e2c45b2dcbca266a4a5d8a802a859a1e8c50755336a2d70f9eec478de964951673b78acb2e03c007b2bee5b8d8766d1 languageName: node linkType: hard