diff --git a/.all-contributorsrc b/.all-contributorsrc
index 7c01b095..33412190 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -843,6 +843,36 @@
"contributions": [
"bug"
]
+ },
+ {
+ "login": "InfiniteXyy",
+ "name": "InfiniteXyy",
+ "avatar_url": "https://avatars.githubusercontent.com/u/26314308?v=4",
+ "profile": "https://xyynext.com",
+ "contributions": [
+ "code",
+ "bug"
+ ]
+ },
+ {
+ "login": "kretajak",
+ "name": "Marcin Kulpa",
+ "avatar_url": "https://avatars.githubusercontent.com/u/2963053?v=4",
+ "profile": "https://github.com/kretajak",
+ "contributions": [
+ "code",
+ "test"
+ ]
+ },
+ {
+ "login": "nossbigg",
+ "name": "Gibson C",
+ "avatar_url": "https://avatars.githubusercontent.com/u/10845858?v=4",
+ "profile": "http://nossbigg.github.io",
+ "contributions": [
+ "code",
+ "test"
+ ]
}
],
"repoHost": "https://github.com",
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
new file mode 100644
index 00000000..bb85b6f9
--- /dev/null
+++ b/.github/dependabot.yml
@@ -0,0 +1,11 @@
+version: 2
+updates:
+ - package-ecosystem: github-actions
+ directory: /
+ schedule:
+ interval: daily
+
+ - package-ecosystem: npm
+ directory: /
+ schedule:
+ interval: daily
diff --git a/.github/workflows/validate.yml b/.github/workflows/validate.yml
index 92aba307..4d592330 100644
--- a/.github/workflows/validate.yml
+++ b/.github/workflows/validate.yml
@@ -16,7 +16,7 @@ jobs:
if: ${{ !contains(github.head_ref, 'all-contributors') }}
strategy:
matrix:
- node: [14, 16, 18, 20]
+ node: [14, 16, 18, 20, 22, 24]
runs-on: ubuntu-latest
steps:
- name: ⬇️ Checkout repo
diff --git a/README.md b/README.md
index bf0c9cee..98643c2b 100644
--- a/README.md
+++ b/README.md
@@ -81,11 +81,15 @@ clear to read and to maintain.
- [`toBePartiallyChecked`](#tobepartiallychecked)
- [`toHaveRole`](#tohaverole)
- [`toHaveErrorMessage`](#tohaveerrormessage)
- - [`toHaveSelection`](#tohaveselection)
+ - [`toBePressed`](#tobepressed)
+ - [`toBePartiallyPressed`](#tobepartiallypressed)
+ - [`toAppearBefore`](#toappearbefore)
+ - [`toAppearAfter`](#toappearafter)
- [Deprecated matchers](#deprecated-matchers)
- [`toBeEmpty`](#tobeempty)
- [`toBeInTheDOM`](#tobeinthedom)
- [`toHaveDescription`](#tohavedescription)
+ - [`toHaveSelection`](#tohaveselection)
- [Inspiration](#inspiration)
- [Other Solutions](#other-solutions)
- [Guiding Principles](#guiding-principles)
@@ -174,7 +178,7 @@ Also, depending on your local setup, you may need to update your
},
"include": [
...
- "./vitest.setup.ts"
+ "./vitest-setup.ts"
],
```
@@ -1306,6 +1310,150 @@ expect(timeInput).toHaveErrorMessage(expect.stringContaining('Invalid time')) //
expect(timeInput).not.toHaveErrorMessage('Pikachu!')
```
+
+
+### `toBePressed`
+
+This allows to check whether given element is
+[pressed](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed).
+
+It accepts elements with explicit or implicit `button` role and valid
+`aria-pressed` attribute of `"true"` or `"false"`.
+
+```typescript
+toBePressed()
+```
+
+#### Examples
+
+```html
+
+
+
+
+
+
+Pressed span
+Released span
+```
+
+##### Using DOM Testing Library
+
+```javascript
+screen.getByRole('button', {name: 'Pressed'}).toBePressed()
+screen.getByRole('button', {name: 'Released'}).not.toBePressed()
+
+screen.getByRole('button', {name: 'Pressed input button'}).toBePressed()
+screen.getByRole('button', {name: 'Released input button'}).not.toBePressed()
+
+screen.getByRole('button', {name: 'Pressed span'}).toBePressed()
+screen.getByRole('button', {name: 'Released span'}).not.toBePressed()
+```
+
+
+
+### `toBePartiallyPressed`
+
+This allows to check whether given element is partially
+[pressed](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed).
+
+It accepts elements with explicit or implicit `button` role and valid
+`aria-pressed` attribute of `mixed`.
+
+```typescript
+toBePressed()
+```
+
+#### Examples
+
+```html
+
+
+Partially pressed span
+```
+
+##### Using DOM Testing Library
+
+```javascript
+screen.getByRole('button', {name: 'Partially pressed'}).toBePartiallyPressed()
+screen
+ .getByRole('button', {name: 'Partially pressed input button'})
+ .toBePartiallyPressed()
+screen
+ .getByRole('button', {name: 'Partially pressed span'})
+ .toBePartiallyPressed()
+```
+
+
+
+### `toAppearBefore`
+
+This checks if a given element appears before another element in the DOM tree,
+as per
+[`compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition).
+
+```typescript
+toAppearBefore()
+```
+
+#### Examples
+
+```html
+
+ Text A
+ Text B
+
+```
+
+```javascript
+const textA = queryByTestId('text-a')
+const textB = queryByTestId('text-b')
+
+expect(textA).toAppearBefore(textB)
+expect(textB).not.toAppearBefore(textA)
+```
+
+> Note: This matcher does not take into account CSS styles that may modify the
+> display order of elements, eg:
+>
+> - `flex-direction: row-reverse`,
+> - `flex-direction: column-reverse`,
+> - `display: grid`
+
+### `toAppearAfter`
+
+This checks if a given element appears after another element in the DOM tree, as
+per
+[`compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition).
+
+```typescript
+toAppearAfter()
+```
+
+#### Examples
+
+```html
+
+ Text A
+ Text B
+
+```
+
+```javascript
+const textA = queryByTestId('text-a')
+const textB = queryByTestId('text-b')
+
+expect(textB).toAppearAfter(textA)
+expect(textA).not.toAppearAfter(textB)
+```
+
+> Note: This matcher does not take into account CSS styles that may modify the
+> display order of elements, see [`toAppearBefore()`](#toappearbefore)
+
## Deprecated matchers
### `toBeEmpty`
@@ -1642,6 +1790,9 @@ Thanks goes to these people ([emoji key][emojis]):
+ `)
+
+ const textA = queryByTestId('text-a')
+ const textB = queryByTestId('text-b')
+ const divA = queryByTestId('div-a')
+
+ it('returns correct result when first element is before second element', () => {
+ expect(textA).toAppearBefore(textB)
+ })
+
+ it('returns correct for .not() invocation', () => {
+ expect(textB).not.toAppearBefore(textA)
+ })
+
+ it('errors out when first element is not before second element', () => {
+ expect(() => expect(textB).toAppearBefore(textA)).toThrowError(
+ /Received: Node.DOCUMENT_POSITION_PRECEDING \(2\)/i,
+ )
+ })
+
+ it('errors out when .not is used but first element is actually before second element', () => {
+ expect(() => expect(textA).not.toAppearBefore(textB)).toThrowError(
+ /\.not\.toAppearBefore/i,
+ )
+ })
+
+ it('errors out when first element is parent of second element', () => {
+ expect(() => expect(divA).toAppearBefore(textA)).toThrowError(
+ /Received: Unknown document position \(20\)/i,
+ )
+ })
+
+ it('errors out when first element is child of second element', () => {
+ expect(() => expect(textA).toAppearBefore(divA)).toThrowError(
+ /Received: Unknown document position \(10\)/i,
+ )
+ })
+
+ it('errors out when either first or second element is not HTMLElement', () => {
+ expect(() => expect(1).toAppearBefore(textB)).toThrowError()
+ expect(() => expect(textA).toAppearBefore(1)).toThrowError()
+ })
+})
+
+describe('.toAppearAfter', () => {
+ const {queryByTestId} = render(`
+
+
+ Text A
+ Text B
+
+
+ `)
+
+ const textA = queryByTestId('text-a')
+ const textB = queryByTestId('text-b')
+ const divA = queryByTestId('div-a')
+
+ it('returns correct result when first element is after second element', () => {
+ expect(textB).toAppearAfter(textA)
+ })
+
+ it('returns correct for .not() invocation', () => {
+ expect(textA).not.toAppearAfter(textB)
+ })
+
+ it('errors out when first element is not after second element', () => {
+ expect(() => expect(textA).toAppearAfter(textB)).toThrowError(
+ /Received: Node.DOCUMENT_POSITION_FOLLOWING \(4\)/i,
+ )
+ })
+
+ it('errors out when .not is used but first element is actually after second element', () => {
+ expect(() => expect(textB).not.toAppearAfter(textA)).toThrowError(
+ /\.not\.toAppearAfter/i,
+ )
+ })
+
+ it('errors out when first element is parent of second element', () => {
+ expect(() => expect(divA).toAppearAfter(textA)).toThrowError(
+ /Received: Unknown document position \(20\)/i,
+ )
+ })
+
+ it('errors out when first element is child of second element', () => {
+ expect(() => expect(textA).toAppearAfter(divA)).toThrowError(
+ /Received: Unknown document position \(10\)/i,
+ )
+ })
+
+ it('errors out when either first or second element is not HTMLElement', () => {
+ expect(() => expect(1).toAppearAfter(textB)).toThrowError()
+ expect(() => expect(textA).toAppearAfter(1)).toThrowError()
+ })
+})
diff --git a/src/__tests__/to-be-partially-pressed.js b/src/__tests__/to-be-partially-pressed.js
new file mode 100644
index 00000000..da6e7feb
--- /dev/null
+++ b/src/__tests__/to-be-partially-pressed.js
@@ -0,0 +1,111 @@
+import {render} from './helpers/test-utils'
+
+describe('.toBePartiallyPressed', () => {
+ test('handles button element', () => {
+ const {queryByTestId} = render(`
+
+
+
+
+ `)
+
+ expect(queryByTestId('button-partially-pressed')).toBePartiallyPressed()
+ expect(queryByTestId('button-not-pressed')).not.toBePartiallyPressed()
+ expect(queryByTestId('button-pressed')).not.toBePartiallyPressed()
+ expect(queryByTestId('button')).not.toBePartiallyPressed()
+ })
+
+ test('handles element with role="button"', () => {
+ const {queryByTestId} = render(`
+
+
+
+
+ `)
+
+ expect(queryByTestId('button-partially-pressed')).toBePartiallyPressed()
+ expect(queryByTestId('button-not-pressed')).not.toBePartiallyPressed()
+ expect(queryByTestId('button-pressed')).not.toBePartiallyPressed()
+ expect(queryByTestId('button')).not.toBePartiallyPressed()
+ })
+
+ test('handles input with button type', () => {
+ const {queryByTestId} = render(`
+
+
+
+
+ `)
+
+ expect(queryByTestId('button-partially-pressed')).toBePartiallyPressed()
+ expect(queryByTestId('button-not-pressed')).not.toBePartiallyPressed()
+ expect(queryByTestId('button-pressed')).not.toBePartiallyPressed()
+ expect(queryByTestId('button')).not.toBePartiallyPressed()
+ })
+
+ test('throw an error when pressable element is not partially pressed but expected to be', () => {
+ const {queryByTestId} = render(`
+
+ `)
+
+ expect(() => expect(queryByTestId('button')).toBePartiallyPressed())
+ .toThrowErrorMatchingInlineSnapshot(`
+ expect(element).toBePartiallyPressed()
+
+ Expected element to have:
+ aria-pressed="mixed"
+ Received:
+ aria-pressed="true"
+ `)
+ })
+
+ test('throw an error when pressable element is partially pressed but expected not to be', () => {
+ const {queryByTestId} = render(`
+
+ `)
+
+ expect(() => expect(queryByTestId('button')).not.toBePartiallyPressed())
+ .toThrowErrorMatchingInlineSnapshot(`
+ expect(element).not.toBePartiallyPressed()
+
+ Expected element not to have:
+ aria-pressed="mixed"
+ Received:
+ aria-pressed="mixed"
+ `)
+ })
+
+ test('throw an error when pressable element has invalid aria-pressed attribute', () => {
+ const {queryByTestId} = render(`
+
+ `)
+
+ expect(() =>
+ expect(queryByTestId('button')).toBePartiallyPressed(),
+ ).toThrowErrorMatchingInlineSnapshot(
+ `Only button or input with type="button" or element with role="button" and a valid aria-pressed attribute can be used with .toBePartiallyPressed()`,
+ )
+ })
+
+ test('throws when element is not a button', () => {
+ const {queryByTestId} = render(`
+
+ `)
+
+ expect(() =>
+ expect(queryByTestId('div')).toBePartiallyPressed(),
+ ).toThrowErrorMatchingInlineSnapshot(
+ `Only button or input with type="button" or element with role="button" and a valid aria-pressed attribute can be used with .toBePartiallyPressed()`,
+ )
+ })
+
+ test('throws when element do not have aria-pressed attribute', () => {
+ const {queryByTestId} = render(``)
+
+ expect(() =>
+ expect(queryByTestId('span')).toBePartiallyPressed(),
+ ).toThrowErrorMatchingInlineSnapshot(
+ `Only button or input with type="button" or element with role="button" and a valid aria-pressed attribute can be used with .toBePartiallyPressed()`,
+ )
+ })
+})
diff --git a/src/__tests__/to-be-pressed.js b/src/__tests__/to-be-pressed.js
new file mode 100644
index 00000000..fc9649e1
--- /dev/null
+++ b/src/__tests__/to-be-pressed.js
@@ -0,0 +1,89 @@
+import {render} from './helpers/test-utils'
+
+describe('.toBePressed', () => {
+ test('handles button element', () => {
+ const {queryByTestId} = render(`
+
+
+ `)
+
+ expect(queryByTestId('button-pressed')).toBePressed()
+ expect(queryByTestId('button-not-pressed')).not.toBePressed()
+ })
+
+ test('handles element with role="button"', () => {
+ const {queryByTestId} = render(`
+
+
+ `)
+
+ expect(queryByTestId('button-pressed')).toBePressed()
+ expect(queryByTestId('button-not-pressed')).not.toBePressed()
+ })
+
+ test('handles input with button type', () => {
+ const {queryByTestId} = render(`
+
+
+ `)
+
+ expect(queryByTestId('button-pressed')).toBePressed()
+ expect(queryByTestId('button-not-pressed')).not.toBePressed()
+ })
+
+ test('throw an error when pressable element is not pressed but expected to be', () => {
+ const {queryByTestId} = render(`
+
+ `)
+
+ expect(() => expect(queryByTestId('button')).toBePressed())
+ .toThrowErrorMatchingInlineSnapshot(`
+ expect(element).toBePressed()
+
+ Expected element to have:
+ aria-pressed="true"
+ Received:
+ aria-pressed="false"
+ `)
+ })
+
+ test('throw an error when pressable element is pressed but expected not to be', () => {
+ const {queryByTestId} = render(`
+
+ `)
+
+ expect(() => expect(queryByTestId('button')).not.toBePressed())
+ .toThrowErrorMatchingInlineSnapshot(`
+ expect(element).not.toBePressed()
+
+ Expected element to have:
+ aria-pressed="false"
+ Received:
+ aria-pressed="true"
+ `)
+ })
+
+ test('throw an error when pressable element has invalid aria-pressed attribute', () => {
+ const {queryByTestId} = render(`
+
+ `)
+
+ expect(() =>
+ expect(queryByTestId('button')).toBePressed(),
+ ).toThrowErrorMatchingInlineSnapshot(
+ `Only button or input with type="button" or element with role="button" and a valid aria-pressed attribute can be used with .toBePressed()`,
+ )
+ })
+
+ test('throws an error when element is not a button', () => {
+ const {queryByTestId} = render(
+ ``,
+ )
+
+ expect(() =>
+ expect(queryByTestId('span')).toBePressed(),
+ ).toThrowErrorMatchingInlineSnapshot(
+ `Only button or input with type="button" or element with role="button" and a valid aria-pressed attribute can be used with .toBePressed()`,
+ )
+ })
+})
diff --git a/src/matchers.js b/src/matchers.js
index ed534e28..f67054f4 100644
--- a/src/matchers.js
+++ b/src/matchers.js
@@ -25,3 +25,6 @@ export {toBePartiallyChecked} from './to-be-partially-checked'
export {toHaveDescription} from './to-have-description'
export {toHaveErrorMessage} from './to-have-errormessage'
export {toHaveSelection} from './to-have-selection'
+export {toBePressed} from './to-be-pressed'
+export {toBePartiallyPressed} from './to-be-partially-pressed'
+export {toAppearBefore, toAppearAfter} from './to-appear-before'
diff --git a/src/to-appear-before.js b/src/to-appear-before.js
new file mode 100644
index 00000000..66ccd212
--- /dev/null
+++ b/src/to-appear-before.js
@@ -0,0 +1,60 @@
+import {checkHtmlElement} from './utils'
+
+// ref: https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition
+const DOCUMENT_POSITIONS_STRINGS = {
+ [Node.DOCUMENT_POSITION_DISCONNECTED]: 'Node.DOCUMENT_POSITION_DISCONNECTED',
+ [Node.DOCUMENT_POSITION_PRECEDING]: 'Node.DOCUMENT_POSITION_PRECEDING',
+ [Node.DOCUMENT_POSITION_FOLLOWING]: 'Node.DOCUMENT_POSITION_FOLLOWING',
+ [Node.DOCUMENT_POSITION_CONTAINS]: 'Node.DOCUMENT_POSITION_CONTAINS',
+ [Node.DOCUMENT_POSITION_CONTAINED_BY]: 'Node.DOCUMENT_POSITION_CONTAINED_BY',
+ [Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC]:
+ 'Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC',
+}
+
+function makeDocumentPositionErrorString(documentPosition) {
+ if (documentPosition in DOCUMENT_POSITIONS_STRINGS) {
+ return `${DOCUMENT_POSITIONS_STRINGS[documentPosition]} (${documentPosition})`
+ }
+
+ return `Unknown document position (${documentPosition})`
+}
+
+function checkToAppear(methodName, targetDocumentPosition) {
+ // eslint-disable-next-line func-names
+ return function (element, secondElement) {
+ checkHtmlElement(element, toAppearBefore, this)
+ checkHtmlElement(secondElement, toAppearBefore, this)
+
+ const documentPosition = element.compareDocumentPosition(secondElement)
+ const pass = documentPosition === targetDocumentPosition
+
+ return {
+ pass,
+ message: () => {
+ return [
+ this.utils.matcherHint(
+ `${this.isNot ? '.not' : ''}.${methodName}`,
+ 'element',
+ 'secondElement',
+ ),
+ '',
+ `Received: ${makeDocumentPositionErrorString(documentPosition)}`,
+ ].join('\n')
+ },
+ }
+ }
+}
+
+export function toAppearBefore(element, secondElement) {
+ return checkToAppear(
+ 'toAppearBefore',
+ Node.DOCUMENT_POSITION_FOLLOWING,
+ ).apply(this, [element, secondElement])
+}
+
+export function toAppearAfter(element, secondElement) {
+ return checkToAppear('toAppearAfter', Node.DOCUMENT_POSITION_PRECEDING).apply(
+ this,
+ [element, secondElement],
+ )
+}
diff --git a/src/to-be-partially-pressed.js b/src/to-be-partially-pressed.js
new file mode 100644
index 00000000..d6b545f5
--- /dev/null
+++ b/src/to-be-partially-pressed.js
@@ -0,0 +1,54 @@
+import {checkHtmlElement, getMessage} from './utils'
+
+export function toBePartiallyPressed(element) {
+ checkHtmlElement(element, toBePartiallyPressed, this)
+
+ const roles = (element.getAttribute('role') || '')
+ .split(' ')
+ .map(role => role.trim())
+
+ const isButton =
+ element.tagName.toLowerCase() === 'button' ||
+ (element.tagName.toLowerCase() === 'input' && element.type === 'button') ||
+ roles.includes('button')
+
+ const pressedAttribute = element.getAttribute('aria-pressed')
+
+ const isValidAriaElement =
+ pressedAttribute === 'true' ||
+ pressedAttribute === 'false' ||
+ pressedAttribute === 'mixed'
+
+ if (!isButton || !isValidAriaElement) {
+ return {
+ pass: false,
+ message: () =>
+ `Only button or input with type="button" or element with role="button" and a valid aria-pressed attribute can be used with .toBePartiallyPressed()`,
+ }
+ }
+
+ const isPartiallyPressed = pressedAttribute === 'mixed'
+
+ return {
+ pass: isButton && isPartiallyPressed,
+
+ message: () => {
+ const to = this.isNot ? 'not to' : 'to'
+
+ const matcher = this.utils.matcherHint(
+ `${this.isNot ? '.not' : ''}.toBePartiallyPressed`,
+ 'element',
+ '',
+ )
+
+ return getMessage(
+ this,
+ matcher,
+ `Expected element ${to} have`,
+ `aria-pressed="mixed"`,
+ `Received`,
+ `aria-pressed="${pressedAttribute}"`,
+ )
+ },
+ }
+}
diff --git a/src/to-be-pressed.js b/src/to-be-pressed.js
new file mode 100644
index 00000000..8f1aa54e
--- /dev/null
+++ b/src/to-be-pressed.js
@@ -0,0 +1,50 @@
+import {checkHtmlElement, getMessage} from './utils'
+
+export function toBePressed(element) {
+ checkHtmlElement(element, toBePressed, this)
+
+ const roles = (element.getAttribute('role') || '')
+ .split(' ')
+ .map(role => role.trim())
+
+ const isButton =
+ element.tagName.toLowerCase() === 'button' ||
+ (element.tagName.toLowerCase() === 'input' && element.type === 'button') ||
+ roles.includes('button')
+
+ const pressedAttribute = element.getAttribute('aria-pressed')
+
+ const isValidAriaElement =
+ pressedAttribute === 'true' || pressedAttribute === 'false'
+
+ if (!isButton || !isValidAriaElement) {
+ return {
+ pass: false,
+ message: () =>
+ `Only button or input with type="button" or element with role="button" and a valid aria-pressed attribute can be used with .toBePressed()`,
+ }
+ }
+
+ const isPressed = pressedAttribute === 'true'
+
+ return {
+ pass: isButton && isPressed,
+
+ message: () => {
+ const matcher = this.utils.matcherHint(
+ `${this.isNot ? '.not' : ''}.toBePressed`,
+ 'element',
+ '',
+ )
+
+ return getMessage(
+ this,
+ matcher,
+ `Expected element to have`,
+ `aria-pressed="${this.isNot ? 'false' : 'true'}"`,
+ `Received`,
+ `aria-pressed="${pressedAttribute}"`,
+ )
+ },
+ }
+}
diff --git a/src/to-have-form-values.js b/src/to-have-form-values.js
index cd479d68..7a9fc503 100644
--- a/src/to-have-form-values.js
+++ b/src/to-have-form-values.js
@@ -1,9 +1,8 @@
-import isEqualWith from 'lodash/isEqualWith.js'
import escape from 'css.escape'
import {
checkHtmlElement,
+ compareAsSet,
getSingleElementValue,
- compareArraysAsSet,
} from './utils'
// Returns the combined value of several elements that have the same name
@@ -69,7 +68,7 @@ export function toHaveFormValues(formElement, expectedValues) {
const formValues = getAllFormValues(formElement)
return {
pass: Object.entries(expectedValues).every(([name, expectedValue]) =>
- isEqualWith(formValues[name], expectedValue, compareArraysAsSet),
+ compareAsSet(formValues[name], expectedValue),
),
message: () => {
const to = this.isNot ? 'not to' : 'to'
diff --git a/src/to-have-selection.js b/src/to-have-selection.js
index 4eb74783..6200a147 100644
--- a/src/to-have-selection.js
+++ b/src/to-have-selection.js
@@ -1,9 +1,8 @@
-import isEqualWith from 'lodash/isEqualWith.js'
-import {checkHtmlElement, compareArraysAsSet, getMessage} from './utils'
+import {checkHtmlElement, compareAsSet, getMessage} from './utils'
/**
* Returns the selection from the element.
- *
+ *
* @param element {HTMLElement} The element to get the selection from.
* @returns {String} The selection.
*/
@@ -92,7 +91,7 @@ export function toHaveSelection(htmlElement, expectedSelection) {
return {
pass: expectsSelection
- ? isEqualWith(receivedSelection, expectedSelection, compareArraysAsSet)
+ ? compareAsSet(receivedSelection, expectedSelection)
: Boolean(receivedSelection),
message: () => {
const to = this.isNot ? 'not to' : 'to'
diff --git a/src/to-have-style.js b/src/to-have-style.js
index 010e2a5d..86eae2e7 100644
--- a/src/to-have-style.js
+++ b/src/to-have-style.js
@@ -1,4 +1,4 @@
-import chalk from 'chalk'
+import pico from 'picocolors'
import {checkHtmlElement, parseCSS} from './utils'
function getStyleDeclaration(document, css) {
@@ -50,7 +50,7 @@ function expectedDiff(diffFn, expected, computedStyles) {
)
const diffOutput = diffFn(printoutStyles(expected), printoutStyles(received))
// Remove the "+ Received" annotation because this is a one-way diff
- return diffOutput.replace(`${chalk.red('+ Received')}\n`, '')
+ return diffOutput.replace(`${pico.red('+ Received')}\n`, '')
}
export function toHaveStyle(htmlElement, css) {
diff --git a/src/to-have-value.js b/src/to-have-value.js
index 37cca52c..18689a5e 100644
--- a/src/to-have-value.js
+++ b/src/to-have-value.js
@@ -1,9 +1,8 @@
-import isEqualWith from 'lodash/isEqualWith.js'
import {
checkHtmlElement,
+ compareAsSet,
getMessage,
getSingleElementValue,
- compareArraysAsSet,
} from './utils'
export function toHaveValue(htmlElement, expectedValue) {
@@ -30,7 +29,7 @@ export function toHaveValue(htmlElement, expectedValue) {
return {
pass: expectsValue
- ? isEqualWith(receivedValue, expectedValue, compareArraysAsSet)
+ ? compareAsSet(receivedValue, expectedValue)
: Boolean(receivedValue),
message: () => {
const to = this.isNot ? 'not to' : 'to'
diff --git a/src/utils.js b/src/utils.js
index 2699d954..02900704 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -230,11 +230,11 @@ function toSentence(
)
}
-function compareArraysAsSet(arr1, arr2) {
- if (Array.isArray(arr1) && Array.isArray(arr2)) {
- return [...new Set(arr1)].every(v => new Set(arr2).has(v))
+function compareAsSet(val1, val2) {
+ if (Array.isArray(val1) && Array.isArray(val2)) {
+ return [...new Set(val1)].every(v => new Set(val2).has(v))
}
- return undefined
+ return val1 === val2
}
export {
@@ -250,5 +250,5 @@ export {
getTag,
getSingleElementValue,
toSentence,
- compareArraysAsSet,
+ compareAsSet,
}
diff --git a/types/matchers.d.ts b/types/matchers.d.ts
index 8bf2ad58..82de01dc 100755
--- a/types/matchers.d.ts
+++ b/types/matchers.d.ts
@@ -761,6 +761,95 @@ declare namespace matchers {
* [testing-library/jest-dom#tohaveselection](https://github.com/testing-library/jest-dom#tohaveselection)
*/
toHaveSelection(selection?: string): R
+ /*
+ * @description
+ * This allows to check whether given element has been [pressed](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed)
+ *
+ * It accepts elements with explicit or implicit `button` role and valid `aria-pressed`
+ * attribute of `"true"` or `"false"`.
+ *
+ * @example
+ *
+ *
+ *
+ *
+ *
+ *
+ * Pressed span
+ * Released span
+ *
+ * screen.getByRole('button', { name: 'Pressed' }).toBePressed();
+ * screen.getByRole('button', { name: 'Released' }).not.toBePressed();
+ *
+ * screen.getByRole('button', { name: 'Pressed input button' }).toBePressed();
+ * screen.getByRole('button', { name: 'Released input button' }).not.toBePressed();
+ *
+ * screen.getByRole('button', { name: 'Pressed span' }).toBePressed();
+ * screen.getByRole('button', { name: 'Released span' }).not.toBePressed();
+ *
+ * @see
+ * [testing-library/jest-dom#tobepressed](https://github.com/testing-library/jest-dom#tobepressed)
+ */
+ toBePressed(): R
+ /*
+ * @description
+ * This allows to check whether given element has been [partially pressed](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-pressed)
+ *
+ * It accepts elements with explicit or implicit `button` role and valid `aria-pressed` of `"mixed"`.
+ *
+ * @example
+ *
+ *
+ * Partially pressed span
+ *
+ * screen.getByRole('button', { name: 'Partially Pressed' }).toBePartiallyPressed();
+ * screen.getByRole('button', { name: 'Partially pressed input button' }).toBePartiallyPressed();
+ * screen.getByRole('button', { name: 'Partially pressed span' }).toBePartiallyPressed();
+ *
+ * @See
+ * [testing-library/jest-dom#tobepartiallypressed](https://github.com/testing-library/jest-dom#tobepartiallypressed)
+ */
+ toBePartiallyPressed(): R
+ /*
+ * @description
+ * This checks if a given element appears before another element in the DOM tree, as per [`compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition).
+ *
+ * @example
+ *
+ * Text A
+ * Text B
+ *
+ *
+ * const textA = queryByTestId('text-a')
+ * const textB = queryByTestId('text-b')
+ *
+ * expect(textA).toAppearBefore(textB)
+ * expect(textB).not.toAppearBefore(textA)
+ *
+ * @See
+ * [testing-library/jest-dom#toappearbefore](https://github.com/testing-library/jest-dom#toappearbefore)
+ */
+ toAppearBefore(element: HTMLElement | SVGElement): R
+ /*
+ * @description
+ * This checks if a given element appears after another element in the DOM tree, as per [`compareDocumentPosition()`](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition).
+ *
+ * @example
+ *
