Skip to content

feat(native): Add toHaveProp #148

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

Draft
wants to merge 15 commits into
base: feat/native-to-contain-element
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
168 changes: 160 additions & 8 deletions packages/native/src/lib/ElementAssertion.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,15 @@ import { Assertion, AssertionError } from "@assertive-ts/core";
import { get } from "dot-prop-immutable";
import { ReactTestInstance } from "react-test-renderer";

import { instanceToString, isEmpty } from "./helpers/helpers";

export class ElementAssertion extends Assertion<ReactTestInstance> {
public constructor(actual: ReactTestInstance) {
super(actual);
}

public override toString = (): string => {
if (this.actual === null) {
return "null";
}

return `<${this.actual.type.toString()} ... />`;
return instanceToString(this.actual);
};

/**
Expand All @@ -32,7 +30,7 @@ export class ElementAssertion extends Assertion<ReactTestInstance> {
});
const invertedError = new AssertionError({
actual: this.actual,
message: `Expected element ${this.toString()} to NOT be disabled.`,
message: `Expected element ${this.toString()} NOT to be disabled.`,
});

return this.execute({
Expand All @@ -43,7 +41,7 @@ export class ElementAssertion extends Assertion<ReactTestInstance> {
}

/**
* Check if the component is enabled.
* Check if the component is enabled and has not been disabled by an ancestor.
*
* @example
* ```
Expand All @@ -58,7 +56,7 @@ export class ElementAssertion extends Assertion<ReactTestInstance> {
});
const invertedError = new AssertionError({
actual: this.actual,
message: `Expected element ${this.toString()} to NOT be enabled.`,
message: `Expected element ${this.toString()} NOT to be enabled.`,
});

return this.execute({
Expand All @@ -68,6 +66,140 @@ export class ElementAssertion extends Assertion<ReactTestInstance> {
});
}

/**
* Check if the element is empty.
*
* @example
* ```
* expect(element).toBeEmpty();
* ```
*
* @returns the assertion instance
*/
public toBeEmpty(): this {
const error = new AssertionError({
actual: this.actual,
message: `Expected element ${this.toString()} to be empty.`,
});
const invertedError = new AssertionError({
actual: this.actual,
message: `Expected element ${this.toString()} NOT to be empty.`,
});

return this.execute({
assertWhen: isEmpty(this.actual.children),
error,
invertedError,
});
}

/**
* Check if the element is visible and has not been hidden by an ancestor.
*
* @example
* ```
* expect(element).toBeVisible();
* ```
*
* @returns the assertion instance
*/
public toBeVisible(): this {
const error = new AssertionError({
actual: this.actual,
message: `Expected element ${this.toString()} to be visible.`,
});
const invertedError = new AssertionError({
actual: this.actual,
message: `Expected element ${this.toString()} NOT to be visible.`,
});

return this.execute({
assertWhen: this.isElementVisible(this.actual) && !this.isAncestorNotVisible(this.actual),
error,
invertedError,
});
}

/**
* Check if an element is contained within another element.
*
* @example
* ```
* expect(parent).toContainElement(child);
* ```
*
* @param element - The element to check for.
* @returns the assertion instance
*/
public toContainElement(element: ReactTestInstance): this {
const error = new AssertionError({
actual: this.actual,
message: `Expected element ${this.toString()} to contain element ${instanceToString(element)}.`,
});
const invertedError = new AssertionError({
actual: this.actual,
message: `Expected element ${this.toString()} NOT to contain element ${instanceToString(element)}.`,
});

const isElementContained = (
parentElement: ReactTestInstance,
childElement: ReactTestInstance,
): boolean => {
if (parentElement === null || childElement === null) {
return false;
}

return (
parentElement.findAll(
node =>
node.type === childElement.type && node.props === childElement.props,
).length > 0
);
};

return this.execute({
assertWhen: isElementContained(this.actual, element),
error,
invertedError,
});
}

/**
* Check if the element has a specific property or a specific property value.
*
* @example
* ```
* expect(element).toHaveProp("propName");
* expect(element).toHaveProp("propName", "propValue");
* ```
*
* @param propName - The name of the prop to check for.
* @param value - The value of the prop to check for.
* @returns the assertion instance
*/
public toHaveProp(propName: string, value?: unknown): this {
const propValue: unknown = get(this.actual, `props.${propName}`, undefined);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just as for my understanding, why are we using uknown instead of undefined or any in here?

const hasProp = propValue !== undefined;
const isPropEqual = value === undefined || propValue === value;

const errorMessage = value === undefined
? `Expected element ${this.toString()} to have prop '${propName}'.`
: `Expected element ${this.toString()} to have prop '${propName}' with value '${String(value)}'.`;

const invertedErrorMessage = value === undefined
? `Expected element ${this.toString()} NOT to have prop '${propName}'.`
: `Expected element ${this.toString()} NOT to have prop '${propName}' with value '${String(value)}'.`;

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What do you think about adding to the error message something like: Verify the element properties?

const error = new AssertionError({ actual: this.actual, message: errorMessage });
const invertedError = new AssertionError({ actual: this.actual, message: invertedErrorMessage });

return this.execute({
assertWhen: hasProp && isPropEqual,
error,
invertedError,
});
}

private isElementDisabled(element: ReactTestInstance): boolean {
const { type } = element;
const elementType = type.toString();
Expand All @@ -87,4 +219,24 @@ export class ElementAssertion extends Assertion<ReactTestInstance> {
const { parent } = element;
return parent !== null && (this.isElementDisabled(element) || this.isAncestorDisabled(parent));
}

private isElementVisible(element: ReactTestInstance): boolean {
const { type } = element;
const elementType = type.toString();
if (elementType === "Modal" && !element?.props?.visible === true) {
return false;
}

return (
get(element, "props.style.display") !== "none"
&& get(element, "props.style.opacity") !== 0
&& get(element, "props.accessibilityElementsHidden") !== true
&& get(element, "props.importantForAccessibility") !== "no-hide-descendants"
);
}

private isAncestorNotVisible(element: ReactTestInstance): boolean {
const { parent } = element;
return parent !== null && (!this.isElementVisible(element) || this.isAncestorNotVisible(parent));
}
}
33 changes: 33 additions & 0 deletions packages/native/src/lib/helpers/helpers.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { ReactTestInstance } from "react-test-renderer";

/**
* Checks if a value is empty.
*
* @param value - The value to check.
* @returns `true` if the value is empty, `false` otherwise.
*/
export function isEmpty(value: unknown): boolean {
if (!value) {
return true;
}

if (Array.isArray(value)) {
return value.length === 0;
}

return false;
}

/**
* Converts a ReactTestInstance to a string representation.
*
* @param instance - The ReactTestInstance to convert.
* @returns A string representation of the instance.
*/
export function instanceToString(instance: ReactTestInstance | null): string {
if (instance === null) {
return "null";
}

return `<${instance.type.toString()} ... />`;
}
Loading