-
Notifications
You must be signed in to change notification settings - Fork 2
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
kdquistanchala
wants to merge
15
commits into
feat/native-to-contain-element
Choose a base branch
from
feat/native-to-have-prop
base: feat/native-to-contain-element
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Draft
Changes from all commits
Commits
Show all changes
15 commits
Select commit
Hold shift + click to select a range
41d0f97
WIP: toBeEmpty function
kdquistanchala 6dfdd21
toBeEmpty tests
kdquistanchala debfd8a
Fix: use element 'children'
kdquistanchala 496edc5
CR: Move isEmpty to a helper file
kdquistanchala 1f78272
Add isEmpty doc.
kdquistanchala f305bb4
Update: CR comments
kdquistanchala aed8344
Move toBeEmptyAssertion to the element assertions
kdquistanchala 22e54c9
Add toBeVisible matcher
kdquistanchala 05a57e9
Add tests for toBeVisible
kdquistanchala abf480a
Fix: Update JSDocs
kdquistanchala 0c30fee
toContainElement() assertion
kdquistanchala 05ef646
Add tests for toContainElement()
kdquistanchala fda2999
fix: assertions on tests
kdquistanchala ee0261b
Add toHaveProp function
kdquistanchala 279a50c
Add tests for toHaveProp
kdquistanchala File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or 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 |
---|---|---|
|
@@ -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); | ||
}; | ||
|
||
/** | ||
|
@@ -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({ | ||
|
@@ -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 | ||
* ``` | ||
|
@@ -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({ | ||
|
@@ -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); | ||
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)}'.`; | ||
|
||
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. 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(); | ||
|
@@ -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)); | ||
} | ||
} |
This file contains hidden or 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,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()} ... />`; | ||
} |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
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?