+29 -40

pnpm-lock.yaml

Reviewed

··· 502 502 specifier: 'catalog:' 503 503 version: 8.18.1 504 504 devDependencies: 505 505 - '@testing-library/jest-dom': 506 506 - specifier: ^6.6.3 507 507 - version: 6.6.3 508 505 '@types/ws': 509 506 specifier: 'catalog:' 510 507 version: 8.18.0 ··· 530 527 specifier: 'catalog:' 531 528 version: 3.3.3 532 529 ivya: 533 533 - specifier: ^1.5.1 534 534 - version: 1.5.1 530 530 + specifier: ^1.6.0 531 531 + version: 1.6.0 535 532 mime: 536 533 specifier: ^4.0.6 537 534 version: 4.0.6 ··· 5516 5513 es-module-lexer@1.6.0: 5517 5514 resolution: {integrity: sha512-qqnD1yMU6tk/jnaMosogGySTZP8YtUgAffA9nMN+E/rjxcfRQ6IEk7IiozUjgxKoFHBGjTLnrHB/YC45r/59EQ==} 5518 5515 5519 5519 - es-object-atoms@1.0.0: 5520 5520 - resolution: {integrity: sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==} 5521 5521 - engines: {node: '>= 0.4'} 5522 5522 - 5523 5516 es-object-atoms@1.1.1: 5524 5517 resolution: {integrity: sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==} 5525 5518 engines: {node: '>= 0.4'} ··· 6596 6589 resolution: {integrity: sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==} 6597 6590 engines: {node: '>=8'} 6598 6591 6599 6599 - ivya@1.5.1: 6600 6600 - resolution: {integrity: sha512-WUDzzuxLS01qb4BujtMmqmoSxrG/EsNZjLI7+23xHf28NjlCD0KWHmeoHtaq21mUNrWxqxmgxwxxNDbuE7WOwA==} 6592 6592 + ivya@1.6.0: 6593 6593 + resolution: {integrity: sha512-MVindQ7lUYqEmW6K5o/ZTrLfRmOqhl0GEo/MekwiUm+WfDv8wOB7FRy1bGprz2hxvvrOHrDmgF8KIPw8N+/ONw==} 6601 6594 6602 6595 jackspeak@3.4.0: 6603 6596 resolution: {integrity: sha512-JVYhQnN59LVPFCEcVa2C3CrEKYacvjRfqIQl+h8oi91aLYQVWRYbxjPcv1bUiUy/kLmQaANrYfNMCO3kuEDHfw==} ··· 12601 12594 define-properties: 1.2.1 12602 12595 es-abstract: 1.23.3 12603 12596 es-errors: 1.3.0 12604 12604 - get-intrinsic: 1.2.4 12597 12597 + get-intrinsic: 1.3.0 12605 12598 is-array-buffer: 3.0.4 12606 12599 is-shared-array-buffer: 1.0.3 12607 12600 ··· 13525 13518 data-view-buffer: 1.0.1 13526 13519 data-view-byte-length: 1.0.1 13527 13520 data-view-byte-offset: 1.0.0 13528 13528 - es-define-property: 1.0.0 13521 13521 + es-define-property: 1.0.1 13529 13522 es-errors: 1.3.0 13530 13530 - es-object-atoms: 1.0.0 13523 13523 + es-object-atoms: 1.1.1 13531 13524 es-set-tostringtag: 2.0.3 13532 13525 es-to-primitive: 1.2.1 13533 13526 function.prototype.name: 1.1.6 13534 13534 - get-intrinsic: 1.2.4 13527 13527 + get-intrinsic: 1.3.0 13535 13528 get-symbol-description: 1.0.2 13536 13529 globalthis: 1.0.4 13537 13537 - gopd: 1.0.1 13530 13530 + gopd: 1.2.0 13538 13531 has-property-descriptors: 1.0.2 13539 13532 has-proto: 1.0.3 13540 13540 - has-symbols: 1.0.3 13533 13533 + has-symbols: 1.1.0 13541 13534 hasown: 2.0.2 13542 13535 internal-slot: 1.0.7 13543 13536 is-array-buffer: 3.0.4 ··· 13549 13542 is-string: 1.0.7 13550 13543 is-typed-array: 1.1.13 13551 13544 is-weakref: 1.0.2 13552 13552 - object-inspect: 1.13.2 13545 13545 + object-inspect: 1.13.4 13553 13546 object-keys: 1.1.1 13554 13547 object.assign: 4.1.5 13555 13548 regexp.prototype.flags: 1.5.3 ··· 13587 13580 13588 13581 es-module-lexer@1.6.0: {} 13589 13582 13590 13590 - es-object-atoms@1.0.0: 13591 13591 - dependencies: 13592 13592 - es-errors: 1.3.0 13593 13593 - 13594 13583 es-object-atoms@1.1.1: 13595 13584 dependencies: 13596 13585 es-errors: 1.3.0 13597 13586 13598 13587 es-set-tostringtag@2.0.3: 13599 13588 dependencies: 13600 13600 - get-intrinsic: 1.2.4 13589 13589 + get-intrinsic: 1.3.0 13601 13590 has-tostringtag: 1.0.2 13602 13591 hasown: 2.0.2 13603 13592 ··· 14406 14395 dependencies: 14407 14396 call-bind: 1.0.7 14408 14397 es-errors: 1.3.0 14409 14409 - get-intrinsic: 1.2.4 14398 14398 + get-intrinsic: 1.3.0 14410 14399 14411 14400 get-tsconfig@4.10.0: 14412 14401 dependencies: ··· 14490 14479 globalthis@1.0.4: 14491 14480 dependencies: 14492 14481 define-properties: 1.2.1 14493 14493 - gopd: 1.0.1 14482 14482 + gopd: 1.2.0 14494 14483 14495 14484 globalyzer@0.1.0: {} 14496 14485 ··· 14926 14915 html-escaper: 2.0.2 14927 14916 istanbul-lib-report: 3.0.1 14928 14917 14929 14929 - ivya@1.5.1: {} 14918 14918 + ivya@1.6.0: {} 14930 14919 14931 14920 jackspeak@3.4.0: 14932 14921 dependencies: ··· 16537 16526 safe-array-concat@1.1.2: 16538 16527 dependencies: 16539 16528 call-bind: 1.0.7 16540 16540 - get-intrinsic: 1.2.4 16541 16541 - has-symbols: 1.0.3 16529 16529 + get-intrinsic: 1.3.0 16530 16530 + has-symbols: 1.1.0 16542 16531 isarray: 2.0.5 16543 16532 16544 16533 safe-buffer@5.1.2: {} ··· 16930 16919 define-properties: 1.2.1 16931 16920 es-abstract: 1.23.3 16932 16921 es-errors: 1.3.0 16933 16933 - es-object-atoms: 1.0.0 16934 16934 - get-intrinsic: 1.2.4 16935 16935 - gopd: 1.0.1 16936 16936 - has-symbols: 1.0.3 16922 16922 + es-object-atoms: 1.1.1 16923 16923 + get-intrinsic: 1.3.0 16924 16924 + gopd: 1.2.0 16925 16925 + has-symbols: 1.1.0 16937 16926 internal-slot: 1.0.7 16938 16927 regexp.prototype.flags: 1.5.3 16939 16928 set-function-name: 2.0.2 16940 16940 - side-channel: 1.0.6 16929 16929 + side-channel: 1.1.0 16941 16930 16942 16931 string.prototype.trim@1.2.9: 16943 16932 dependencies: 16944 16933 call-bind: 1.0.7 16945 16934 define-properties: 1.2.1 16946 16935 es-abstract: 1.23.3 16947 16947 - es-object-atoms: 1.0.0 16936 16936 + es-object-atoms: 1.1.1 16948 16937 16949 16938 string.prototype.trimend@1.0.8: 16950 16939 dependencies: 16951 16940 call-bind: 1.0.7 16952 16941 define-properties: 1.2.1 16953 16953 - es-object-atoms: 1.0.0 16942 16942 + es-object-atoms: 1.1.1 16954 16943 16955 16944 string.prototype.trimstart@1.0.8: 16956 16945 dependencies: 16957 16946 call-bind: 1.0.7 16958 16947 define-properties: 1.2.1 16959 16959 - es-object-atoms: 1.0.0 16948 16948 + es-object-atoms: 1.1.1 16960 16949 16961 16950 string_decoder@1.1.1: 16962 16951 dependencies: ··· 17335 17324 dependencies: 17336 17325 call-bind: 1.0.7 17337 17326 for-each: 0.3.3 17338 17338 - gopd: 1.0.1 17327 17327 + gopd: 1.2.0 17339 17328 has-proto: 1.0.3 17340 17329 is-typed-array: 1.1.13 17341 17330 ··· 17344 17333 available-typed-arrays: 1.0.7 17345 17334 call-bind: 1.0.7 17346 17335 for-each: 0.3.3 17347 17347 - gopd: 1.0.1 17336 17336 + gopd: 1.2.0 17348 17337 has-proto: 1.0.3 17349 17338 is-typed-array: 1.1.13 17350 17339 ··· 17352 17341 dependencies: 17353 17342 call-bind: 1.0.7 17354 17343 for-each: 0.3.3 17355 17355 - gopd: 1.0.1 17344 17344 + gopd: 1.2.0 17356 17345 has-proto: 1.0.3 17357 17346 is-typed-array: 1.1.13 17358 17347 possible-typed-array-names: 1.0.0 ··· 17367 17356 dependencies: 17368 17357 call-bind: 1.0.7 17369 17358 has-bigints: 1.0.2 17370 17370 - has-symbols: 1.0.3 17359 17359 + has-symbols: 1.1.0 17371 17360 which-boxed-primitive: 1.0.2 17372 17361 17373 17362 unconfig@0.3.11:

+2 -1

packages/browser/context.d.ts

Reviewed

··· 1 1 - import type { SerializedConfig } from 'vitest' 1 1 + import { SerializedConfig } from 'vitest' 2 2 import { ARIARole } from './aria-role.js' 3 3 + import {} from './matchers.js' 3 4 4 5 export type BufferEncoding = 5 6 | 'ascii'

+623 -712

packages/browser/jest-dom.d.ts

Reviewed

··· 2 2 3 3 import { ARIARole } from './aria-role.ts' 4 4 5 5 - declare namespace matchers { 6 6 - interface TestingLibraryMatchers<E, R> { 7 7 - /** 8 8 - * @deprecated 9 9 - * since v1.9.0 10 10 - * @description 11 11 - * Assert whether a value is a DOM element, or not. Contrary to what its name implies, this matcher only checks 12 12 - * that you passed to it a valid DOM element. 13 13 - * 14 14 - * It does not have a clear definition of what "the DOM" is. Therefore, it does not check whether that element 15 15 - * is contained anywhere. 16 16 - * @see 17 17 - * [testing-library/jest-dom#toBeInTheDom](https://github.com/testing-library/jest-dom#toBeInTheDom) 18 18 - */ 19 19 - toBeInTheDOM(container?: HTMLElement | SVGElement): R 20 20 - /** 21 21 - * @description 22 22 - * Assert whether an element is present in the document or not. 23 23 - * @example 24 24 - * <svg data-testid="svg-element"></svg> 25 25 - * 26 26 - * expect(queryByTestId('svg-element')).toBeInTheDocument() 27 27 - * expect(queryByTestId('does-not-exist')).not.toBeInTheDocument() 28 28 - * @see 29 29 - * [testing-library/jest-dom#tobeinthedocument](https://github.com/testing-library/jest-dom#tobeinthedocument) 30 30 - */ 31 31 - toBeInTheDocument(): R 32 32 - /** 33 33 - * @description 34 34 - * This allows you to check if an element is currently visible to the user. 35 35 - * 36 36 - * An element is visible if **all** the following conditions are met: 37 37 - * * it does not have its css property display set to none 38 38 - * * it does not have its css property visibility set to either hidden or collapse 39 39 - * * it does not have its css property opacity set to 0 40 40 - * * its parent element is also visible (and so on up to the top of the DOM tree) 41 41 - * * it does not have the hidden attribute 42 42 - * * if `<details />` it has the open attribute 43 43 - * @example 44 44 - * <div 45 45 - * data-testid="zero-opacity" 46 46 - * style="opacity: 0" 47 47 - * > 48 48 - * Zero Opacity 49 49 - * </div> 50 50 - * 51 51 - * <div data-testid="visible">Visible Example</div> 52 52 - * 53 53 - * expect(getByTestId('zero-opacity')).not.toBeVisible() 54 54 - * expect(getByTestId('visible')).toBeVisible() 55 55 - * @see 56 56 - * [testing-library/jest-dom#tobevisible](https://github.com/testing-library/jest-dom#tobevisible) 57 57 - */ 58 58 - toBeVisible(): R 59 59 - /** 60 60 - * @deprecated 61 61 - * since v5.9.0 62 62 - * @description 63 63 - * Assert whether an element has content or not. 64 64 - * @example 65 65 - * <span data-testid="not-empty"> 66 66 - * <span data-testid="empty"></span> 67 67 - * </span> 68 68 - * 69 69 - * expect(getByTestId('empty')).toBeEmpty() 70 70 - * expect(getByTestId('not-empty')).not.toBeEmpty() 71 71 - * @see 72 72 - * [testing-library/jest-dom#tobeempty](https://github.com/testing-library/jest-dom#tobeempty) 73 73 - */ 74 74 - toBeEmpty(): R 75 75 - /** 76 76 - * @description 77 77 - * Assert whether an element has content or not. 78 78 - * @example 79 79 - * <span data-testid="not-empty"> 80 80 - * <span data-testid="empty"></span> 81 81 - * </span> 82 82 - * 83 83 - * expect(getByTestId('empty')).toBeEmptyDOMElement() 84 84 - * expect(getByTestId('not-empty')).not.toBeEmptyDOMElement() 85 85 - * @see 86 86 - * [testing-library/jest-dom#tobeemptydomelement](https://github.com/testing-library/jest-dom#tobeemptydomelement) 87 87 - */ 88 88 - toBeEmptyDOMElement(): R 89 89 - /** 90 90 - * @description 91 91 - * Allows you to check whether an element is disabled from the user's perspective. 92 92 - * 93 93 - * Matches if the element is a form control and the `disabled` attribute is specified on this element or the 94 94 - * element is a descendant of a form element with a `disabled` attribute. 95 95 - * @example 96 96 - * <button 97 97 - * data-testid="button" 98 98 - * type="submit" 99 99 - * disabled 100 100 - * > 101 101 - * submit 102 102 - * </button> 103 103 - * 104 104 - * expect(getByTestId('button')).toBeDisabled() 105 105 - * @see 106 106 - * [testing-library/jest-dom#tobedisabled](https://github.com/testing-library/jest-dom#tobedisabled) 107 107 - */ 108 108 - toBeDisabled(): R 109 109 - /** 110 110 - * @description 111 111 - * Allows you to check whether an element is not disabled from the user's perspective. 112 112 - * 113 113 - * Works like `not.toBeDisabled()`. 114 114 - * 115 115 - * Use this matcher to avoid double negation in your tests. 116 116 - * @example 117 117 - * <button 118 118 - * data-testid="button" 119 119 - * type="submit" 120 120 - * > 121 121 - * submit 122 122 - * </button> 123 123 - * 124 124 - * expect(getByTestId('button')).toBeEnabled() 125 125 - * @see 126 126 - * [testing-library/jest-dom#tobeenabled](https://github.com/testing-library/jest-dom#tobeenabled) 127 127 - */ 128 128 - toBeEnabled(): R 129 129 - /** 130 130 - * @description 131 131 - * Check if a form element, or the entire `form`, is currently invalid. 132 132 - * 133 133 - * An `input`, `select`, `textarea`, or `form` element is invalid if it has an `aria-invalid` attribute with no 134 134 - * value or a value of "true", or if the result of `checkValidity()` is false. 135 135 - * @example 136 136 - * <input data-testid="no-aria-invalid" /> 137 137 - * 138 138 - * <form data-testid="invalid-form"> 139 139 - * <input required /> 140 140 - * </form> 141 141 - * 142 142 - * expect(getByTestId('no-aria-invalid')).not.toBeInvalid() 143 143 - * expect(getByTestId('invalid-form')).toBeInvalid() 144 144 - * @see 145 145 - * [testing-library/jest-dom#tobeinvalid](https://github.com/testing-library/jest-dom#tobeinvalid) 146 146 - */ 147 147 - toBeInvalid(): R 148 148 - /** 149 149 - * @description 150 150 - * This allows you to check if a form element is currently required. 151 151 - * 152 152 - * An element is required if it is having a `required` or `aria-required="true"` attribute. 153 153 - * @example 154 154 - * <input data-testid="required-input" required /> 155 155 - * <div 156 156 - * data-testid="supported-role" 157 157 - * role="tree" 158 158 - * required /> 159 159 - * 160 160 - * expect(getByTestId('required-input')).toBeRequired() 161 161 - * expect(getByTestId('supported-role')).not.toBeRequired() 162 162 - * @see 163 163 - * [testing-library/jest-dom#toberequired](https://github.com/testing-library/jest-dom#toberequired) 164 164 - */ 165 165 - toBeRequired(): R 166 166 - /** 167 167 - * @description 168 168 - * Allows you to check if a form element is currently required. 169 169 - * 170 170 - * An `input`, `select`, `textarea`, or `form` element is invalid if it has an `aria-invalid` attribute with no 171 171 - * value or a value of "false", or if the result of `checkValidity()` is true. 172 172 - * @example 173 173 - * <input data-testid="aria-invalid" aria-invalid /> 174 174 - * 175 175 - * <form data-testid="valid-form"> 176 176 - * <input /> 177 177 - * </form> 178 178 - * 179 179 - * expect(getByTestId('no-aria-invalid')).not.toBeValid() 180 180 - * expect(getByTestId('invalid-form')).toBeInvalid() 181 181 - * @see 182 182 - * [testing-library/jest-dom#tobevalid](https://github.com/testing-library/jest-dom#tobevalid) 183 183 - */ 184 184 - toBeValid(): R 185 185 - /** 186 186 - * @description 187 187 - * Allows you to assert whether an element contains another element as a descendant or not. 188 188 - * @example 189 189 - * <span data-testid="ancestor"> 190 190 - * <span data-testid="descendant"></span> 191 191 - * </span> 192 192 - * 193 193 - * const ancestor = getByTestId('ancestor') 194 194 - * const descendant = getByTestId('descendant') 195 195 - * const nonExistentElement = getByTestId('does-not-exist') 196 196 - * expect(ancestor).toContainElement(descendant) 197 197 - * expect(descendant).not.toContainElement(ancestor) 198 198 - * expect(ancestor).not.toContainElement(nonExistentElement) 199 199 - * @see 200 200 - * [testing-library/jest-dom#tocontainelement](https://github.com/testing-library/jest-dom#tocontainelement) 201 201 - */ 202 202 - toContainElement(element: HTMLElement | SVGElement | null): R 203 203 - /** 204 204 - * @description 205 205 - * Assert whether a string representing a HTML element is contained in another element. 206 206 - * @example 207 207 - * <span data-testid="parent"><span data-testid="child"></span></span> 208 208 - * 209 209 - * expect(getByTestId('parent')).toContainHTML('<span data-testid="child"></span>') 210 210 - * @see 211 211 - * [testing-library/jest-dom#tocontainhtml](https://github.com/testing-library/jest-dom#tocontainhtml) 212 212 - */ 213 213 - toContainHTML(htmlText: string): R 214 214 - /** 215 215 - * @description 216 216 - * Allows you to check if a given element has an attribute or not. 217 217 - * 218 218 - * You can also optionally check that the attribute has a specific expected value or partial match using 219 219 - * [expect.stringContaining](https://jestjs.io/docs/en/expect.html#expectnotstringcontainingstring) or 220 220 - * [expect.stringMatching](https://jestjs.io/docs/en/expect.html#expectstringmatchingstring-regexp). 221 221 - * @example 222 222 - * <button 223 223 - * data-testid="ok-button" 224 224 - * type="submit" 225 225 - * disabled 226 226 - * > 227 227 - * ok 228 228 - * </button> 229 229 - * 230 230 - * expect(button).toHaveAttribute('disabled') 231 231 - * expect(button).toHaveAttribute('type', 'submit') 232 232 - * expect(button).not.toHaveAttribute('type', 'button') 233 233 - * @see 234 234 - * [testing-library/jest-dom#tohaveattribute](https://github.com/testing-library/jest-dom#tohaveattribute) 235 235 - */ 236 236 - toHaveAttribute(attr: string, value?: unknown): R 237 237 - /** 238 238 - * @description 239 239 - * Check whether the given element has certain classes within its `class` attribute. 240 240 - * 241 241 - * You must provide at least one class, unless you are asserting that an element does not have any classes. 242 242 - * @example 243 243 - * <button 244 244 - * data-testid="delete-button" 245 245 - * class="btn xs btn-danger" 246 246 - * > 247 247 - * delete item 248 248 - * </button> 249 249 - * 250 250 - * <div data-testid="no-classes">no classes</div> 251 251 - * 252 252 - * const deleteButton = getByTestId('delete-button') 253 253 - * const noClasses = getByTestId('no-classes') 254 254 - * expect(deleteButton).toHaveClass('btn') 255 255 - * expect(deleteButton).toHaveClass('btn-danger xs') 256 256 - * expect(deleteButton).toHaveClass(/danger/, 'xs') 257 257 - * expect(deleteButton).toHaveClass('btn xs btn-danger', {exact: true}) 258 258 - * expect(deleteButton).not.toHaveClass('btn xs btn-danger', {exact: true}) 259 259 - * expect(noClasses).not.toHaveClass() 260 260 - * @see 261 261 - * [testing-library/jest-dom#tohaveclass](https://github.com/testing-library/jest-dom#tohaveclass) 262 262 - */ 263 263 - toHaveClass(...classNames: (string | RegExp)[] | [string, options?: {exact: boolean}]): R 264 264 - /** 265 265 - * @description 266 266 - * This allows you to check whether the given form element has the specified displayed value (the one the 267 267 - * end user will see). It accepts <input>, <select> and <textarea> elements with the exception of <input type="checkbox"> 268 268 - * and <input type="radio">, which can be meaningfully matched only using toBeChecked or toHaveFormValues. 269 269 - * @example 270 270 - * <label for="input-example">First name</label> 271 271 - * <input type="text" id="input-example" value="Luca" /> 272 272 - * 273 273 - * <label for="textarea-example">Description</label> 274 274 - * <textarea id="textarea-example">An example description here.</textarea> 275 275 - * 276 276 - * <label for="single-select-example">Fruit</label> 277 277 - * <select id="single-select-example"> 278 278 - * <option value="">Select a fruit...</option> 279 279 - * <option value="banana">Banana</option> 280 280 - * <option value="ananas">Ananas</option> 281 281 - * <option value="avocado">Avocado</option> 282 282 - * </select> 283 283 - * 284 284 - * <label for="multiple-select-example">Fruits</label> 285 285 - * <select id="multiple-select-example" multiple> 286 286 - * <option value="">Select a fruit...</option> 287 287 - * <option value="banana" selected>Banana</option> 288 288 - * <option value="ananas">Ananas</option> 289 289 - * <option value="avocado" selected>Avocado</option> 290 290 - * </select> 291 291 - * 292 292 - * const input = screen.getByLabelText('First name') 293 293 - * const textarea = screen.getByLabelText('Description') 294 294 - * const selectSingle = screen.getByLabelText('Fruit') 295 295 - * const selectMultiple = screen.getByLabelText('Fruits') 296 296 - * 297 297 - * expect(input).toHaveDisplayValue('Luca') 298 298 - * expect(textarea).toHaveDisplayValue('An example description here.') 299 299 - * expect(selectSingle).toHaveDisplayValue('Select a fruit...') 300 300 - * expect(selectMultiple).toHaveDisplayValue(['Banana', 'Avocado']) 301 301 - * 302 302 - * @see 303 303 - * [testing-library/jest-dom#tohavedisplayvalue](https://github.com/testing-library/jest-dom#tohavedisplayvalue) 304 304 - */ 305 305 - toHaveDisplayValue(value: string | RegExp | Array<string | RegExp>): R 306 306 - /** 307 307 - * @description 308 308 - * Assert whether an element has focus or not. 309 309 - * @example 310 310 - * <div> 311 311 - * <input type="text" data-testid="element-to-focus" /> 312 312 - * </div> 313 313 - * 314 314 - * const input = getByTestId('element-to-focus') 315 315 - * input.focus() 316 316 - * expect(input).toHaveFocus() 317 317 - * input.blur() 318 318 - * expect(input).not.toHaveFocus() 319 319 - * @see 320 320 - * [testing-library/jest-dom#tohavefocus](https://github.com/testing-library/jest-dom#tohavefocus) 321 321 - */ 322 322 - toHaveFocus(): R 323 323 - /** 324 324 - * @description 325 325 - * Check if a form or fieldset contains form controls for each given name, and having the specified value. 326 326 - * 327 327 - * Can only be invoked on a form or fieldset element. 328 328 - * @example 329 329 - * <form data-testid="login-form"> 330 330 - * <input type="text" name="username" value="jane.doe" /> 331 331 - * <input type="password" name="password" value="123" /> 332 332 - * <input type="checkbox" name="rememberMe" checked /> 333 333 - * <button type="submit">Sign in</button> 334 334 - * </form> 335 335 - * 336 336 - * expect(getByTestId('login-form')).toHaveFormValues({ 337 337 - * username: 'jane.doe', 338 338 - * rememberMe: true, 339 339 - * }) 340 340 - * @see 341 341 - * [testing-library/jest-dom#tohaveformvalues](https://github.com/testing-library/jest-dom#tohaveformvalues) 342 342 - */ 343 343 - toHaveFormValues(expectedValues: Record<string, unknown>): R 344 344 - /** 345 345 - * @description 346 346 - * Check if an element has specific css properties with specific values applied. 347 347 - * 348 348 - * Only matches if the element has *all* the expected properties applied, not just some of them. 349 349 - * @example 350 350 - * <button 351 351 - * data-testid="submit-button" 352 352 - * style="background-color: green; display: none" 353 353 - * > 354 354 - * submit 355 355 - * </button> 356 356 - * 357 357 - * const button = getByTestId('submit-button') 358 358 - * expect(button).toHaveStyle('background-color: green') 359 359 - * expect(button).toHaveStyle({ 360 360 - * 'background-color': 'green', 361 361 - * display: 'none' 362 362 - * }) 363 363 - * @see 364 364 - * [testing-library/jest-dom#tohavestyle](https://github.com/testing-library/jest-dom#tohavestyle) 365 365 - */ 366 366 - toHaveStyle(css: string | Record<string, unknown>): R 367 367 - /** 368 368 - * @description 369 369 - * Check whether the given element has a text content or not. 370 370 - * 371 371 - * When a string argument is passed through, it will perform a partial case-sensitive match to the element 372 372 - * content. 373 373 - * 374 374 - * To perform a case-insensitive match, you can use a RegExp with the `/i` modifier. 375 375 - * 376 376 - * If you want to match the whole content, you can use a RegExp to do it. 377 377 - * @example 378 378 - * <span data-testid="text-content">Text Content</span> 379 379 - * 380 380 - * const element = getByTestId('text-content') 381 381 - * expect(element).toHaveTextContent('Content') 382 382 - * // to match the whole content 383 383 - * expect(element).toHaveTextContent(/^Text Content$/) 384 384 - * // to use case-insensitive match 385 385 - * expect(element).toHaveTextContent(/content$/i) 386 386 - * expect(element).not.toHaveTextContent('content') 387 387 - * @see 388 388 - * [testing-library/jest-dom#tohavetextcontent](https://github.com/testing-library/jest-dom#tohavetextcontent) 389 389 - */ 390 390 - toHaveTextContent( 391 391 - text: string | RegExp, 392 392 - options?: {normalizeWhitespace: boolean}, 393 393 - ): R 394 394 - /** 395 395 - * @description 396 396 - * Check whether the given form element has the specified value. 397 397 - * 398 398 - * Accepts `<input>`, `<select>`, and `<textarea>` elements with the exception of `<input type="checkbox">` and 399 399 - * `<input type="radiobox">`, which can be matched only using 400 400 - * [toBeChecked](https://github.com/testing-library/jest-dom#tobechecked) or 401 401 - * [toHaveFormValues](https://github.com/testing-library/jest-dom#tohaveformvalues). 402 402 - * @example 403 403 - * <input 404 404 - * type="number" 405 405 - * value="5" 406 406 - * data-testid="input-number" /> 407 407 - * 408 408 - * const numberInput = getByTestId('input-number') 409 409 - * expect(numberInput).toHaveValue(5) 410 410 - * @see 411 411 - * [testing-library/jest-dom#tohavevalue](https://github.com/testing-library/jest-dom#tohavevalue) 412 412 - */ 413 413 - toHaveValue(value?: string | string[] | number | null): R 414 414 - /** 415 415 - * @description 416 416 - * Assert whether the given element is checked. 417 417 - * 418 418 - * It accepts an `input` of type `checkbox` or `radio` and elements with a `role` of `radio` with a valid 419 419 - * `aria-checked` attribute of "true" or "false". 420 420 - * @example 421 421 - * <input 422 422 - * type="checkbox" 423 423 - * checked 424 424 - * data-testid="input-checkbox" /> 425 425 - * <input 426 426 - * type="radio" 427 427 - * value="foo" 428 428 - * data-testid="input-radio" /> 429 429 - * 430 430 - * const inputCheckbox = getByTestId('input-checkbox') 431 431 - * const inputRadio = getByTestId('input-radio') 432 432 - * expect(inputCheckbox).toBeChecked() 433 433 - * expect(inputRadio).not.toBeChecked() 434 434 - * @see 435 435 - * [testing-library/jest-dom#tobechecked](https://github.com/testing-library/jest-dom#tobechecked) 436 436 - */ 437 437 - toBeChecked(): R 438 438 - /** 439 439 - * @deprecated 440 440 - * since v5.14.1 441 441 - * @description 442 442 - * Check the accessible description for an element. 443 443 - * This allows you to check whether the given element has a description or not. 444 444 - * 445 445 - * An element gets its description via the 446 446 - * [`aria-describedby` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute). 447 447 - * Set this to the `id` of one or more other elements. These elements may be nested 448 448 - * inside, be outside, or a sibling of the passed in element. 449 449 - * 450 450 - * Whitespace is normalized. Using multiple ids will 451 451 - * [join the referenced elements’ text content separated by a space](https://www.w3.org/TR/accname-1.1/#mapping_additional_nd_description). 452 452 - * 453 453 - * When a `string` argument is passed through, it will perform a whole 454 454 - * case-sensitive match to the description text. 455 455 - * 456 456 - * To perform a case-insensitive match, you can use a `RegExp` with the `/i` 457 457 - * modifier. 458 458 - * 459 459 - * To perform a partial match, you can pass a `RegExp` or use 460 460 - * `expect.stringContaining("partial string")`. 461 461 - * 462 462 - * @example 463 463 - * <button aria-label="Close" aria-describedby="description-close"> 464 464 - * X 465 465 - * </button> 466 466 - * <div id="description-close"> 467 467 - * Closing will discard any changes 468 468 - * </div> 469 469 - * 470 470 - * <button>Delete</button> 471 471 - * 472 472 - * const closeButton = getByRole('button', {name: 'Close'}) 473 473 - * 474 474 - * expect(closeButton).toHaveDescription('Closing will discard any changes') 475 475 - * expect(closeButton).toHaveDescription(/will discard/) // to partially match 476 476 - * expect(closeButton).toHaveDescription(expect.stringContaining('will discard')) // to partially match 477 477 - * expect(closeButton).toHaveDescription(/^closing/i) // to use case-insensitive match 478 478 - * expect(closeButton).not.toHaveDescription('Other description') 479 479 - * 480 480 - * const deleteButton = getByRole('button', {name: 'Delete'}) 481 481 - * expect(deleteButton).not.toHaveDescription() 482 482 - * expect(deleteButton).toHaveDescription('') // Missing or empty description always becomes a blank string 483 483 - * @see 484 484 - * [testing-library/jest-dom#tohavedescription](https://github.com/testing-library/jest-dom#tohavedescription) 485 485 - */ 486 486 - toHaveDescription(text?: string | RegExp | E): R 487 487 - /** 488 488 - * @description 489 489 - * This allows to assert that an element has the expected [accessible description](https://w3c.github.io/accname/). 490 490 - * 491 491 - * You can pass the exact string of the expected accessible description, or you can make a 492 492 - * partial match passing a regular expression, or by using either 493 493 - * [expect.stringContaining](https://jestjs.io/docs/en/expect.html#expectnotstringcontainingstring) 494 494 - * or [expect.stringMatching](https://jestjs.io/docs/en/expect.html#expectstringmatchingstring-regexp). 495 495 - * @example 496 496 - * <a data-testid="link" href="/" aria-label="Home page" title="A link to start over">Start</a> 497 497 - * <a data-testid="extra-link" href="/about" aria-label="About page">About</a> 498 498 - * <img src="avatar.jpg" data-testid="avatar" alt="User profile pic" /> 499 499 - * <img src="logo.jpg" data-testid="logo" alt="Company logo" aria-describedby="t1" /> 500 500 - * <span id="t1" role="presentation">The logo of Our Company</span> 501 501 - * 502 502 - * expect(getByTestId('link')).toHaveAccessibleDescription() 503 503 - * expect(getByTestId('link')).toHaveAccessibleDescription('A link to start over') 504 504 - * expect(getByTestId('link')).not.toHaveAccessibleDescription('Home page') 505 505 - * expect(getByTestId('extra-link')).not.toHaveAccessibleDescription() 506 506 - * expect(getByTestId('avatar')).not.toHaveAccessibleDescription() 507 507 - * expect(getByTestId('logo')).not.toHaveAccessibleDescription('Company logo') 508 508 - * expect(getByTestId('logo')).toHaveAccessibleDescription('The logo of Our Company') 509 509 - * @see 510 510 - * [testing-library/jest-dom#tohaveaccessibledescription](https://github.com/testing-library/jest-dom#tohaveaccessibledescription) 511 511 - */ 512 512 - toHaveAccessibleDescription(text?: string | RegExp | E): R 5 5 + export interface TestingLibraryMatchers<E, R> { 6 6 + /** 7 7 + * @description 8 8 + * Assert whether an element is present in the document or not. 9 9 + * @example 10 10 + * <svg data-testid="svg-element"></svg> 11 11 + * 12 12 + * await expect.element(page.getByTestId('svg-element')).toBeInTheDocument() 13 13 + * await expect.element(page.getByTestId('does-not-exist')).not.toBeInTheDocument() 14 14 + * @see https://vitest.dev/guide/browser/assertion-api#tobeinthedocument 15 15 + */ 16 16 + toBeInTheDocument(): R 17 17 + /** 18 18 + * @description 19 19 + * This allows you to check if an element is currently visible to the user. 20 20 + * 21 21 + * An element is visible if **all** the following conditions are met: 22 22 + * * it does not have its css property display set to none 23 23 + * * it does not have its css property visibility set to either hidden or collapse 24 24 + * * it does not have its css property opacity set to 0 25 25 + * * its parent element is also visible (and so on up to the top of the DOM tree) 26 26 + * * it does not have the hidden attribute 27 27 + * * if `<details />` it has the open attribute 28 28 + * @example 29 29 + * <div 30 30 + * data-testid="zero-opacity" 31 31 + * style="opacity: 0" 32 32 + * > 33 33 + * Zero Opacity 34 34 + * </div> 35 35 + * 36 36 + * <div data-testid="visible">Visible Example</div> 37 37 + * 38 38 + * await expect.element(page.getByTestId('zero-opacity')).not.toBeVisible() 39 39 + * await expect.element(page.getByTestId('visible')).toBeVisible() 40 40 + * @see https://vitest.dev/guide/browser/assertion-api#tobevisible 41 41 + */ 42 42 + toBeVisible(): R 43 43 + /** 44 44 + * @description 45 45 + * Assert whether an element has content or not. 46 46 + * @example 47 47 + * <span data-testid="not-empty"> 48 48 + * <span data-testid="empty"></span> 49 49 + * </span> 50 50 + * 51 51 + * await expect.element(page.getByTestId('empty')).toBeEmptyDOMElement() 52 52 + * await expect.element(page.getByTestId('not-empty')).not.toBeEmptyDOMElement() 53 53 + * @see https://vitest.dev/guide/browser/assertion-api#tobeemptydomelement 54 54 + */ 55 55 + toBeEmptyDOMElement(): R 56 56 + /** 57 57 + * @description 58 58 + * Allows you to check whether an element is disabled from the user's perspective. 59 59 + * 60 60 + * Matches if the element is a form control and the `disabled` attribute is specified on this element or the 61 61 + * element is a descendant of a form element with a `disabled` attribute. 62 62 + * @example 63 63 + * <button 64 64 + * data-testid="button" 65 65 + * type="submit" 66 66 + * disabled 67 67 + * > 68 68 + * submit 69 69 + * </button> 70 70 + * 71 71 + * await expect.element(page.getByTestId('button')).toBeDisabled() 72 72 + * @see https://vitest.dev/guide/browser/assertion-api#tobedisabled 73 73 + */ 74 74 + toBeDisabled(): R 75 75 + /** 76 76 + * @description 77 77 + * Allows you to check whether an element is not disabled from the user's perspective. 78 78 + * 79 79 + * Works like `not.toBeDisabled()`. 80 80 + * 81 81 + * Use this matcher to avoid double negation in your tests. 82 82 + * @example 83 83 + * <button 84 84 + * data-testid="button" 85 85 + * type="submit" 86 86 + * > 87 87 + * submit 88 88 + * </button> 89 89 + * 90 90 + * await expect.element(page.getByTestId('button')).toBeEnabled() 91 91 + * @see https://vitest.dev/guide/browser/assertion-api#tobeenabled 92 92 + */ 93 93 + toBeEnabled(): R 94 94 + /** 95 95 + * @description 96 96 + * Check if a form element, or the entire `form`, is currently invalid. 97 97 + * 98 98 + * An `input`, `select`, `textarea`, or `form` element is invalid if it has an `aria-invalid` attribute with no 99 99 + * value or a value of "true", or if the result of `checkValidity()` is false. 100 100 + * @example 101 101 + * <input data-testid="no-aria-invalid" /> 102 102 + * 103 103 + * <form data-testid="invalid-form"> 104 104 + * <input required /> 105 105 + * </form> 106 106 + * 107 107 + * await expect(page.getByTestId('no-aria-invalid')).not.toBeInvalid() 108 108 + * await expect(page.getByTestId('invalid-form')).toBeInvalid() 109 109 + * @see https://vitest.dev/guide/browser/assertion-api#tobeinvalid 110 110 + */ 111 111 + toBeInvalid(): R 112 112 + /** 113 113 + * @description 114 114 + * This allows you to check if a form element is currently required. 115 115 + * 116 116 + * An element is required if it is having a `required` or `aria-required="true"` attribute. 117 117 + * @example 118 118 + * <input data-testid="required-input" required /> 119 119 + * <div 120 120 + * data-testid="supported-role" 121 121 + * role="tree" 122 122 + * required /> 123 123 + * 124 124 + * await expect.element(page.getByTestId('required-input')).toBeRequired() 125 125 + * await expect.element(page.getByTestId('supported-role')).not.toBeRequired() 126 126 + * @see https://vitest.dev/guide/browser/assertion-api#toberequired 127 127 + */ 128 128 + toBeRequired(): R 129 129 + /** 130 130 + * @description 131 131 + * Allows you to check if a form element is currently required. 132 132 + * 133 133 + * An `input`, `select`, `textarea`, or `form` element is invalid if it has an `aria-invalid` attribute with no 134 134 + * value or a value of "false", or if the result of `checkValidity()` is true. 135 135 + * @example 136 136 + * <input data-testid="aria-invalid" aria-invalid /> 137 137 + * 138 138 + * <form data-testid="valid-form"> 139 139 + * <input /> 140 140 + * </form> 141 141 + * 142 142 + * await expect.element(page.getByTestId('no-aria-invalid')).not.toBeValid() 143 143 + * await expect.element(page.getByTestId('invalid-form')).toBeInvalid() 144 144 + * @see https://vitest.dev/guide/browser/assertion-api#tobevalid 145 145 + */ 146 146 + toBeValid(): R 147 147 + /** 148 148 + * @description 149 149 + * Allows you to assert whether an element contains another element as a descendant or not. 150 150 + * @example 151 151 + * <span data-testid="ancestor"> 152 152 + * <span data-testid="descendant"></span> 153 153 + * </span> 154 154 + * 155 155 + * const ancestor = page.getByTestId('ancestor') 156 156 + * const descendant = page.getByTestId('descendant') 157 157 + * const nonExistentElement = page.getByTestId('does-not-exist') 158 158 + * await expect.element(ancestor).toContainElement(descendant) 159 159 + * await expect.element(descendant).not.toContainElement(ancestor) 160 160 + * await expect.element(ancestor).not.toContainElement(nonExistentElement) 161 161 + * @see https://vitest.dev/guide/browser/assertion-api#tocontainelement 162 162 + */ 163 163 + toContainElement(element: HTMLElement | SVGElement | null): R 164 164 + /** 165 165 + * @description 166 166 + * Assert whether a string representing a HTML element is contained in another element. 167 167 + * @example 168 168 + * <span data-testid="parent"><span data-testid="child"></span></span> 169 169 + * 170 170 + * const parent = page.getByTestId('parent') 171 171 + * await expect.element(parent).toContainHTML('<span data-testid="child"></span>') 172 172 + * @see https://vitest.dev/guide/browser/assertion-api#tocontainhtml 173 173 + */ 174 174 + toContainHTML(htmlText: string): R 175 175 + /** 176 176 + * @description 177 177 + * Allows you to check if a given element has an attribute or not. 178 178 + * 179 179 + * You can also optionally check that the attribute has a specific expected value or partial match using 180 180 + * [expect.stringContaining](https://jestjs.io/docs/en/expect.html#expectnotstringcontainingstring) or 181 181 + * [expect.stringMatching](https://jestjs.io/docs/en/expect.html#expectstringmatchingstring-regexp). 182 182 + * @example 183 183 + * <button 184 184 + * data-testid="ok-button" 185 185 + * type="submit" 186 186 + * disabled 187 187 + * > 188 188 + * ok 189 189 + * </button> 190 190 + * 191 191 + * await expect.element(button).toHaveAttribute('disabled') 192 192 + * await expect.element(button).toHaveAttribute('type', 'submit') 193 193 + * await expect.element(button).not.toHaveAttribute('type', 'button') 194 194 + * @see https://vitest.dev/guide/browser/assertion-api#tohaveattribute 195 195 + */ 196 196 + toHaveAttribute(attr: string, value?: unknown): R 197 197 + /** 198 198 + * @description 199 199 + * Check whether the given element has certain classes within its `class` attribute. 200 200 + * 201 201 + * You must provide at least one class, unless you are asserting that an element does not have any classes. 202 202 + * @example 203 203 + * <button 204 204 + * data-testid="delete-button" 205 205 + * class="btn xs btn-danger" 206 206 + * > 207 207 + * delete item 208 208 + * </button> 209 209 + * 210 210 + * <div data-testid="no-classes">no classes</div> 211 211 + * 212 212 + * const deleteButton = page.getByTestId('delete-button') 213 213 + * const noClasses = page.getByTestId('no-classes') 214 214 + * await expect.element(deleteButton).toHaveClass('btn') 215 215 + * await expect.element(deleteButton).toHaveClass('btn-danger xs') 216 216 + * await expect.element(deleteButton).toHaveClass(/danger/, 'xs') 217 217 + * await expect.element(deleteButton).toHaveClass('btn xs btn-danger', {exact: true}) 218 218 + * await expect.element(deleteButton).not.toHaveClass('btn xs btn-danger', {exact: true}) 219 219 + * await expect.element(noClasses).not.toHaveClass() 220 220 + * @see https://vitest.dev/guide/browser/assertion-api#tohaveclass 221 221 + */ 222 222 + toHaveClass(...classNames: 223 223 + | (string | RegExp)[] 224 224 + | [string, options?: {exact: boolean}] 225 225 + | [string, string, options?: {exact: boolean}] 226 226 + | [string, string, string, options?: {exact: boolean}] 227 227 + | [string, string, string, string, options?: {exact: boolean}] 228 228 + | [string, string, string, string, string, options?: {exact: boolean}] 229 229 + | [string, string, string, string, string, string, options?: {exact: boolean}] 230 230 + | [string, string, string, string, string, string, string, options?: {exact: boolean}] 231 231 + | [string, string, string, string, string, string, string, string, options?: {exact: boolean}] 232 232 + | [string, string, string, string, string, string, string, string, string, options?: {exact: boolean}] 233 233 + ): R 234 234 + /** 235 235 + * @description 236 236 + * This allows you to check whether the given form element has the specified displayed value (the one the 237 237 + * end user will see). It accepts <input>, <select> and <textarea> elements with the exception of <input type="checkbox"> 238 238 + * and <input type="radio">, which can be meaningfully matched only using toBeChecked or toHaveFormValues. 239 239 + * @example 240 240 + * <label for="input-example">First name</label> 241 241 + * <input type="text" id="input-example" value="Luca" /> 242 242 + * 243 243 + * <label for="textarea-example">Description</label> 244 244 + * <textarea id="textarea-example">An example description here.</textarea> 245 245 + * 246 246 + * <label for="single-select-example">Fruit</label> 247 247 + * <select id="single-select-example"> 248 248 + * <option value="">Select a fruit...</option> 249 249 + * <option value="banana">Banana</option> 250 250 + * <option value="ananas">Ananas</option> 251 251 + * <option value="avocado">Avocado</option> 252 252 + * </select> 253 253 + * 254 254 + * <label for="multiple-select-example">Fruits</label> 255 255 + * <select id="multiple-select-example" multiple> 256 256 + * <option value="">Select a fruit...</option> 257 257 + * <option value="banana" selected>Banana</option> 258 258 + * <option value="ananas">Ananas</option> 259 259 + * <option value="avocado" selected>Avocado</option> 260 260 + * </select> 261 261 + * 262 262 + * const input = page.getByLabelText('First name') 263 263 + * const textarea = page.getByLabelText('Description') 264 264 + * const selectSingle = page.getByLabelText('Fruit') 265 265 + * const selectMultiple = page.getByLabelText('Fruits') 266 266 + * 267 267 + * await expect.element(input).toHaveDisplayValue('Luca') 268 268 + * await expect.element(textarea).toHaveDisplayValue('An example description here.') 269 269 + * await expect.element(selectSingle).toHaveDisplayValue('Select a fruit...') 270 270 + * await expect.element(selectMultiple).toHaveDisplayValue(['Banana', 'Avocado']) 271 271 + * 272 272 + * @see https://vitest.dev/guide/browser/assertion-api#tohavedisplayvalue 273 273 + */ 274 274 + toHaveDisplayValue(value: string | number | RegExp | Array<string | RegExp | number>): R 275 275 + /** 276 276 + * @description 277 277 + * Assert whether an element has focus or not. 278 278 + * @example 279 279 + * <div> 280 280 + * <input type="text" data-testid="element-to-focus" /> 281 281 + * </div> 282 282 + * 283 283 + * const input = page.getByTestId('element-to-focus') 284 284 + * input.element().focus() 285 285 + * await expect.element(input).toHaveFocus() 286 286 + * input.element().blur() 287 287 + * await expect.element(input).not.toHaveFocus() 288 288 + * @see https://vitest.dev/guide/browser/assertion-api#tohavefocus 289 289 + */ 290 290 + toHaveFocus(): R 291 291 + /** 292 292 + * @description 293 293 + * Check if a form or fieldset contains form controls for each given name, and having the specified value. 294 294 + * 295 295 + * Can only be invoked on a form or fieldset element. 296 296 + * @example 297 297 + * <form data-testid="login-form"> 298 298 + * <input type="text" name="username" value="jane.doe" /> 299 299 + * <input type="password" name="password" value="123" /> 300 300 + * <input type="checkbox" name="rememberMe" checked /> 301 301 + * <button type="submit">Sign in</button> 302 302 + * </form> 303 303 + * 304 304 + * await expect.element(page.getByTestId('login-form')).toHaveFormValues({ 305 305 + * username: 'jane.doe', 306 306 + * rememberMe: true, 307 307 + * }) 308 308 + * @see https://vitest.dev/guide/browser/assertion-api#tohaveformvalues 309 309 + */ 310 310 + toHaveFormValues(expectedValues: Record<string, unknown>): R 311 311 + /** 312 312 + * @description 313 313 + * Check if an element has specific css properties with specific values applied. 314 314 + * 315 315 + * Only matches if the element has *all* the expected properties applied, not just some of them. 316 316 + * @example 317 317 + * <button 318 318 + * data-testid="submit-button" 319 319 + * style="background-color: green; display: none" 320 320 + * > 321 321 + * submit 322 322 + * </button> 323 323 + * 324 324 + * const button = page.getByTestId('submit-button') 325 325 + * await expect.element(button).toHaveStyle('background-color: green') 326 326 + * await expect.element(button).toHaveStyle({ 327 327 + * 'background-color': 'green', 328 328 + * display: 'none' 329 329 + * }) 330 330 + * @see https://vitest.dev/guide/browser/assertion-api#tohavestyle 331 331 + */ 332 332 + toHaveStyle(css: string | Partial<CSSStyleDeclaration>): R 333 333 + /** 334 334 + * @description 335 335 + * Check whether the given element has a text content or not. 336 336 + * 337 337 + * When a string argument is passed through, it will perform a partial case-sensitive match to the element 338 338 + * content. 339 339 + * 340 340 + * To perform a case-insensitive match, you can use a RegExp with the `/i` modifier. 341 341 + * 342 342 + * If you want to match the whole content, you can use a RegExp to do it. 343 343 + * @example 344 344 + * <span data-testid="text-content">Text Content</span> 345 345 + * 346 346 + * const element = page.getByTestId('text-content') 347 347 + * await expect.element(element).toHaveTextContent('Content') 348 348 + * // to match the whole content 349 349 + * await expect.element(element).toHaveTextContent(/^Text Content$/) 350 350 + * // to use case-insensitive match 351 351 + * await expect.element(element).toHaveTextContent(/content$/i) 352 352 + * await expect.element(element).not.toHaveTextContent('content') 353 353 + * @see https://vitest.dev/guide/browser/assertion-api#tohavetextcontent 354 354 + */ 355 355 + toHaveTextContent( 356 356 + text: string | number | RegExp, 357 357 + options?: {normalizeWhitespace: boolean}, 358 358 + ): R 359 359 + /** 360 360 + * @description 361 361 + * Check whether the given form element has the specified value. 362 362 + * 363 363 + * Accepts `<input>`, `<select>`, and `<textarea>` elements with the exception of `<input type="checkbox">` and 364 364 + * `<input type="radiobox">`, which can be matched only using 365 365 + * [toBeChecked](https://vitest.dev/guide/browser/assertion-api#tobechecked) or 366 366 + * [toHaveFormValues](https://vitest.dev/guide/browser/assertion-api#tohaveformvalues). 367 367 + * @example 368 368 + * <input 369 369 + * type="number" 370 370 + * value="5" 371 371 + * data-testid="input-number" /> 372 372 + * 373 373 + * const numberInput = page.getByTestId('input-number') 374 374 + * await expect.element(numberInput).toHaveValue(5) 375 375 + * @see https://vitest.dev/guide/browser/assertion-api#tohavevalue 376 376 + */ 377 377 + toHaveValue(value?: string | string[] | number | null): R 378 378 + /** 379 379 + * @description 380 380 + * Assert whether the given element is checked. 381 381 + * 382 382 + * It accepts an `input` of type `checkbox` or `radio` and elements with a `role` of `radio` with a valid 383 383 + * `aria-checked` attribute of "true" or "false". 384 384 + * @example 385 385 + * <input 386 386 + * type="checkbox" 387 387 + * checked 388 388 + * data-testid="input-checkbox" /> 389 389 + * <input 390 390 + * type="radio" 391 391 + * value="foo" 392 392 + * data-testid="input-radio" /> 393 393 + * 394 394 + * const inputCheckbox = page.getByTestId('input-checkbox') 395 395 + * const inputRadio = page.getByTestId('input-radio') 396 396 + * await expect.element(inputCheckbox).toBeChecked() 397 397 + * await expect.element(inputRadio).not.toBeChecked() 398 398 + * @see https://vitest.dev/guide/browser/assertion-api#tobechecked 399 399 + */ 400 400 + toBeChecked(): R 401 401 + /** 402 402 + * @description 403 403 + * This allows to assert that an element has the expected [accessible description](https://w3c.github.io/accname/). 404 404 + * 405 405 + * You can pass the exact string of the expected accessible description, or you can make a 406 406 + * partial match passing a regular expression, or by using either 407 407 + * [expect.stringContaining](https://jestjs.io/docs/en/expect.html#expectnotstringcontainingstring) 408 408 + * or [expect.stringMatching](https://jestjs.io/docs/en/expect.html#expectstringmatchingstring-regexp). 409 409 + * @example 410 410 + * <a data-testid="link" href="/" aria-label="Home page" title="A link to start over">Start</a> 411 411 + * <a data-testid="extra-link" href="/about" aria-label="About page">About</a> 412 412 + * <img src="avatar.jpg" data-testid="avatar" alt="User profile pic" /> 413 413 + * <img src="logo.jpg" data-testid="logo" alt="Company logo" aria-describedby="t1" /> 414 414 + * <span id="t1" role="presentation">The logo of Our Company</span> 415 415 + * 416 416 + * await expect.element(page.getByTestId('link')).toHaveAccessibleDescription() 417 417 + * await expect.element(page.getByTestId('link')).toHaveAccessibleDescription('A link to start over') 418 418 + * await expect.element(page.getByTestId('link')).not.toHaveAccessibleDescription('Home page') 419 419 + * await expect.element(page.getByTestId('extra-link')).not.toHaveAccessibleDescription() 420 420 + * await expect.element(page.getByTestId('avatar')).not.toHaveAccessibleDescription() 421 421 + * await expect.element(page.getByTestId('logo')).not.toHaveAccessibleDescription('Company logo') 422 422 + * await expect.element(page.getByTestId('logo')).toHaveAccessibleDescription('The logo of Our Company') 423 423 + * @see https://vitest.dev/guide/browser/assertion-api#tohaveaccessibledescription 424 424 + */ 425 425 + toHaveAccessibleDescription(text?: string | RegExp | E): R 513 426 514 514 - /** 515 515 - * @description 516 516 - * This allows you to assert that an element has the expected 517 517 - * [accessible error message](https://w3c.github.io/aria/#aria-errormessage). 518 518 - * 519 519 - * You can pass the exact string of the expected accessible error message. 520 520 - * Alternatively, you can perform a partial match by passing a regular expression 521 521 - * or by using either 522 522 - * [expect.stringContaining](https://jestjs.io/docs/en/expect.html#expectnotstringcontainingstring) 523 523 - * or [expect.stringMatching](https://jestjs.io/docs/en/expect.html#expectstringmatchingstring-regexp). 524 524 - * 525 525 - * @example 526 526 - * <input aria-label="Has Error" aria-invalid="true" aria-errormessage="error-message" /> 527 527 - * <div id="error-message" role="alert">This field is invalid</div> 528 528 - * 529 529 - * <input aria-label="No Error Attributes" /> 530 530 - * <input aria-label="Not Invalid" aria-invalid="false" aria-errormessage="error-message" /> 531 531 - * 532 532 - * // Inputs with Valid Error Messages 533 533 - * expect(getByRole('textbox', {name: 'Has Error'})).toHaveAccessibleErrorMessage() 534 534 - * expect(getByRole('textbox', {name: 'Has Error'})).toHaveAccessibleErrorMessage('This field is invalid') 535 535 - * expect(getByRole('textbox', {name: 'Has Error'})).toHaveAccessibleErrorMessage(/invalid/i) 536 536 - * expect( 537 537 - * getByRole('textbox', {name: 'Has Error'}), 538 538 - * ).not.toHaveAccessibleErrorMessage('This field is absolutely correct!') 539 539 - * 540 540 - * // Inputs without Valid Error Messages 541 541 - * expect( 542 542 - * getByRole('textbox', {name: 'No Error Attributes'}), 543 543 - * ).not.toHaveAccessibleErrorMessage() 544 544 - * 545 545 - * expect( 546 546 - * getByRole('textbox', {name: 'Not Invalid'}), 547 547 - * ).not.toHaveAccessibleErrorMessage() 548 548 - * 549 549 - * @see 550 550 - * [testing-library/jest-dom#tohaveaccessibleerrormessage](https://github.com/testing-library/jest-dom#tohaveaccessibleerrormessage) 551 551 - */ 552 552 - toHaveAccessibleErrorMessage(text?: string | RegExp | E): R 427 427 + /** 428 428 + * @description 429 429 + * This allows you to assert that an element has the expected 430 430 + * [accessible error message](https://w3c.github.io/aria/#aria-errormessage). 431 431 + * 432 432 + * You can pass the exact string of the expected accessible error message. 433 433 + * Alternatively, you can perform a partial match by passing a regular expression 434 434 + * or by using either 435 435 + * [expect.stringContaining](https://jestjs.io/docs/en/expect.html#expectnotstringcontainingstring) 436 436 + * or [expect.stringMatching](https://jestjs.io/docs/en/expect.html#expectstringmatchingstring-regexp). 437 437 + * 438 438 + * @example 439 439 + * <input aria-label="Has Error" aria-invalid="true" aria-errormessage="error-message" /> 440 440 + * <div id="error-message" role="alert">This field is invalid</div> 441 441 + * 442 442 + * <input aria-label="No Error Attributes" /> 443 443 + * <input aria-label="Not Invalid" aria-invalid="false" aria-errormessage="error-message" /> 444 444 + * 445 445 + * // Inputs with Valid Error Messages 446 446 + * await expect.element(page.getByRole('textbox', {name: 'Has Error'})).toHaveAccessibleErrorMessage() 447 447 + * await expect.element(page.getByRole('textbox', {name: 'Has Error'})).toHaveAccessibleErrorMessage('This field is invalid') 448 448 + * await expect.element(page.getByRole('textbox', {name: 'Has Error'})).toHaveAccessibleErrorMessage(/invalid/i) 449 449 + * await expect.element( 450 450 + * page.getByRole('textbox', {name: 'Has Error'}), 451 451 + * ).not.toHaveAccessibleErrorMessage('This field is absolutely correct!') 452 452 + * 453 453 + * // Inputs without Valid Error Messages 454 454 + * await expect.element( 455 455 + * page.getByRole('textbox', {name: 'No Error Attributes'}), 456 456 + * ).not.toHaveAccessibleErrorMessage() 457 457 + * 458 458 + * await expect.element( 459 459 + * page.getByRole('textbox', {name: 'Not Invalid'}), 460 460 + * ).not.toHaveAccessibleErrorMessage() 461 461 + * 462 462 + * @see https://vitest.dev/guide/browser/assertion-api#tohaveaccessibleerrormessage 463 463 + */ 464 464 + toHaveAccessibleErrorMessage(text?: string | RegExp | E): R 553 465 554 554 - /** 555 555 - * @description 556 556 - * This allows to assert that an element has the expected [accessible name](https://w3c.github.io/accname/). 557 557 - * It is useful, for instance, to assert that form elements and buttons are properly labelled. 558 558 - * 559 559 - * You can pass the exact string of the expected accessible name, or you can make a 560 560 - * partial match passing a regular expression, or by using either 561 561 - * [expect.stringContaining](https://jestjs.io/docs/en/expect.html#expectnotstringcontainingstring) 562 562 - * or [expect.stringMatching](https://jestjs.io/docs/en/expect.html#expectstringmatchingstring-regexp). 563 563 - * @example 564 564 - * <img data-testid="img-alt" src="" alt="Test alt" /> 565 565 - * <img data-testid="img-empty-alt" src="" alt="" /> 566 566 - * <svg data-testid="svg-title"><title>Test title</title></svg> 567 567 - * <button data-testid="button-img-alt"><img src="" alt="Test" /></button> 568 568 - * <p><img data-testid="img-paragraph" src="" alt="" /> Test content</p> 569 569 - * <button data-testid="svg-button"><svg><title>Test</title></svg></p> 570 570 - * <div><svg data-testid="svg-without-title"></svg></div> 571 571 - * <input data-testid="input-title" title="test" /> 572 572 - * 573 573 - * expect(getByTestId('img-alt')).toHaveAccessibleName('Test alt') 574 574 - * expect(getByTestId('img-empty-alt')).not.toHaveAccessibleName() 575 575 - * expect(getByTestId('svg-title')).toHaveAccessibleName('Test title') 576 576 - * expect(getByTestId('button-img-alt')).toHaveAccessibleName() 577 577 - * expect(getByTestId('img-paragraph')).not.toHaveAccessibleName() 578 578 - * expect(getByTestId('svg-button')).toHaveAccessibleName() 579 579 - * expect(getByTestId('svg-without-title')).not.toHaveAccessibleName() 580 580 - * expect(getByTestId('input-title')).toHaveAccessibleName() 581 581 - * @see 582 582 - * [testing-library/jest-dom#tohaveaccessiblename](https://github.com/testing-library/jest-dom#tohaveaccessiblename) 583 583 - */ 584 584 - toHaveAccessibleName(text?: string | RegExp | E): R 585 585 - /** 586 586 - * @description 587 587 - * This allows you to assert that an element has the expected 588 588 - * [role](https://www.w3.org/TR/html-aria/#docconformance). 589 589 - * 590 590 - * This is useful in cases where you already have access to an element via 591 591 - * some query other than the role itself, and want to make additional 592 592 - * assertions regarding its accessibility. 593 593 - * 594 594 - * The role can match either an explicit role (via the `role` attribute), or 595 595 - * an implicit one via the [implicit ARIA 596 596 - * semantics](https://www.w3.org/TR/html-aria/). 597 597 - * 598 598 - * Note: roles are matched literally by string equality, without inheriting 599 599 - * from the ARIA role hierarchy. As a result, querying a superclass role 600 600 - * like 'checkbox' will not include elements with a subclass role like 601 601 - * 'switch'. 602 602 - * 603 603 - * @example 604 604 - * <button data-testid="button">Continue</button> 605 605 - * <div role="button" data-testid="button-explicit">Continue</button> 606 606 - * <button role="switch button" data-testid="button-explicit-multiple">Continue</button> 607 607 - * <a href="/about" data-testid="link">About</a> 608 608 - * <a data-testid="link-invalid">Invalid link<a/> 609 609 - * 610 610 - * expect(getByTestId('button')).toHaveRole('button') 611 611 - * expect(getByTestId('button-explicit')).toHaveRole('button') 612 612 - * expect(getByTestId('button-explicit-multiple')).toHaveRole('button') 613 613 - * expect(getByTestId('button-explicit-multiple')).toHaveRole('switch') 614 614 - * expect(getByTestId('link')).toHaveRole('link') 615 615 - * expect(getByTestId('link-invalid')).not.toHaveRole('link') 616 616 - * expect(getByTestId('link-invalid')).toHaveRole('generic') 617 617 - * 618 618 - * @see 619 619 - * [testing-library/jest-dom#tohaverole](https://github.com/testing-library/jest-dom#tohaverole) 620 620 - */ 621 621 - toHaveRole( 622 622 - // Get autocomplete for ARIARole union types, while still supporting another string 623 623 - // Ref: https://github.com/microsoft/TypeScript/issues/29729#issuecomment-567871939 624 624 - role: ARIARole | (string & {}), 625 625 - ): R 626 626 - /** 627 627 - * @description 628 628 - * This allows you to check whether the given element is partially checked. 629 629 - * It accepts an input of type checkbox and elements with a role of checkbox 630 630 - * with a aria-checked="mixed", or input of type checkbox with indeterminate 631 631 - * set to true 632 632 - * 633 633 - * @example 634 634 - * <input type="checkbox" aria-checked="mixed" data-testid="aria-checkbox-mixed" /> 635 635 - * <input type="checkbox" checked data-testid="input-checkbox-checked" /> 636 636 - * <input type="checkbox" data-testid="input-checkbox-unchecked" /> 637 637 - * <div role="checkbox" aria-checked="true" data-testid="aria-checkbox-checked" /> 638 638 - * <div 639 639 - * role="checkbox" 640 640 - * aria-checked="false" 641 641 - * data-testid="aria-checkbox-unchecked" 642 642 - * /> 643 643 - * <input type="checkbox" data-testid="input-checkbox-indeterminate" /> 644 644 - * 645 645 - * const ariaCheckboxMixed = getByTestId('aria-checkbox-mixed') 646 646 - * const inputCheckboxChecked = getByTestId('input-checkbox-checked') 647 647 - * const inputCheckboxUnchecked = getByTestId('input-checkbox-unchecked') 648 648 - * const ariaCheckboxChecked = getByTestId('aria-checkbox-checked') 649 649 - * const ariaCheckboxUnchecked = getByTestId('aria-checkbox-unchecked') 650 650 - * const inputCheckboxIndeterminate = getByTestId('input-checkbox-indeterminate') 651 651 - * 652 652 - * expect(ariaCheckboxMixed).toBePartiallyChecked() 653 653 - * expect(inputCheckboxChecked).not.toBePartiallyChecked() 654 654 - * expect(inputCheckboxUnchecked).not.toBePartiallyChecked() 655 655 - * expect(ariaCheckboxChecked).not.toBePartiallyChecked() 656 656 - * expect(ariaCheckboxUnchecked).not.toBePartiallyChecked() 657 657 - * 658 658 - * inputCheckboxIndeterminate.indeterminate = true 659 659 - * expect(inputCheckboxIndeterminate).toBePartiallyChecked() 660 660 - * @see 661 661 - * [testing-library/jest-dom#tobepartiallychecked](https://github.com/testing-library/jest-dom#tobepartiallychecked) 662 662 - */ 663 663 - toBePartiallyChecked(): R 664 664 - /** 665 665 - * @deprecated 666 666 - * since v5.17.0 667 667 - * 668 668 - * @description 669 669 - * Check whether the given element has an [ARIA error message](https://www.w3.org/TR/wai-aria/#aria-errormessage) or not. 670 670 - * 671 671 - * Use the `aria-errormessage` attribute to reference another element that contains 672 672 - * custom error message text. Multiple ids is **NOT** allowed. Authors MUST use 673 673 - * `aria-invalid` in conjunction with `aria-errormessage`. Learn more from the 674 674 - * [`aria-errormessage` spec](https://www.w3.org/TR/wai-aria/#aria-errormessage). 675 675 - * 676 676 - * Whitespace is normalized. 677 677 - * 678 678 - * When a `string` argument is passed through, it will perform a whole 679 679 - * case-sensitive match to the error message text. 680 680 - * 681 681 - * To perform a case-insensitive match, you can use a `RegExp` with the `/i` 682 682 - * modifier. 683 683 - * 684 684 - * To perform a partial match, you can pass a `RegExp` or use 685 685 - * expect.stringContaining("partial string")`. 686 686 - * 687 687 - * @example 688 688 - * <label for="startTime"> Please enter a start time for the meeting: </label> 689 689 - * <input id="startTime" type="text" aria-errormessage="msgID" aria-invalid="true" value="11:30 PM" /> 690 690 - * <span id="msgID" aria-live="assertive" style="visibility:visible"> 691 691 - * Invalid time: the time must be between 9:00 AM and 5:00 PM" 692 692 - * </span> 693 693 - * 694 694 - * 695 695 - * const timeInput = getByLabel('startTime') 696 696 - * 697 697 - * expect(timeInput).toHaveErrorMessage( 698 698 - * 'Invalid time: the time must be between 9:00 AM and 5:00 PM', 699 699 - * ) 700 700 - * expect(timeInput).toHaveErrorMessage(/invalid time/i) // to partially match 701 701 - * expect(timeInput).toHaveErrorMessage(expect.stringContaining('Invalid time')) // to partially match 702 702 - * expect(timeInput).not.toHaveErrorMessage('Pikachu!') 703 703 - * @see 704 704 - * [testing-library/jest-dom#tohaveerrormessage](https://github.com/testing-library/jest-dom#tohaveerrormessage) 705 705 - */ 706 706 - toHaveErrorMessage(text?: string | RegExp | E): R 707 707 - } 466 466 + /** 467 467 + * @description 468 468 + * This allows to assert that an element has the expected [accessible name](https://w3c.github.io/accname/). 469 469 + * It is useful, for instance, to assert that form elements and buttons are properly labelled. 470 470 + * 471 471 + * You can pass the exact string of the expected accessible name, or you can make a 472 472 + * partial match passing a regular expression, or by using either 473 473 + * [expect.stringContaining](https://jestjs.io/docs/en/expect.html#expectnotstringcontainingstring) 474 474 + * or [expect.stringMatching](https://jestjs.io/docs/en/expect.html#expectstringmatchingstring-regexp). 475 475 + * @example 476 476 + * <img data-testid="img-alt" src="" alt="Test alt" /> 477 477 + * <img data-testid="img-empty-alt" src="" alt="" /> 478 478 + * <svg data-testid="svg-title"><title>Test title</title></svg> 479 479 + * <button data-testid="button-img-alt"><img src="" alt="Test" /></button> 480 480 + * <p><img data-testid="img-paragraph" src="" alt="" /> Test content</p> 481 481 + * <button data-testid="svg-button"><svg><title>Test</title></svg></p> 482 482 + * <div><svg data-testid="svg-without-title"></svg></div> 483 483 + * <input data-testid="input-title" title="test" /> 484 484 + * 485 485 + * await expect.element(page.getByTestId('img-alt')).toHaveAccessibleName('Test alt') 486 486 + * await expect.element(page.getByTestId('img-empty-alt')).not.toHaveAccessibleName() 487 487 + * await expect.element(page.getByTestId('svg-title')).toHaveAccessibleName('Test title') 488 488 + * await expect.element(page.getByTestId('button-img-alt')).toHaveAccessibleName() 489 489 + * await expect.element(page.getByTestId('img-paragraph')).not.toHaveAccessibleName() 490 490 + * await expect.element(page.getByTestId('svg-button')).toHaveAccessibleName() 491 491 + * await expect.element(page.getByTestId('svg-without-title')).not.toHaveAccessibleName() 492 492 + * await expect.element(page.getByTestId('input-title')).toHaveAccessibleName() 493 493 + * @see https://vitest.dev/guide/browser/assertion-api#tohaveaccessiblename 494 494 + */ 495 495 + toHaveAccessibleName(text?: string | RegExp | E): R 496 496 + /** 497 497 + * @description 498 498 + * This allows you to assert that an element has the expected 499 499 + * [role](https://www.w3.org/TR/html-aria/#docconformance). 500 500 + * 501 501 + * This is useful in cases where you already have access to an element via 502 502 + * some query other than the role itself, and want to make additional 503 503 + * assertions regarding its accessibility. 504 504 + * 505 505 + * The role can match either an explicit role (via the `role` attribute), or 506 506 + * an implicit one via the [implicit ARIA 507 507 + * semantics](https://www.w3.org/TR/html-aria/). 508 508 + * 509 509 + * Note: roles are matched literally by string equality, without inheriting 510 510 + * from the ARIA role hierarchy. As a result, querying a superclass role 511 511 + * like 'checkbox' will not include elements with a subclass role like 512 512 + * 'switch'. 513 513 + * 514 514 + * @example 515 515 + * <button data-testid="button">Continue</button> 516 516 + * <div role="button" data-testid="button-explicit">Continue</button> 517 517 + * <button role="switch button" data-testid="button-explicit-multiple">Continue</button> 518 518 + * <a href="/about" data-testid="link">About</a> 519 519 + * <a data-testid="link-invalid">Invalid link<a/> 520 520 + * 521 521 + * await expect.element(page.getByTestId('button')).toHaveRole('button') 522 522 + * await expect.element(page.getByTestId('button-explicit')).toHaveRole('button') 523 523 + * await expect.element(page.getByTestId('button-explicit-multiple')).toHaveRole('button') 524 524 + * await expect.element(page.getByTestId('button-explicit-multiple')).toHaveRole('switch') 525 525 + * await expect.element(page.getByTestId('link')).toHaveRole('link') 526 526 + * await expect.element(page.getByTestId('link-invalid')).not.toHaveRole('link') 527 527 + * await expect.element(page.getByTestId('link-invalid')).toHaveRole('generic') 528 528 + * 529 529 + * @see https://vitest.dev/guide/browser/assertion-api#tohaverole 530 530 + */ 531 531 + toHaveRole( 532 532 + // Get autocomplete for ARIARole union types, while still supporting another string 533 533 + // Ref: https://github.com/microsoft/TypeScript/issues/29729#issuecomment-567871939 534 534 + role: ARIARole | (string & {}), 535 535 + ): R 536 536 + /** 537 537 + * @description 538 538 + * This allows you to check whether the given element is partially checked. 539 539 + * It accepts an input of type checkbox and elements with a role of checkbox 540 540 + * with a aria-checked="mixed", or input of type checkbox with indeterminate 541 541 + * set to true 542 542 + * 543 543 + * @example 544 544 + * <input type="checkbox" aria-checked="mixed" data-testid="aria-checkbox-mixed" /> 545 545 + * <input type="checkbox" checked data-testid="input-checkbox-checked" /> 546 546 + * <input type="checkbox" data-testid="input-checkbox-unchecked" /> 547 547 + * <div role="checkbox" aria-checked="true" data-testid="aria-checkbox-checked" /> 548 548 + * <div 549 549 + * role="checkbox" 550 550 + * aria-checked="false" 551 551 + * data-testid="aria-checkbox-unchecked" 552 552 + * /> 553 553 + * <input type="checkbox" data-testid="input-checkbox-indeterminate" /> 554 554 + * 555 555 + * const ariaCheckboxMixed = getByTestId('aria-checkbox-mixed') 556 556 + * const inputCheckboxChecked = getByTestId('input-checkbox-checked') 557 557 + * const inputCheckboxUnchecked = getByTestId('input-checkbox-unchecked') 558 558 + * const ariaCheckboxChecked = getByTestId('aria-checkbox-checked') 559 559 + * const ariaCheckboxUnchecked = getByTestId('aria-checkbox-unchecked') 560 560 + * const inputCheckboxIndeterminate = getByTestId('input-checkbox-indeterminate') 561 561 + * 562 562 + * await expect.element(ariaCheckboxMixed).toBePartiallyChecked() 563 563 + * await expect.element(inputCheckboxChecked).not.toBePartiallyChecked() 564 564 + * await expect.element(inputCheckboxUnchecked).not.toBePartiallyChecked() 565 565 + * await expect.element(ariaCheckboxChecked).not.toBePartiallyChecked() 566 566 + * await expect.element(ariaCheckboxUnchecked).not.toBePartiallyChecked() 567 567 + * 568 568 + * inputCheckboxIndeterminate.indeterminate = true 569 569 + * await expect.element(inputCheckboxIndeterminate).toBePartiallyChecked() 570 570 + * @see https://vitest.dev/guide/browser/assertion-api#tobepartiallychecked 571 571 + */ 572 572 + toBePartiallyChecked(): R 573 573 + /** 574 574 + * @description 575 575 + * This allows to assert that an element has a 576 576 + * [text selection](https://developer.mozilla.org/en-US/docs/Web/API/Selection). 577 577 + * 578 578 + * This is useful to check if text or part of the text is selected within an 579 579 + * element. The element can be either an input of type text, a textarea, or any 580 580 + * other element that contains text, such as a paragraph, span, div etc. 581 581 + * 582 582 + * NOTE: the expected selection is a string, it does not allow to check for 583 583 + * selection range indeces. 584 584 + * 585 585 + * @example 586 586 + * <div> 587 587 + * <input type="text" value="text selected text" data-testid="text" /> 588 588 + * <textarea data-testid="textarea">text selected text</textarea> 589 589 + * <p data-testid="prev">prev</p> 590 590 + * <p data-testid="parent">text <span data-testid="child">selected</span> text</p> 591 591 + * <p data-testid="next">next</p> 592 592 + * </div> 593 593 + * 594 594 + * page.getByTestId('text').element().setSelectionRange(5, 13) 595 595 + * await expect.element(page.getByTestId('text')).toHaveSelection('selected') 596 596 + * 597 597 + * page.getByTestId('textarea').element().setSelectionRange(0, 5) 598 598 + * await expect.element('textarea').toHaveSelection('text ') 599 599 + * 600 600 + * const selection = document.getSelection() 601 601 + * const range = document.createRange() 602 602 + * selection.removeAllRanges() 603 603 + * selection.empty() 604 604 + * selection.addRange(range) 605 605 + * 606 606 + * // selection of child applies to the parent as well 607 607 + * range.selectNodeContents(page.getByTestId('child').element()) 608 608 + * await expect.element(page.getByTestId('child')).toHaveSelection('selected') 609 609 + * await expect.element(page.getByTestId('parent')).toHaveSelection('selected') 610 610 + * 611 611 + * // selection that applies from prev all, parent text before child, and part child. 612 612 + * range.setStart(page.getByTestId('prev').element(), 0) 613 613 + * range.setEnd(page.getByTestId('child').element().childNodes[0], 3) 614 614 + * await expect.element(page.queryByTestId('prev')).toHaveSelection('prev') 615 615 + * await expect.element(page.queryByTestId('child')).toHaveSelection('sel') 616 616 + * await expect.element(page.queryByTestId('parent')).toHaveSelection('text sel') 617 617 + * await expect.element(page.queryByTestId('next')).not.toHaveSelection() 618 618 + * 619 619 + * // selection that applies from part child, parent text after child and part next. 620 620 + * range.setStart(page.getByTestId('child').element().childNodes[0], 3) 621 621 + * range.setEnd(page.getByTestId('next').element().childNodes[0], 2) 622 622 + * await expect.element(page.queryByTestId('child')).toHaveSelection('ected') 623 623 + * await expect.element(page.queryByTestId('parent')).toHaveSelection('ected text') 624 624 + * await expect.element(page.queryByTestId('prev')).not.toHaveSelection() 625 625 + * await expect.element(page.queryByTestId('next')).toHaveSelection('ne') 626 626 + * 627 627 + * @see https://vitest.dev/guide/browser/assertion-api#tohaveselection 628 628 + */ 629 629 + toHaveSelection(selection?: string): R 708 630 } 709 709 - 710 710 - // Needs to extend Record<string, any> to be accepted by expect.extend() 711 711 - // as it requires a string index signature. 712 712 - declare const matchers: matchers.TestingLibraryMatchers<any, void> & 713 713 - Record<string, any> 714 714 - 715 715 - declare namespace matchers$1 { 716 716 - export { matchers as default }; 717 717 - } 718 718 - 719 719 - export { matchers$1 as default };

+4 -4

packages/browser/matchers.d.ts

Reviewed

··· 1 1 import type { Locator } from '@vitest/browser/context' 2 2 - import type jsdomMatchers from './jest-dom.js' 2 2 + import type { TestingLibraryMatchers } from './jest-dom.js' 3 3 import type { Assertion, ExpectPollOptions } from 'vitest' 4 4 5 5 declare module 'vitest' { 6 6 - interface JestAssertion<T = any> extends jsdomMatchers.default.TestingLibraryMatchers<void, T> {} 7 7 - interface AsymmetricMatchersContaining extends jsdomMatchers.default.TestingLibraryMatchers<void, void> {} 6 6 + interface JestAssertion<T = any> extends TestingLibraryMatchers<void, T> {} 7 7 + interface AsymmetricMatchersContaining extends TestingLibraryMatchers<void, void> {} 8 8 9 9 type Promisify<O> = { 10 10 [K in keyof O]: O[K] extends (...args: infer A) => infer R ··· 22 22 * You can set default timeout via `expect.poll.timeout` option in the config. 23 23 * @see {@link https://vitest.dev/api/expect#poll} 24 24 */ 25 25 - element: <T extends Element | Locator>(element: T, options?: ExpectPollOptions) => PromisifyDomAssertion<Awaited<Element | null>> 25 25 + element: <T extends Element | Locator | null>(element: T, options?: ExpectPollOptions) => PromisifyDomAssertion<Awaited<Element | null>> 26 26 } 27 27 } 28 28

+1 -2

packages/browser/package.json

Reviewed

··· 99 99 "ws": "catalog:" 100 100 }, 101 101 "devDependencies": { 102 102 - "@testing-library/jest-dom": "^6.6.3", 103 102 "@types/ws": "catalog:", 104 103 "@vitest/runner": "workspace:*", 105 104 "@vitest/ui": "workspace:*", ··· 108 107 "@wdio/types": "^9.10.1", 109 108 "birpc": "catalog:", 110 109 "flatted": "catalog:", 111 111 - "ivya": "^1.5.1", 110 110 + "ivya": "^1.6.0", 112 111 "mime": "^4.0.6", 113 112 "pathe": "catalog:", 114 113 "periscopic": "^4.0.2",

+6 -1

packages/browser/rollup.config.js

Reviewed

··· 75 75 'locators/webdriverio': './src/client/tester/locators/webdriverio.ts', 76 76 'locators/preview': './src/client/tester/locators/preview.ts', 77 77 'locators/index': './src/client/tester/locators/index.ts', 78 78 + 'expect-element': './src/client/tester/expect-element.ts', 78 79 'utils': './src/client/tester/public-utils.ts', 79 80 }, 80 81 output: { ··· 84 85 external, 85 86 plugins: [ 86 87 ...dtsUtilsClient.isolatedDecl(), 87 87 - ...plugins, 88 88 + ...plugins.filter(p => p.name !== 'unplugin-oxc'), 89 89 + oxc({ 90 90 + transform: { target: 'node18' }, 91 91 + minify: true, 92 92 + }), 88 93 ], 89 94 }, 90 95 {

+1

test/browser/package.json

Reviewed

··· 9 9 "test:playwright": "PROVIDER=playwright pnpm run test:unit", 10 10 "test:safaridriver": "PROVIDER=webdriverio BROWSER=safari pnpm run test:unit", 11 11 "test-fixtures": "vitest", 12 12 + "test-expect-dom": "vitest --root ./fixtures/expect-dom", 12 13 "test-mocking": "vitest --root ./fixtures/mocking", 13 14 "test-timeout": "vitest --root ./fixtures/timeout", 14 15 "test-mocking-watch": "vitest --root ./fixtures/mocking-watch",

+1010 -41

docs/guide/browser/assertion-api.md

Reviewed

··· 4 4 5 5 # Assertion API 6 6 7 7 - Vitest bundles the [`@testing-library/jest-dom`](https://github.com/testing-library/jest-dom) library to provide a wide range of DOM assertions out of the box. For detailed documentation, you can read the `jest-dom` readme: 7 7 + Vitest provides a wide range of DOM assertions out of the box forked from [`@testing-library/jest-dom`](https://github.com/testing-library/jest-dom) library with the added support for locators and built-in retry-ability. 8 8 9 9 - - [`toBeDisabled`](https://github.com/testing-library/jest-dom#toBeDisabled) 10 10 - - [`toBeEnabled`](https://github.com/testing-library/jest-dom#toBeEnabled) 11 11 - - [`toBeEmptyDOMElement`](https://github.com/testing-library/jest-dom#toBeEmptyDOMElement) 12 12 - - [`toBeInTheDocument`](https://github.com/testing-library/jest-dom#toBeInTheDocument) 13 13 - - [`toBeInvalid`](https://github.com/testing-library/jest-dom#toBeInvalid) 14 14 - - [`toBeRequired`](https://github.com/testing-library/jest-dom#toBeRequired) 15 15 - - [`toBeValid`](https://github.com/testing-library/jest-dom#toBeValid) 16 16 - - [`toBeVisible`](https://github.com/testing-library/jest-dom#toBeVisible) 17 17 - - [`toContainElement`](https://github.com/testing-library/jest-dom#toContainElement) 18 18 - - [`toContainHTML`](https://github.com/testing-library/jest-dom#toContainHTML) 19 19 - - [`toHaveAccessibleDescription`](https://github.com/testing-library/jest-dom#toHaveAccessibleDescription) 20 20 - - [`toHaveAccessibleErrorMessage`](https://github.com/testing-library/jest-dom#toHaveAccessibleErrorMessage) 21 21 - - [`toHaveAccessibleName`](https://github.com/testing-library/jest-dom#toHaveAccessibleName) 22 22 - - [`toHaveAttribute`](https://github.com/testing-library/jest-dom#toHaveAttribute) 23 23 - - [`toHaveClass`](https://github.com/testing-library/jest-dom#toHaveClass) 24 24 - - [`toHaveFocus`](https://github.com/testing-library/jest-dom#toHaveFocus) 25 25 - - [`toHaveFormValues`](https://github.com/testing-library/jest-dom#toHaveFormValues) 26 26 - - [`toHaveStyle`](https://github.com/testing-library/jest-dom#toHaveStyle) 27 27 - - [`toHaveTextContent`](https://github.com/testing-library/jest-dom#toHaveTextContent) 28 28 - - [`toHaveValue`](https://github.com/testing-library/jest-dom#toHaveValue) 29 29 - - [`toHaveDisplayValue`](https://github.com/testing-library/jest-dom#toHaveDisplayValue) 30 30 - - [`toBeChecked`](https://github.com/testing-library/jest-dom#toBeChecked) 31 31 - - [`toBePartiallyChecked`](https://github.com/testing-library/jest-dom#toBePartiallyChecked) 32 32 - - [`toHaveRole`](https://github.com/testing-library/jest-dom#toHaveRole) 33 33 - - [`toHaveErrorMessage`](https://github.com/testing-library/jest-dom#toHaveErrorMessage) 9 9 + ::: tip TypeScript Support 10 10 + If you are using [TypeScript](/guide/browser/#typescript) or want to have correct type hints in `expect`, make sure you have `@vitest/browser/context` referenced somewhere. If you never imported from there, you can add a `reference` comment in any file that's covered by your `tsconfig.json`: 34 11 35 35 - If you are using [TypeScript](/guide/browser/#typescript) or want to have correct type hints in `expect`, make sure you have either `@vitest/browser/providers/playwright` or `@vitest/browser/providers/webdriverio` referenced in your [setup file](/config/#setupfile) or a [config file](/config/) depending on the provider you use. If you use the default `preview` provider, you can specify `@vitest/browser/matchers` instead. 36 36 - 37 37 - ::: code-group 38 38 - ```ts [preview] 39 39 - /// <reference types="@vitest/browser/matchers" /> 40 40 - ``` 41 41 - ```ts [playwright] 42 42 - /// <reference types="@vitest/browser/providers/playwright" /> 43 43 - ``` 44 44 - ```ts [webdriverio] 45 45 - /// <reference types="@vitest/browser/providers/webdriverio" /> 12 12 + ```ts 13 13 + /// <reference types="@vitest/browser/context" /> 46 14 ``` 47 15 ::: 48 16 ··· 55 23 test('error banner is rendered', async () => { 56 24 triggerError() 57 25 58 58 - // @testing-library provides queries with built-in retry-ability 59 59 - // It will try to find the banner until it's rendered 26 26 + // This creates a locator that will try to find the element 27 27 + // when any of its methods are called. 28 28 + // This call by itself doesn't check the existence of the element. 60 29 const banner = page.getByRole('alert', { 61 30 name: /error/i, 62 31 }) 63 32 64 33 // Vitest provides `expect.element` with built-in retry-ability 65 65 - // It will check `element.textContent` until it's equal to "Error!" 34 34 + // It will repeatedly check that the element exists in the DOM and that 35 35 + // the content of `element.textContent` is equal to "Error!" 36 36 + // until all the conditions are met 66 37 await expect.element(banner).toHaveTextContent('Error!') 67 38 }) 39 39 + ``` 40 40 + 41 41 + We recommend to always use `expect.element` when working with `page.getBy*` locators to reduce test flakiness. Note that `expect.element` accepts a second option: 42 42 + 43 43 + ```ts 44 44 + interface ExpectPollOptions { 45 45 + // The interval to retry the assertion for in milliseconds 46 46 + // Defaults to "expect.poll.interval" config option 47 47 + interval?: number 48 48 + // Time to retry the assertion for in milliseconds 49 49 + // Defaults to "expect.poll.timeout" config option 50 50 + timeout?: number 51 51 + // The message printed when the assertion fails 52 52 + message?: string 53 53 + } 68 54 ``` 69 55 70 56 ::: tip 71 57 `expect.element` is a shorthand for `expect.poll(() => element)` and works in exactly the same way. 72 58 73 73 - `toHaveTextContent` and all other [`@testing-library/jest-dom`](https://github.com/testing-library/jest-dom) assertions are still available on a regular `expect` without a built-in retry-ability mechanism: 59 59 + `toHaveTextContent` and all other assertions are still available on a regular `expect` without a built-in retry-ability mechanism: 74 60 75 61 ```ts 76 62 // will fail immediately if .textContent is not `'Error!'` 77 63 expect(banner).toHaveTextContent('Error!') 78 64 ``` 79 65 ::: 66 66 + 67 67 + ## toBeDisabled 68 68 + 69 69 + ```ts 70 70 + function toBeDisabled(): Promise<void> 71 71 + ``` 72 72 + 73 73 + Allows you to check whether an element is disabled from the user's perspective. 74 74 + 75 75 + Matches if the element is a form control and the `disabled` attribute is specified on this element or the 76 76 + element is a descendant of a form element with a `disabled` attribute. 77 77 + 78 78 + Note that only native control elements such as HTML `button`, `input`, `select`, `textarea`, `option`, `optgroup` 79 79 + can be disabled by setting "disabled" attribute. "disabled" attribute on other elements is ignored, unless it's a custom element. 80 80 + 81 81 + ```html 82 82 + <button 83 83 + data-testid="button" 84 84 + type="submit" 85 85 + disabled 86 86 + > 87 87 + submit 88 88 + </button> 89 89 + ``` 90 90 + 91 91 + ```ts 92 92 + await expect.element(getByTestId('button')).toBeDisabled() // ✅ 93 93 + await expect.element(getByTestId('button')).not.toBeDisabled() // ❌ 94 94 + ``` 95 95 + 96 96 + ## toBeEnabled 97 97 + 98 98 + ```ts 99 99 + function toBeEnabled(): Promise<void> 100 100 + ``` 101 101 + 102 102 + Allows you to check whether an element is not disabled from the user's perspective. 103 103 + 104 104 + Works like [`not.toBeDisabled()`](#tobedisabled). Use this matcher to avoid double negation in your tests. 105 105 + 106 106 + ```html 107 107 + <button 108 108 + data-testid="button" 109 109 + type="submit" 110 110 + disabled 111 111 + > 112 112 + submit 113 113 + </button> 114 114 + ``` 115 115 + 116 116 + ```ts 117 117 + await expect.element(getByTestId('button')).toBeEnabled() // ✅ 118 118 + await expect.element(getByTestId('button')).not.toBeEnabled() // ❌ 119 119 + ``` 120 120 + 121 121 + ## toBeEmptyDOMElement 122 122 + 123 123 + ```ts 124 124 + function toBeEmptyDOMElement(): Promise<void> 125 125 + ``` 126 126 + 127 127 + This allows you to assert whether an element has no visible content for the user. It ignores comments but will fail if the element contains white-space. 128 128 + 129 129 + ```html 130 130 + <span data-testid="not-empty"><span data-testid="empty"></span></span> 131 131 + <span data-testid="with-whitespace"> </span> 132 132 + <span data-testid="with-comment"><!-- comment --></span> 133 133 + ``` 134 134 + 135 135 + ```ts 136 136 + await expect.element(getByTestId('empty')).toBeEmptyDOMElement() 137 137 + await expect.element(getByTestId('not-empty')).not.toBeEmptyDOMElement() 138 138 + await expect.element( 139 139 + getByTestId('with-whitespace') 140 140 + ).not.toBeEmptyDOMElement() 141 141 + ``` 142 142 + 143 143 + ## toBeInTheDocument 144 144 + 145 145 + ```ts 146 146 + function toBeInTheDocument(): Promise<void> 147 147 + ``` 148 148 + 149 149 + Assert whether an element is present in the document or not. 150 150 + 151 151 + ```html 152 152 + <svg data-testid="svg-element"></svg> 153 153 + ``` 154 154 + 155 155 + ```ts 156 156 + await expect.element(getByTestId('svg-element')).toBeInTheDocument() 157 157 + await expect.element(getByTestId('does-not-exist')).not.toBeInTheDocument() 158 158 + ``` 159 159 + 160 160 + ::: warning 161 161 + This matcher does not find detached elements. The element must be added to the document to be found by `toBeInTheDocument`. If you desire to search in a detached element, please use: [`toContainElement`](#tocontainelement). 162 162 + ::: 163 163 + 164 164 + ## toBeInvalid 165 165 + 166 166 + ```ts 167 167 + function toBeInvalid(): Promise<void> 168 168 + ``` 169 169 + 170 170 + This allows you to check if an element, is currently invalid. 171 171 + 172 172 + An element is invalid if it has an [`aria-invalid` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-invalid) with no value or a value of `"true"`, or if the result of [`checkValidity()`](https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation) is `false`. 173 173 + 174 174 + ```html 175 175 + <input data-testid="no-aria-invalid" /> 176 176 + <input data-testid="aria-invalid" aria-invalid /> 177 177 + <input data-testid="aria-invalid-value" aria-invalid="true" /> 178 178 + <input data-testid="aria-invalid-false" aria-invalid="false" /> 179 179 + 180 180 + <form data-testid="valid-form"> 181 181 + <input /> 182 182 + </form> 183 183 + 184 184 + <form data-testid="invalid-form"> 185 185 + <input required /> 186 186 + </form> 187 187 + ``` 188 188 + 189 189 + ```ts 190 190 + await expect.element(getByTestId('no-aria-invalid')).not.toBeInvalid() 191 191 + await expect.element(getByTestId('aria-invalid')).toBeInvalid() 192 192 + await expect.element(getByTestId('aria-invalid-value')).toBeInvalid() 193 193 + await expect.element(getByTestId('aria-invalid-false')).not.toBeInvalid() 194 194 + 195 195 + await expect.element(getByTestId('valid-form')).not.toBeInvalid() 196 196 + await expect.element(getByTestId('invalid-form')).toBeInvalid() 197 197 + ``` 198 198 + 199 199 + ## toBeRequired 200 200 + 201 201 + ```ts 202 202 + function toBeRequired(): Promise<void> 203 203 + ``` 204 204 + 205 205 + This allows you to check if a form element is currently required. 206 206 + 207 207 + An element is required if it is having a `required` or `aria-required="true"` attribute. 208 208 + 209 209 + ```html 210 210 + <input data-testid="required-input" required /> 211 211 + <input data-testid="aria-required-input" aria-required="true" /> 212 212 + <input data-testid="conflicted-input" required aria-required="false" /> 213 213 + <input data-testid="aria-not-required-input" aria-required="false" /> 214 214 + <input data-testid="optional-input" /> 215 215 + <input data-testid="unsupported-type" type="image" required /> 216 216 + <select data-testid="select" required></select> 217 217 + <textarea data-testid="textarea" required></textarea> 218 218 + <div data-testid="supported-role" role="tree" required></div> 219 219 + <div data-testid="supported-role-aria" role="tree" aria-required="true"></div> 220 220 + ``` 221 221 + 222 222 + ```ts 223 223 + await expect.element(getByTestId('required-input')).toBeRequired() 224 224 + await expect.element(getByTestId('aria-required-input')).toBeRequired() 225 225 + await expect.element(getByTestId('conflicted-input')).toBeRequired() 226 226 + await expect.element(getByTestId('aria-not-required-input')).not.toBeRequired() 227 227 + await expect.element(getByTestId('optional-input')).not.toBeRequired() 228 228 + await expect.element(getByTestId('unsupported-type')).not.toBeRequired() 229 229 + await expect.element(getByTestId('select')).toBeRequired() 230 230 + await expect.element(getByTestId('textarea')).toBeRequired() 231 231 + await expect.element(getByTestId('supported-role')).not.toBeRequired() 232 232 + await expect.element(getByTestId('supported-role-aria')).toBeRequired() 233 233 + ``` 234 234 + 235 235 + ## toBeValid 236 236 + 237 237 + ```ts 238 238 + function toBeValid(): Promise<void> 239 239 + ``` 240 240 + 241 241 + This allows you to check if the value of an element, is currently valid. 242 242 + 243 243 + An element is valid if it has no [`aria-invalid` attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-invalid) or an attribute value of "false". The result of [`checkValidity()`](https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation) must also be `true` if it's a form element. 244 244 + 245 245 + ```html 246 246 + <input data-testid="no-aria-invalid" /> 247 247 + <input data-testid="aria-invalid" aria-invalid /> 248 248 + <input data-testid="aria-invalid-value" aria-invalid="true" /> 249 249 + <input data-testid="aria-invalid-false" aria-invalid="false" /> 250 250 + 251 251 + <form data-testid="valid-form"> 252 252 + <input /> 253 253 + </form> 254 254 + 255 255 + <form data-testid="invalid-form"> 256 256 + <input required /> 257 257 + </form> 258 258 + ``` 259 259 + 260 260 + ```ts 261 261 + await expect.element(getByTestId('no-aria-invalid')).toBeValid() 262 262 + await expect.element(getByTestId('aria-invalid')).not.toBeValid() 263 263 + await expect.element(getByTestId('aria-invalid-value')).not.toBeValid() 264 264 + await expect.element(getByTestId('aria-invalid-false')).toBeValid() 265 265 + 266 266 + await expect.element(getByTestId('valid-form')).toBeValid() 267 267 + await expect.element(getByTestId('invalid-form')).not.toBeValid() 268 268 + ``` 269 269 + 270 270 + ## toBeVisible 271 271 + 272 272 + ```ts 273 273 + function toBeVisible(): Promise<void> 274 274 + ``` 275 275 + 276 276 + This allows you to check if an element is currently visible to the user. 277 277 + 278 278 + Element is considered visible when it has non-empty bounding box and does not have `visibility:hidden` computed style. 279 279 + 280 280 + Note that according to this definition: 281 281 + 282 282 + - Elements of zero size **are not** considered visible. 283 283 + - Elements with `display:none` **are not** considered visible. 284 284 + - Elements with `opacity:0` **are** considered visible. 285 285 + 286 286 + To check that at least one element from the list is visible, use `locator.first()`. 287 287 + 288 288 + ```ts 289 289 + // A specific element is visible. 290 290 + await expect.element(page.getByText('Welcome')).toBeVisible() 291 291 + 292 292 + // At least one item in the list is visible. 293 293 + await expect.element(page.getByTestId('todo-item').first()).toBeVisible() 294 294 + 295 295 + // At least one of the two elements is visible, possibly both. 296 296 + await expect.element( 297 297 + page.getByRole('button', { name: 'Sign in' }) 298 298 + .or(page.getByRole('button', { name: 'Sign up' })) 299 299 + .first() 300 300 + ).toBeVisible() 301 301 + ``` 302 302 + 303 303 + ## toContainElement 304 304 + 305 305 + ```ts 306 306 + function toContainElement(element: HTMLElement | SVGElement | null): Promise<void> 307 307 + ``` 308 308 + 309 309 + This allows you to assert whether an element contains another element as a descendant or not. 310 310 + 311 311 + ```html 312 312 + <span data-testid="ancestor"><span data-testid="descendant"></span></span> 313 313 + ``` 314 314 + 315 315 + ```ts 316 316 + const ancestor = getByTestId('ancestor') 317 317 + const descendant = getByTestId('descendant') 318 318 + const nonExistantElement = getByTestId('does-not-exist') 319 319 + 320 320 + await expect.element(ancestor).toContainElement(descendant) 321 321 + await expect.element(descendant).not.toContainElement(ancestor) 322 322 + await expect.element(ancestor).not.toContainElement(nonExistantElement) 323 323 + ``` 324 324 + 325 325 + ## toContainHTML 326 326 + 327 327 + ```ts 328 328 + function toContainHTML(htmlText: string): Promise<void> 329 329 + ``` 330 330 + 331 331 + Assert whether a string representing a HTML element is contained in another element. The string should contain valid html, and not any incomplete html. 332 332 + 333 333 + ```html 334 334 + <span data-testid="parent"><span data-testid="child"></span></span> 335 335 + ``` 336 336 + 337 337 + ```ts 338 338 + // These are valid usages 339 339 + await expect.element(getByTestId('parent')).toContainHTML('<span data-testid="child"></span>') 340 340 + await expect.element(getByTestId('parent')).toContainHTML('<span data-testid="child" />') 341 341 + await expect.element(getByTestId('parent')).not.toContainHTML('<br />') 342 342 + 343 343 + // These won't work 344 344 + await expect.element(getByTestId('parent')).toContainHTML('data-testid="child"') 345 345 + await expect.element(getByTestId('parent')).toContainHTML('data-testid') 346 346 + await expect.element(getByTestId('parent')).toContainHTML('</span>') 347 347 + ``` 348 348 + 349 349 + ::: warning 350 350 + Chances are you probably do not need to use this matcher. We encourage testing from the perspective of how the user perceives the app in a browser. That's why testing against a specific DOM structure is not advised. 351 351 + 352 352 + It could be useful in situations where the code being tested renders html that was obtained from an external source, and you want to validate that that html code was used as intended. 353 353 + 354 354 + It should not be used to check DOM structure that you control. Please, use [`toContainElement`](#tocontainelement) instead. 355 355 + ::: 356 356 + 357 357 + ## toHaveAccessibleDescription 358 358 + 359 359 + ```ts 360 360 + function toHaveAccessibleDescription(description?: string | RegExp): Promise<void> 361 361 + ``` 362 362 + 363 363 + This allows you to assert that an element has the expected 364 364 + [accessible description](https://w3c.github.io/accname/). 365 365 + 366 366 + You can pass the exact string of the expected accessible description, or you can 367 367 + make a partial match passing a regular expression, or by using 368 368 + [`expect.stringContaining`](/api/expect#expect-stringcontaining) or [`expect.stringMatching`](/api/expect#expect-stringmatching). 369 369 + 370 370 + ```html 371 371 + <a 372 372 + data-testid="link" 373 373 + href="/" 374 374 + aria-label="Home page" 375 375 + title="A link to start over" 376 376 + >Start</a 377 377 + > 378 378 + <a data-testid="extra-link" href="/about" aria-label="About page">About</a> 379 379 + <img src="avatar.jpg" data-testid="avatar" alt="User profile pic" /> 380 380 + <img 381 381 + src="logo.jpg" 382 382 + data-testid="logo" 383 383 + alt="Company logo" 384 384 + aria-describedby="t1" 385 385 + /> 386 386 + <span id="t1" role="presentation">The logo of Our Company</span> 387 387 + <img 388 388 + src="logo.jpg" 389 389 + data-testid="logo2" 390 390 + alt="Company logo" 391 391 + aria-description="The logo of Our Company" 392 392 + /> 393 393 + ``` 394 394 + 395 395 + ```ts 396 396 + await expect.element(getByTestId('link')).toHaveAccessibleDescription() 397 397 + await expect.element(getByTestId('link')).toHaveAccessibleDescription('A link to start over') 398 398 + await expect.element(getByTestId('link')).not.toHaveAccessibleDescription('Home page') 399 399 + await expect.element(getByTestId('extra-link')).not.toHaveAccessibleDescription() 400 400 + await expect.element(getByTestId('avatar')).not.toHaveAccessibleDescription() 401 401 + await expect.element(getByTestId('logo')).not.toHaveAccessibleDescription('Company logo') 402 402 + await expect.element(getByTestId('logo')).toHaveAccessibleDescription( 403 403 + 'The logo of Our Company', 404 404 + ) 405 405 + await expect.element(getByTestId('logo2')).toHaveAccessibleDescription( 406 406 + 'The logo of Our Company', 407 407 + ) 408 408 + ``` 409 409 + 410 410 + ## toHaveAccessibleErrorMessage 411 411 + 412 412 + ```ts 413 413 + function toHaveAccessibleErrorMessage(message?: string | RegExp): Promise<void> 414 414 + ``` 415 415 + 416 416 + This allows you to assert that an element has the expected 417 417 + [accessible error message](https://w3c.github.io/aria/#aria-errormessage). 418 418 + 419 419 + You can pass the exact string of the expected accessible error message. 420 420 + Alternatively, you can perform a partial match by passing a regular expression 421 421 + or by using 422 422 + [`expect.stringContaining`](/api/expect#expect-stringcontaining) or [`expect.stringMatching`](/api/expect#expect-stringmatching). 423 423 + 424 424 + ```html 425 425 + <input 426 426 + aria-label="Has Error" 427 427 + aria-invalid="true" 428 428 + aria-errormessage="error-message" 429 429 + /> 430 430 + <div id="error-message" role="alert">This field is invalid</div> 431 431 + 432 432 + <input aria-label="No Error Attributes" /> 433 433 + <input 434 434 + aria-label="Not Invalid" 435 435 + aria-invalid="false" 436 436 + aria-errormessage="error-message" 437 437 + /> 438 438 + ``` 439 439 + 440 440 + ```ts 441 441 + // Inputs with Valid Error Messages 442 442 + await expect.element(getByRole('textbox', { name: 'Has Error' })).toHaveAccessibleErrorMessage() 443 443 + await expect.element(getByRole('textbox', { name: 'Has Error' })).toHaveAccessibleErrorMessage( 444 444 + 'This field is invalid', 445 445 + ) 446 446 + await expect.element(getByRole('textbox', { name: 'Has Error' })).toHaveAccessibleErrorMessage( 447 447 + /invalid/i, 448 448 + ) 449 449 + await expect.element( 450 450 + getByRole('textbox', { name: 'Has Error' }), 451 451 + ).not.toHaveAccessibleErrorMessage('This field is absolutely correct!') 452 452 + 453 453 + // Inputs without Valid Error Messages 454 454 + await expect.element( 455 455 + getByRole('textbox', { name: 'No Error Attributes' }), 456 456 + ).not.toHaveAccessibleErrorMessage() 457 457 + 458 458 + await expect.element( 459 459 + getByRole('textbox', { name: 'Not Invalid' }), 460 460 + ).not.toHaveAccessibleErrorMessage() 461 461 + ``` 462 462 + 463 463 + ## toHaveAccessibleName 464 464 + 465 465 + ```ts 466 466 + function toHaveAccessibleName(name?: string | RegExp): Promise<void> 467 467 + ``` 468 468 + 469 469 + This allows you to assert that an element has the expected 470 470 + [accessible name](https://w3c.github.io/accname/). It is useful, for instance, 471 471 + to assert that form elements and buttons are properly labelled. 472 472 + 473 473 + You can pass the exact string of the expected accessible name, or you can make a 474 474 + partial match passing a regular expression, or by using 475 475 + [`expect.stringContaining`](/api/expect#expect-stringcontaining) or [`expect.stringMatching`](/api/expect#expect-stringmatching). 476 476 + 477 477 + ```html 478 478 + <img data-testid="img-alt" src="" alt="Test alt" /> 479 479 + <img data-testid="img-empty-alt" src="" alt="" /> 480 480 + <svg data-testid="svg-title"><title>Test title</title></svg> 481 481 + <button data-testid="button-img-alt"><img src="" alt="Test" /></button> 482 482 + <p><img data-testid="img-paragraph" src="" alt="" /> Test content</p> 483 483 + <button data-testid="svg-button"><svg><title>Test</title></svg></p> 484 484 + <div><svg data-testid="svg-without-title"></svg></div> 485 485 + <input data-testid="input-title" title="test" /> 486 486 + ``` 487 487 + 488 488 + ```javascript 489 489 + await expect.element(getByTestId('img-alt')).toHaveAccessibleName('Test alt') 490 490 + await expect.element(getByTestId('img-empty-alt')).not.toHaveAccessibleName() 491 491 + await expect.element(getByTestId('svg-title')).toHaveAccessibleName('Test title') 492 492 + await expect.element(getByTestId('button-img-alt')).toHaveAccessibleName() 493 493 + await expect.element(getByTestId('img-paragraph')).not.toHaveAccessibleName() 494 494 + await expect.element(getByTestId('svg-button')).toHaveAccessibleName() 495 495 + await expect.element(getByTestId('svg-without-title')).not.toHaveAccessibleName() 496 496 + await expect.element(getByTestId('input-title')).toHaveAccessibleName() 497 497 + ``` 498 498 + 499 499 + ## toHaveAttribute 500 500 + 501 501 + ```ts 502 502 + function toHaveAttribute(attribute: string, value?: unknown): Promise<void> 503 503 + ``` 504 504 + 505 505 + This allows you to check whether the given element has an attribute or not. You 506 506 + can also optionally check that the attribute has a specific expected value or 507 507 + partial match using [`expect.stringContaining`](/api/expect#expect-stringcontaining) or [`expect.stringMatching`](/api/expect#expect-stringmatching). 508 508 + 509 509 + ```html 510 510 + <button data-testid="ok-button" type="submit" disabled>ok</button> 511 511 + ``` 512 512 + 513 513 + ```ts 514 514 + const button = getByTestId('ok-button') 515 515 + 516 516 + await expect.element(button).toHaveAttribute('disabled') 517 517 + await expect.element(button).toHaveAttribute('type', 'submit') 518 518 + await expect.element(button).not.toHaveAttribute('type', 'button') 519 519 + 520 520 + await expect.element(button).toHaveAttribute( 521 521 + 'type', 522 522 + expect.stringContaining('sub') 523 523 + ) 524 524 + await expect.element(button).toHaveAttribute( 525 525 + 'type', 526 526 + expect.not.stringContaining('but') 527 527 + ) 528 528 + ``` 529 529 + 530 530 + ## toHaveClass 531 531 + 532 532 + ```ts 533 533 + function toHaveClass(...classNames: string[], options?: { exact: boolean }): Promise<void> 534 534 + function toHaveClass(...classNames: (string | RegExp)[]): Promise<void> 535 535 + ``` 536 536 + 537 537 + This allows you to check whether the given element has certain classes within 538 538 + its `class` attribute. You must provide at least one class, unless you are 539 539 + asserting that an element does not have any classes. 540 540 + 541 541 + The list of class names may include strings and regular expressions. Regular 542 542 + expressions are matched against each individual class in the target element, and 543 543 + it is NOT matched against its full `class` attribute value as whole. 544 544 + 545 545 + ::: warning 546 546 + Note that you cannot use `exact: true` option when only regular expressions are provided. 547 547 + ::: 548 548 + 549 549 + ```html 550 550 + <button data-testid="delete-button" class="btn extra btn-danger"> 551 551 + Delete item 552 552 + </button> 553 553 + <button data-testid="no-classes">No Classes</button> 554 554 + ``` 555 555 + 556 556 + ```ts 557 557 + const deleteButton = getByTestId('delete-button') 558 558 + const noClasses = getByTestId('no-classes') 559 559 + 560 560 + await expect.element(deleteButton).toHaveClass('extra') 561 561 + await expect.element(deleteButton).toHaveClass('btn-danger btn') 562 562 + await expect.element(deleteButton).toHaveClass(/danger/, 'btn') 563 563 + await expect.element(deleteButton).toHaveClass('btn-danger', 'btn') 564 564 + await expect.element(deleteButton).not.toHaveClass('btn-link') 565 565 + await expect.element(deleteButton).not.toHaveClass(/link/) 566 566 + 567 567 + // ⚠️ regexp matches against individual classes, not the whole classList 568 568 + await expect.element(deleteButton).not.toHaveClass(/btn extra/) 569 569 + 570 570 + // the element has EXACTLY a set of classes (in any order) 571 571 + await expect.element(deleteButton).toHaveClass('btn-danger extra btn', { 572 572 + exact: true 573 573 + }) 574 574 + // if it has more than expected it is going to fail 575 575 + await expect.element(deleteButton).not.toHaveClass('btn-danger extra', { 576 576 + exact: true 577 577 + }) 578 578 + 579 579 + await expect.element(noClasses).not.toHaveClass() 580 580 + ``` 581 581 + 582 582 + ## toHaveFocus 583 583 + 584 584 + ```ts 585 585 + function toHaveFocus(): Promise<void> 586 586 + ``` 587 587 + 588 588 + This allows you to assert whether an element has focus or not. 589 589 + 590 590 + ```html 591 591 + <div><input type="text" data-testid="element-to-focus" /></div> 592 592 + ``` 593 593 + 594 594 + ```ts 595 595 + const input = page.getByTestId('element-to-focus') 596 596 + input.element().focus() 597 597 + await expect.element(input).toHaveFocus() 598 598 + input.element().blur() 599 599 + await expect.element(input).not.toHaveFocus() 600 600 + ``` 601 601 + 602 602 + ## toHaveFormValues 603 603 + 604 604 + ```ts 605 605 + function toHaveFormValues(expectedValues: Record<string, unknown>): Promise<void> 606 606 + ``` 607 607 + 608 608 + This allows you to check if a form or fieldset contains form controls for each given name, and having the specified value. 609 609 + 610 610 + ::: tip 611 611 + It is important to stress that this matcher can only be invoked on a [form](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement) or a [fieldset](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFieldSetElement) element. 612 612 + 613 613 + This allows it to take advantage of the [`.elements`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements) property in `form` and `fieldset` to reliably fetch all form controls within them. 614 614 + 615 615 + This also avoids the possibility that users provide a container that contains more than one `form`, thereby intermixing form controls that are not related, and could even conflict with one another. 616 616 + ::: 617 617 + 618 618 + This matcher abstracts away the particularities with which a form control value 619 619 + is obtained depending on the type of form control. For instance, `<input>` 620 620 + elements have a `value` attribute, but `<select>` elements do not. Here's a list 621 621 + of all cases covered: 622 622 + 623 623 + - `<input type="number">` elements return the value as a **number**, instead of 624 624 + a string. 625 625 + - `<input type="checkbox">` elements: 626 626 + - if there's a single one with the given `name` attribute, it is treated as a 627 627 + **boolean**, returning `true` if the checkbox is checked, `false` if 628 628 + unchecked. 629 629 + - if there's more than one checkbox with the same `name` attribute, they are 630 630 + all treated collectively as a single form control, which returns the value 631 631 + as an **array** containing all the values of the selected checkboxes in the 632 632 + collection. 633 633 + - `<input type="radio">` elements are all grouped by the `name` attribute, and 634 634 + such a group treated as a single form control. This form control returns the 635 635 + value as a **string** corresponding to the `value` attribute of the selected 636 636 + radio button within the group. 637 637 + - `<input type="text">` elements return the value as a **string**. This also 638 638 + applies to `<input>` elements having any other possible `type` attribute 639 639 + that's not explicitly covered in different rules above (e.g. `search`, 640 640 + `email`, `date`, `password`, `hidden`, etc.) 641 641 + - `<select>` elements without the `multiple` attribute return the value as a 642 642 + **string** corresponding to the `value` attribute of the selected `option`, or 643 643 + `undefined` if there's no selected option. 644 644 + - `<select multiple>` elements return the value as an **array** containing all 645 645 + the values of the [selected options](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions). 646 646 + - `<textarea>` elements return their value as a **string**. The value 647 647 + corresponds to their node content. 648 648 + 649 649 + The above rules make it easy, for instance, to switch from using a single select 650 650 + control to using a group of radio buttons. Or to switch from a multi select 651 651 + control, to using a group of checkboxes. The resulting set of form values used 652 652 + by this matcher to compare against would be the same. 653 653 + 654 654 + ```html 655 655 + <form data-testid="login-form"> 656 656 + <input type="text" name="username" value="jane.doe" /> 657 657 + <input type="password" name="password" value="12345678" /> 658 658 + <input type="checkbox" name="rememberMe" checked /> 659 659 + <button type="submit">Sign in</button> 660 660 + </form> 661 661 + ``` 662 662 + 663 663 + ```ts 664 664 + await expect.element(getByTestId('login-form')).toHaveFormValues({ 665 665 + username: 'jane.doe', 666 666 + rememberMe: true, 667 667 + }) 668 668 + ``` 669 669 + 670 670 + ## toHaveStyle 671 671 + 672 672 + ```ts 673 673 + function toHaveStyle(css: string | Partial<CSSStyleDeclaration>): Promise<void> 674 674 + ``` 675 675 + 676 676 + This allows you to check if a certain element has some specific css properties 677 677 + with specific values applied. It matches only if the element has _all_ the 678 678 + expected properties applied, not just some of them. 679 679 + 680 680 + ```html 681 681 + <button 682 682 + data-testid="delete-button" 683 683 + style="display: none; background-color: red" 684 684 + > 685 685 + Delete item 686 686 + </button> 687 687 + ``` 688 688 + 689 689 + ```ts 690 690 + const button = getByTestId('delete-button') 691 691 + 692 692 + await expect.element(button).toHaveStyle('display: none') 693 693 + await expect.element(button).toHaveStyle({ display: 'none' }) 694 694 + await expect.element(button).toHaveStyle(` 695 695 + background-color: red; 696 696 + display: none; 697 697 + `) 698 698 + await expect.element(button).toHaveStyle({ 699 699 + backgroundColor: 'red', 700 700 + display: 'none', 701 701 + }) 702 702 + await expect.element(button).not.toHaveStyle(` 703 703 + background-color: blue; 704 704 + display: none; 705 705 + `) 706 706 + await expect.element(button).not.toHaveStyle({ 707 707 + backgroundColor: 'blue', 708 708 + display: 'none', 709 709 + }) 710 710 + ``` 711 711 + 712 712 + This also works with rules that are applied to the element via a class name for 713 713 + which some rules are defined in a stylesheet currently active in the document. 714 714 + The usual rules of css precedence apply. 715 715 + 716 716 + ## toHaveTextContent 717 717 + 718 718 + ```ts 719 719 + function toHaveTextContent( 720 720 + text: string | RegExp, 721 721 + options?: { normalizeWhitespace: boolean } 722 722 + ): Promise<void> 723 723 + ``` 724 724 + 725 725 + This allows you to check whether the given node has a text content or not. This 726 726 + supports elements, but also text nodes and fragments. 727 727 + 728 728 + When a `string` argument is passed through, it will perform a partial 729 729 + case-sensitive match to the node content. 730 730 + 731 731 + To perform a case-insensitive match, you can use a `RegExp` with the `/i` 732 732 + modifier. 733 733 + 734 734 + If you want to match the whole content, you can use a `RegExp` to do it. 735 735 + 736 736 + ```html 737 737 + <span data-testid="text-content">Text Content</span> 738 738 + ``` 739 739 + 740 740 + ```ts 741 741 + const element = getByTestId('text-content') 742 742 + 743 743 + await expect.element(element).toHaveTextContent('Content') 744 744 + // to match the whole content 745 745 + await expect.element(element).toHaveTextContent(/^Text Content$/) 746 746 + // to use case-insensitive match 747 747 + await expect.element(element).toHaveTextContent(/content$/i) 748 748 + await expect.element(element).not.toHaveTextContent('content') 749 749 + ``` 750 750 + 751 751 + ## toHaveValue 752 752 + 753 753 + ```ts 754 754 + function toHaveValue(value: string | string[] | number | null): Promise<void> 755 755 + ``` 756 756 + 757 757 + This allows you to check whether the given form element has the specified value. 758 758 + It accepts `<input>`, `<select>` and `<textarea>` elements with the exception of 759 759 + `<input type="checkbox">` and `<input type="radio">`, which can be meaningfully 760 760 + matched only using [`toBeChecked`](#tobechecked) or 761 761 + [`toHaveFormValues`](#tohaveformvalues). 762 762 + 763 763 + It also accepts elements with roles `meter`, `progressbar`, `slider` or 764 764 + `spinbutton` and checks their `aria-valuenow` attribute (as a number). 765 765 + 766 766 + For all other form elements, the value is matched using the same algorithm as in 767 767 + [`toHaveFormValues`](#tohaveformvalues) does. 768 768 + 769 769 + ```html 770 770 + <input type="text" value="text" data-testid="input-text" /> 771 771 + <input type="number" value="5" data-testid="input-number" /> 772 772 + <input type="text" data-testid="input-empty" /> 773 773 + <select multiple data-testid="select-number"> 774 774 + <option value="first">First Value</option> 775 775 + <option value="second" selected>Second Value</option> 776 776 + <option value="third" selected>Third Value</option> 777 777 + </select> 778 778 + ``` 779 779 + 780 780 + ```ts 781 781 + const textInput = getByTestId('input-text') 782 782 + const numberInput = getByTestId('input-number') 783 783 + const emptyInput = getByTestId('input-empty') 784 784 + const selectInput = getByTestId('select-number') 785 785 + 786 786 + await expect.element(textInput).toHaveValue('text') 787 787 + await expect.element(numberInput).toHaveValue(5) 788 788 + await expect.element(emptyInput).not.toHaveValue() 789 789 + await expect.element(selectInput).toHaveValue(['second', 'third']) 790 790 + ``` 791 791 + 792 792 + ## toHaveDisplayValue 793 793 + 794 794 + ```typescript 795 795 + function toHaveDisplayValue( 796 796 + value: string | RegExp | (string | RegExp)[] 797 797 + ): Promise<void> 798 798 + ``` 799 799 + 800 800 + This allows you to check whether the given form element has the specified 801 801 + displayed value (the one the end user will see). It accepts `<input>`, 802 802 + `<select>` and `<textarea>` elements with the exception of 803 803 + `<input type="checkbox">` and `<input type="radio">`, which can be meaningfully 804 804 + matched only using [`toBeChecked`](#tobechecked) or 805 805 + [`toHaveFormValues`](#tohaveformvalues). 806 806 + 807 807 + ```html 808 808 + <label for="input-example">First name</label> 809 809 + <input type="text" id="input-example" value="Luca" /> 810 810 + 811 811 + <label for="textarea-example">Description</label> 812 812 + <textarea id="textarea-example">An example description here.</textarea> 813 813 + 814 814 + <label for="single-select-example">Fruit</label> 815 815 + <select id="single-select-example"> 816 816 + <option value="">Select a fruit...</option> 817 817 + <option value="banana">Banana</option> 818 818 + <option value="ananas">Ananas</option> 819 819 + <option value="avocado">Avocado</option> 820 820 + </select> 821 821 + 822 822 + <label for="multiple-select-example">Fruits</label> 823 823 + <select id="multiple-select-example" multiple> 824 824 + <option value="">Select a fruit...</option> 825 825 + <option value="banana" selected>Banana</option> 826 826 + <option value="ananas">Ananas</option> 827 827 + <option value="avocado" selected>Avocado</option> 828 828 + </select> 829 829 + ``` 830 830 + 831 831 + ```ts 832 832 + const input = page.getByLabelText('First name') 833 833 + const textarea = page.getByLabelText('Description') 834 834 + const selectSingle = page.getByLabelText('Fruit') 835 835 + const selectMultiple = page.getByLabelText('Fruits') 836 836 + 837 837 + await expect.element(input).toHaveDisplayValue('Luca') 838 838 + await expect.element(input).toHaveDisplayValue(/Luc/) 839 839 + await expect.element(textarea).toHaveDisplayValue('An example description here.') 840 840 + await expect.element(textarea).toHaveDisplayValue(/example/) 841 841 + await expect.element(selectSingle).toHaveDisplayValue('Select a fruit...') 842 842 + await expect.element(selectSingle).toHaveDisplayValue(/Select/) 843 843 + await expect.element(selectMultiple).toHaveDisplayValue([/Avocado/, 'Banana']) 844 844 + ``` 845 845 + 846 846 + ## toBeChecked 847 847 + 848 848 + ```ts 849 849 + function toBeChecked(): Promise<void> 850 850 + ``` 851 851 + 852 852 + This allows you to check whether the given element is checked. It accepts an 853 853 + `input` of type `checkbox` or `radio` and elements with a `role` of `checkbox`, 854 854 + `radio` or `switch` with a valid `aria-checked` attribute of `"true"` or 855 855 + `"false"`. 856 856 + 857 857 + ```html 858 858 + <input type="checkbox" checked data-testid="input-checkbox-checked" /> 859 859 + <input type="checkbox" data-testid="input-checkbox-unchecked" /> 860 860 + <div role="checkbox" aria-checked="true" data-testid="aria-checkbox-checked" /> 861 861 + <div 862 862 + role="checkbox" 863 863 + aria-checked="false" 864 864 + data-testid="aria-checkbox-unchecked" 865 865 + /> 866 866 + 867 867 + <input type="radio" checked value="foo" data-testid="input-radio-checked" /> 868 868 + <input type="radio" value="foo" data-testid="input-radio-unchecked" /> 869 869 + <div role="radio" aria-checked="true" data-testid="aria-radio-checked" /> 870 870 + <div role="radio" aria-checked="false" data-testid="aria-radio-unchecked" /> 871 871 + <div role="switch" aria-checked="true" data-testid="aria-switch-checked" /> 872 872 + <div role="switch" aria-checked="false" data-testid="aria-switch-unchecked" /> 873 873 + ``` 874 874 + 875 875 + ```ts 876 876 + const inputCheckboxChecked = getByTestId('input-checkbox-checked') 877 877 + const inputCheckboxUnchecked = getByTestId('input-checkbox-unchecked') 878 878 + const ariaCheckboxChecked = getByTestId('aria-checkbox-checked') 879 879 + const ariaCheckboxUnchecked = getByTestId('aria-checkbox-unchecked') 880 880 + await expect.element(inputCheckboxChecked).toBeChecked() 881 881 + await expect.element(inputCheckboxUnchecked).not.toBeChecked() 882 882 + await expect.element(ariaCheckboxChecked).toBeChecked() 883 883 + await expect.element(ariaCheckboxUnchecked).not.toBeChecked() 884 884 + 885 885 + const inputRadioChecked = getByTestId('input-radio-checked') 886 886 + const inputRadioUnchecked = getByTestId('input-radio-unchecked') 887 887 + const ariaRadioChecked = getByTestId('aria-radio-checked') 888 888 + const ariaRadioUnchecked = getByTestId('aria-radio-unchecked') 889 889 + await expect.element(inputRadioChecked).toBeChecked() 890 890 + await expect.element(inputRadioUnchecked).not.toBeChecked() 891 891 + await expect.element(ariaRadioChecked).toBeChecked() 892 892 + await expect.element(ariaRadioUnchecked).not.toBeChecked() 893 893 + 894 894 + const ariaSwitchChecked = getByTestId('aria-switch-checked') 895 895 + const ariaSwitchUnchecked = getByTestId('aria-switch-unchecked') 896 896 + await expect.element(ariaSwitchChecked).toBeChecked() 897 897 + await expect.element(ariaSwitchUnchecked).not.toBeChecked() 898 898 + ``` 899 899 + 900 900 + ## toBePartiallyChecked 901 901 + 902 902 + ```typescript 903 903 + function toBePartiallyChecked(): Promise<void> 904 904 + ``` 905 905 + 906 906 + This allows you to check whether the given element is partially checked. It 907 907 + accepts an `input` of type `checkbox` and elements with a `role` of `checkbox` 908 908 + with a `aria-checked="mixed"`, or `input` of type `checkbox` with 909 909 + `indeterminate` set to `true` 910 910 + 911 911 + ```html 912 912 + <input type="checkbox" aria-checked="mixed" data-testid="aria-checkbox-mixed" /> 913 913 + <input type="checkbox" checked data-testid="input-checkbox-checked" /> 914 914 + <input type="checkbox" data-testid="input-checkbox-unchecked" /> 915 915 + <div role="checkbox" aria-checked="true" data-testid="aria-checkbox-checked" /> 916 916 + <div 917 917 + role="checkbox" 918 918 + aria-checked="false" 919 919 + data-testid="aria-checkbox-unchecked" 920 920 + /> 921 921 + <input type="checkbox" data-testid="input-checkbox-indeterminate" /> 922 922 + ``` 923 923 + 924 924 + ```ts 925 925 + const ariaCheckboxMixed = getByTestId('aria-checkbox-mixed') 926 926 + const inputCheckboxChecked = getByTestId('input-checkbox-checked') 927 927 + const inputCheckboxUnchecked = getByTestId('input-checkbox-unchecked') 928 928 + const ariaCheckboxChecked = getByTestId('aria-checkbox-checked') 929 929 + const ariaCheckboxUnchecked = getByTestId('aria-checkbox-unchecked') 930 930 + const inputCheckboxIndeterminate = getByTestId('input-checkbox-indeterminate') 931 931 + 932 932 + await expect.element(ariaCheckboxMixed).toBePartiallyChecked() 933 933 + await expect.element(inputCheckboxChecked).not.toBePartiallyChecked() 934 934 + await expect.element(inputCheckboxUnchecked).not.toBePartiallyChecked() 935 935 + await expect.element(ariaCheckboxChecked).not.toBePartiallyChecked() 936 936 + await expect.element(ariaCheckboxUnchecked).not.toBePartiallyChecked() 937 937 + 938 938 + inputCheckboxIndeterminate.element().indeterminate = true 939 939 + await expect.element(inputCheckboxIndeterminate).toBePartiallyChecked() 940 940 + ``` 941 941 + 942 942 + ## toHaveRole 943 943 + 944 944 + ```ts 945 945 + function toHaveRole(role: ARIARole): Promise<void> 946 946 + ``` 947 947 + 948 948 + This allows you to assert that an element has the expected [role](https://www.w3.org/TR/html-aria/#docconformance). 949 949 + 950 950 + This is useful in cases where you already have access to an element via some query other than the role itself, and want to make additional assertions regarding its accessibility. 951 951 + 952 952 + The role can match either an explicit role (via the `role` attribute), or an implicit one via the [implicit ARIA semantics](https://www.w3.org/TR/html-aria/#docconformance). 953 953 + 954 954 + ```html 955 955 + <button data-testid="button">Continue</button> 956 956 + <div role="button" data-testid="button-explicit">Continue</button> 957 957 + <button role="switch button" data-testid="button-explicit-multiple">Continue</button> 958 958 + <a href="/about" data-testid="link">About</a> 959 959 + <a data-testid="link-invalid">Invalid link<a/> 960 960 + ``` 961 961 + 962 962 + ```ts 963 963 + await expect.element(getByTestId('button')).toHaveRole('button') 964 964 + await expect.element(getByTestId('button-explicit')).toHaveRole('button') 965 965 + await expect.element(getByTestId('button-explicit-multiple')).toHaveRole('button') 966 966 + await expect.element(getByTestId('button-explicit-multiple')).toHaveRole('switch') 967 967 + await expect.element(getByTestId('link')).toHaveRole('link') 968 968 + await expect.element(getByTestId('link-invalid')).not.toHaveRole('link') 969 969 + await expect.element(getByTestId('link-invalid')).toHaveRole('generic') 970 970 + ``` 971 971 + 972 972 + ::: warning 973 973 + Roles are matched literally by string equality, without inheriting from the ARIA role hierarchy. As a result, querying a superclass role like `checkbox` will not include elements with a subclass role like `switch`. 974 974 + 975 975 + Also note that unlike `testing-library`, Vitest ignores all custom roles except the first valid one, following Playwright's behaviour: 976 976 + 977 977 + ```jsx 978 978 + <div data-testid="switch" role="switch alert"></div> 979 979 + 980 980 + await expect.element(getByTestId('switch')).toHaveRole('switch') // ✅ 981 981 + await expect.element(getByTestId('switch')).toHaveRole('alert') // ❌ 982 982 + ``` 983 983 + ::: 984 984 + 985 985 + ## toHaveSelection 986 986 + 987 987 + ```ts 988 988 + function toHaveSelection(selection?: string): Promise<void> 989 989 + ``` 990 990 + 991 991 + This allows to assert that an element has a 992 992 + [text selection](https://developer.mozilla.org/en-US/docs/Web/API/Selection). 993 993 + 994 994 + This is useful to check if text or part of the text is selected within an 995 995 + element. The element can be either an input of type text, a textarea, or any 996 996 + other element that contains text, such as a paragraph, span, div etc. 997 997 + 998 998 + ::: warning 999 999 + The expected selection is a string, it does not allow to check for 1000 1000 + selection range indeces. 1001 1001 + ::: 1002 1002 + 1003 1003 + ```html 1004 1004 + <div> 1005 1005 + <input type="text" value="text selected text" data-testid="text" /> 1006 1006 + <textarea data-testid="textarea">text selected text</textarea> 1007 1007 + <p data-testid="prev">prev</p> 1008 1008 + <p data-testid="parent"> 1009 1009 + text <span data-testid="child">selected</span> text 1010 1010 + </p> 1011 1011 + <p data-testid="next">next</p> 1012 1012 + </div> 1013 1013 + ``` 1014 1014 + 1015 1015 + ```ts 1016 1016 + getByTestId('text').element().setSelectionRange(5, 13) 1017 1017 + await expect.element(getByTestId('text')).toHaveSelection('selected') 1018 1018 + 1019 1019 + getByTestId('textarea').element().setSelectionRange(0, 5) 1020 1020 + await expect.element('textarea').toHaveSelection('text ') 1021 1021 + 1022 1022 + const selection = document.getSelection() 1023 1023 + const range = document.createRange() 1024 1024 + selection.removeAllRanges() 1025 1025 + selection.empty() 1026 1026 + selection.addRange(range) 1027 1027 + 1028 1028 + // selection of child applies to the parent as well 1029 1029 + range.selectNodeContents(getByTestId('child').element()) 1030 1030 + await expect.element(getByTestId('child')).toHaveSelection('selected') 1031 1031 + await expect.element(getByTestId('parent')).toHaveSelection('selected') 1032 1032 + 1033 1033 + // selection that applies from prev all, parent text before child, and part child. 1034 1034 + range.setStart(getByTestId('prev').element(), 0) 1035 1035 + range.setEnd(getByTestId('child').element().childNodes[0], 3) 1036 1036 + await expect.element(queryByTestId('prev')).toHaveSelection('prev') 1037 1037 + await expect.element(queryByTestId('child')).toHaveSelection('sel') 1038 1038 + await expect.element(queryByTestId('parent')).toHaveSelection('text sel') 1039 1039 + await expect.element(queryByTestId('next')).not.toHaveSelection() 1040 1040 + 1041 1041 + // selection that applies from part child, parent text after child and part next. 1042 1042 + range.setStart(getByTestId('child').element().childNodes[0], 3) 1043 1043 + range.setEnd(getByTestId('next').element().childNodes[0], 2) 1044 1044 + await expect.element(queryByTestId('child')).toHaveSelection('ected') 1045 1045 + await expect.element(queryByTestId('parent')).toHaveSelection('ected text') 1046 1046 + await expect.element(queryByTestId('prev')).not.toHaveSelection() 1047 1047 + await expect.element(queryByTestId('next')).toHaveSelection('ne') 1048 1048 + ```

+1 -1

docs/guide/browser/index.md

Reviewed

··· 401 401 402 402 If your framework is not represented, feel free to create your own package - it is a simple wrapper around the framework renderer and `page.elementLocator` API. We will add a link to it on this page. Make sure it has a name starting with `vitest-browser-`. 403 403 404 404 - Besides rendering components and locating elements, you will also need to make assertions. Vitest bundles the [`@testing-library/jest-dom`](https://github.com/testing-library/jest-dom) library to provide a wide range of DOM assertions out of the box. Read more at the [Assertions API](/guide/browser/assertion-api). 404 404 + Besides rendering components and locating elements, you will also need to make assertions. Vitest forks the [`@testing-library/jest-dom`](https://github.com/testing-library/jest-dom) library to provide a wide range of DOM assertions out of the box. Read more at the [Assertions API](/guide/browser/assertion-api). 405 405 406 406 ```ts 407 407 import { expect } from 'vitest'

+6 -2

docs/guide/browser/locators.md

Reviewed

··· 5 5 6 6 # Locators 7 7 8 8 - A locator is a representation of an element or a number of elements. Every locator is defined by a string called a selector. Vitest abstracts this selector by providing convenient methods that generate those selectors behind the scenes. 8 8 + A locator is a representation of an element or a number of elements. Every locator is defined by a string called a selector. Vitest abstracts this selector by providing convenient methods that generate them behind the scenes. 9 9 10 10 - The locator API uses a fork of [Playwright's locators](https://playwright.dev/docs/api/class-locator) called [Ivya](https://npmjs.com/ivya). However, Vitest provides this API to every [provider](/guide/browser/config.html#browser-provider). 10 10 + The locator API uses a fork of [Playwright's locators](https://playwright.dev/docs/api/class-locator) called [Ivya](https://npmjs.com/ivya). However, Vitest provides this API to every [provider](/guide/browser/config.html#browser-provider), not just playwright. 11 11 + 12 12 + ::: tip 13 13 + This page covers API usage. To better understand locators and their usage, read [Playwright's "Locators" documentation](https://playwright.dev/docs/locators). 14 14 + ::: 11 15 12 16 ## getByRole 13 17

+16

packages/expect/src/jest-matcher-utils.ts

Reviewed

··· 107 107 printReceived: typeof printReceived 108 108 printExpected: typeof printExpected 109 109 printDiffOrStringify: typeof printDiffOrStringify 110 110 + printWithType: typeof printWithType 110 111 } { 111 112 return { 112 113 EXPECTED_COLOR, ··· 120 121 printReceived, 121 122 printExpected, 122 123 printDiffOrStringify, 124 124 + printWithType, 123 125 } 126 126 + } 127 127 + 128 128 + export function printWithType<T>( 129 129 + name: string, 130 130 + value: T, 131 131 + print: (value: T) => string, 132 132 + ): string { 133 133 + const type = getType(value) 134 134 + const hasType 135 135 + = type !== 'null' && type !== 'undefined' 136 136 + ? `${name} has type: ${type}\n` 137 137 + : '' 138 138 + const hasValue = `${name} has value: ${print(value)}` 139 139 + return hasType + hasValue 124 140 } 125 141 126 142 export function addCustomEqualityTesters(newTesters: Array<Tester>): void {

+21

test/browser/specs/expect-dom.test.ts

Reviewed

··· 1 1 + import { expect, test } from 'vitest' 2 2 + import { instances, runBrowserTests } from './utils' 3 3 + 4 4 + const testNames = Object.keys(import.meta.glob('../fixtures/expect-dom/*.test.ts', { 5 5 + eager: false, 6 6 + })).map(path => path.slice('../fixtures/expect-dom/'.length)) 7 7 + 8 8 + test('expect-dom works correctly', async () => { 9 9 + const { stderr, stdout } = await runBrowserTests({ 10 10 + root: './fixtures/expect-dom', 11 11 + }) 12 12 + 13 13 + expect(stderr).toReportNoErrors() 14 14 + instances.forEach(({ browser }) => { 15 15 + testNames.forEach((name) => { 16 16 + expect(stdout).toReportPassedTest(name, browser) 17 17 + }) 18 18 + }) 19 19 + 20 20 + expect(stdout).toContain(`Test Files ${instances.length * testNames.length} passed`) 21 21 + })

+8

packages/browser/src/node/plugin.ts

Reviewed

··· 505 505 }, 506 506 injectTo: 'head' as const, 507 507 }, 508 508 + { 509 509 + tag: 'script', 510 510 + attrs: { 511 511 + type: 'module', 512 512 + src: parentServer.matchersUrl, 513 513 + }, 514 514 + injectTo: 'head' as const, 515 515 + }, 508 516 parentServer.locatorsUrl 509 517 ? { 510 518 tag: 'script',

-1

packages/browser/src/node/project.ts

Reviewed

··· 19 19 export class ProjectBrowser implements IProjectBrowser { 20 20 public testerHtml: Promise<string> | string 21 21 public testerFilepath: string 22 22 - public locatorsUrl: string | undefined 23 22 24 23 public provider!: BrowserProvider 25 24 public vitest: Vitest

+2

packages/browser/src/node/projectParent.ts

Reviewed

··· 35 35 public injectorJs: Promise<string> | string 36 36 public errorCatcherUrl: string 37 37 public locatorsUrl: string | undefined 38 38 + public matchersUrl: string 38 39 public stateJs: Promise<string> | string 39 40 40 41 public commands: Record<string, BrowserCommand<any>> = {} ··· 131 132 if (builtinProviders.includes(providerName)) { 132 133 this.locatorsUrl = join('/@fs/', distRoot, 'locators', `${providerName}.js`) 133 134 } 135 135 + this.matchersUrl = join('/@fs/', distRoot, 'expect-element.js') 134 136 this.stateJs = readFile( 135 137 resolve(distRoot, 'state.js'), 136 138 'utf-8',

+1 -1

packages/vitest/src/node/project.ts

Reviewed

··· 521 521 [ 522 522 ...MocksPlugins({ 523 523 filter(id) { 524 524 - if (id.includes(distRoot)) { 524 524 + if (id.includes(distRoot) || id.includes(browser.vite.config.cacheDir)) { 525 525 return false 526 526 } 527 527 return true

+21

test/browser/fixtures/expect-dom/setup.ts

Reviewed

··· 1 1 + import { expect } from 'vitest'; 2 2 + 3 3 + // Valid string terminator sequences are BEL, ESC\, and 0x9c 4 4 + const ST = '(?:\\u0007|\\u001B\\u005C|\\u009C)'; 5 5 + const pattern = [ 6 6 + `[\\u001B\\u009B][[\\]()#;?]*(?:(?:(?:(?:;[-a-zA-Z\\d\\/#&.:=?%@~_]+)*|[a-zA-Z\\d]+(?:;[-a-zA-Z\\d\\/#&.:=?%@~_]*)*)?${ST})`, 7 7 + '(?:(?:\\d{1,4}(?:;\\d{0,4})*)?[\\dA-PR-TZcf-nq-uy=><~]))', 8 8 + ].join('|'); 9 9 + 10 10 + const ansiRegexp = new RegExp(pattern, 'g'); 11 11 + 12 12 + function stripAnsi(string: string) { 13 13 + return string.replace(ansiRegexp, ''); 14 14 + } 15 15 + 16 16 + expect.addSnapshotSerializer({ 17 17 + test: (val) => typeof val === 'string' || val instanceof Error, 18 18 + print: (val: string | Error) => typeof val === 'string' 19 19 + ? stripAnsi(val) 20 20 + : `[${val.name}: ${stripAnsi(val.message)}]`, 21 21 + })

+207

test/browser/fixtures/expect-dom/toBeChecked.test.ts

Reviewed

··· 1 1 + import { describe, expect, test } from 'vitest' 2 2 + import { render } from './utils' 3 3 + 4 4 + describe('.toBeChecked', () => { 5 5 + test('handles checkbox input', () => { 6 6 + const {queryByTestId} = render(` 7 7 + <input type="checkbox" checked data-testid="input-checkbox-checked" /> 8 8 + <input type="checkbox" data-testid="input-checkbox-unchecked" /> 9 9 + `) 10 10 + 11 11 + expect(queryByTestId('input-checkbox-checked')).toBeChecked() 12 12 + expect(queryByTestId('input-checkbox-unchecked')).not.toBeChecked() 13 13 + }) 14 14 + 15 15 + test('handles radio input', () => { 16 16 + const {queryByTestId} = render(` 17 17 + <input type="radio" checked value="foo" data-testid="input-radio-checked" /> 18 18 + <input type="radio" value="foo" data-testid="input-radio-unchecked" /> 19 19 + `) 20 20 + 21 21 + expect(queryByTestId('input-radio-checked')).toBeChecked() 22 22 + expect(queryByTestId('input-radio-unchecked')).not.toBeChecked() 23 23 + }) 24 24 + 25 25 + test('handles element with role="checkbox"', () => { 26 26 + const {queryByTestId} = render(` 27 27 + <div role="checkbox" aria-checked="true" data-testid="aria-checkbox-checked" /> 28 28 + <div role="checkbox" aria-checked="false" data-testid="aria-checkbox-unchecked" /> 29 29 + `) 30 30 + 31 31 + expect(queryByTestId('aria-checkbox-checked')).toBeChecked() 32 32 + expect(queryByTestId('aria-checkbox-unchecked')).not.toBeChecked() 33 33 + }) 34 34 + 35 35 + test('handles element with role="radio"', () => { 36 36 + const {queryByTestId} = render(` 37 37 + <div role="radio" aria-checked="true" data-testid="aria-radio-checked" /> 38 38 + <div role="radio" aria-checked="false" data-testid="aria-radio-unchecked" /> 39 39 + `) 40 40 + 41 41 + expect(queryByTestId('aria-radio-checked')).toBeChecked() 42 42 + expect(queryByTestId('aria-radio-unchecked')).not.toBeChecked() 43 43 + }) 44 44 + 45 45 + test('handles element with role="switch"', () => { 46 46 + const {queryByTestId} = render(` 47 47 + <div role="switch" aria-checked="true" data-testid="aria-switch-checked" /> 48 48 + <div role="switch" aria-checked="false" data-testid="aria-switch-unchecked" /> 49 49 + `) 50 50 + 51 51 + expect(queryByTestId('aria-switch-checked')).toBeChecked() 52 52 + expect(queryByTestId('aria-switch-unchecked')).not.toBeChecked() 53 53 + }) 54 54 + 55 55 + test('handles element with role="menuitemcheckbox"', () => { 56 56 + const {queryByTestId} = render(` 57 57 + <div role="menuitemcheckbox" aria-checked="true" data-testid="aria-menuitemcheckbox-checked" /> 58 58 + <div role="menuitemcheckbox" aria-checked="false" data-testid="aria-menuitemcheckbox-unchecked" /> 59 59 + `) 60 60 + 61 61 + expect(queryByTestId('aria-menuitemcheckbox-checked')).toBeChecked() 62 62 + expect(queryByTestId('aria-menuitemcheckbox-unchecked')).not.toBeChecked() 63 63 + }) 64 64 + 65 65 + test('throws when checkbox input is checked but expected not to be', () => { 66 66 + const {queryByTestId} = render( 67 67 + `<input type="checkbox" checked data-testid="input-checked" />`, 68 68 + ) 69 69 + 70 70 + expect(() => 71 71 + expect(queryByTestId('input-checked')).not.toBeChecked(), 72 72 + ).toThrowError() 73 73 + }) 74 74 + 75 75 + test('throws when input checkbox is not checked but expected to be', () => { 76 76 + const {queryByTestId} = render( 77 77 + `<input type="checkbox" data-testid="input-empty" />`, 78 78 + ) 79 79 + 80 80 + expect(() => 81 81 + expect(queryByTestId('input-empty')).toBeChecked(), 82 82 + ).toThrowError() 83 83 + }) 84 84 + 85 85 + test('throws when element with role="checkbox" is checked but expected not to be', () => { 86 86 + const {queryByTestId} = render( 87 87 + `<div role="checkbox" aria-checked="true" data-testid="aria-checkbox-checked" />`, 88 88 + ) 89 89 + 90 90 + expect(() => 91 91 + expect(queryByTestId('aria-checkbox-checked')).not.toBeChecked(), 92 92 + ).toThrowError() 93 93 + }) 94 94 + 95 95 + test('throws when element with role="checkbox" is not checked but expected to be', () => { 96 96 + const {queryByTestId} = render( 97 97 + `<div role="checkbox" aria-checked="false" data-testid="aria-checkbox-unchecked" />`, 98 98 + ) 99 99 + 100 100 + expect(() => 101 101 + expect(queryByTestId('aria-checkbox-unchecked')).toBeChecked(), 102 102 + ).toThrowError() 103 103 + }) 104 104 + 105 105 + test('throws when radio input is checked but expected not to be', () => { 106 106 + const {queryByTestId} = render( 107 107 + `<input type="radio" checked data-testid="input-radio-checked" />`, 108 108 + ) 109 109 + 110 110 + expect(() => 111 111 + expect(queryByTestId('input-radio-checked')).not.toBeChecked(), 112 112 + ).toThrowError() 113 113 + }) 114 114 + 115 115 + test('throws when input radio is not checked but expected to be', () => { 116 116 + const {queryByTestId} = render( 117 117 + `<input type="radio" data-testid="input-radio-unchecked" />`, 118 118 + ) 119 119 + 120 120 + expect(() => 121 121 + expect(queryByTestId('input-radio-unchecked')).toBeChecked(), 122 122 + ).toThrowError() 123 123 + }) 124 124 + 125 125 + test('throws when element with role="radio" is checked but expected not to be', () => { 126 126 + const {queryByTestId} = render( 127 127 + `<div role="radio" aria-checked="true" data-testid="aria-radio-checked" />`, 128 128 + ) 129 129 + 130 130 + expect(() => 131 131 + expect(queryByTestId('aria-radio-checked')).not.toBeChecked(), 132 132 + ).toThrowError() 133 133 + }) 134 134 + 135 135 + test('throws when element with role="radio" is not checked but expected to be', () => { 136 136 + const {queryByTestId} = render( 137 137 + `<div role="radio" aria-checked="false" data-testid="aria-radio-unchecked" />`, 138 138 + ) 139 139 + 140 140 + expect(() => 141 141 + expect(queryByTestId('aria-checkbox-unchecked')).toBeChecked(), 142 142 + ).toThrowError() 143 143 + }) 144 144 + 145 145 + test('throws when element with role="switch" is checked but expected not to be', () => { 146 146 + const {queryByTestId} = render( 147 147 + `<div role="switch" aria-checked="true" data-testid="aria-switch-checked" />`, 148 148 + ) 149 149 + 150 150 + expect(() => 151 151 + expect(queryByTestId('aria-switch-checked')).not.toBeChecked(), 152 152 + ).toThrowError() 153 153 + }) 154 154 + 155 155 + test('throws when element with role="switch" is not checked but expected to be', () => { 156 156 + const {queryByTestId} = render( 157 157 + `<div role="switch" aria-checked="false" data-testid="aria-switch-unchecked" />`, 158 158 + ) 159 159 + 160 160 + expect(() => 161 161 + expect(queryByTestId('aria-switch-unchecked')).toBeChecked(), 162 162 + ).toThrowError() 163 163 + }) 164 164 + 165 165 + test('throws when element with role="checkbox" has an invalid aria-checked attribute', () => { 166 166 + const {queryByTestId} = render( 167 167 + `<div role="checkbox" aria-checked="something" data-testid="aria-checkbox-invalid" />`, 168 168 + ) 169 169 + 170 170 + expect(() => 171 171 + expect(queryByTestId('aria-checkbox-invalid')).toBeChecked(), 172 172 + ).toThrowError( 173 173 + /only inputs with .* a valid aria-checked attribute can be used/, 174 174 + ) 175 175 + }) 176 176 + 177 177 + test('throws when element with role="radio" has an invalid aria-checked attribute', () => { 178 178 + const {queryByTestId} = render( 179 179 + `<div role="radio" aria-checked="something" data-testid="aria-radio-invalid" />`, 180 180 + ) 181 181 + 182 182 + expect(() => 183 183 + expect(queryByTestId('aria-radio-invalid')).toBeChecked(), 184 184 + ).toThrowError( 185 185 + /only inputs with .* a valid aria-checked attribute can be used/, 186 186 + ) 187 187 + }) 188 188 + 189 189 + test('throws when element with role="switch" has an invalid aria-checked attribute', () => { 190 190 + const {queryByTestId} = render( 191 191 + `<div role="switch" aria-checked="something" data-testid="aria-switch-invalid" />`, 192 192 + ) 193 193 + 194 194 + expect(() => 195 195 + expect(queryByTestId('aria-switch-invalid')).toBeChecked(), 196 196 + ).toThrowError( 197 197 + /only inputs with .* a valid aria-checked attribute can be used/, 198 198 + ) 199 199 + }) 200 200 + 201 201 + test('throws when the element is not an input', () => { 202 202 + const {queryByTestId} = render(`<select data-testid="select"></select>`) 203 203 + expect(() => expect(queryByTestId('select')).toBeChecked()).toThrowError( 204 204 + /only inputs with type="checkbox" or type="radio" or elements with.* role="checkbox".* role="menuitemcheckbox".* role="option".* role="radio".* role="switch".* role="menuitemradio".* role="treeitem" .* can be used/, 205 205 + ) 206 206 + }) 207 207 + })

+291

test/browser/fixtures/expect-dom/toBeDisabled.test.ts

Reviewed

··· 1 1 + import { expect, test } from 'vitest' 2 2 + import { render } from './utils' 3 3 + 4 4 + const window = document.defaultView 5 5 + 6 6 + window.customElements.define( 7 7 + 'custom-element', 8 8 + class extends window.HTMLElement {}, 9 9 + ) 10 10 + 11 11 + test('.toBeDisabled', () => { 12 12 + const {queryByTestId} = render(` 13 13 + <div> 14 14 + <button disabled={true} data-testid="button-element">x</button> 15 15 + <textarea disabled={true} data-testid="textarea-element"></textarea> 16 16 + <input type="checkbox" disabled={true} data-testid="input-element" /> 17 17 + 18 18 + <fieldset disabled={true} data-testid="fieldset-element"> 19 19 + <button data-testid="fieldset-child-element">x</button> 20 20 + </fieldset> 21 21 + 22 22 + <div disabled={true} data-testid="div-element"> 23 23 + <button data-testid="div-child-element">x</button> 24 24 + </div> 25 25 + 26 26 + <fieldset disabled={true}> 27 27 + <div> 28 28 + <button data-testid="nested-form-element">x</button> 29 29 + 30 30 + <select data-testid="deep-select-element"> 31 31 + <optgroup data-testid="deep-optgroup-element"> 32 32 + <option data-testid="deep-option-element">x</option> 33 33 + </optgroup> 34 34 + </select> 35 35 + </div> 36 36 + <a href="http://github.com" data-testid="deep-a-element">x</a> 37 37 + </fieldset> 38 38 + 39 39 + <a href="http://github.com" disabled={true} data-testid="a-element">x</a> 40 40 + </div> 41 41 + `) 42 42 + 43 43 + expect(queryByTestId('button-element')).toBeDisabled() 44 44 + expect(() => 45 45 + expect(queryByTestId('button-element')).not.toBeDisabled(), 46 46 + ).toThrowError() 47 47 + expect(queryByTestId('textarea-element')).toBeDisabled() 48 48 + expect(queryByTestId('input-element')).toBeDisabled() 49 49 + 50 50 + // technically, everything inside a disabled fieldset is disabled, 51 51 + // but the fieldset itself is not considered disabled, because its 52 52 + // native tag is not part of 53 53 + // https://www.w3.org/TR/html-aam-1.0/#html-attribute-state-and-property-mappings 54 54 + // NOTE: this is different from jest-dom, but closer to how PW works 55 55 + expect(queryByTestId('fieldset-element')).not.toBeDisabled() 56 56 + expect(queryByTestId('fieldset-child-element')).toBeDisabled() 57 57 + 58 58 + expect(queryByTestId('div-element')).not.toBeDisabled() 59 59 + expect(queryByTestId('div-child-element')).not.toBeDisabled() 60 60 + 61 61 + expect(queryByTestId('nested-form-element')).toBeDisabled() 62 62 + expect(queryByTestId('deep-select-element')).toBeDisabled() 63 63 + expect(queryByTestId('deep-optgroup-element')).toBeDisabled() 64 64 + expect(queryByTestId('deep-option-element')).toBeDisabled() 65 65 + 66 66 + expect(queryByTestId('a-element')).not.toBeDisabled() 67 67 + expect(queryByTestId('deep-a-element')).not.toBeDisabled() 68 68 + expect(() => expect(queryByTestId('a-element')).toBeDisabled()).toThrowError() 69 69 + expect(() => 70 70 + expect(queryByTestId('deep-a-element')).toBeDisabled(), 71 71 + ).toThrowError() 72 72 + }) 73 73 + 74 74 + test('.toBeDisabled fieldset>legend', () => { 75 75 + const {queryByTestId} = render(` 76 76 + <div> 77 77 + <fieldset disabled={true}> 78 78 + <button data-testid="inherited-element">x</button> 79 79 + </fieldset> 80 80 + 81 81 + <fieldset disabled={true}> 82 82 + <legend> 83 83 + <button data-testid="inside-legend-element">x</button> 84 84 + </legend> 85 85 + </fieldset> 86 86 + 87 87 + <fieldset disabled={true}> 88 88 + <legend> 89 89 + <div> 90 90 + <button data-testid="nested-inside-legend-element">x</button> 91 91 + </div> 92 92 + </legend> 93 93 + </fieldset> 94 94 + 95 95 + <fieldset disabled={true}> 96 96 + <div></div> 97 97 + <legend> 98 98 + <button data-testid="first-legend-element">x</button> 99 99 + </legend> 100 100 + <legend> 101 101 + <button data-testid="second-legend-element">x</button> 102 102 + </legend> 103 103 + </fieldset> 104 104 + 105 105 + <fieldset disabled={true}> 106 106 + <fieldset> 107 107 + <legend> 108 108 + <button data-testid="outer-fieldset-element">x</button> 109 109 + </legend> 110 110 + </fieldset> 111 111 + </fieldset> 112 112 + </div> 113 113 + `) 114 114 + 115 115 + expect(queryByTestId('inherited-element')).toBeDisabled() 116 116 + expect(queryByTestId('inside-legend-element')).not.toBeDisabled() 117 117 + expect(queryByTestId('nested-inside-legend-element')).not.toBeDisabled() 118 118 + 119 119 + expect(queryByTestId('first-legend-element')).not.toBeDisabled() 120 120 + expect(queryByTestId('second-legend-element')).toBeDisabled() 121 121 + 122 122 + expect(queryByTestId('outer-fieldset-element')).toBeDisabled() 123 123 + }) 124 124 + 125 125 + test('.toBeDisabled custom element', () => { 126 126 + const {queryByTestId} = render(` 127 127 + <custom-element data-testid="disabled-custom-element" disabled=""></custom-element> 128 128 + <custom-element data-testid="enabled-custom-element"></custom-element> 129 129 + `) 130 130 + 131 131 + expect(queryByTestId('disabled-custom-element')).toBeDisabled() 132 132 + expect(() => { 133 133 + expect(queryByTestId('disabled-custom-element')).not.toBeDisabled() 134 134 + }).toThrowError('element is disabled') 135 135 + 136 136 + expect(queryByTestId('enabled-custom-element')).not.toBeDisabled() 137 137 + expect(() => { 138 138 + expect(queryByTestId('enabled-custom-element')).toBeDisabled() 139 139 + }).toThrowError('element is not disabled') 140 140 + }) 141 141 + 142 142 + test('.toBeEnabled', () => { 143 143 + const {queryByTestId} = render(` 144 144 + <div> 145 145 + <button disabled={true} data-testid="button-element">x</button> 146 146 + <textarea disabled={true} data-testid="textarea-element"></textarea> 147 147 + <input type="checkbox" disabled={true} data-testid="input-element" /> 148 148 + 149 149 + <fieldset disabled={true} data-testid="fieldset-element"> 150 150 + <button data-testid="fieldset-child-element">x</button> 151 151 + </fieldset> 152 152 + 153 153 + <div disabled={true} data-testid="div-element"> 154 154 + <button data-testid="div-child-element">x</button> 155 155 + </div> 156 156 + 157 157 + <fieldset disabled={true}> 158 158 + <div> 159 159 + <button data-testid="nested-form-element">x</button> 160 160 + 161 161 + <select data-testid="deep-select-element"> 162 162 + <optgroup data-testid="deep-optgroup-element"> 163 163 + <option data-testid="deep-option-element">x</option> 164 164 + </optgroup> 165 165 + </select> 166 166 + </div> 167 167 + <a href="http://github.com" data-testid="deep-a-element">x</a> 168 168 + </fieldset> 169 169 + 170 170 + <a href="http://github.com" disabled={true} data-testid="a-element">x</a> 171 171 + </div> 172 172 + `) 173 173 + 174 174 + expect(() => { 175 175 + expect(queryByTestId('button-element')).toBeEnabled() 176 176 + }).toThrowError() 177 177 + expect(queryByTestId('button-element')).not.toBeEnabled() 178 178 + expect(() => { 179 179 + expect(queryByTestId('textarea-element')).toBeEnabled() 180 180 + }).toThrowError() 181 181 + expect(() => { 182 182 + expect(queryByTestId('input-element')).toBeEnabled() 183 183 + }).toThrowError() 184 184 + 185 185 + expect(() => { 186 186 + // fieldset elements can't be considered disabled, only their children 187 187 + expect(queryByTestId('fieldset-element')).toBeDisabled() 188 188 + }).toThrowError() 189 189 + expect(() => { 190 190 + expect(queryByTestId('fieldset-child-element')).toBeEnabled() 191 191 + }).toThrowError() 192 192 + 193 193 + expect(queryByTestId('div-element')).toBeEnabled() 194 194 + expect(queryByTestId('div-child-element')).toBeEnabled() 195 195 + 196 196 + expect(() => { 197 197 + expect(queryByTestId('nested-form-element')).toBeEnabled() 198 198 + }).toThrowError() 199 199 + expect(() => { 200 200 + expect(queryByTestId('deep-select-element')).toBeEnabled() 201 201 + }).toThrowError() 202 202 + expect(() => { 203 203 + expect(queryByTestId('deep-optgroup-element')).toBeEnabled() 204 204 + }).toThrowError() 205 205 + expect(() => { 206 206 + expect(queryByTestId('deep-option-element')).toBeEnabled() 207 207 + }).toThrowError() 208 208 + 209 209 + expect(queryByTestId('a-element')).toBeEnabled() 210 210 + expect(() => 211 211 + expect(queryByTestId('a-element')).not.toBeEnabled(), 212 212 + ).toThrowError() 213 213 + expect(queryByTestId('deep-a-element')).toBeEnabled() 214 214 + expect(() => 215 215 + expect(queryByTestId('deep-a-element')).not.toBeEnabled(), 216 216 + ).toThrowError() 217 217 + }) 218 218 + 219 219 + test('.toBeEnabled fieldset>legend', () => { 220 220 + const {queryByTestId} = render(` 221 221 + <div> 222 222 + <fieldset disabled={true}> 223 223 + <button data-testid="inherited-element">x</button> 224 224 + </fieldset> 225 225 + 226 226 + <fieldset disabled={true}> 227 227 + <legend> 228 228 + <button data-testid="inside-legend-element">x</button> 229 229 + </legend> 230 230 + </fieldset> 231 231 + 232 232 + <fieldset disabled={true}> 233 233 + <legend> 234 234 + <div> 235 235 + <button data-testid="nested-inside-legend-element">x</button> 236 236 + </div> 237 237 + </legend> 238 238 + </fieldset> 239 239 + 240 240 + <fieldset disabled={true}> 241 241 + <div></div> 242 242 + <legend> 243 243 + <button data-testid="first-legend-element">x</button> 244 244 + </legend> 245 245 + <legend> 246 246 + <button data-testid="second-legend-element">x</button> 247 247 + </legend> 248 248 + </fieldset> 249 249 + 250 250 + <fieldset disabled={true}> 251 251 + <fieldset> 252 252 + <legend> 253 253 + <button data-testid="outer-fieldset-element">x</button> 254 254 + </legend> 255 255 + </fieldset> 256 256 + </fieldset> 257 257 + </div> 258 258 + `) 259 259 + 260 260 + expect(() => { 261 261 + expect(queryByTestId('inherited-element')).toBeEnabled() 262 262 + }).toThrowError() 263 263 + expect(queryByTestId('inside-legend-element')).toBeEnabled() 264 264 + expect(queryByTestId('nested-inside-legend-element')).toBeEnabled() 265 265 + 266 266 + expect(queryByTestId('first-legend-element')).toBeEnabled() 267 267 + expect(() => { 268 268 + expect(queryByTestId('second-legend-element')).toBeEnabled() 269 269 + }).toThrowError() 270 270 + 271 271 + expect(() => { 272 272 + expect(queryByTestId('outer-fieldset-element')).toBeEnabled() 273 273 + }).toThrowError() 274 274 + }) 275 275 + 276 276 + test('.toBeEnabled custom element', () => { 277 277 + const {queryByTestId} = render(` 278 278 + <custom-element data-testid="disabled-custom-element" disabled=""></custom-element> 279 279 + <custom-element data-testid="enabled-custom-element"></custom-element> 280 280 + `) 281 281 + 282 282 + expect(queryByTestId('disabled-custom-element')).not.toBeEnabled() 283 283 + expect(() => { 284 284 + expect(queryByTestId('disabled-custom-element')).toBeEnabled() 285 285 + }).toThrowError('element is not enabled') 286 286 + 287 287 + expect(queryByTestId('enabled-custom-element')).toBeEnabled() 288 288 + expect(() => { 289 289 + expect(queryByTestId('enabled-custom-element')).not.toBeEnabled() 290 290 + }).toThrowError('element is enabled') 291 291 + })

+63

test/browser/fixtures/expect-dom/toBeEmptyDOMElement.test.ts

Reviewed

··· 1 1 + import { expect, test } from 'vitest' 2 2 + import { render } from './utils' 3 3 + 4 4 + test('.toBeEmptyDOMElement', () => { 5 5 + const {queryByTestId} = render(` 6 6 + <span data-testid="not-empty"> 7 7 + <span data-testid="empty"></span> 8 8 + <svg data-testid="svg-empty"></svg> 9 9 + </span> 10 10 + <span data-testid="with-comment"><!-- This Comment --></span> 11 11 + <span data-testid="with-multiple-comments"><!-- Comment1 --><!-- Comment2 --></span> 12 12 + <span data-testid="with-element"><span></span></span> 13 13 + <span data-testid="with-element-and-comment"><!--Comment--><span></span></span> 14 14 + <span data-testid="with-whitespace"> </span> 15 15 + <span data-testid="with-text">Text</span>`) 16 16 + 17 17 + const empty = queryByTestId('empty') 18 18 + const notEmpty = queryByTestId('not-empty') 19 19 + const svgEmpty = queryByTestId('svg-empty') 20 20 + const withComment = queryByTestId('with-comment') 21 21 + const withMultipleComments = queryByTestId('with-multiple-comments') 22 22 + const withElement = queryByTestId('with-element') 23 23 + const withElementAndComment = queryByTestId('with-element-and-comment') 24 24 + const withWhitespace = queryByTestId('with-whitespace') 25 25 + const withText = queryByTestId('with-whitespace') 26 26 + const nonExistantElement = queryByTestId('not-exists') 27 27 + const fakeElement = {thisIsNot: 'an html element'} 28 28 + 29 29 + expect(empty).toBeEmptyDOMElement() 30 30 + expect(svgEmpty).toBeEmptyDOMElement() 31 31 + expect(notEmpty).not.toBeEmptyDOMElement() 32 32 + expect(withComment).toBeEmptyDOMElement() 33 33 + expect(withMultipleComments).toBeEmptyDOMElement() 34 34 + expect(withElement).not.toBeEmptyDOMElement() 35 35 + expect(withElementAndComment).not.toBeEmptyDOMElement() 36 36 + expect(withWhitespace).not.toBeEmptyDOMElement() 37 37 + expect(withText).not.toBeEmptyDOMElement() 38 38 + 39 39 + // negative test cases wrapped in throwError assertions for coverage. 40 40 + expect(() => expect(empty).not.toBeEmptyDOMElement()).toThrowError() 41 41 + 42 42 + expect(() => expect(svgEmpty).not.toBeEmptyDOMElement()).toThrowError() 43 43 + 44 44 + expect(() => expect(notEmpty).toBeEmptyDOMElement()).toThrowError() 45 45 + 46 46 + expect(() => expect(withComment).not.toBeEmptyDOMElement()).toThrowError() 47 47 + 48 48 + expect(() => expect(withMultipleComments).not.toBeEmptyDOMElement()).toThrowError() 49 49 + 50 50 + expect(() => expect(withElement).toBeEmptyDOMElement()).toThrowError() 51 51 + 52 52 + expect(() => expect(withElementAndComment).toBeEmptyDOMElement()).toThrowError() 53 53 + 54 54 + expect(() => expect(withWhitespace).toBeEmptyDOMElement()).toThrowError() 55 55 + 56 56 + expect(() => expect(withText).toBeEmptyDOMElement()).toThrowError() 57 57 + 58 58 + expect(() => expect(fakeElement).toBeEmptyDOMElement()).toThrowError() 59 59 + 60 60 + expect(() => { 61 61 + expect(nonExistantElement).toBeEmptyDOMElement() 62 62 + }).toThrowError() 63 63 + })

+63

test/browser/fixtures/expect-dom/toBeInTheDocument.test.ts

Reviewed

··· 1 1 + import { expect, test } from 'vitest' 2 2 + 3 3 + test('.toBeInTheDocument', () => { 4 4 + const window = document.defaultView 5 5 + 6 6 + window.customElements.define( 7 7 + 'custom-element-document', 8 8 + class extends window.HTMLElement { 9 9 + constructor() { 10 10 + super() 11 11 + this.attachShadow({mode: 'open'}).innerHTML = 12 12 + '<div data-testid="custom-element-child"></div>' 13 13 + } 14 14 + }, 15 15 + ) 16 16 + 17 17 + document.body.innerHTML = ` 18 18 + <span data-testid="html-element"><span>Html Element</span></span> 19 19 + <svg data-testid="svg-element"></svg> 20 20 + <custom-element-document data-testid="custom-element"></custom-element-document>` 21 21 + 22 22 + const htmlElement = document.querySelector('[data-testid="html-element"]') 23 23 + const svgElement = document.querySelector('[data-testid="svg-element"]') 24 24 + const customElementChild = document 25 25 + .querySelector('[data-testid="custom-element"]') 26 26 + .shadowRoot.querySelector('[data-testid="custom-element-child"]') 27 27 + const detachedElement = document.createElement('div') 28 28 + const fakeElement = {thisIsNot: 'an html element'} 29 29 + const undefinedElement = undefined 30 30 + const nullElement = null 31 31 + 32 32 + expect(htmlElement).toBeInTheDocument() 33 33 + expect(svgElement).toBeInTheDocument() 34 34 + expect(customElementChild).toBeInTheDocument() 35 35 + expect(detachedElement).not.toBeInTheDocument() 36 36 + expect(nullElement).not.toBeInTheDocument() 37 37 + 38 38 + // negative test cases wrapped in throwError assertions for coverage. 39 39 + const expectToBe = /expect.*\.toBeInTheDocument/ 40 40 + const expectNotToBe = /expect.*not\.toBeInTheDocument/ 41 41 + const userInputNode = /an HTMLElement or an SVGElement/ 42 42 + expect(() => expect(htmlElement).not.toBeInTheDocument()).toThrowError( 43 43 + expectNotToBe, 44 44 + ) 45 45 + expect(() => expect(svgElement).not.toBeInTheDocument()).toThrowError( 46 46 + expectNotToBe, 47 47 + ) 48 48 + expect(() => expect(detachedElement).toBeInTheDocument()).toThrowError( 49 49 + expectToBe, 50 50 + ) 51 51 + expect(() => expect(fakeElement).toBeInTheDocument()).toThrowError( 52 52 + userInputNode, 53 53 + ) 54 54 + expect(() => expect(nullElement).toBeInTheDocument()).toThrowError( 55 55 + userInputNode, 56 56 + ) 57 57 + expect(() => expect(undefinedElement).toBeInTheDocument()).toThrowError( 58 58 + userInputNode, 59 59 + ) 60 60 + expect(() => expect(undefinedElement).not.toBeInTheDocument()).toThrowError( 61 61 + userInputNode, 62 62 + ) 63 63 + })

+180

test/browser/fixtures/expect-dom/toBeInvalid.test.ts

Reviewed

··· 1 1 + import { describe, expect, test } from 'vitest' 2 2 + import { render } from './utils' 3 3 + 4 4 + function getDOMElement(htmlString: string, selector: string) { 5 5 + const doc = document.implementation.createHTMLDocument('') 6 6 + doc.body.innerHTML = htmlString 7 7 + return doc.querySelector(selector) 8 8 + } 9 9 + 10 10 + // A required field without a value is invalid 11 11 + const invalidInputHtml = `<input required>` 12 12 + 13 13 + const invalidInputNode = getDOMElement(invalidInputHtml, 'input') 14 14 + 15 15 + // A form is invalid if it contains an invalid input 16 16 + const invalidFormHtml = `<form>${invalidInputHtml}</form>` 17 17 + 18 18 + const invalidFormNode = getDOMElement(invalidFormHtml, 'form') 19 19 + 20 20 + describe('.toBeInvalid', () => { 21 21 + test('handles <input/>', () => { 22 22 + const {queryByTestId} = render(` 23 23 + <div> 24 24 + <input data-testid="no-aria-invalid"> 25 25 + <input data-testid="aria-invalid" aria-invalid> 26 26 + <input data-testid="aria-invalid-value" aria-invalid="true"> 27 27 + <input data-testid="aria-invalid-false" aria-invalid="false"> 28 28 + </div> 29 29 + `) 30 30 + 31 31 + expect(queryByTestId('no-aria-invalid')).not.toBeInvalid() 32 32 + expect(queryByTestId('aria-invalid')).toBeInvalid() 33 33 + expect(queryByTestId('aria-invalid-value')).toBeInvalid() 34 34 + expect(queryByTestId('aria-invalid-false')).not.toBeInvalid() 35 35 + expect(invalidInputNode).toBeInvalid() 36 36 + 37 37 + // negative test cases wrapped in throwError assertions for coverage. 38 38 + expect(() => 39 39 + expect(queryByTestId('no-aria-invalid')).toBeInvalid(), 40 40 + ).toThrowError() 41 41 + expect(() => 42 42 + expect(queryByTestId('aria-invalid')).not.toBeInvalid(), 43 43 + ).toThrowError() 44 44 + expect(() => 45 45 + expect(queryByTestId('aria-invalid-value')).not.toBeInvalid(), 46 46 + ).toThrowError() 47 47 + expect(() => 48 48 + expect(queryByTestId('aria-invalid-false')).toBeInvalid(), 49 49 + ).toThrowError() 50 50 + expect(() => expect(invalidInputNode).not.toBeInvalid()).toThrowError() 51 51 + }) 52 52 + 53 53 + test('handles <form/>', () => { 54 54 + const {queryByTestId} = render(` 55 55 + <form data-testid="valid"> 56 56 + <input> 57 57 + </form> 58 58 + `) 59 59 + 60 60 + expect(queryByTestId('valid')).not.toBeInvalid() 61 61 + expect(invalidFormNode).toBeInvalid() 62 62 + 63 63 + // negative test cases wrapped in throwError assertions for coverage. 64 64 + expect(() => expect(queryByTestId('valid')).toBeInvalid()).toThrowError() 65 65 + expect(() => expect(invalidFormNode).not.toBeInvalid()).toThrowError() 66 66 + }) 67 67 + 68 68 + test('handles any element', () => { 69 69 + const {queryByTestId} = render(` 70 70 + <ol data-testid="valid"> 71 71 + <li data-testid="no-aria-invalid" > </li> 72 72 + <li data-testid="aria-invalid" aria-invalid> </li> 73 73 + <li data-testid="aria-invalid-value" aria-invalid="true"> </li> 74 74 + <li data-testid="aria-invalid-false" aria-invalid="false"> </li> 75 75 + </ol> 76 76 + `) 77 77 + 78 78 + expect(queryByTestId('valid')).not.toBeInvalid() 79 79 + expect(queryByTestId('no-aria-invalid')).not.toBeInvalid() 80 80 + expect(queryByTestId('aria-invalid')).toBeInvalid() 81 81 + expect(queryByTestId('aria-invalid-value')).toBeInvalid() 82 82 + expect(queryByTestId('aria-invalid-false')).not.toBeInvalid() 83 83 + 84 84 + // negative test cases wrapped in throwError assertions for coverage. 85 85 + expect(() => expect(queryByTestId('valid')).toBeInvalid()).toThrowError() 86 86 + expect(() => 87 87 + expect(queryByTestId('no-aria-invalid')).toBeInvalid(), 88 88 + ).toThrowError() 89 89 + expect(() => 90 90 + expect(queryByTestId('aria-invalid')).not.toBeInvalid(), 91 91 + ).toThrowError() 92 92 + expect(() => 93 93 + expect(queryByTestId('aria-invalid-value')).not.toBeInvalid(), 94 94 + ).toThrowError() 95 95 + expect(() => 96 96 + expect(queryByTestId('aria-invalid-false')).toBeInvalid(), 97 97 + ).toThrowError() 98 98 + }) 99 99 + }) 100 100 + 101 101 + describe('.toBeValid', () => { 102 102 + test('handles <input/>', () => { 103 103 + const {queryByTestId} = render(` 104 104 + <div> 105 105 + <input data-testid="no-aria-invalid"> 106 106 + <input data-testid="aria-invalid" aria-invalid> 107 107 + <input data-testid="aria-invalid-value" aria-invalid="true"> 108 108 + <input data-testid="aria-invalid-false" aria-invalid="false"> 109 109 + </div> 110 110 + `) 111 111 + 112 112 + expect(queryByTestId('no-aria-invalid')).toBeValid() 113 113 + expect(queryByTestId('aria-invalid')).not.toBeValid() 114 114 + expect(queryByTestId('aria-invalid-value')).not.toBeValid() 115 115 + expect(queryByTestId('aria-invalid-false')).toBeValid() 116 116 + expect(invalidInputNode).not.toBeValid() 117 117 + 118 118 + // negative test cases wrapped in throwError assertions for coverage. 119 119 + expect(() => 120 120 + expect(queryByTestId('no-aria-invalid')).not.toBeValid(), 121 121 + ).toThrowError() 122 122 + expect(() => 123 123 + expect(queryByTestId('aria-invalid')).toBeValid(), 124 124 + ).toThrowError() 125 125 + expect(() => 126 126 + expect(queryByTestId('aria-invalid-value')).toBeValid(), 127 127 + ).toThrowError() 128 128 + expect(() => 129 129 + expect(queryByTestId('aria-invalid-false')).not.toBeValid(), 130 130 + ).toThrowError() 131 131 + expect(() => expect(invalidInputNode).toBeValid()).toThrowError() 132 132 + }) 133 133 + 134 134 + test('handles <form/>', () => { 135 135 + const {queryByTestId} = render(` 136 136 + <form data-testid="valid"> 137 137 + <input> 138 138 + </form> 139 139 + `) 140 140 + 141 141 + expect(queryByTestId('valid')).toBeValid() 142 142 + expect(invalidFormNode).not.toBeValid() 143 143 + 144 144 + // negative test cases wrapped in throwError assertions for coverage. 145 145 + expect(() => expect(queryByTestId('valid')).not.toBeValid()).toThrowError() 146 146 + expect(() => expect(invalidFormNode).toBeValid()).toThrowError() 147 147 + }) 148 148 + 149 149 + test('handles any element', () => { 150 150 + const {queryByTestId} = render(` 151 151 + <ol data-testid="valid"> 152 152 + <li data-testid="no-aria-invalid" > </li> 153 153 + <li data-testid="aria-invalid" aria-invalid> </li> 154 154 + <li data-testid="aria-invalid-value" aria-invalid="true"> </li> 155 155 + <li data-testid="aria-invalid-false" aria-invalid="false"> </li> 156 156 + </ol> 157 157 + `) 158 158 + 159 159 + expect(queryByTestId('valid')).toBeValid() 160 160 + expect(queryByTestId('no-aria-invalid')).toBeValid() 161 161 + expect(queryByTestId('aria-invalid')).not.toBeValid() 162 162 + expect(queryByTestId('aria-invalid-value')).not.toBeValid() 163 163 + expect(queryByTestId('aria-invalid-false')).toBeValid() 164 164 + 165 165 + // negative test cases wrapped in throwError assertions for coverage. 166 166 + expect(() => expect(queryByTestId('valid')).not.toBeValid()).toThrowError() 167 167 + expect(() => 168 168 + expect(queryByTestId('no-aria-invalid')).not.toBeValid(), 169 169 + ).toThrowError() 170 170 + expect(() => 171 171 + expect(queryByTestId('aria-invalid')).toBeValid(), 172 172 + ).toThrowError() 173 173 + expect(() => 174 174 + expect(queryByTestId('aria-invalid-value')).toBeValid(), 175 175 + ).toThrowError() 176 176 + expect(() => 177 177 + expect(queryByTestId('aria-invalid-false')).not.toBeValid(), 178 178 + ).toThrowError() 179 179 + }) 180 180 + })

+126

test/browser/fixtures/expect-dom/toBePartiallyChecked.test.ts

Reviewed

··· 1 1 + import { describe, expect, test } from 'vitest' 2 2 + import { render } from './utils' 3 3 + 4 4 + // FIXME 5 5 + // playwright prioritizes native checked to aria-checked for "checkbox" elements 6 6 + // jest-dom checks aria-checked="mixed" anyway 7 7 + describe('.toBePartiallyChecked', () => { 8 8 + test('handles input checkbox with aria-checked', () => { 9 9 + const {queryByTestId} = render(` 10 10 + <input type="checkbox" aria-checked="mixed" data-testid="checkbox-mixed" /> 11 11 + <input type="checkbox" checked data-testid="checkbox-checked" /> 12 12 + <input type="checkbox" data-testid="checkbox-unchecked" /> 13 13 + `) 14 14 + 15 15 + expect(queryByTestId('checkbox-mixed')).toBePartiallyChecked() 16 16 + expect(queryByTestId('checkbox-checked')).not.toBePartiallyChecked() 17 17 + expect(queryByTestId('checkbox-unchecked')).not.toBePartiallyChecked() 18 18 + }) 19 19 + 20 20 + test('handles input checkbox set as indeterminate', () => { 21 21 + const {queryByTestId} = render(` 22 22 + <input type="checkbox" data-testid="checkbox-mixed" /> 23 23 + <input type="checkbox" checked data-testid="checkbox-checked" /> 24 24 + <input type="checkbox" data-testid="checkbox-unchecked" /> 25 25 + `) 26 26 + 27 27 + ;(queryByTestId('checkbox-mixed') as HTMLInputElement).indeterminate = true 28 28 + 29 29 + expect(queryByTestId('checkbox-mixed')).toBePartiallyChecked() 30 30 + expect(queryByTestId('checkbox-checked')).not.toBePartiallyChecked() 31 31 + expect(queryByTestId('checkbox-unchecked')).not.toBePartiallyChecked() 32 32 + }) 33 33 + 34 34 + test('handles element with role="checkbox"', () => { 35 35 + const {queryByTestId} = render(` 36 36 + <div role="checkbox" aria-checked="mixed" data-testid="aria-checkbox-mixed" /> 37 37 + <div role="checkbox" aria-checked="true" data-testid="aria-checkbox-checked" /> 38 38 + <div role="checkbox" aria-checked="false" data-testid="aria-checkbox-unchecked" /> 39 39 + `) 40 40 + 41 41 + expect(queryByTestId('aria-checkbox-mixed')).toBePartiallyChecked() 42 42 + expect(queryByTestId('aria-checkbox-checked')).not.toBePartiallyChecked() 43 43 + expect(queryByTestId('aria-checkbox-unchecked')).not.toBePartiallyChecked() 44 44 + }) 45 45 + 46 46 + test('throws when input checkbox is mixed but expected not to be', () => { 47 47 + const {queryByTestId} = render( 48 48 + `<input type="checkbox" aria-checked="mixed" data-testid="checkbox-mixed" />`, 49 49 + ) 50 50 + 51 51 + expect(() => 52 52 + expect(queryByTestId('checkbox-mixed')).not.toBePartiallyChecked(), 53 53 + ).toThrowError() 54 54 + }) 55 55 + 56 56 + test('throws when input checkbox is indeterminate but expected not to be', () => { 57 57 + const {queryByTestId} = render( 58 58 + `<input type="checkbox" data-testid="checkbox-mixed" />`, 59 59 + ) 60 60 + 61 61 + ;(queryByTestId('checkbox-mixed') as HTMLInputElement).indeterminate = true 62 62 + 63 63 + expect(() => 64 64 + expect(queryByTestId('input-mixed')).not.toBePartiallyChecked(), 65 65 + ).toThrowError() 66 66 + }) 67 67 + 68 68 + test('throws when input checkbox is not checked but expected to be', () => { 69 69 + const {queryByTestId} = render( 70 70 + `<input type="checkbox" data-testid="checkbox-empty" />`, 71 71 + ) 72 72 + 73 73 + expect(() => 74 74 + expect(queryByTestId('checkbox-empty')).toBePartiallyChecked(), 75 75 + ).toThrowError() 76 76 + }) 77 77 + 78 78 + test('throws when element with role="checkbox" is partially checked but expected not to be', () => { 79 79 + const {queryByTestId} = render( 80 80 + `<div role="checkbox" aria-checked="mixed" data-testid="aria-checkbox-mixed" />`, 81 81 + ) 82 82 + 83 83 + expect(() => 84 84 + expect(queryByTestId('aria-checkbox-mixed')).not.toBePartiallyChecked(), 85 85 + ).toThrowError() 86 86 + }) 87 87 + 88 88 + test('throws when element with role="checkbox" is checked but expected to be partially checked', () => { 89 89 + const {queryByTestId} = render( 90 90 + `<div role="checkbox" aria-checked="true" data-testid="aria-checkbox-checked" />`, 91 91 + ) 92 92 + 93 93 + expect(() => 94 94 + expect(queryByTestId('aria-checkbox-checked')).toBePartiallyChecked(), 95 95 + ).toThrowError() 96 96 + }) 97 97 + 98 98 + test('throws when element with role="checkbox" is not checked but expected to be', () => { 99 99 + const {queryByTestId} = render( 100 100 + `<div role="checkbox" aria-checked="false" data-testid="aria-checkbox" />`, 101 101 + ) 102 102 + 103 103 + expect(() => 104 104 + expect(queryByTestId('aria-checkbox')).toBePartiallyChecked(), 105 105 + ).toThrowError() 106 106 + }) 107 107 + 108 108 + test('throws when element with role="checkbox" has an invalid aria-checked attribute', () => { 109 109 + const {queryByTestId} = render( 110 110 + `<div role="checkbox" aria-checked="something" data-testid="aria-checkbox-invalid" />`, 111 111 + ) 112 112 + 113 113 + expect(() => 114 114 + expect(queryByTestId('aria-checkbox-invalid')).toBePartiallyChecked(), 115 115 + ).toThrowError() 116 116 + }) 117 117 + 118 118 + test('throws when the element is not a checkbox', () => { 119 119 + const {queryByTestId} = render(`<select data-testid="select"></select>`) 120 120 + expect(() => 121 121 + expect(queryByTestId('select')).toBePartiallyChecked(), 122 122 + ).toThrowError( 123 123 + 'only inputs with type="checkbox" or elements with role="checkbox" and a valid aria-checked attribute can be used with .toBePartiallyChecked(). Use .toHaveValue() instead', 124 124 + ) 125 125 + }) 126 126 + })

+62

test/browser/fixtures/expect-dom/toBeRequired.test.ts

Reviewed

··· 1 1 + import { expect, test } from 'vitest' 2 2 + import { render } from './utils' 3 3 + 4 4 + test('.toBeRequired', () => { 5 5 + const {queryByTestId} = render(` 6 6 + <div> 7 7 + <input data-testid="required-input" required> 8 8 + <input data-testid="aria-required-input" aria-required="true"> 9 9 + <input data-testid="conflicted-input" required aria-required="false"> 10 10 + <input data-testid="not-required-input" aria-required="false"> 11 11 + <input data-testid="basic-input"> 12 12 + <input data-testid="unsupported-type" type="image" required> 13 13 + <select data-testid="select" required></select> 14 14 + <textarea data-testid="textarea" required></textarea> 15 15 + <div data-testid="supported-role" role="tree" required></div> 16 16 + <div data-testid="supported-role-aria" role="tree" aria-required="true"></div> 17 17 + </div> 18 18 + `) 19 19 + 20 20 + expect(queryByTestId('required-input')).toBeRequired() 21 21 + expect(queryByTestId('aria-required-input')).toBeRequired() 22 22 + expect(queryByTestId('conflicted-input')).toBeRequired() 23 23 + expect(queryByTestId('not-required-input')).not.toBeRequired() 24 24 + expect(queryByTestId('basic-input')).not.toBeRequired() 25 25 + expect(queryByTestId('unsupported-type')).not.toBeRequired() 26 26 + expect(queryByTestId('select')).toBeRequired() 27 27 + expect(queryByTestId('textarea')).toBeRequired() 28 28 + expect(queryByTestId('supported-role')).not.toBeRequired() 29 29 + expect(queryByTestId('supported-role-aria')).toBeRequired() 30 30 + 31 31 + // negative test cases wrapped in throwError assertions for coverage. 32 32 + expect(() => 33 33 + expect(queryByTestId('required-input')).not.toBeRequired(), 34 34 + ).toThrowError() 35 35 + expect(() => 36 36 + expect(queryByTestId('aria-required-input')).not.toBeRequired(), 37 37 + ).toThrowError() 38 38 + expect(() => 39 39 + expect(queryByTestId('conflicted-input')).not.toBeRequired(), 40 40 + ).toThrowError() 41 41 + expect(() => 42 42 + expect(queryByTestId('not-required-input')).toBeRequired(), 43 43 + ).toThrowError() 44 44 + expect(() => 45 45 + expect(queryByTestId('basic-input')).toBeRequired(), 46 46 + ).toThrowError() 47 47 + expect(() => 48 48 + expect(queryByTestId('unsupported-type')).toBeRequired(), 49 49 + ).toThrowError() 50 50 + expect(() => 51 51 + expect(queryByTestId('select')).not.toBeRequired(), 52 52 + ).toThrowError() 53 53 + expect(() => 54 54 + expect(queryByTestId('textarea')).not.toBeRequired(), 55 55 + ).toThrowError() 56 56 + expect(() => 57 57 + expect(queryByTestId('supported-role')).toBeRequired(), 58 58 + ).toThrowError() 59 59 + expect(() => 60 60 + expect(queryByTestId('supported-role-aria')).not.toBeRequired(), 61 61 + ).toThrowError() 62 62 + })

+427

test/browser/fixtures/expect-dom/toBeVisible.test.ts

Reviewed

··· 1 1 + import { afterEach, beforeEach, describe, expect, it } from 'vitest' 2 2 + import { render } from './utils' 3 3 + 4 4 + describe('.toBeVisible', () => { 5 5 + it('returns the visibility of an element', () => { 6 6 + const {container} = render(` 7 7 + <div> 8 8 + <header> 9 9 + <h1 style="display: none">Main title</h1> 10 10 + <h2 style="visibility: hidden">Secondary title</h2> 11 11 + <h3 style="visibility: collapse">Secondary title</h3> 12 12 + <h4 style="opacity: 0">Secondary title</h4> 13 13 + <h5 style="opacity: 0.1">Secondary title</h5> 14 14 + </header> 15 15 + <button hidden>Hidden button</button> 16 16 + <section style="display: block; visibility: hidden"> 17 17 + <p>Hello <strong>World</strong></p> 18 18 + </section> 19 19 + </div> 20 20 + `) 21 21 + 22 22 + expect(container.querySelector('header')).toBeVisible() 23 23 + expect(container.querySelector('h1')).not.toBeVisible() 24 24 + expect(container.querySelector('h2')).not.toBeVisible() 25 25 + expect(container.querySelector('h3')).not.toBeVisible() 26 26 + expect(container.querySelector('h4')).toBeVisible() // element.checkVisibility() returns true for opacity: 0 27 27 + expect(container.querySelector('h5')).toBeVisible() 28 28 + expect(container.querySelector('button')).not.toBeVisible() 29 29 + expect(container.querySelector('strong')).not.toBeVisible() 30 30 + 31 31 + expect(() => 32 32 + expect(container.querySelector('header')).not.toBeVisible(), 33 33 + ).toThrowError() 34 34 + expect(() => 35 35 + expect(container.querySelector('p')).toBeVisible(), 36 36 + ).toThrowError() 37 37 + }) 38 38 + 39 39 + it('detached element is not visible', () => { 40 40 + const subject = document.createElement('div') 41 41 + expect(subject).not.toBeVisible() 42 42 + expect(() => expect(subject).toBeVisible()).toThrowError() 43 43 + }) 44 44 + 45 45 + describe('with a <details /> element', () => { 46 46 + let subject 47 47 + 48 48 + afterEach(() => { 49 49 + subject = undefined 50 50 + }) 51 51 + 52 52 + describe('when the details is opened', () => { 53 53 + beforeEach(() => { 54 54 + subject = render(` 55 55 + <details open> 56 56 + <summary>Title of visible</summary> 57 57 + <div>Visible <small>details</small></div> 58 58 + </details> 59 59 + `) 60 60 + }) 61 61 + 62 62 + it('returns true to the details content', () => { 63 63 + expect(subject.container.querySelector('div')).toBeVisible() 64 64 + }) 65 65 + 66 66 + it('returns true to the most inner details content', () => { 67 67 + expect(subject.container.querySelector('small')).toBeVisible() 68 68 + }) 69 69 + 70 70 + it('returns true to the details summary', () => { 71 71 + expect(subject.container.querySelector('summary')).toBeVisible() 72 72 + }) 73 73 + 74 74 + describe('when the user clicks on the summary', () => { 75 75 + beforeEach(() => subject.container.querySelector('summary').click()) 76 76 + 77 77 + it('returns false to the details content', () => { 78 78 + expect(subject.container.querySelector('div')).not.toBeVisible() 79 79 + }) 80 80 + 81 81 + it('returns true to the details summary', () => { 82 82 + expect(subject.container.querySelector('summary')).toBeVisible() 83 83 + }) 84 84 + }) 85 85 + }) 86 86 + 87 87 + describe('when the details is not opened', () => { 88 88 + beforeEach(() => { 89 89 + subject = render(` 90 90 + <details> 91 91 + <summary>Title of hidden</summary> 92 92 + <div>Hidden details</div> 93 93 + </details> 94 94 + `) 95 95 + }) 96 96 + 97 97 + it('returns false to the details content', () => { 98 98 + expect(subject.container.querySelector('div')).not.toBeVisible() 99 99 + }) 100 100 + 101 101 + it('returns true to the summary content', () => { 102 102 + expect(subject.container.querySelector('summary')).toBeVisible() 103 103 + }) 104 104 + 105 105 + describe('when the user clicks on the summary', () => { 106 106 + beforeEach(() => subject.container.querySelector('summary').click()) 107 107 + 108 108 + it('returns true to the details content', () => { 109 109 + expect(subject.container.querySelector('div')).toBeVisible() 110 110 + }) 111 111 + 112 112 + it('returns true to the details summary', () => { 113 113 + expect(subject.container.querySelector('summary')).toBeVisible() 114 114 + }) 115 115 + }) 116 116 + }) 117 117 + 118 118 + describe('when the details is opened but it is hidden', () => { 119 119 + beforeEach(() => { 120 120 + subject = render(` 121 121 + <details open hidden> 122 122 + <summary>Title of visible</summary> 123 123 + <div>Visible details</div> 124 124 + </details> 125 125 + `) 126 126 + }) 127 127 + 128 128 + it('returns false to the details content', () => { 129 129 + expect(subject.container.querySelector('div')).not.toBeVisible() 130 130 + }) 131 131 + 132 132 + it('returns false to the details summary', () => { 133 133 + expect(subject.container.querySelector('summary')).not.toBeVisible() 134 134 + }) 135 135 + }) 136 136 + 137 137 + describe('when the <details /> inner text does not have an enclosing element', () => { 138 138 + describe('when the details is not opened', () => { 139 139 + beforeEach(() => { 140 140 + subject = render(` 141 141 + <details> 142 142 + <summary>Title of hidden innerText</summary> 143 143 + hidden innerText 144 144 + </details> 145 145 + `) 146 146 + }) 147 147 + 148 148 + it('returns true to the details content', () => { 149 149 + expect(subject.container.querySelector('details')).toBeVisible() 150 150 + }) 151 151 + 152 152 + it('returns true to the details summary', () => { 153 153 + expect(subject.container.querySelector('summary')).toBeVisible() 154 154 + }) 155 155 + 156 156 + describe('when the user clicks on the summary', () => { 157 157 + beforeEach(() => subject.container.querySelector('summary').click()) 158 158 + 159 159 + it('returns true to the details content', () => { 160 160 + expect(subject.container.querySelector('details')).toBeVisible() 161 161 + }) 162 162 + 163 163 + it('returns true to the details summary', () => { 164 164 + expect(subject.container.querySelector('summary')).toBeVisible() 165 165 + }) 166 166 + }) 167 167 + }) 168 168 + 169 169 + describe('when the details is opened', () => { 170 170 + beforeEach(() => { 171 171 + subject = render(` 172 172 + <details open> 173 173 + <summary>Title of visible innerText</summary> 174 174 + visible <small>innerText</small> 175 175 + </details> 176 176 + `) 177 177 + }) 178 178 + 179 179 + it('returns true to the details content', () => { 180 180 + expect(subject.container.querySelector('details')).toBeVisible() 181 181 + }) 182 182 + 183 183 + it('returns true to inner small content', () => { 184 184 + expect(subject.container.querySelector('small')).toBeVisible() 185 185 + }) 186 186 + 187 187 + describe('when the user clicks on the summary', () => { 188 188 + beforeEach(() => subject.container.querySelector('summary').click()) 189 189 + 190 190 + it('returns true to the details content', () => { 191 191 + expect(subject.container.querySelector('details')).toBeVisible() 192 192 + }) 193 193 + 194 194 + it('returns false to the inner small content', () => { 195 195 + expect(subject.container.querySelector('small')).not.toBeVisible() 196 196 + }) 197 197 + 198 198 + it('returns true to the details summary', () => { 199 199 + expect(subject.container.querySelector('summary')).toBeVisible() 200 200 + }) 201 201 + }) 202 202 + }) 203 203 + }) 204 204 + 205 205 + describe('with a nested <details /> element', () => { 206 206 + describe('when the nested <details /> is opened', () => { 207 207 + beforeEach(() => { 208 208 + subject = render(` 209 209 + <details open> 210 210 + <summary>Title of visible</summary> 211 211 + <div>Outer content</div> 212 212 + <details open> 213 213 + <summary>Title of nested details</summary> 214 214 + <div>Inner content</div> 215 215 + </details> 216 216 + </details> 217 217 + `) 218 218 + }) 219 219 + 220 220 + it('returns true to the nested details content', () => { 221 221 + expect( 222 222 + subject.container.querySelector('details > details > div'), 223 223 + ).toBeVisible() 224 224 + }) 225 225 + 226 226 + it('returns true to the nested details summary', () => { 227 227 + expect( 228 228 + subject.container.querySelector('details > details > summary'), 229 229 + ).toBeVisible() 230 230 + }) 231 231 + 232 232 + it('returns true to the outer details content', () => { 233 233 + expect(subject.container.querySelector('details > div')).toBeVisible() 234 234 + }) 235 235 + 236 236 + it('returns true to the outer details summary', () => { 237 237 + expect( 238 238 + subject.container.querySelector('details > summary'), 239 239 + ).toBeVisible() 240 240 + }) 241 241 + }) 242 242 + 243 243 + describe('when the nested <details /> is not opened', () => { 244 244 + beforeEach(() => { 245 245 + subject = render(` 246 246 + <details open> 247 247 + <summary>Title of visible</summary> 248 248 + <div>Outer content</div> 249 249 + <details> 250 250 + <summary>Title of nested details</summary> 251 251 + <div>Inner content</div> 252 252 + </details> 253 253 + </details> 254 254 + `) 255 255 + }) 256 256 + 257 257 + it('returns false to the nested details content', () => { 258 258 + expect( 259 259 + subject.container.querySelector('details > details > div'), 260 260 + ).not.toBeVisible() 261 261 + }) 262 262 + 263 263 + it('returns true to the nested details summary', () => { 264 264 + expect( 265 265 + subject.container.querySelector('details > details > summary'), 266 266 + ).toBeVisible() 267 267 + }) 268 268 + 269 269 + it('returns true to the outer details content', () => { 270 270 + expect(subject.container.querySelector('details > div')).toBeVisible() 271 271 + }) 272 272 + 273 273 + it('returns true to the outer details summary', () => { 274 274 + expect( 275 275 + subject.container.querySelector('details > summary'), 276 276 + ).toBeVisible() 277 277 + }) 278 278 + }) 279 279 + 280 280 + describe('when the outer <details /> is not opened and the nested one is opened', () => { 281 281 + beforeEach(() => { 282 282 + subject = render(` 283 283 + <details> 284 284 + <summary>Title of visible</summary> 285 285 + <div>Outer content</div> 286 286 + <details open> 287 287 + <summary>Title of nested details</summary> 288 288 + <div>Inner content</div> 289 289 + </details> 290 290 + </details> 291 291 + `) 292 292 + }) 293 293 + 294 294 + it('returns false to the nested details content', () => { 295 295 + expect( 296 296 + subject.container.querySelector('details > details > div'), 297 297 + ).not.toBeVisible() 298 298 + }) 299 299 + 300 300 + it('returns false to the nested details summary', () => { 301 301 + expect( 302 302 + subject.container.querySelector('details > details > summary'), 303 303 + ).not.toBeVisible() 304 304 + }) 305 305 + 306 306 + it('returns false to the outer details content', () => { 307 307 + expect( 308 308 + subject.container.querySelector('details > div'), 309 309 + ).not.toBeVisible() 310 310 + }) 311 311 + 312 312 + it('returns true to the outer details summary', () => { 313 313 + expect( 314 314 + subject.container.querySelector('details > summary'), 315 315 + ).toBeVisible() 316 316 + }) 317 317 + }) 318 318 + 319 319 + describe('with nested details (unenclosed outer, enclosed inner)', () => { 320 320 + describe('when both outer and inner are opened', () => { 321 321 + beforeEach(() => { 322 322 + subject = render(` 323 323 + <details open> 324 324 + <summary>Title of outer unenclosed</summary> 325 325 + Unenclosed innerText 326 326 + <details open> 327 327 + <summary>Title of inner enclosed</summary> 328 328 + <div>Enclosed innerText</div> 329 329 + </details> 330 330 + </details> 331 331 + `) 332 332 + }) 333 333 + 334 334 + it('returns true to outer unenclosed innerText', () => { 335 335 + expect(subject.container.querySelector('details')).toBeVisible() 336 336 + }) 337 337 + 338 338 + it('returns true to outer summary', () => { 339 339 + expect(subject.container.querySelector('summary')).toBeVisible() 340 340 + }) 341 341 + 342 342 + it('returns true to inner enclosed innerText', () => { 343 343 + expect( 344 344 + subject.container.querySelector('details > details > div'), 345 345 + ).toBeVisible() 346 346 + }) 347 347 + 348 348 + it('returns true to inner summary', () => { 349 349 + expect( 350 350 + subject.container.querySelector('details > details > summary'), 351 351 + ).toBeVisible() 352 352 + }) 353 353 + }) 354 354 + 355 355 + describe('when outer is opened and inner is not opened', () => { 356 356 + beforeEach(() => { 357 357 + subject = render(` 358 358 + <details open> 359 359 + <summary>Title of outer unenclosed</summary> 360 360 + Unenclosed innerText 361 361 + <details> 362 362 + <summary>Title of inner enclosed</summary> 363 363 + <div>Enclosed innerText</div> 364 364 + </details> 365 365 + </details> 366 366 + `) 367 367 + }) 368 368 + 369 369 + it('returns true to outer unenclosed innerText', () => { 370 370 + expect(subject.container.querySelector('details')).toBeVisible() 371 371 + }) 372 372 + 373 373 + it('returns true to outer summary', () => { 374 374 + expect(subject.container.querySelector('summary')).toBeVisible() 375 375 + }) 376 376 + 377 377 + it('returns false to inner enclosed innerText', () => { 378 378 + expect( 379 379 + subject.container.querySelector('details > details > div'), 380 380 + ).not.toBeVisible() 381 381 + }) 382 382 + 383 383 + it('returns true to inner summary', () => { 384 384 + expect( 385 385 + subject.container.querySelector('details > details > summary'), 386 386 + ).toBeVisible() 387 387 + }) 388 388 + }) 389 389 + 390 390 + describe('when outer is not opened and inner is opened', () => { 391 391 + beforeEach(() => { 392 392 + subject = render(` 393 393 + <details> 394 394 + <summary>Title of outer unenclosed</summary> 395 395 + Unenclosed innerText 396 396 + <details open> 397 397 + <summary>Title of inner enclosed</summary> 398 398 + <div>Enclosed innerText</div> 399 399 + </details> 400 400 + </details> 401 401 + `) 402 402 + }) 403 403 + 404 404 + it('returns false to outer unenclosed innerText', () => { 405 405 + expect(subject.container.querySelector('details')).toBeVisible() 406 406 + }) 407 407 + 408 408 + it('returns true to outer summary', () => { 409 409 + expect(subject.container.querySelector('summary')).toBeVisible() 410 410 + }) 411 411 + 412 412 + it('returns false to inner enclosed innerText', () => { 413 413 + expect( 414 414 + subject.container.querySelector('details > details > div'), 415 415 + ).not.toBeVisible() 416 416 + }) 417 417 + 418 418 + it('returns true to inner summary', () => { 419 419 + expect( 420 420 + subject.container.querySelector('details > details > summary'), 421 421 + ).not.toBeVisible() 422 422 + }) 423 423 + }) 424 424 + }) 425 425 + }) 426 426 + }) 427 427 + })

+69

test/browser/fixtures/expect-dom/toContainElement.test.ts

Reviewed

··· 1 1 + import { expect, test } from 'vitest' 2 2 + import { render } from './utils' 3 3 + 4 4 + const {queryByTestId} = render(` 5 5 + <span data-testid="grandparent"> 6 6 + <span data-testid="parent"> 7 7 + <span data-testid="child"></span> 8 8 + </span> 9 9 + <svg data-testid="svg-element"></svg> 10 10 + </span> 11 11 + `) 12 12 + 13 13 + const grandparent = queryByTestId('grandparent') 14 14 + const parent = queryByTestId('parent') 15 15 + const child = queryByTestId('child') 16 16 + const svgElement = queryByTestId('svg-element') 17 17 + const nonExistantElement = queryByTestId('not-exists') 18 18 + const fakeElement = {thisIsNot: 'an html element'} 19 19 + 20 20 + test('.toContainElement positive test cases', () => { 21 21 + expect(grandparent).toContainElement(parent) 22 22 + expect(grandparent).toContainElement(child) 23 23 + expect(grandparent).toContainElement(svgElement) 24 24 + expect(parent).toContainElement(child) 25 25 + expect(parent).not.toContainElement(grandparent) 26 26 + expect(parent).not.toContainElement(svgElement) 27 27 + expect(child).not.toContainElement(parent) 28 28 + expect(child).not.toContainElement(grandparent) 29 29 + expect(child).not.toContainElement(svgElement) 30 30 + expect(grandparent).not.toContainElement(nonExistantElement) 31 31 + }) 32 32 + 33 33 + test('.toContainElement negative test cases', () => { 34 34 + expect(() => 35 35 + expect(nonExistantElement).not.toContainElement(child), 36 36 + ).toThrowError() 37 37 + expect(() => expect(parent).toContainElement(grandparent)).toThrowError() 38 38 + expect(() => 39 39 + expect(nonExistantElement).toContainElement(grandparent), 40 40 + ).toThrowError() 41 41 + expect(() => 42 42 + expect(grandparent).toContainElement(nonExistantElement), 43 43 + ).toThrowError() 44 44 + expect(() => 45 45 + expect(nonExistantElement).toContainElement(nonExistantElement), 46 46 + ).toThrowError() 47 47 + expect(() => 48 48 + // @ts-expect-error testing invalid assertion 49 49 + expect(nonExistantElement).toContainElement(fakeElement), 50 50 + ).toThrowError() 51 51 + expect(() => 52 52 + expect(fakeElement).toContainElement(nonExistantElement), 53 53 + ).toThrowError() 54 54 + expect(() => 55 55 + expect(fakeElement).not.toContainElement(nonExistantElement), 56 56 + ).toThrowError() 57 57 + expect(() => expect(fakeElement).toContainElement(grandparent)).toThrowError() 58 58 + // @ts-expect-error testing invalid assertion 59 59 + expect(() => expect(grandparent).toContainElement(fakeElement)).toThrowError() 60 60 + // @ts-expect-error testing invalid assertion 61 61 + expect(() => expect(fakeElement).toContainElement(fakeElement)).toThrowError() 62 62 + expect(() => expect(grandparent).not.toContainElement(child)).toThrowError() 63 63 + expect(() => 64 64 + expect(grandparent).not.toContainElement(svgElement), 65 65 + ).toThrowError() 66 66 + expect(() => 67 67 + expect(grandparent).not.toContainElement(undefined), 68 68 + ).toThrowError() 69 69 + })

+120

test/browser/fixtures/expect-dom/toContainHTML.test.ts

Reviewed

··· 1 1 + import { describe, expect, test } from 'vitest' 2 2 + import { render } from './utils' 3 3 + 4 4 + /* eslint-disable max-statements */ 5 5 + describe('.toContainHTML', () => { 6 6 + test('handles positive and negative cases', () => { 7 7 + const {queryByTestId} = render(` 8 8 + <span data-testid="grandparent"> 9 9 + <span data-testid="parent"> 10 10 + <span data-testid="child"></span> 11 11 + </span> 12 12 + <svg data-testid="svg-element"></svg> 13 13 + </span> 14 14 + `) 15 15 + 16 16 + const grandparent = queryByTestId('grandparent') 17 17 + const parent = queryByTestId('parent') 18 18 + const child = queryByTestId('child') 19 19 + const nonExistantElement = queryByTestId('not-exists') 20 20 + const fakeElement = {thisIsNot: 'an html element'} 21 21 + const stringChildElement = '<span data-testid="child"></span>' 22 22 + const stringChildElementSelfClosing = '<span data-testid="child" />' 23 23 + const incorrectStringHtml = '<span data-testid="child"></div>' 24 24 + const nonExistantString = '<span> Does not exists </span>' 25 25 + const svgElement = queryByTestId('svg-element') 26 26 + 27 27 + expect(grandparent).toContainHTML(stringChildElement) 28 28 + expect(parent).toContainHTML(stringChildElement) 29 29 + expect(child).toContainHTML(stringChildElement) 30 30 + expect(child).toContainHTML(stringChildElementSelfClosing) 31 31 + expect(grandparent).not.toContainHTML(nonExistantString) 32 32 + expect(parent).not.toContainHTML(nonExistantString) 33 33 + expect(child).not.toContainHTML(nonExistantString) 34 34 + expect(child).not.toContainHTML(nonExistantString) 35 35 + expect(grandparent).toContainHTML(incorrectStringHtml) 36 36 + expect(parent).toContainHTML(incorrectStringHtml) 37 37 + expect(child).toContainHTML(incorrectStringHtml) 38 38 + 39 39 + // negative test cases wrapped in throwError assertions for coverage. 40 40 + expect(() => 41 41 + expect(nonExistantElement).not.toContainHTML(stringChildElement), 42 42 + ).toThrowError() 43 43 + expect(() => 44 44 + // @ts-expect-error testing invalid input 45 45 + expect(nonExistantElement).not.toContainHTML(nonExistantElement), 46 46 + ).toThrowError() 47 47 + expect(() => 48 48 + // @ts-expect-error testing invalid input 49 49 + expect(stringChildElement).not.toContainHTML(fakeElement), 50 50 + ).toThrowError() 51 51 + expect(() => 52 52 + expect(svgElement).toContainHTML(stringChildElement), 53 53 + ).toThrowError() 54 54 + expect(() => 55 55 + expect(grandparent).not.toContainHTML(stringChildElement), 56 56 + ).toThrowError() 57 57 + expect(() => 58 58 + expect(parent).not.toContainHTML(stringChildElement), 59 59 + ).toThrowError() 60 60 + expect(() => 61 61 + expect(child).not.toContainHTML(stringChildElement), 62 62 + ).toThrowError() 63 63 + expect(() => 64 64 + expect(child).not.toContainHTML(stringChildElement), 65 65 + ).toThrowError() 66 66 + expect(() => 67 67 + expect(child).not.toContainHTML(stringChildElementSelfClosing), 68 68 + ).toThrowError() 69 69 + expect(() => expect(child).toContainHTML(nonExistantString)).toThrowError() 70 70 + expect(() => expect(parent).toContainHTML(nonExistantString)).toThrowError() 71 71 + expect(() => 72 72 + expect(grandparent).toContainHTML(nonExistantString), 73 73 + ).toThrowError() 74 74 + // @ts-expect-error testing invalid input 75 75 + expect(() => expect(child).toContainHTML(nonExistantElement)).toThrowError() 76 76 + expect(() => 77 77 + // @ts-expect-error testing invalid input 78 78 + expect(parent).toContainHTML(nonExistantElement), 79 79 + ).toThrowError() 80 80 + expect(() => 81 81 + // @ts-expect-error testing invalid input 82 82 + expect(grandparent).toContainHTML(nonExistantElement), 83 83 + ).toThrowError() 84 84 + expect(() => 85 85 + expect(nonExistantElement).not.toContainHTML(incorrectStringHtml), 86 86 + ).toThrowError() 87 87 + expect(() => 88 88 + expect(grandparent).not.toContainHTML(incorrectStringHtml), 89 89 + ).toThrowError() 90 90 + expect(() => 91 91 + expect(child).not.toContainHTML(incorrectStringHtml), 92 92 + ).toThrowError() 93 93 + expect(() => 94 94 + expect(parent).not.toContainHTML(incorrectStringHtml), 95 95 + ).toThrowError() 96 96 + }) 97 97 + 98 98 + test('throws with an expected text', async () => { 99 99 + const {queryByTestId} = render('<span data-testid="child"></span>') 100 100 + const htmlElement = queryByTestId('child') 101 101 + const nonExistantString = '<div> non-existant element </div>' 102 102 + 103 103 + let errorMessage 104 104 + try { 105 105 + expect(htmlElement).toContainHTML(nonExistantString) 106 106 + } catch (error) { 107 107 + errorMessage = error.message 108 108 + } 109 109 + 110 110 + expect(errorMessage).toMatchInlineSnapshot(` 111 111 + expect(element).toContainHTML() 112 112 + Expected: 113 113 + <div> non-existant element </div> 114 114 + Received: 115 115 + <span 116 116 + data-testid="child" 117 117 + /> 118 118 + `) 119 119 + }) 120 120 + })

+130

test/browser/fixtures/expect-dom/toHaveAccessibleDescription.test.ts

Reviewed

··· 1 1 + import { describe, expect, it } from 'vitest' 2 2 + import { render } from './utils' 3 3 + 4 4 + describe('.toHaveAccessibleDescription', () => { 5 5 + it('works with the link title attribute', () => { 6 6 + const {queryByTestId} = render(` 7 7 + <div> 8 8 + <a data-testid="link" href="/" aria-label="Home page" title="A link to start over">Start</a> 9 9 + <a data-testid="extra-link" href="/about" aria-label="About page">About</a> 10 10 + </div> 11 11 + `) 12 12 + 13 13 + const link = queryByTestId('link') 14 14 + expect(link).toHaveAccessibleDescription() 15 15 + expect(link).toHaveAccessibleDescription('A link to start over') 16 16 + expect(link).not.toHaveAccessibleDescription('Home page') 17 17 + expect(() => { 18 18 + expect(link).toHaveAccessibleDescription('Invalid description') 19 19 + }).toThrow(/expected element to have accessible description/i) 20 20 + expect(() => { 21 21 + expect(link).not.toHaveAccessibleDescription() 22 22 + }).toThrow(/expected element not to have accessible description/i) 23 23 + 24 24 + const extraLink = queryByTestId('extra-link') 25 25 + expect(extraLink).not.toHaveAccessibleDescription() 26 26 + expect(() => { 27 27 + expect(extraLink).toHaveAccessibleDescription() 28 28 + }).toThrow(/expected element to have accessible description/i) 29 29 + }) 30 30 + 31 31 + it('works with aria-describedby attributes', () => { 32 32 + const {queryByTestId} = render(` 33 33 + <div> 34 34 + <img src="avatar.jpg" data-testid="avatar" alt="User profile pic"> 35 35 + <img src="logo.jpg" data-testid="logo" alt="Company logo" aria-describedby="t1"> 36 36 + <span id="t1" role="presentation">The logo of Our Company</span> 37 37 + </div> 38 38 + `) 39 39 + 40 40 + const avatar = queryByTestId('avatar') 41 41 + expect(avatar).not.toHaveAccessibleDescription() 42 42 + expect(() => { 43 43 + expect(avatar).toHaveAccessibleDescription('User profile pic') 44 44 + }).toThrow(/expected element to have accessible description/i) 45 45 + 46 46 + const logo = queryByTestId('logo') 47 47 + expect(logo).not.toHaveAccessibleDescription('Company logo') 48 48 + expect(logo).toHaveAccessibleDescription('The logo of Our Company') 49 49 + expect(logo).toHaveAccessibleDescription(/logo of our company/i) 50 50 + expect(logo).toHaveAccessibleDescription( 51 51 + expect.stringContaining('logo of Our Company'), 52 52 + ) 53 53 + expect(() => { 54 54 + expect(logo).toHaveAccessibleDescription("Our company's logo") 55 55 + }).toThrow(/expected element to have accessible description/i) 56 56 + expect(() => { 57 57 + expect(logo).not.toHaveAccessibleDescription('The logo of Our Company') 58 58 + }).toThrow(/expected element not to have accessible description/i) 59 59 + }) 60 60 + 61 61 + it('works with aria-description attribute', () => { 62 62 + const {queryByTestId} = render(` 63 63 + <img src="logo.jpg" data-testid="logo" alt="Company logo" aria-description="The logo of Our Company"> 64 64 + `) 65 65 + 66 66 + const logo = queryByTestId('logo') 67 67 + expect(logo).not.toHaveAccessibleDescription('Company logo') 68 68 + expect(logo).toHaveAccessibleDescription('The logo of Our Company') 69 69 + expect(logo).toHaveAccessibleDescription(/logo of our company/i) 70 70 + expect(logo).toHaveAccessibleDescription( 71 71 + expect.stringContaining('logo of Our Company'), 72 72 + ) 73 73 + expect(() => { 74 74 + expect(logo).toHaveAccessibleDescription("Our company's logo") 75 75 + }).toThrow(/expected element to have accessible description/i) 76 76 + expect(() => { 77 77 + expect(logo).not.toHaveAccessibleDescription('The logo of Our Company') 78 78 + }).toThrow(/expected element not to have accessible description/i) 79 79 + }) 80 80 + 81 81 + it('handles multiple ids', () => { 82 82 + const {queryByTestId} = render(` 83 83 + <div> 84 84 + <div id="first">First description</div> 85 85 + <div id="second">Second description</div> 86 86 + <div id="third">Third description</div> 87 87 + 88 88 + <div data-testid="multiple" aria-describedby="first second third"></div> 89 89 + </div> 90 90 + `) 91 91 + 92 92 + expect(queryByTestId('multiple')).toHaveAccessibleDescription( 93 93 + 'First description Second description Third description', 94 94 + ) 95 95 + expect(queryByTestId('multiple')).toHaveAccessibleDescription( 96 96 + /Second description Third/, 97 97 + ) 98 98 + expect(queryByTestId('multiple')).toHaveAccessibleDescription( 99 99 + expect.stringContaining('Second description Third'), 100 100 + ) 101 101 + expect(queryByTestId('multiple')).toHaveAccessibleDescription( 102 102 + expect.stringMatching(/Second description Third/), 103 103 + ) 104 104 + expect(queryByTestId('multiple')).not.toHaveAccessibleDescription( 105 105 + 'Something else', 106 106 + ) 107 107 + expect(queryByTestId('multiple')).not.toHaveAccessibleDescription('First') 108 108 + }) 109 109 + 110 110 + it('normalizes whitespace', () => { 111 111 + const {queryByTestId} = render(` 112 112 + <div id="first"> 113 113 + Step 114 114 + 1 115 115 + of 116 116 + 4 117 117 + </div> 118 118 + <div id="second"> 119 119 + And 120 120 + extra 121 121 + description 122 122 + </div> 123 123 + <div data-testid="target" aria-describedby="first second"></div> 124 124 + `) 125 125 + 126 126 + expect(queryByTestId('target')).toHaveAccessibleDescription( 127 127 + 'Step 1 of 4 And extra description', 128 128 + ) 129 129 + }) 130 130 + })

+237

test/browser/fixtures/expect-dom/toHaveAccessibleErrorMessage.test.ts

Reviewed

··· 1 1 + import { describe, expect, it } from 'vitest' 2 2 + import { render } from './utils' 3 3 + 4 4 + describe('.toHaveAccessibleErrorMessage', () => { 5 5 + const input = 'input' 6 6 + const errorId = 'error-id' 7 7 + const error = 'This field is invalid' 8 8 + const strings = {true: String(true), false: String(false)} 9 9 + 10 10 + describe('Positive Test Cases', () => { 11 11 + it("Fails the test if an invalid `id` is provided for the target element's `aria-errormessage`", () => { 12 12 + const secondId = 'id2' 13 13 + const secondError = 'LISTEN TO ME!!!' 14 14 + 15 15 + const {queryByTestId} = render(` 16 16 + <div> 17 17 + <${input} data-testid="${input}" aria-invalid="${strings.true}" aria-errormessage="${errorId} ${secondId}" /> 18 18 + <div data-testid="${errorId}" id="${errorId}" role="alert">${error}</div> 19 19 + <div data-testid="${secondId}" id="${secondId}" role="alert">${secondError}</div> 20 20 + </div> 21 21 + `) 22 22 + 23 23 + const field = queryByTestId('input') 24 24 + expect(field).toHaveAccessibleErrorMessage() 25 25 + expect(field).toHaveAccessibleErrorMessage(new RegExp(error[0])) 26 26 + 27 27 + expect(field).toHaveAccessibleErrorMessage(error + ' ' + secondError) 28 28 + 29 29 + expect(() => expect(field).toHaveAccessibleErrorMessage(error)).toThrow() 30 30 + expect(() => 31 31 + expect(field).toHaveAccessibleErrorMessage(secondError), 32 32 + ).toThrow() 33 33 + 34 34 + expect(field).toHaveAccessibleErrorMessage(new RegExp(secondError[0])) 35 35 + }) 36 36 + 37 37 + it('Fails the test if the target element is valid according to the WAI-ARIA spec', () => { 38 38 + const noAriaInvalidAttribute = 'no-aria-invalid-attribute' 39 39 + const validFieldState = 'false' 40 40 + const invalidFieldStates = [ 41 41 + 'true', 42 42 + // difference with jest-dom 43 43 + // https://www.w3.org/TR/wai-aria-1.2/#aria-invalid 44 44 + // If the attribute is not present, or its value is false, or its value 45 45 + // is an EMPTY STRING, the default value of false applies. 46 46 + // '', 47 47 + 'grammar', 48 48 + 'spelling', 49 49 + 'asfdafbasdfasa', 50 50 + ] 51 51 + 52 52 + function renderFieldWithState(state) { 53 53 + return render(` 54 54 + <div> 55 55 + <${input} data-testid="${input}" aria-invalid="${state}" aria-errormessage="${errorId}" /> 56 56 + <div data-testid="${errorId}" id="${errorId}" role="alert">${error}</div> 57 57 + <input data-testid="${noAriaInvalidAttribute}" aria-errormessage="${errorId}" /> 58 58 + </div> 59 59 + `) 60 60 + } 61 61 + 62 62 + // Success Cases 63 63 + invalidFieldStates.forEach(invalidState => { 64 64 + const {queryByTestId} = renderFieldWithState(invalidState) 65 65 + const field = queryByTestId('input') 66 66 + 67 67 + expect(field).toHaveAccessibleErrorMessage() 68 68 + expect(field).toHaveAccessibleErrorMessage(error) 69 69 + }) 70 70 + 71 71 + // Failure Case 72 72 + const {queryByTestId} = renderFieldWithState(validFieldState) 73 73 + const field = queryByTestId('input') 74 74 + const fieldWithoutAttribute = queryByTestId(noAriaInvalidAttribute) 75 75 + 76 76 + expect(() => expect(fieldWithoutAttribute).toHaveAccessibleErrorMessage()) 77 77 + .toThrowErrorMatchingInlineSnapshot(` 78 78 + [Error: expect(element).toHaveAccessibleErrorMessage() 79 79 + 80 80 + Expected element to have accessible error message, but got nothing] 81 81 + `) 82 82 + 83 83 + expect(() => expect(field).toHaveAccessibleErrorMessage()) 84 84 + .toThrowErrorMatchingInlineSnapshot(` 85 85 + [Error: expect(element).toHaveAccessibleErrorMessage() 86 86 + 87 87 + Expected element to have accessible error message, but got nothing] 88 88 + `) 89 89 + 90 90 + // Assume the remaining error messages are the EXACT same as above 91 91 + expect(() => expect(field).toHaveAccessibleErrorMessage(error)).toThrow() 92 92 + expect(() => 93 93 + expect(field).toHaveAccessibleErrorMessage(new RegExp(error, 'i')), 94 94 + ).toThrow() 95 95 + }) 96 96 + 97 97 + it('Passes the test if the target element has ANY recognized, non-empty error message', () => { 98 98 + const {queryByTestId} = render(` 99 99 + <div> 100 100 + <${input} data-testid="${input}" aria-invalid="${strings.true}" aria-errormessage="${errorId}" /> 101 101 + <div data-testid="${errorId}" id="${errorId}" role="alert">${error}</div> 102 102 + </div> 103 103 + `) 104 104 + 105 105 + const field = queryByTestId(input) 106 106 + expect(field).toHaveAccessibleErrorMessage() 107 107 + }) 108 108 + 109 109 + it('Fails the test if NO recognized, non-empty error message was found for the target element', () => { 110 110 + const empty = 'empty' 111 111 + const emptyErrorId = 'empty-error' 112 112 + const missing = 'missing' 113 113 + 114 114 + const {queryByTestId} = render(` 115 115 + <div> 116 116 + <input data-testid="${empty}" aria-invalid="${strings.true}" aria-errormessage="${emptyErrorId}" /> 117 117 + <div data-testid="${emptyErrorId}" id="${emptyErrorId}" role="alert"></div> 118 118 + 119 119 + <input data-testid="${missing}" aria-invalid="${strings.true}" aria-errormessage="${missing}-error" /> 120 120 + </div> 121 121 + `) 122 122 + 123 123 + const fieldWithEmptyError = queryByTestId(empty) 124 124 + const fieldMissingError = queryByTestId(missing) 125 125 + 126 126 + expect(() => expect(fieldWithEmptyError).toHaveAccessibleErrorMessage()) 127 127 + .toThrowErrorMatchingInlineSnapshot(` 128 128 + [Error: expect(element).toHaveAccessibleErrorMessage() 129 129 + 130 130 + Expected element to have accessible error message, but got nothing] 131 131 + `) 132 132 + 133 133 + expect(() => expect(fieldMissingError).toHaveAccessibleErrorMessage()) 134 134 + .toThrowErrorMatchingInlineSnapshot(` 135 135 + [Error: expect(element).toHaveAccessibleErrorMessage() 136 136 + 137 137 + Expected element to have accessible error message, but got nothing] 138 138 + `) 139 139 + }) 140 140 + 141 141 + it('Passes the test if the target element has the error message that was SPECIFIED', () => { 142 142 + const {queryByTestId} = render(` 143 143 + <div> 144 144 + <${input} data-testid="${input}" aria-invalid="${strings.true}" aria-errormessage="${errorId}" /> 145 145 + <div data-testid="${errorId}" id="${errorId}" role="alert">${error}</div> 146 146 + </div> 147 147 + `) 148 148 + 149 149 + const field = queryByTestId(input) 150 150 + const halfOfError = error.slice(0, Math.floor(error.length * 0.5)) 151 151 + 152 152 + expect(field).toHaveAccessibleErrorMessage(error) 153 153 + expect(field).toHaveAccessibleErrorMessage(new RegExp(halfOfError, 'i')) 154 154 + expect(field).toHaveAccessibleErrorMessage( 155 155 + expect.stringContaining(halfOfError), 156 156 + ) 157 157 + expect(field).toHaveAccessibleErrorMessage( 158 158 + expect.stringMatching(new RegExp(halfOfError, 'i')), 159 159 + ) 160 160 + }) 161 161 + 162 162 + it('Fails the test if the target element DOES NOT have the error message that was SPECIFIED', () => { 163 163 + const {queryByTestId} = render(` 164 164 + <div> 165 165 + <${input} data-testid="${input}" aria-invalid="${strings.true}" aria-errormessage="${errorId}" /> 166 166 + <div data-testid="${errorId}" id="${errorId}" role="alert">${error}</div> 167 167 + </div> 168 168 + `) 169 169 + 170 170 + const field = queryByTestId(input) 171 171 + const msg = 'asdflkje2984fguyvb bnafdsasfa;lj' 172 172 + 173 173 + expect(() => expect(field).toHaveAccessibleErrorMessage('')) 174 174 + .toThrowErrorMatchingInlineSnapshot(` 175 175 + [Error: expect(element).toHaveAccessibleErrorMessage() 176 176 + 177 177 + Expected element to have accessible error message: 178 178 + 179 179 + Received: 180 180 + This field is invalid] 181 181 + `) 182 182 + 183 183 + // Assume this error is SIMILAR to the error above 184 184 + expect(() => expect(field).toHaveAccessibleErrorMessage(msg)).toThrow() 185 185 + expect(() => 186 186 + expect(field).toHaveAccessibleErrorMessage( 187 187 + error.slice(0, Math.floor(error.length * 0.5)), 188 188 + ), 189 189 + ).toThrow() 190 190 + 191 191 + expect(() => 192 192 + expect(field).toHaveAccessibleErrorMessage(new RegExp(msg, 'i')), 193 193 + ).toThrowErrorMatchingInlineSnapshot(` 194 194 + [Error: expect(element).toHaveAccessibleErrorMessage() 195 195 + 196 196 + Expected element to have accessible error message: 197 197 + /asdflkje2984fguyvb bnafdsasfa;lj/i 198 198 + Received: 199 199 + This field is invalid] 200 200 + `) 201 201 + }) 202 202 + 203 203 + it('Normalizes the whitespace of the received error message', () => { 204 204 + const {queryByTestId} = render(` 205 205 + <div> 206 206 + <${input} data-testid="${input}" aria-invalid="${strings.true}" aria-errormessage="${errorId}" /> 207 207 + <div data-testid="${errorId}" id="${errorId}" role="alert"> 208 208 + Step 209 209 + 1 210 210 + of 211 211 + 9000 212 212 + </div> 213 213 + </div> 214 214 + `) 215 215 + 216 216 + const field = queryByTestId(input) 217 217 + expect(field).toHaveAccessibleErrorMessage('Step 1 of 9000') 218 218 + }) 219 219 + }) 220 220 + 221 221 + // These tests for the `.not` use cases will help us cover our bases and complete test coverage 222 222 + describe('Negated Test Cases', () => { 223 223 + it('Passes the test if the target element is valid according to the WAI-ARIA spec', () => { 224 224 + const {queryByTestId} = render(` 225 225 + <div> 226 226 + <${input} data-testid="${input}" aria-errormessage="${errorId}" /> 227 227 + <div data-testid="${errorId}" id="${errorId}" role="alert">${error}</div> 228 228 + </div> 229 229 + `) 230 230 + 231 231 + const field = queryByTestId(input) 232 232 + expect(field).not.toHaveAccessibleErrorMessage() 233 233 + expect(field).not.toHaveAccessibleErrorMessage(error) 234 234 + expect(field).not.toHaveAccessibleErrorMessage(new RegExp(error[0])) 235 235 + }) 236 236 + }) 237 237 + })

+64

test/browser/fixtures/expect-dom/toHaveAttribute.test.ts

Reviewed

··· 1 1 + import { expect, test } from 'vitest' 2 2 + import { render } from './utils' 3 3 + 4 4 + test('.toHaveAttribute', () => { 5 5 + const {queryByTestId} = render(` 6 6 + <button data-testid="ok-button" type="submit" disabled> 7 7 + OK 8 8 + </button> 9 9 + <svg data-testid="svg-element" width="12"></svg> 10 10 + `) 11 11 + 12 12 + expect(queryByTestId('ok-button')).toHaveAttribute('disabled') 13 13 + expect(queryByTestId('ok-button')).toHaveAttribute('type') 14 14 + expect(queryByTestId('ok-button')).not.toHaveAttribute('class') 15 15 + expect(queryByTestId('ok-button')).toHaveAttribute('type', 'submit') 16 16 + expect(queryByTestId('ok-button')).not.toHaveAttribute('type', 'button') 17 17 + expect(queryByTestId('svg-element')).toHaveAttribute('width') 18 18 + expect(queryByTestId('svg-element')).toHaveAttribute('width', '12') 19 19 + expect(queryByTestId('ok-button')).not.toHaveAttribute('height') 20 20 + 21 21 + expect(() => 22 22 + expect(queryByTestId('ok-button')).not.toHaveAttribute('disabled'), 23 23 + ).toThrowError() 24 24 + expect(() => 25 25 + expect(queryByTestId('ok-button')).not.toHaveAttribute('type'), 26 26 + ).toThrowError() 27 27 + expect(() => 28 28 + expect(queryByTestId('ok-button')).toHaveAttribute('class'), 29 29 + ).toThrowError() 30 30 + expect(() => 31 31 + expect(queryByTestId('ok-button')).not.toHaveAttribute('type', 'submit'), 32 32 + ).toThrowError() 33 33 + expect(() => 34 34 + expect(queryByTestId('ok-button')).toHaveAttribute('type', 'button'), 35 35 + ).toThrowError() 36 36 + expect(() => 37 37 + expect(queryByTestId('svg-element')).not.toHaveAttribute('width'), 38 38 + ).toThrowError() 39 39 + expect(() => 40 40 + expect(queryByTestId('svg-element')).not.toHaveAttribute('width', '12'), 41 41 + ).toThrowError() 42 42 + expect(() => 43 43 + // @ts-expect-error invalid signature 44 44 + expect({thisIsNot: 'an html element'}).not.toHaveAttribute(), 45 45 + ).toThrowError() 46 46 + 47 47 + // Asymmetric matchers 48 48 + expect(queryByTestId('ok-button')).toHaveAttribute( 49 49 + 'type', 50 50 + expect.stringContaining('sub'), 51 51 + ) 52 52 + expect(queryByTestId('ok-button')).toHaveAttribute( 53 53 + 'type', 54 54 + expect.stringMatching(/sub*/), 55 55 + ) 56 56 + expect(queryByTestId('ok-button')).toHaveAttribute('type', expect.anything()) 57 57 + 58 58 + expect(() => 59 59 + expect(queryByTestId('ok-button')).toHaveAttribute( 60 60 + 'type', 61 61 + expect.not.stringContaining('sub'), 62 62 + ), 63 63 + ).toThrowError() 64 64 + })

+233

test/browser/fixtures/expect-dom/toHaveClass.test.ts

Reviewed

··· 1 1 + import { expect, test } from 'vitest' 2 2 + import { render } from './utils' 3 3 + 4 4 + const renderElementWithClasses = () => 5 5 + render(` 6 6 + <div> 7 7 + <button data-testid="delete-button" class="btn extra btn-danger"> 8 8 + Delete item 9 9 + </button> 10 10 + <button data-testid="cancel-button"> 11 11 + Cancel 12 12 + </button> 13 13 + <svg data-testid="svg-spinner" class="spinner clockwise"> 14 14 + <path /> 15 15 + </svg> 16 16 + <div data-testid="only-one-class" class="alone"></div> 17 17 + <div data-testid="no-classes"></div> 18 18 + </div> 19 19 + `) 20 20 + 21 21 + test('.toHaveClass', () => { 22 22 + const {queryByTestId} = renderElementWithClasses() 23 23 + 24 24 + expect(queryByTestId('delete-button')).toHaveClass('btn') 25 25 + expect(queryByTestId('delete-button')).toHaveClass('btn-danger') 26 26 + expect(queryByTestId('delete-button')).toHaveClass('extra') 27 27 + expect(queryByTestId('delete-button')).not.toHaveClass('xtra') 28 28 + expect(queryByTestId('delete-button')).not.toHaveClass('btn xtra') 29 29 + expect(queryByTestId('delete-button')).not.toHaveClass('btn', 'xtra') 30 30 + expect(queryByTestId('delete-button')).not.toHaveClass('btn', 'extra xtra') 31 31 + expect(queryByTestId('delete-button')).toHaveClass('btn btn-danger') 32 32 + expect(queryByTestId('delete-button')).toHaveClass('btn', 'btn-danger') 33 33 + expect(queryByTestId('delete-button')).toHaveClass( 34 34 + 'btn extra', 35 35 + 'btn-danger extra', 36 36 + ) 37 37 + expect(queryByTestId('delete-button')).not.toHaveClass('btn-link') 38 38 + expect(queryByTestId('cancel-button')).not.toHaveClass('btn-danger') 39 39 + expect(queryByTestId('svg-spinner')).toHaveClass('spinner') 40 40 + expect(queryByTestId('svg-spinner')).toHaveClass('clockwise') 41 41 + expect(queryByTestId('svg-spinner')).not.toHaveClass('wise') 42 42 + expect(queryByTestId('no-classes')).not.toHaveClass() 43 43 + expect(queryByTestId('no-classes')).not.toHaveClass(' ') 44 44 + 45 45 + expect(() => 46 46 + expect(queryByTestId('delete-button')).not.toHaveClass('btn'), 47 47 + ).toThrowError() 48 48 + expect(() => 49 49 + expect(queryByTestId('delete-button')).not.toHaveClass('btn-danger'), 50 50 + ).toThrowError() 51 51 + expect(() => 52 52 + expect(queryByTestId('delete-button')).not.toHaveClass('extra'), 53 53 + ).toThrowError() 54 54 + expect(() => 55 55 + expect(queryByTestId('delete-button')).toHaveClass('xtra'), 56 56 + ).toThrowError() 57 57 + expect(() => 58 58 + expect(queryByTestId('delete-button')).toHaveClass('btn', 'extra xtra'), 59 59 + ).toThrowError() 60 60 + expect(() => 61 61 + expect(queryByTestId('delete-button')).not.toHaveClass('btn btn-danger'), 62 62 + ).toThrowError() 63 63 + expect(() => 64 64 + expect(queryByTestId('delete-button')).not.toHaveClass('btn', 'btn-danger'), 65 65 + ).toThrowError() 66 66 + expect(() => 67 67 + expect(queryByTestId('delete-button')).toHaveClass('btn-link'), 68 68 + ).toThrowError() 69 69 + expect(() => 70 70 + expect(queryByTestId('cancel-button')).toHaveClass('btn-danger'), 71 71 + ).toThrowError() 72 72 + expect(() => 73 73 + expect(queryByTestId('svg-spinner')).not.toHaveClass('spinner'), 74 74 + ).toThrowError() 75 75 + expect(() => 76 76 + expect(queryByTestId('svg-spinner')).toHaveClass('wise'), 77 77 + ).toThrowError() 78 78 + expect(() => 79 79 + expect(queryByTestId('delete-button')).toHaveClass(), 80 80 + ).toThrowError(/At least one expected class must be provided/) 81 81 + expect(() => 82 82 + expect(queryByTestId('delete-button')).toHaveClass(''), 83 83 + ).toThrowError(/At least one expected class must be provided/) 84 84 + expect(() => expect(queryByTestId('no-classes')).toHaveClass()).toThrowError( 85 85 + /At least one expected class must be provided/, 86 86 + ) 87 87 + expect(() => 88 88 + expect(queryByTestId('delete-button')).not.toHaveClass(), 89 89 + ).toThrowError(/(none)/) 90 90 + expect(() => 91 91 + expect(queryByTestId('delete-button')).not.toHaveClass(' '), 92 92 + ).toThrowError(/(none)/) 93 93 + }) 94 94 + 95 95 + test('.toHaveClass with regular expressions', () => { 96 96 + const {queryByTestId} = renderElementWithClasses() 97 97 + 98 98 + expect(queryByTestId('delete-button')).toHaveClass(/btn/) 99 99 + expect(queryByTestId('delete-button')).toHaveClass(/danger/) 100 100 + expect(queryByTestId('delete-button')).toHaveClass( 101 101 + /-danger$/, 102 102 + 'extra', 103 103 + /^btn-[a-z]+$/, 104 104 + /\bbtn/, 105 105 + ) 106 106 + 107 107 + // It does not match with "btn extra", even though it is a substring of the 108 108 + // class "btn extra btn-danger". This is because the regular expression is 109 109 + // matched against each class individually. 110 110 + expect(queryByTestId('delete-button')).not.toHaveClass(/btn extra/) 111 111 + 112 112 + expect(() => 113 113 + expect(queryByTestId('delete-button')).not.toHaveClass(/danger/), 114 114 + ).toThrowError() 115 115 + 116 116 + expect(() => 117 117 + expect(queryByTestId('delete-button')).toHaveClass(/dangerous/), 118 118 + ).toThrowError() 119 119 + }) 120 120 + 121 121 + test('.toHaveClass with exact mode option', () => { 122 122 + const {queryByTestId} = renderElementWithClasses() 123 123 + 124 124 + expect(queryByTestId('delete-button')).toHaveClass('btn extra btn-danger', { 125 125 + exact: true, 126 126 + }) 127 127 + expect(queryByTestId('delete-button')).not.toHaveClass('btn extra', { 128 128 + exact: true, 129 129 + }) 130 130 + expect(queryByTestId('delete-button')).not.toHaveClass( 131 131 + 'btn extra btn-danger foo', 132 132 + {exact: true}, 133 133 + ) 134 134 + 135 135 + expect(queryByTestId('delete-button')).toHaveClass('btn extra btn-danger', { 136 136 + exact: false, 137 137 + }) 138 138 + expect(queryByTestId('delete-button')).toHaveClass('btn extra', { 139 139 + exact: false, 140 140 + }) 141 141 + expect(queryByTestId('delete-button')).not.toHaveClass( 142 142 + 'btn extra btn-danger foo', 143 143 + {exact: false}, 144 144 + ) 145 145 + 146 146 + expect(queryByTestId('delete-button')).toHaveClass( 147 147 + 'btn', 148 148 + 'extra', 149 149 + 'btn-danger', 150 150 + {exact: true}, 151 151 + ) 152 152 + expect(queryByTestId('delete-button')).not.toHaveClass('btn', 'extra', { 153 153 + exact: true, 154 154 + }) 155 155 + expect(queryByTestId('delete-button')).not.toHaveClass( 156 156 + 'btn', 157 157 + 'extra', 158 158 + 'btn-danger', 159 159 + 'foo', 160 160 + {exact: true}, 161 161 + ) 162 162 + 163 163 + expect(queryByTestId('delete-button')).toHaveClass( 164 164 + 'btn', 165 165 + 'extra', 166 166 + 'btn-danger', 167 167 + {exact: false}, 168 168 + ) 169 169 + expect(queryByTestId('delete-button')).toHaveClass('btn', 'extra', { 170 170 + exact: false, 171 171 + }) 172 172 + expect(queryByTestId('delete-button')).not.toHaveClass( 173 173 + 'btn', 174 174 + 'extra', 175 175 + 'btn-danger', 176 176 + 'foo', 177 177 + {exact: false}, 178 178 + ) 179 179 + 180 180 + expect(queryByTestId('only-one-class')).toHaveClass('alone', {exact: true}) 181 181 + expect(queryByTestId('only-one-class')).not.toHaveClass('alone foo', { 182 182 + exact: true, 183 183 + }) 184 184 + expect(queryByTestId('only-one-class')).not.toHaveClass('alone', 'foo', { 185 185 + exact: true, 186 186 + }) 187 187 + 188 188 + expect(queryByTestId('only-one-class')).toHaveClass('alone', {exact: false}) 189 189 + expect(queryByTestId('only-one-class')).not.toHaveClass('alone foo', { 190 190 + exact: false, 191 191 + }) 192 192 + expect(queryByTestId('only-one-class')).not.toHaveClass('alone', 'foo', { 193 193 + exact: false, 194 194 + }) 195 195 + 196 196 + expect(() => 197 197 + expect(queryByTestId('only-one-class')).not.toHaveClass('alone', { 198 198 + exact: true, 199 199 + }), 200 200 + ).toThrowError(/Expected the element not to have EXACTLY defined classes/) 201 201 + 202 202 + expect(() => 203 203 + expect(queryByTestId('only-one-class')).toHaveClass('alone', 'foo', { 204 204 + exact: true, 205 205 + }), 206 206 + ).toThrowError(/Expected the element to have EXACTLY defined classes/) 207 207 + }) 208 208 + 209 209 + test('.toHaveClass combining {exact:true} and regular expressions throws an error', () => { 210 210 + const {queryByTestId} = renderElementWithClasses() 211 211 + 212 212 + expect(() => 213 213 + // @ts-expect-error regexp is not supported with exact 214 214 + expect(queryByTestId('delete-button')).not.toHaveClass(/btn/, { 215 215 + exact: true, 216 216 + }), 217 217 + ).toThrowError() 218 218 + 219 219 + expect(() => 220 220 + expect(queryByTestId('delete-button')).not.toHaveClass( 221 221 + // @ts-expect-error regexp is not supported with exact 222 222 + /-danger$/, 223 223 + 'extra', 224 224 + /\bbtn/, 225 225 + {exact: true}, 226 226 + ), 227 227 + ).toThrowError() 228 228 + 229 229 + expect(() => 230 230 + // @ts-expect-error regexp is not supported with exact 231 231 + expect(queryByTestId('delete-button')).toHaveClass(/danger/, {exact: true}), 232 232 + ).toThrowError() 233 233 + })

+166

test/browser/fixtures/expect-dom/toHaveDisplayValue.test.ts

Reviewed

··· 1 1 + import { describe, expect, it } from 'vitest' 2 2 + import { render } from './utils' 3 3 + 4 4 + it('should work as expected', () => { 5 5 + const {getInputByTestId} = render(` 6 6 + <select id="fruits" data-testid="select"> 7 7 + <option value="">Select a fruit...</option> 8 8 + <option value="ananas">Ananas</option> 9 9 + <option value="banana">Banana</option> 10 10 + <option value="avocado">Avocado</option> 11 11 + </select> 12 12 + `) 13 13 + 14 14 + expect(getInputByTestId('select')).toHaveDisplayValue('Select a fruit...') 15 15 + expect(getInputByTestId('select')).not.toHaveDisplayValue('Select') 16 16 + expect(getInputByTestId('select')).not.toHaveDisplayValue('Banana') 17 17 + expect(() => 18 18 + expect(getInputByTestId('select')).not.toHaveDisplayValue('Select a fruit...'), 19 19 + ).toThrow() 20 20 + expect(() => 21 21 + expect(getInputByTestId('select')).toHaveDisplayValue('Ananas'), 22 22 + ).toThrow() 23 23 + 24 24 + getInputByTestId('select').value = 'banana' 25 25 + expect(getInputByTestId('select')).toHaveDisplayValue('Banana') 26 26 + expect(getInputByTestId('select')).toHaveDisplayValue(/[bB]ana/) 27 27 + }) 28 28 + 29 29 + describe('with multiple select', () => { 30 30 + function mount() { 31 31 + return render(` 32 32 + <select id="fruits" data-testid="select" multiple> 33 33 + <option value="">Select a fruit...</option> 34 34 + <option value="ananas" selected>Ananas</option> 35 35 + <option value="banana">Banana</option> 36 36 + <option value="avocado" selected>Avocado</option> 37 37 + </select> 38 38 + `) 39 39 + } 40 40 + 41 41 + it('matches only when all the multiple selected values are equal to all the expected values', () => { 42 42 + const subject = mount() 43 43 + expect(subject.queryByTestId('select')).toHaveDisplayValue([ 44 44 + 'Ananas', 45 45 + 'Avocado', 46 46 + ]) 47 47 + expect(() => 48 48 + expect(subject.queryByTestId('select')).not.toHaveDisplayValue([ 49 49 + 'Ananas', 50 50 + 'Avocado', 51 51 + ]), 52 52 + ).toThrow() 53 53 + expect(subject.queryByTestId('select')).not.toHaveDisplayValue([ 54 54 + 'Ananas', 55 55 + 'Avocado', 56 56 + 'Orange', 57 57 + ]) 58 58 + expect(subject.queryByTestId('select')).not.toHaveDisplayValue('Ananas') 59 59 + expect(() => 60 60 + expect(subject.queryByTestId('select')).toHaveDisplayValue('Ananas'), 61 61 + ).toThrow() 62 62 + 63 63 + Array.from((subject.queryByTestId('select') as HTMLSelectElement).options).forEach(option => { 64 64 + option.selected = ['ananas', 'banana'].includes(option.value) 65 65 + }) 66 66 + 67 67 + expect(subject.queryByTestId('select')).toHaveDisplayValue([ 68 68 + 'Ananas', 69 69 + 'Banana', 70 70 + ]) 71 71 + }) 72 72 + 73 73 + it('matches even when the expected values are unordered', () => { 74 74 + const subject = mount() 75 75 + expect(subject.queryByTestId('select')).toHaveDisplayValue([ 76 76 + 'Avocado', 77 77 + 'Ananas', 78 78 + ]) 79 79 + }) 80 80 + 81 81 + it('matches with regex expected values', () => { 82 82 + const subject = mount() 83 83 + expect(subject.queryByTestId('select')).toHaveDisplayValue([ 84 84 + /[Aa]nanas/, 85 85 + 'Avocado', 86 86 + ]) 87 87 + }) 88 88 + }) 89 89 + 90 90 + it('should work with input elements', () => { 91 91 + const {getInputByTestId} = render(` 92 92 + <input type="text" data-testid="input" value="Luca" /> 93 93 + `) 94 94 + 95 95 + expect(getInputByTestId('input')).toHaveDisplayValue('Luca') 96 96 + expect(getInputByTestId('input')).toHaveDisplayValue(/Luc/) 97 97 + 98 98 + getInputByTestId('input').value = 'Piero' 99 99 + expect(getInputByTestId('input')).toHaveDisplayValue('Piero') 100 100 + }) 101 101 + 102 102 + it('should work with textarea elements', () => { 103 103 + const {getInputByTestId} = render( 104 104 + '<textarea data-testid="textarea-example">An example description here.</textarea>', 105 105 + ) 106 106 + 107 107 + expect(getInputByTestId('textarea-example')).toHaveDisplayValue( 108 108 + 'An example description here.', 109 109 + ) 110 110 + expect(getInputByTestId('textarea-example')).toHaveDisplayValue(/example/) 111 111 + 112 112 + getInputByTestId('textarea-example').value = 'Another example' 113 113 + expect(getInputByTestId('textarea-example')).toHaveDisplayValue( 114 114 + 'Another example', 115 115 + ) 116 116 + }) 117 117 + 118 118 + it('should throw if element is not valid', () => { 119 119 + const {queryByTestId} = render(` 120 120 + <div data-testid="div">Banana</div> 121 121 + <input type="radio" data-testid="radio" value="Something" /> 122 122 + <input type="checkbox" data-testid="checkbox" /> 123 123 + `) 124 124 + 125 125 + let errorMessage 126 126 + try { 127 127 + expect(queryByTestId('div')).toHaveDisplayValue('Banana') 128 128 + } catch (err) { 129 129 + errorMessage = err.message 130 130 + } 131 131 + 132 132 + expect(errorMessage).toMatchInlineSnapshot( 133 133 + `.toHaveDisplayValue() currently supports only input, textarea or select elements, try with another matcher instead.`, 134 134 + ) 135 135 + 136 136 + try { 137 137 + expect(queryByTestId('radio')).toHaveDisplayValue('Something') 138 138 + } catch (err) { 139 139 + errorMessage = err.message 140 140 + } 141 141 + 142 142 + expect(errorMessage).toMatchInlineSnapshot( 143 143 + `.toHaveDisplayValue() currently does not support input[type="radio"], try with another matcher instead.`, 144 144 + ) 145 145 + 146 146 + try { 147 147 + // @ts-expect-error 148 148 + expect(queryByTestId('checkbox')).toHaveDisplayValue(true) 149 149 + } catch (err) { 150 150 + errorMessage = err.message 151 151 + } 152 152 + 153 153 + expect(errorMessage).toMatchInlineSnapshot( 154 154 + `.toHaveDisplayValue() currently does not support input[type="checkbox"], try with another matcher instead.`, 155 155 + ) 156 156 + }) 157 157 + 158 158 + it('should work with numbers', () => { 159 159 + const {queryByTestId} = render(` 160 160 + <select data-testid="select"> 161 161 + <option value="">1</option> 162 162 + </select> 163 163 + `) 164 164 + 165 165 + expect(queryByTestId('select')).toHaveDisplayValue(1) 166 166 + })

+23

test/browser/fixtures/expect-dom/toHaveFocus.test.ts

Reviewed

··· 1 1 + import { expect, test } from 'vitest' 2 2 + import { render } from './utils' 3 3 + 4 4 + test('.toHaveFocus', () => { 5 5 + const {container} = render(` 6 6 + <div> 7 7 + <label for="focused">test</label> 8 8 + <input id="focused" type="text" /> 9 9 + <button type="submit" id="not-focused">Not Focused</button> 10 10 + </div>`) 11 11 + 12 12 + const focused = container.querySelector('#focused') as HTMLInputElement 13 13 + const notFocused = container.querySelector('#not-focused') 14 14 + 15 15 + document.body.appendChild(container) 16 16 + focused.focus() 17 17 + 18 18 + expect(focused).toHaveFocus() 19 19 + expect(notFocused).not.toHaveFocus() 20 20 + 21 21 + expect(() => expect(focused).not.toHaveFocus()).toThrowError() 22 22 + expect(() => expect(notFocused).toHaveFocus()).toThrowError() 23 23 + })

+352

test/browser/fixtures/expect-dom/toHaveFormValues.test.ts

Reviewed

··· 1 1 + import { describe, expect, it } from 'vitest' 2 2 + import { render } from './utils' 3 3 + 4 4 + const categories = [ 5 5 + {value: '', label: '–'}, 6 6 + {value: 'design', label: 'Design'}, 7 7 + {value: 'ux', label: 'User Experience'}, 8 8 + {value: 'programming', label: 'Programming'}, 9 9 + ] 10 10 + 11 11 + const skills = [ 12 12 + {value: 'c-sharp', label: 'C#'}, 13 13 + {value: 'graphql', label: 'GraphQl'}, 14 14 + {value: 'javascript', label: 'JavaScript'}, 15 15 + {value: 'ruby-on-rails', label: 'Ruby on Rails'}, 16 16 + {value: 'python', label: 'Python'}, 17 17 + ] 18 18 + 19 19 + const defaultValues = { 20 20 + title: 'Full-stack developer', 21 21 + salary: 12345, 22 22 + category: 'programming', 23 23 + skills: ['javascript', 'ruby-on-rails'], 24 24 + description: 'You need to know your stuff', 25 25 + remote: true, 26 26 + freelancing: false, 27 27 + 'is%Private^': true, 28 28 + 'benefits[0]': 'Fruit & free drinks everyday', 29 29 + 'benefits[1]': 'Multicultural environment', 30 30 + } 31 31 + 32 32 + function renderForm({ 33 33 + selectSingle = renderSelectSingle, 34 34 + selectMultiple = renderSelectMultiple, 35 35 + values: valueOverrides = {}, 36 36 + } = {}) { 37 37 + const values = { 38 38 + ...defaultValues, 39 39 + ...valueOverrides, 40 40 + } 41 41 + const {container} = render(` 42 42 + <form> 43 43 + <label for="title">Job title</label> 44 44 + <input 45 45 + type="text" 46 46 + id="title" 47 47 + name="title" 48 48 + value="${values.title || ''}" 49 49 + /> 50 50 + 51 51 + <label for="salary">Salary</label> 52 52 + <input 53 53 + type="number" 54 54 + id="salary" 55 55 + name="salary" 56 56 + value="${values.salary}" 57 57 + /> 58 58 + 59 59 + <label for="description">Description</label> 60 60 + <textarea id="description" name="description">${ 61 61 + values.description 62 62 + }</textarea> 63 63 + 64 64 + <input 65 65 + type="checkbox" 66 66 + id="remote" 67 67 + name="remote" ${values.remote ? 'checked' : ''} 68 68 + /> 69 69 + <label for="remote">Can work remotely?</label> 70 70 + 71 71 + <input 72 72 + type="checkbox" 73 73 + id="freelancing" 74 74 + name="freelancing" ${values.freelancing ? 'checked' : ''} 75 75 + /> 76 76 + <label for="freelancing">Freelancing?</label> 77 77 + 78 78 + <fieldset> 79 79 + <legend>Benefits</legend> 80 80 + <input 81 81 + type="text" 82 82 + id="benefits[0]" 83 83 + name="benefits[0]" 84 84 + value="${values['benefits[0]']}" 85 85 + /> 86 86 + <input 87 87 + type="text" 88 88 + id="benefits[1]" 89 89 + name="benefits[1]" 90 90 + value="${values['benefits[1]']}" 91 91 + /> 92 92 + </fieldset> 93 93 + 94 94 + <label for="is%Private^">Is Private</label> 95 95 + <input 96 96 + type="checkbox" 97 97 + id="is%Private^" 98 98 + name="is%Private^" 99 99 + name="isPrivate" ${values['is%Private^'] ? 'checked' : ''} 100 100 + /> 101 101 + 102 102 + ${selectSingle('category', 'Category', categories, values.category)} 103 103 + ${selectMultiple('skills', 'Skills', skills, values.skills)} 104 104 + </form> 105 105 + `) 106 106 + return container.querySelector('form') 107 107 + } 108 108 + 109 109 + describe('.toHaveFormValues', () => { 110 110 + it('works as expected', () => { 111 111 + expect(renderForm()).toHaveFormValues(defaultValues) 112 112 + }) 113 113 + 114 114 + it('allows to match partially', () => { 115 115 + expect(renderForm()).toHaveFormValues({ 116 116 + category: 'programming', 117 117 + salary: 12345, 118 118 + }) 119 119 + }) 120 120 + 121 121 + it('supports checkboxes for multiple selection', () => { 122 122 + expect(renderForm({selectMultiple: renderCheckboxes})).toHaveFormValues({ 123 123 + skills: ['javascript', 'ruby-on-rails'], 124 124 + }) 125 125 + }) 126 126 + 127 127 + it('supports radio-buttons for single selection', () => { 128 128 + expect(renderForm({selectSingle: renderRadioButtons})).toHaveFormValues({ 129 129 + category: 'programming', 130 130 + }) 131 131 + }) 132 132 + 133 133 + it('matches sets of selected values regardless of the order', () => { 134 134 + const form = renderForm() 135 135 + expect(form).toHaveFormValues({ 136 136 + skills: ['ruby-on-rails', 'javascript'], 137 137 + }) 138 138 + expect(form).toHaveFormValues({ 139 139 + skills: ['javascript', 'ruby-on-rails'], 140 140 + }) 141 141 + }) 142 142 + 143 143 + it('correctly handles empty values', () => { 144 144 + expect( 145 145 + renderForm({ 146 146 + values: { 147 147 + title: '', 148 148 + salary: null, 149 149 + category: null, 150 150 + skills: [], 151 151 + description: '', 152 152 + }, 153 153 + }), 154 154 + ).toHaveFormValues({ 155 155 + title: '', 156 156 + salary: null, 157 157 + category: '', 158 158 + skills: [], 159 159 + description: '', 160 160 + }) 161 161 + }) 162 162 + 163 163 + it('handles <input type="number"> values correctly', () => { 164 164 + expect(renderForm({values: {salary: 123.456}})).toHaveFormValues({ 165 165 + salary: 123.456, 166 166 + }) 167 167 + expect(renderForm({values: {salary: '1e5'}})).toHaveFormValues({ 168 168 + salary: 1e5, 169 169 + }) 170 170 + expect(renderForm({values: {salary: '1.35e5'}})).toHaveFormValues({ 171 171 + salary: 135000, 172 172 + }) 173 173 + expect(renderForm({values: {salary: '-5.9'}})).toHaveFormValues({ 174 174 + salary: -5.9, 175 175 + }) 176 176 + }) 177 177 + 178 178 + describe('edge cases', () => { 179 179 + // This is also to ensure 100% code coverage for edge cases 180 180 + it('detects multiple elements with the same name but different type', () => { 181 181 + const {container} = render(` 182 182 + <form> 183 183 + <input type="checkbox" name="accept"> 184 184 + <input type="radio" name="accept"> 185 185 + </form> 186 186 + `) 187 187 + const form = container.querySelector('form') 188 188 + expect(() => { 189 189 + expect(form).toHaveFormValues({}) 190 190 + }).toThrowError(/must be of the same type/) 191 191 + }) 192 192 + 193 193 + it('detects multiple elements with the same type and name', () => { 194 194 + const {container} = render(` 195 195 + <form> 196 196 + <input type="text" name="title" value="one"> 197 197 + <input type="text" name="title" value="two"> 198 198 + </form> 199 199 + `) 200 200 + const form = container.querySelector('form') 201 201 + expect(form).toHaveFormValues({ 202 202 + title: ['one', 'two'], 203 203 + }) 204 204 + }) 205 205 + 206 206 + it('supports radio buttons with none selected', () => { 207 207 + expect( 208 208 + renderForm({ 209 209 + selectSingle: renderRadioButtons, 210 210 + values: {category: undefined}, 211 211 + }), 212 212 + ).toHaveFormValues({ 213 213 + category: undefined, 214 214 + }) 215 215 + }) 216 216 + 217 217 + it('supports being called only on form and fieldset elements', () => { 218 218 + const expectedValues = {title: 'one', description: 'two'} 219 219 + const {container} = render(` 220 220 + <form> 221 221 + <input type="text" name="title" value="one"> 222 222 + <input type="text" name="description" value="two"> 223 223 + </form> 224 224 + `) 225 225 + const form = container.querySelector('form') 226 226 + expect(() => { 227 227 + expect(container).toHaveFormValues(expectedValues) 228 228 + }).toThrowError(/a form or a fieldset/) 229 229 + expect(() => { 230 230 + expect(form).toHaveFormValues(expectedValues) 231 231 + }).not.toThrowError() 232 232 + }) 233 233 + 234 234 + it('matches change in selected value of select', () => { 235 235 + const oldValue = '' 236 236 + const newValue = 'design' 237 237 + 238 238 + const {container} = render(` 239 239 + <form> 240 240 + ${renderSelectSingle('category', 'Category', categories, oldValue)} 241 241 + </form> 242 242 + `) 243 243 + 244 244 + const form = container.querySelector('form') 245 245 + const select = container.querySelector('select') 246 246 + expect(form).toHaveFormValues({category: oldValue}) 247 247 + 248 248 + select.value = newValue 249 249 + expect(form).toHaveFormValues({category: newValue}) 250 250 + }) 251 251 + }) 252 252 + 253 253 + describe('failed assertions', () => { 254 254 + it('work as expected', () => { 255 255 + expect(() => { 256 256 + expect(renderForm()).not.toHaveFormValues(defaultValues) 257 257 + }).toThrowError(/Expected the element not to have form values/) 258 258 + expect(() => { 259 259 + expect(renderForm()).toHaveFormValues({something: 'missing'}) 260 260 + }).toThrowError(/Expected the element to have form values/) 261 261 + }) 262 262 + }) 263 263 + }) 264 264 + 265 265 + // Form control renderers 266 266 + 267 267 + function isSelected(value, option) { 268 268 + return Array.isArray(value) && value.indexOf(option.value) >= 0 269 269 + } 270 270 + 271 271 + function renderCheckboxes(name, label, options, value = []) { 272 272 + return ` 273 273 + <fieldset> 274 274 + <legend>${label}</legend> 275 275 + ${renderList( 276 276 + options, 277 277 + option => ` 278 278 + <div> 279 279 + <input 280 280 + type="checkbox" 281 281 + name="${name}[]" 282 282 + id="${option.value}" 283 283 + value="${option.value}" 284 284 + ${isSelected(value, option) ? 'checked' : ''} 285 285 + /> 286 286 + <label for="${option.value}">${option.label}</label> 287 287 + </div> 288 288 + `, 289 289 + )} 290 290 + </fieldset> 291 291 + ` 292 292 + } 293 293 + 294 294 + function renderRadioButtons(name, label, options, value = undefined) { 295 295 + return ` 296 296 + <fieldset> 297 297 + <legend>${label}</legend> 298 298 + ${renderList( 299 299 + options, 300 300 + option => ` 301 301 + <div> 302 302 + <input 303 303 + type="radio" 304 304 + name="${name}" 305 305 + id="${option.value}" 306 306 + value="${option.value}" 307 307 + ${value === option.value ? 'checked' : ''} 308 308 + /> 309 309 + <label for="${option.value}">${option.label}</label> 310 310 + </div> 311 311 + `, 312 312 + )} 313 313 + </fieldset> 314 314 + ` 315 315 + } 316 316 + 317 317 + function renderSelect(name, label, options, value, multiple) { 318 318 + return ` 319 319 + <label for="${name}">${label}</label> 320 320 + <select id="${name}" name="${name}" ${multiple ? 'multiple' : ''}> 321 321 + ${renderList( 322 322 + options, 323 323 + option => ` 324 324 + <option 325 325 + value="${option.value}" 326 326 + ${isSelected(value, option) ? 'selected' : ''} 327 327 + > 328 328 + ${option.label} 329 329 + </option> 330 330 + `, 331 331 + )} 332 332 + </select> 333 333 + ` 334 334 + } 335 335 + 336 336 + function renderSelectSingle(name, label, options, value = undefined) { 337 337 + return renderSelect( 338 338 + name, 339 339 + label, 340 340 + options, 341 341 + value === undefined || value === null ? [] : [value], 342 342 + false, 343 343 + ) 344 344 + } 345 345 + 346 346 + function renderSelectMultiple(name, label, options, value = []) { 347 347 + return renderSelect(name, label, options, value, true) 348 348 + } 349 349 + 350 350 + function renderList(items, mapper) { 351 351 + return items.map(mapper).join('') 352 352 + }

+65

test/browser/fixtures/expect-dom/toHaveRole.test.ts

Reviewed

··· 1 1 + import { describe, expect, it } from 'vitest' 2 2 + import { render } from './utils' 3 3 + 4 4 + describe('.toHaveRole', () => { 5 5 + it('matches implicit role', () => { 6 6 + const {queryByTestId} = render(` 7 7 + <div> 8 8 + <button data-testid="continue-button">Continue</button> 9 9 + </div> 10 10 + `) 11 11 + 12 12 + const continueButton = queryByTestId('continue-button') 13 13 + 14 14 + expect(continueButton).not.toHaveRole('listitem') 15 15 + expect(continueButton).toHaveRole('button') 16 16 + 17 17 + expect(() => { 18 18 + expect(continueButton).toHaveRole('listitem') 19 19 + }).toThrow(/expected element to have role/i) 20 20 + expect(() => { 21 21 + expect(continueButton).not.toHaveRole('button') 22 22 + }).toThrow(/expected element not to have role/i) 23 23 + }) 24 24 + 25 25 + it('matches explicit role', () => { 26 26 + const {queryByTestId} = render(` 27 27 + <div> 28 28 + <div role="button" data-testid="continue-button">Continue</div> 29 29 + </div> 30 30 + `) 31 31 + 32 32 + const continueButton = queryByTestId('continue-button') 33 33 + 34 34 + expect(continueButton).not.toHaveRole('listitem') 35 35 + expect(continueButton).toHaveRole('button') 36 36 + 37 37 + expect(() => { 38 38 + expect(continueButton).toHaveRole('listitem') 39 39 + }).toThrow(/expected element to have role/i) 40 40 + expect(() => { 41 41 + expect(continueButton).not.toHaveRole('button') 42 42 + }).toThrow(/expected element not to have role/i) 43 43 + }) 44 44 + 45 45 + it('matches multiple explicit roles', () => { 46 46 + const {queryByTestId} = render(` 47 47 + <div> 48 48 + <div role="button switch" data-testid="continue-button">Continue</div> 49 49 + </div> 50 50 + `) 51 51 + 52 52 + const continueButton = queryByTestId('continue-button') 53 53 + 54 54 + expect(continueButton).not.toHaveRole('listitem') 55 55 + expect(continueButton).toHaveRole('button') 56 56 + expect(continueButton).not.toHaveRole('switch') 57 57 + 58 58 + expect(() => { 59 59 + expect(continueButton).toHaveRole('listitem') 60 60 + }).toThrow(/expected element to have role/i) 61 61 + expect(() => { 62 62 + expect(continueButton).not.toHaveRole('button') 63 63 + }).toThrow(/expected element not to have role/i) 64 64 + }) 65 65 + })

+183

test/browser/fixtures/expect-dom/toHaveSelection.test.ts

Reviewed

··· 1 1 + import { describe, expect, test } from 'vitest' 2 2 + import { render } from './utils' 3 3 + 4 4 + describe('.toHaveSelection', () => { 5 5 + test.each(['text', 'password', 'textarea'])( 6 6 + 'handles selection within form elements', 7 7 + testId => { 8 8 + const {getInputByTestId} = render(` 9 9 + <input type="text" value="text selected text" data-testid="text" /> 10 10 + <input type="password" value="text selected text" data-testid="password" /> 11 11 + <textarea data-testid="textarea">text selected text</textarea> 12 12 + `) 13 13 + 14 14 + getInputByTestId(testId).setSelectionRange(5, 13) 15 15 + expect(getInputByTestId(testId)).toHaveSelection('selected') 16 16 + 17 17 + getInputByTestId(testId).select() 18 18 + expect(getInputByTestId(testId)).toHaveSelection('text selected text') 19 19 + }, 20 20 + ) 21 21 + 22 22 + test.each(['checkbox', 'radio'])( 23 23 + 'returns empty string for form elements without text', 24 24 + testId => { 25 25 + const {getInputByTestId} = render(` 26 26 + <input type="checkbox" value="checkbox" data-testid="checkbox" /> 27 27 + <input type="radio" value="radio" data-testid="radio" /> 28 28 + `) 29 29 + 30 30 + getInputByTestId(testId).select() 31 31 + expect(getInputByTestId(testId)).toHaveSelection('') 32 32 + }, 33 33 + ) 34 34 + 35 35 + test('does not match subset string', () => { 36 36 + const {getInputByTestId} = render(` 37 37 + <input type="text" value="text selected text" data-testid="text" /> 38 38 + `) 39 39 + 40 40 + getInputByTestId('text').setSelectionRange(5, 13) 41 41 + expect(getInputByTestId('text')).not.toHaveSelection('select') 42 42 + expect(getInputByTestId('text')).toHaveSelection('selected') 43 43 + }) 44 44 + 45 45 + test('accepts any selection when expected selection is missing', () => { 46 46 + const {getInputByTestId} = render(` 47 47 + <input type="text" value="text selected text" data-testid="text" /> 48 48 + `) 49 49 + 50 50 + expect(getInputByTestId('text')).not.toHaveSelection() 51 51 + 52 52 + getInputByTestId('text').setSelectionRange(5, 13) 53 53 + 54 54 + expect(getInputByTestId('text')).toHaveSelection() 55 55 + }) 56 56 + 57 57 + test('throws when form element is not selected', () => { 58 58 + const {queryByTestId} = render(` 59 59 + <input type="text" value="text selected text" data-testid="text" /> 60 60 + `) 61 61 + 62 62 + expect(() => 63 63 + expect(queryByTestId('text')).toHaveSelection(), 64 64 + ).toThrowErrorMatchingInlineSnapshot(` 65 65 + [Error: expect(element).toHaveSelection(expected) 66 66 + 67 67 + Expected the element to have selection: 68 68 + (any) 69 69 + Received: 70 70 + ] 71 71 + `) 72 72 + }) 73 73 + 74 74 + test('throws when form element is selected', () => { 75 75 + const {getInputByTestId} = render(` 76 76 + <input type="text" value="text selected text" data-testid="text" /> 77 77 + `) 78 78 + getInputByTestId('text').setSelectionRange(5, 13) 79 79 + 80 80 + expect(() => 81 81 + expect(getInputByTestId('text')).not.toHaveSelection(), 82 82 + ).toThrowErrorMatchingInlineSnapshot(` 83 83 + [Error: expect(element).not.toHaveSelection(expected) 84 84 + 85 85 + Expected the element not to have selection: 86 86 + (any) 87 87 + Received: 88 88 + selected] 89 89 + `) 90 90 + }) 91 91 + 92 92 + test('throws when element is not selected', () => { 93 93 + const {queryByTestId} = render(` 94 94 + <div data-testid="text">text</div> 95 95 + `) 96 96 + 97 97 + expect(() => 98 98 + expect(queryByTestId('text')).toHaveSelection(), 99 99 + ).toThrowErrorMatchingInlineSnapshot(` 100 100 + [Error: expect(element).toHaveSelection(expected) 101 101 + 102 102 + Expected the element to have selection: 103 103 + (any) 104 104 + Received: 105 105 + ] 106 106 + `) 107 107 + }) 108 108 + 109 109 + test('throws when element selection does not match', () => { 110 110 + const {getInputByTestId} = render(` 111 111 + <input type="text" value="text selected text" data-testid="text" /> 112 112 + `) 113 113 + getInputByTestId('text').setSelectionRange(0, 4) 114 114 + 115 115 + expect(() => 116 116 + expect(getInputByTestId('text')).toHaveSelection('no match'), 117 117 + ).toThrowErrorMatchingInlineSnapshot(` 118 118 + [Error: expect(element).toHaveSelection(no match) 119 119 + 120 120 + Expected the element to have selection: 121 121 + no match 122 122 + Received: 123 123 + text] 124 124 + `) 125 125 + }) 126 126 + 127 127 + test('handles selection within text nodes', () => { 128 128 + const {queryByTestId} = render(` 129 129 + <div> 130 130 + <div data-testid="prev">prev</div> 131 131 + <div data-testid="parent">text <span data-testid="child">selected</span> text</div> 132 132 + <div data-testid="next">next</div> 133 133 + </div> 134 134 + `) 135 135 + 136 136 + const selection = queryByTestId('child').ownerDocument.getSelection() 137 137 + const range = queryByTestId('child').ownerDocument.createRange() 138 138 + selection.removeAllRanges() 139 139 + selection.empty() 140 140 + selection.addRange(range) 141 141 + 142 142 + range.selectNodeContents(queryByTestId('child')) 143 143 + 144 144 + expect(queryByTestId('child')).toHaveSelection('selected') 145 145 + expect(queryByTestId('parent')).toHaveSelection('selected') 146 146 + 147 147 + range.selectNodeContents(queryByTestId('parent')) 148 148 + 149 149 + expect(queryByTestId('child')).toHaveSelection('selected') 150 150 + expect(queryByTestId('parent')).toHaveSelection('text selected text') 151 151 + 152 152 + range.setStart(queryByTestId('prev'), 0) 153 153 + range.setEnd(queryByTestId('child').childNodes[0], 3) 154 154 + 155 155 + expect(queryByTestId('prev')).toHaveSelection('prev') 156 156 + expect(queryByTestId('child')).toHaveSelection('sel') 157 157 + expect(queryByTestId('parent')).toHaveSelection('text sel') 158 158 + expect(queryByTestId('next')).not.toHaveSelection() 159 159 + 160 160 + range.setStart(queryByTestId('child').childNodes[0], 3) 161 161 + range.setEnd(queryByTestId('next').childNodes[0], 2) 162 162 + 163 163 + expect(queryByTestId('child')).toHaveSelection('ected') 164 164 + expect(queryByTestId('parent')).toHaveSelection('ected text') 165 165 + expect(queryByTestId('prev')).not.toHaveSelection() 166 166 + expect(queryByTestId('next')).toHaveSelection('ne') 167 167 + }) 168 168 + 169 169 + test('throws with information when the expected selection is not string', () => { 170 170 + const {container} = render(`<div>1</div>`) 171 171 + const element = container.firstChild 172 172 + const range = element.ownerDocument.createRange() 173 173 + range.selectNodeContents(element) 174 174 + element.ownerDocument.getSelection().addRange(range) 175 175 + 176 176 + expect(() => 177 177 + // @ts-expect-error wrong type 178 178 + expect(element).toHaveSelection(1), 179 179 + ).toThrowErrorMatchingInlineSnapshot( 180 180 + `[Error: expected selection must be a string or undefined]` 181 181 + ) 182 182 + }) 183 183 + })

+283

test/browser/fixtures/expect-dom/toHaveStyle.test.ts

Reviewed

··· 1 1 + import { describe, expect, test } from 'vitest' 2 2 + import { render } from './utils' 3 3 + 4 4 + describe('.toHaveStyle', () => { 5 5 + test('handles positive test cases', () => { 6 6 + const { container } = render(` 7 7 + <div class="label" style="background-color: blue; height: 100%;"> 8 8 + Hello World 9 9 + </div> 10 10 + `) 11 11 + 12 12 + const style = document.createElement('style') 13 13 + style.innerHTML = ` 14 14 + .label { 15 15 + align-items: center; 16 16 + background-color: black; 17 17 + color: white; 18 18 + float: left; 19 19 + transition: opacity 0.2s ease-out, top 0.3s cubic-bezier(0.1, 0.7, 1.0, 0.1); 20 20 + transform: translateX(0px); 21 21 + } 22 22 + ` 23 23 + document.body.appendChild(style) 24 24 + document.body.appendChild(container) 25 25 + 26 26 + // border: fakefake doesn't exist 27 27 + expect(() => { 28 28 + expect(container.querySelector('.label')).toHaveStyle('border: fakefake') 29 29 + }).toThrowError() 30 30 + 31 31 + expect(container.querySelector('.label')).toHaveStyle(` 32 32 + height: 100%; 33 33 + color: white; 34 34 + background-color: blue; 35 35 + `) 36 36 + 37 37 + expect(container.querySelector('.label')).toHaveStyle(` 38 38 + background-color: blue; 39 39 + color: white; 40 40 + `) 41 41 + 42 42 + expect(container.querySelector('.label')).toHaveStyle( 43 43 + 'transition: opacity 0.2s ease-out, top 0.3s cubic-bezier(0.1, 0.7, 1.0, 0.1)', 44 44 + ) 45 45 + 46 46 + expect(container.querySelector('.label')).toHaveStyle( 47 47 + 'background-color:blue;color:white', 48 48 + ) 49 49 + 50 50 + expect(container.querySelector('.label')).not.toHaveStyle(` 51 51 + color: white; 52 52 + font-weight: bold; 53 53 + `) 54 54 + 55 55 + expect(container.querySelector('.label')).toHaveStyle(` 56 56 + Align-items: center; 57 57 + `) 58 58 + 59 59 + expect(container.querySelector('.label')).toHaveStyle(` 60 60 + transform: translateX(0px); 61 61 + `) 62 62 + }) 63 63 + 64 64 + test('handles negative test cases', () => { 65 65 + const { container } = render(` 66 66 + <div class="label" style="background-color: blue; height: 100%"> 67 67 + Hello World 68 68 + </div> 69 69 + `) 70 70 + 71 71 + const style = document.createElement('style') 72 72 + style.innerHTML = ` 73 73 + .label { 74 74 + background-color: black; 75 75 + color: white; 76 76 + float: left; 77 77 + --var-name: 0px; 78 78 + transition: opacity 0.2s ease-out, top 0.3s cubic-bezier(1.175, 0.885, 0.32, 1.275); 79 79 + } 80 80 + ` 81 81 + document.body.appendChild(style) 82 82 + document.body.appendChild(container) 83 83 + 84 84 + // CSS parser is forgiving, it doesn't throw 85 85 + // expect(() => 86 86 + // expect(container.querySelector('.label')).not.toHaveStyle( 87 87 + // 'font-weight bold', 88 88 + // ), 89 89 + // ).toThrowError() 90 90 + 91 91 + expect(() => 92 92 + expect(container.querySelector('.label')).toHaveStyle( 93 93 + 'font-weight: bold', 94 94 + ), 95 95 + ).toThrowError() 96 96 + 97 97 + expect(() => 98 98 + expect(container.querySelector('.label')).not.toHaveStyle('color: white'), 99 99 + ).toThrowError() 100 100 + 101 101 + expect(() => 102 102 + expect(container.querySelector('.label')).toHaveStyle( 103 103 + 'transition: all 0.7s ease, width 1.0s cubic-bezier(3, 4, 5, 6);', 104 104 + ), 105 105 + ).toThrowError() 106 106 + 107 107 + // Custom property names are case sensitive 108 108 + expect(() => 109 109 + expect(container.querySelector('.label')).toHaveStyle('--VAR-NAME: 0px;'), 110 110 + ).toThrowError() 111 111 + 112 112 + expect(() => 113 113 + expect(container.querySelector('.label')).toHaveStyle('color white'), 114 114 + ).toThrowError() 115 115 + 116 116 + expect(() => 117 117 + expect(container.querySelector('.label')).toHaveStyle('--color: black'), 118 118 + ).toThrowError() 119 119 + document.body.removeChild(style) 120 120 + document.body.removeChild(container) 121 121 + }) 122 122 + 123 123 + test('properly normalizes colors', () => { 124 124 + const { queryByTestId } = render(` 125 125 + <span data-testid="color-example" style="background-color: #123456">Hello World</span> 126 126 + `) 127 127 + expect(queryByTestId('color-example')).toHaveStyle( 128 128 + 'background-color: #123456', 129 129 + ) 130 130 + }) 131 131 + 132 132 + test('handles inline custom properties (with uppercase letters)', () => { 133 133 + const { queryByTestId } = render(` 134 134 + <span data-testid="color-example" style="--accentColor: blue">Hello World</span> 135 135 + `) 136 136 + expect(queryByTestId('color-example')).toHaveStyle('--accentColor: blue') 137 137 + }) 138 138 + 139 139 + test('handles global custom properties', () => { 140 140 + const style = document.createElement('style') 141 141 + style.innerHTML = ` 142 142 + div { 143 143 + --color: blue; 144 144 + } 145 145 + ` 146 146 + 147 147 + const { container } = render(` 148 148 + <div> 149 149 + Hello world 150 150 + </div> 151 151 + `) 152 152 + 153 153 + document.body.appendChild(style) 154 154 + document.body.appendChild(container) 155 155 + 156 156 + expect(container).toHaveStyle(`--color: blue`) 157 157 + }) 158 158 + 159 159 + test('properly normalizes colors for border', () => { 160 160 + const { queryByTestId } = render(` 161 161 + <span data-testid="color-example" style="border: 1px solid #fff">Hello World</span> 162 162 + `) 163 163 + expect(queryByTestId('color-example')).toHaveStyle('border: 1px solid #fff') 164 164 + }) 165 165 + 166 166 + test('handles different color declaration formats', () => { 167 167 + const { queryByTestId } = render(` 168 168 + <span data-testid="color-example" style="color: rgba(0, 0, 0, 1); background-color: #000000">Hello World</span> 169 169 + `) 170 170 + 171 171 + expect(queryByTestId('color-example')).toHaveStyle('color: #000000') 172 172 + expect(queryByTestId('color-example')).toHaveStyle( 173 173 + 'background-color: rgba(0, 0, 0, 1)', 174 174 + ) 175 175 + }) 176 176 + 177 177 + test('handles nonexistent styles', () => { 178 178 + const { container } = render(` 179 179 + <div class="label" style="background-color: blue; height: 100%"> 180 180 + Hello World 181 181 + </div> 182 182 + `) 183 183 + 184 184 + expect(container.querySelector('.label')).not.toHaveStyle( 185 185 + 'whatever: anything', 186 186 + ) 187 187 + }) 188 188 + 189 189 + describe('object syntax', () => { 190 190 + test('handles styles as object', () => { 191 191 + const { container } = render(` 192 192 + <div class="label" style="background-color: blue; height: 100%"> 193 193 + Hello World 194 194 + </div> 195 195 + `) 196 196 + 197 197 + expect(container.querySelector('.label')).toHaveStyle({ 198 198 + backgroundColor: 'blue', 199 199 + }) 200 200 + expect(container.querySelector('.label')).toHaveStyle({ 201 201 + backgroundColor: 'blue', 202 202 + height: '100%', 203 203 + }) 204 204 + expect(container.querySelector('.label')).not.toHaveStyle({ 205 205 + backgroundColor: 'red', 206 206 + height: '100%', 207 207 + }) 208 208 + expect(container.querySelector('.label')).not.toHaveStyle({ 209 209 + whatever: 'anything', 210 210 + }) 211 211 + }) 212 212 + 213 213 + // https://github.com/testing-library/jest-dom/issues/350 214 214 + test('Uses correct computed values', () => { 215 215 + const { container } = render(` 216 216 + <div class="label"> 217 217 + Hello World 218 218 + </div> 219 219 + `) 220 220 + 221 221 + const style = document.createElement('style') 222 222 + style.innerHTML = ` 223 223 + .label { 224 224 + color: #fff; 225 225 + background-color: #000; 226 226 + } 227 227 + ` 228 228 + document.body.appendChild(style) 229 229 + document.body.appendChild(container) 230 230 + 231 231 + expect(container.querySelector('.label')).toHaveStyle('color: #FFF') 232 232 + }) 233 233 + 234 234 + test('Uses px as the default unit', () => { 235 235 + const { queryByTestId } = render(` 236 236 + <span data-testid="color-example" style="font-size: 12px">Hello World</span> 237 237 + `) 238 238 + expect(queryByTestId('color-example')).toHaveStyle({ 239 239 + // in jest-dom '12' is converted to 12px 240 240 + // but in the browser setting the style to 12 wil have no effect, 241 241 + // so Vitest prioritizes the browser behavior 242 242 + // fontSize: 12, 243 243 + fontSize: '12px', 244 244 + }) 245 245 + }) 246 246 + 247 247 + test('Fails with an invalid unit', () => { 248 248 + const { queryByTestId } = render(` 249 249 + <span data-testid="color-example" style="font-size: 12rem">Hello World</span> 250 250 + `) 251 251 + expect(() => { 252 252 + expect(queryByTestId('color-example')).toHaveStyle({ fontSize: '12px' }) 253 253 + }).toThrowError() 254 254 + }) 255 255 + 256 256 + test('supports dash-cased property names', () => { 257 257 + const { container } = render(` 258 258 + <div class="label" style="background-color: blue; height: 100%"> 259 259 + Hello World 260 260 + </div> 261 261 + `) 262 262 + expect(container.querySelector('.label')).toHaveStyle({ 263 263 + 'background-color': 'blue', 264 264 + }) 265 265 + }) 266 266 + 267 267 + test('requires strict empty properties matching', () => { 268 268 + const { container } = render(` 269 269 + <div class="label" style="width: 100%;height: 100%"> 270 270 + Hello World 271 271 + </div> 272 272 + `) 273 273 + expect(container.querySelector('.label')).not.toHaveStyle({ 274 274 + width: '100%', 275 275 + height: '', 276 276 + }) 277 277 + expect(container.querySelector('.label')).not.toHaveStyle({ 278 278 + width: '', 279 279 + height: '', 280 280 + }) 281 281 + }) 282 282 + }) 283 283 + })

+109

test/browser/fixtures/expect-dom/toHaveTextContent.test.ts

Reviewed

··· 1 1 + import { describe, expect, test } from 'vitest' 2 2 + import { render } from './utils' 3 3 + 4 4 + describe('.toHaveTextContent', () => { 5 5 + test('handles positive test cases', () => { 6 6 + const {queryByTestId} = render(`<span data-testid="count-value">2</span>`) 7 7 + 8 8 + expect(queryByTestId('count-value')).toHaveTextContent('2') 9 9 + expect(queryByTestId('count-value')).toHaveTextContent(2) 10 10 + expect(queryByTestId('count-value')).toHaveTextContent(/2/) 11 11 + expect(queryByTestId('count-value')).not.toHaveTextContent('21') 12 12 + }) 13 13 + 14 14 + test('handles text nodes', () => { 15 15 + const {container} = render(`<span>example</span>`) 16 16 + 17 17 + expect(container.querySelector('span').firstChild).toHaveTextContent( 18 18 + 'example', 19 19 + ) 20 20 + }) 21 21 + 22 22 + test('handles fragments', () => { 23 23 + const {asFragment} = render(`<span>example</span>`) 24 24 + 25 25 + expect(asFragment()).toHaveTextContent('example') 26 26 + }) 27 27 + 28 28 + test('handles negative test cases', () => { 29 29 + const {queryByTestId} = render(`<span data-testid="count-value">2</span>`) 30 30 + 31 31 + expect(() => 32 32 + expect(queryByTestId('count-value2')).toHaveTextContent('2'), 33 33 + ).toThrowError() 34 34 + 35 35 + expect(() => 36 36 + expect(queryByTestId('count-value')).toHaveTextContent('3'), 37 37 + ).toThrowError() 38 38 + expect(() => 39 39 + expect(queryByTestId('count-value')).not.toHaveTextContent('2'), 40 40 + ).toThrowError() 41 41 + }) 42 42 + 43 43 + test('normalizes whitespace by default', () => { 44 44 + const {container} = render(` 45 45 + <span> 46 46 + Step 47 47 + 1 48 48 + of 49 49 + 4 50 50 + </span> 51 51 + `) 52 52 + 53 53 + expect(container.querySelector('span')).toHaveTextContent('Step 1 of 4') 54 54 + }) 55 55 + 56 56 + test('allows whitespace normalization to be turned off', () => { 57 57 + const {container} = render(`<span>&nbsp;&nbsp;Step 1 of 4</span>`) 58 58 + 59 59 + expect(container.querySelector('span')).toHaveTextContent(' Step 1 of 4', { 60 60 + normalizeWhitespace: false, 61 61 + }) 62 62 + }) 63 63 + 64 64 + test('can handle multiple levels', () => { 65 65 + const {container} = render(`<span id="parent"><span>Step 1 66 66 + 67 67 + of 4</span></span>`) 68 68 + 69 69 + expect(container.querySelector('#parent')).toHaveTextContent('Step 1 of 4') 70 70 + }) 71 71 + 72 72 + test('can handle multiple levels with content spread across decendants', () => { 73 73 + const {container} = render(` 74 74 + <span id="parent"> 75 75 + <span>Step</span> 76 76 + <span> 1</span> 77 77 + <span><span>of</span></span> 78 78 + 79 79 + 80 80 + 4</span> 81 81 + </span> 82 82 + `) 83 83 + 84 84 + expect(container.querySelector('#parent')).toHaveTextContent('Step 1 of 4') 85 85 + }) 86 86 + 87 87 + test('does not throw error with empty content', () => { 88 88 + const {container} = render(`<span></span>`) 89 89 + expect(container.querySelector('span')).toHaveTextContent('') 90 90 + }) 91 91 + 92 92 + test('is case-sensitive', () => { 93 93 + const {container} = render('<span>Sensitive text</span>') 94 94 + 95 95 + expect(container.querySelector('span')).toHaveTextContent('Sensitive text') 96 96 + expect(container.querySelector('span')).not.toHaveTextContent( 97 97 + 'sensitive text', 98 98 + ) 99 99 + }) 100 100 + 101 101 + test('when matching with empty string and element with content, suggest using toBeEmptyDOMElement instead', () => { 102 102 + // https://github.com/testing-library/jest-dom/issues/104 103 103 + const {container} = render('<span>not empty</span>') 104 104 + 105 105 + expect(() => 106 106 + expect(container.querySelector('span')).toHaveTextContent(''), 107 107 + ).toThrowError(/toBeEmptyDOMElement\(\)/) 108 108 + }) 109 109 + })

+221

test/browser/fixtures/expect-dom/toHaveValue.test.ts

Reviewed

··· 1 1 + import { describe, expect, test } from 'vitest' 2 2 + import { render } from './utils' 3 3 + 4 4 + describe('.toHaveValue', () => { 5 5 + test('handles value of text input', () => { 6 6 + const {queryByTestId, getInputByTestId} = render(` 7 7 + <input type="text" value="foo" data-testid="value" /> 8 8 + <input type="text" value="" data-testid="empty" /> 9 9 + <input type="text" data-testid="without" /> 10 10 + `) 11 11 + 12 12 + expect(queryByTestId('value')).toHaveValue('foo') 13 13 + expect(queryByTestId('value')).toHaveValue() 14 14 + expect(queryByTestId('value')).not.toHaveValue('bar') 15 15 + expect(queryByTestId('value')).not.toHaveValue('') 16 16 + 17 17 + expect(queryByTestId('empty')).toHaveValue('') 18 18 + expect(queryByTestId('empty')).not.toHaveValue() 19 19 + expect(queryByTestId('empty')).not.toHaveValue('foo') 20 20 + 21 21 + expect(queryByTestId('without')).toHaveValue('') 22 22 + expect(queryByTestId('without')).not.toHaveValue() 23 23 + expect(queryByTestId('without')).not.toHaveValue('foo') 24 24 + getInputByTestId('without').value = 'bar' 25 25 + expect(queryByTestId('without')).toHaveValue('bar') 26 26 + }) 27 27 + 28 28 + test('handles value of number input', () => { 29 29 + const {queryByTestId, getInputByTestId} = render(` 30 30 + <input type="number" value="5" data-testid="number" /> 31 31 + <input type="number" value="" data-testid="empty" /> 32 32 + <input type="number" data-testid="without" /> 33 33 + `) 34 34 + 35 35 + expect(queryByTestId('number')).toHaveValue(5) 36 36 + expect(queryByTestId('number')).toHaveValue() 37 37 + expect(queryByTestId('number')).not.toHaveValue(4) 38 38 + expect(queryByTestId('number')).not.toHaveValue('5') 39 39 + 40 40 + expect(queryByTestId('empty')).toHaveValue(null) 41 41 + expect(queryByTestId('empty')).not.toHaveValue() 42 42 + expect(queryByTestId('empty')).not.toHaveValue('5') 43 43 + 44 44 + expect(queryByTestId('without')).toHaveValue(null) 45 45 + expect(queryByTestId('without')).not.toHaveValue() 46 46 + expect(queryByTestId('without')).not.toHaveValue('10') 47 47 + // @ts-expect-error ts doesn't allow value to be a number, but browser will convert it 48 48 + getInputByTestId('without').value = 10 49 49 + expect(queryByTestId('without')).toHaveValue(10) 50 50 + }) 51 51 + 52 52 + test('handles value of select element', () => { 53 53 + const {queryByTestId} = render(` 54 54 + <select data-testid="single"> 55 55 + <option value="first">First Value</option> 56 56 + <option value="second" selected>Second Value</option> 57 57 + <option value="third">Third Value</option> 58 58 + </select> 59 59 + 60 60 + <select data-testid="multiple" multiple> 61 61 + <option value="first">First Value</option> 62 62 + <option value="second" selected>Second Value</option> 63 63 + <option value="third" selected>Third Value</option> 64 64 + </select> 65 65 + 66 66 + <select data-testid="not-selected" > 67 67 + <option value="" disabled selected>- Select some value - </option> 68 68 + <option value="first">First Value</option> 69 69 + <option value="second">Second Value</option> 70 70 + <option value="third">Third Value</option> 71 71 + </select> 72 72 + `) 73 73 + 74 74 + expect(queryByTestId('single')).toHaveValue('second') 75 75 + expect(queryByTestId('single')).toHaveValue() 76 76 + 77 77 + expect(queryByTestId('multiple')).toHaveValue(['second', 'third']) 78 78 + expect(queryByTestId('multiple')).toHaveValue() 79 79 + 80 80 + expect(queryByTestId('not-selected')).not.toHaveValue() 81 81 + expect(queryByTestId('not-selected')).toHaveValue('') 82 82 + 83 83 + queryByTestId('single').children[0].setAttribute('selected', 'true') 84 84 + expect(queryByTestId('single')).toHaveValue('first') 85 85 + }) 86 86 + 87 87 + test('handles value of textarea element', () => { 88 88 + const {queryByTestId} = render(` 89 89 + <textarea data-testid="textarea">text value</textarea> 90 90 + `) 91 91 + expect(queryByTestId('textarea')).toHaveValue('text value') 92 92 + }) 93 93 + 94 94 + test('throws when passed checkbox or radio', () => { 95 95 + const {queryByTestId} = render(` 96 96 + <input data-testid="checkbox" type="checkbox" name="checkbox" value="val" checked /> 97 97 + <input data-testid="radio" type="radio" name="radio" value="val" checked /> 98 98 + `) 99 99 + 100 100 + expect(() => { 101 101 + expect(queryByTestId('checkbox')).toHaveValue('') 102 102 + }).toThrow() 103 103 + 104 104 + expect(() => { 105 105 + expect(queryByTestId('radio')).toHaveValue('') 106 106 + }).toThrow() 107 107 + }) 108 108 + 109 109 + test('throws when the expected input value does not match', () => { 110 110 + const {container} = render(`<input data-testid="one" value="foo" />`) 111 111 + const input = container.firstChild 112 112 + let errorMessage 113 113 + try { 114 114 + expect(input).toHaveValue('something else') 115 115 + } catch (error) { 116 116 + errorMessage = error.message 117 117 + } 118 118 + 119 119 + expect(errorMessage).toMatchInlineSnapshot(` 120 120 + expect(element).toHaveValue(something else) 121 121 + 122 122 + Expected the element to have value: 123 123 + something else 124 124 + Received: 125 125 + foo 126 126 + `) 127 127 + }) 128 128 + 129 129 + test('throws with type information when the expected text input value has loose equality with received value', () => { 130 130 + const {container} = render(`<input data-testid="one" value="8" />`) 131 131 + const input = container.firstChild 132 132 + let errorMessage 133 133 + try { 134 134 + expect(input).toHaveValue(8) 135 135 + } catch (error) { 136 136 + errorMessage = error.message 137 137 + } 138 138 + 139 139 + expect(errorMessage).toMatchInlineSnapshot(` 140 140 + expect(element).toHaveValue(8) 141 141 + 142 142 + Expected the element to have value: 143 143 + 8 (number) 144 144 + Received: 145 145 + 8 (string) 146 146 + `) 147 147 + }) 148 148 + 149 149 + test('throws when using not but the expected input value does match', () => { 150 150 + const {container} = render(`<input data-testid="one" value="foo" />`) 151 151 + const input = container.firstChild 152 152 + let errorMessage 153 153 + 154 154 + try { 155 155 + expect(input).not.toHaveValue('foo') 156 156 + } catch (error) { 157 157 + errorMessage = error.message 158 158 + } 159 159 + expect(errorMessage).toMatchInlineSnapshot(` 160 160 + expect(element).not.toHaveValue(foo) 161 161 + 162 162 + Expected the element not to have value: 163 163 + foo 164 164 + Received: 165 165 + foo 166 166 + `) 167 167 + }) 168 168 + 169 169 + test('throws when the form has no a value but a value is expected', () => { 170 170 + const {container} = render(`<input data-testid="one" />`) 171 171 + const input = container.firstChild 172 172 + let errorMessage 173 173 + 174 174 + try { 175 175 + expect(input).toHaveValue() 176 176 + } catch (error) { 177 177 + errorMessage = error.message 178 178 + } 179 179 + expect(errorMessage).toMatchInlineSnapshot(` 180 180 + expect(element).toHaveValue(expected) 181 181 + 182 182 + Expected the element to have value: 183 183 + (any) 184 184 + Received: 185 185 + `) 186 186 + }) 187 187 + 188 188 + test('throws when the form has a value but none is expected', () => { 189 189 + const {container} = render(`<input data-testid="one" value="foo" />`) 190 190 + const input = container.firstChild 191 191 + let errorMessage 192 192 + 193 193 + try { 194 194 + expect(input).not.toHaveValue() 195 195 + } catch (error) { 196 196 + errorMessage = error.message 197 197 + } 198 198 + expect(errorMessage).toMatchInlineSnapshot(` 199 199 + expect(element).not.toHaveValue(expected) 200 200 + 201 201 + Expected the element not to have value: 202 202 + (any) 203 203 + Received: 204 204 + foo 205 205 + `) 206 206 + }) 207 207 + 208 208 + test('handles value of aria-valuenow', () => { 209 209 + const valueToCheck = 70 210 210 + const {queryByTestId} = render(` 211 211 + <div role="meter" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${valueToCheck}" data-testid="meter"></div> 212 212 + <div role="textbox" aria-valuenow="${valueToCheck}" data-testid="textbox"></div> 213 213 + `) 214 214 + 215 215 + expect(queryByTestId('meter')).toHaveValue(valueToCheck) 216 216 + expect(queryByTestId('meter')).not.toHaveValue(valueToCheck + 1) 217 217 + 218 218 + // Role that does not support aria-valuenow 219 219 + expect(queryByTestId('textbox')).not.toHaveValue(70) 220 220 + }) 221 221 + })

+19

test/browser/fixtures/expect-dom/utils.ts

Reviewed

··· 1 1 + function render(html: string) { 2 2 + const container = document.createElement('div') 3 3 + container.innerHTML = html 4 4 + const queryByTestId = (testId: string) => 5 5 + container.querySelector(`[data-testid="${testId}"]`) as HTMLElement | SVGElement | null 6 6 + // asFragment has been stolen from react-testing-library 7 7 + const asFragment = () => 8 8 + document.createRange().createContextualFragment(container.innerHTML) 9 9 + const getInputByTestId = (testId: string) => queryByTestId(testId) as HTMLInputElement 10 10 + 11 11 + // Some tests need to look up global ids with document.getElementById() 12 12 + // so we need to be inside an actual document. 13 13 + document.body.innerHTML = '' 14 14 + document.body.appendChild(container) 15 15 + 16 16 + return { container, queryByTestId, asFragment, getInputByTestId } 17 17 + } 18 18 + 19 19 + export { render }

+16

test/browser/fixtures/expect-dom/vitest.config.js

Reviewed

··· 1 1 + import { defineConfig } from 'vitest/config' 2 2 + import { fileURLToPath } from 'node:url' 3 3 + import { instances, provider } from '../../settings' 4 4 + 5 5 + export default defineConfig({ 6 6 + cacheDir: fileURLToPath(new URL("./node_modules/.vite", import.meta.url)), 7 7 + test: { 8 8 + browser: { 9 9 + enabled: true, 10 10 + provider, 11 11 + instances, 12 12 + isolate: false, 13 13 + }, 14 14 + setupFiles: './setup.ts', 15 15 + }, 16 16 + })

+34 -33

packages/browser/src/client/tester/expect-element.ts

Reviewed

··· 1 1 import type { Locator } from '@vitest/browser/context' 2 2 import type { ExpectPollOptions } from 'vitest' 3 3 - import * as matchers from '@testing-library/jest-dom/matchers' 4 3 import { chai, expect } from 'vitest' 4 4 + import { matchers } from './expect' 5 5 import { processTimeoutOptions } from './utils' 6 6 7 7 - export async function setupExpectDom(): Promise<void> { 8 8 - expect.extend(matchers) 9 9 - expect.element = <T extends Element | Locator>(elementOrLocator: T, options?: ExpectPollOptions) => { 10 10 - if (!(elementOrLocator instanceof Element) && !('element' in elementOrLocator)) { 11 11 - throw new Error(`Invalid element or locator: ${elementOrLocator}. Expected an instance of Element or Locator, received ${typeof elementOrLocator}`) 7 7 + function element<T extends Element | null | Locator>(elementOrLocator: T, options?: ExpectPollOptions): unknown { 8 8 + if (elementOrLocator != null && !(elementOrLocator instanceof Element) && !('element' in elementOrLocator)) { 9 9 + throw new Error(`Invalid element or locator: ${elementOrLocator}. Expected an instance of Element or Locator, received ${typeof elementOrLocator}`) 10 10 + } 11 11 + 12 12 + return expect.poll<Element | null>(function element(this: object) { 13 13 + if (elementOrLocator instanceof Element || elementOrLocator == null) { 14 14 + return elementOrLocator 15 15 + } 16 16 + chai.util.flag(this, '_poll.element', true) 17 17 + 18 18 + const isNot = chai.util.flag(this, 'negate') as boolean 19 19 + const name = chai.util.flag(this, '_name') as string 20 20 + // element selector uses prettyDOM under the hood, which is an expensive call 21 21 + // that should not be called on each failed locator attempt to avoid memory leak: 22 22 + // https://github.com/vitest-dev/vitest/issues/7139 23 23 + const isLastPollAttempt = chai.util.flag(this, '_isLastPollAttempt') 24 24 + // special case for `toBeInTheDocument` matcher 25 25 + if (isNot && name === 'toBeInTheDocument') { 26 26 + return elementOrLocator.query() 12 27 } 13 28 14 14 - return expect.poll<Element | null>(function element(this: object) { 15 15 - if (elementOrLocator instanceof Element || elementOrLocator == null) { 16 16 - return elementOrLocator 17 17 - } 18 18 - chai.util.flag(this, '_poll.element', true) 29 29 + if (isLastPollAttempt) { 30 30 + return elementOrLocator.element() 31 31 + } 19 32 20 20 - const isNot = chai.util.flag(this, 'negate') as boolean 21 21 - const name = chai.util.flag(this, '_name') as string 22 22 - // element selector uses prettyDOM under the hood, which is an expensive call 23 23 - // that should not be called on each failed locator attempt to avoid memory leak: 24 24 - // https://github.com/vitest-dev/vitest/issues/7139 25 25 - const isLastPollAttempt = chai.util.flag(this, '_isLastPollAttempt') 26 26 - // special case for `toBeInTheDocument` matcher 27 27 - if (isNot && name === 'toBeInTheDocument') { 28 28 - return elementOrLocator.query() 29 29 - } 33 33 + const result = elementOrLocator.query() 30 34 31 31 - if (isLastPollAttempt) { 32 32 - return elementOrLocator.element() 33 33 - } 35 35 + if (!result) { 36 36 + throw new Error(`Cannot find element with locator: ${JSON.stringify(elementOrLocator)}`) 37 37 + } 34 38 35 35 - const result = elementOrLocator.query() 36 36 - 37 37 - if (!result) { 38 38 - throw new Error(`Cannot find element with locator: ${JSON.stringify(elementOrLocator)}`) 39 39 - } 40 40 - 41 41 - return result 42 42 - }, processTimeoutOptions(options)) 43 43 - } 39 39 + return result 40 40 + }, processTimeoutOptions(options)) 44 41 } 42 42 + 43 43 + expect.extend(matchers) 44 44 + // Vitest typecheck doesn't pick up this assignment for some reason 45 45 + Object.assign(expect, { element })

-1

packages/browser/src/client/tester/jest-dom.ts

Reviewed

··· 1 1 - export type { default } from '@testing-library/jest-dom/matchers'

+1 -1

packages/browser/src/client/tester/runner.ts

Reviewed

··· 171 171 const runner = new BrowserRunner({ 172 172 config, 173 173 }) 174 174 + cachedRunner = runner 174 175 175 176 const [diffOptions] = await Promise.all([ 176 177 loadDiffConfig(config, executor as unknown as VitestExecutor), 177 178 loadSnapshotSerializers(config, executor as unknown as VitestExecutor), 178 179 ]) 179 180 runner.config.diffOptions = diffOptions 180 180 - cachedRunner = runner 181 181 getWorkerState().onFilterStackTrace = (stack: string) => { 182 182 const stacks = parseStacktrace(stack, { 183 183 getSourceMap(file) {

+8 -3

packages/browser/src/client/tester/tester.ts

Reviewed

··· 1 1 import { channel, client, onCancel } from '@vitest/browser/client' 2 2 import { page, server, userEvent } from '@vitest/browser/context' 3 3 - import { collectTests, setupCommonEnv, SpyModule, startCoverageInsideWorker, startTests, stopCoverageInsideWorker } from 'vitest/browser' 3 3 + import { 4 4 + collectTests, 5 5 + setupCommonEnv, 6 6 + SpyModule, 7 7 + startCoverageInsideWorker, 8 8 + startTests, 9 9 + stopCoverageInsideWorker, 10 10 + } from 'vitest/browser' 4 11 import { executor, getBrowserState, getConfig, getWorkerState } from '../utils' 5 12 import { setupDialogsSpy } from './dialog' 6 6 - import { setupExpectDom } from './expect-element' 7 13 import { setupConsoleLogSpy } from './logger' 8 14 import { VitestBrowserClientMocker } from './mocker' 9 15 import { createModuleMockerInterceptor } from './msw' ··· 52 58 53 59 setupConsoleLogSpy() 54 60 setupDialogsSpy() 55 55 - setupExpectDom() 56 61 57 62 const runner = await initiateRunner(state, mocker, config) 58 63

+52

packages/browser/src/client/tester/expect/index.ts

Reviewed

··· 1 1 + import type { MatchersObject } from '@vitest/expect' 2 2 + import toBeChecked from './toBeChecked' 3 3 + import toBeEmptyDOMElement from './toBeEmptyDOMElement' 4 4 + import { toBeDisabled, toBeEnabled } from './toBeEnabled' 5 5 + import toBeInTheDocument from './toBeInTheDocument' 6 6 + import { toBeInvalid, toBeValid } from './toBeInvalid' 7 7 + import toBePartiallyChecked from './toBePartiallyChecked' 8 8 + import toBeRequired from './toBeRequired' 9 9 + import toBeVisible from './toBeVisible' 10 10 + import toContainElement from './toContainElement' 11 11 + import toContainHTML from './toContainHTML' 12 12 + import toHaveAccessibleDescription from './toHaveAccessibleDescription' 13 13 + import toHaveAccessibleErrorMessage from './toHaveAccessibleErrorMessage' 14 14 + import toHaveAccessibleName from './toHaveAccessibleName' 15 15 + import toHaveAttribute from './toHaveAttribute' 16 16 + import toHaveClass from './toHaveClass' 17 17 + import toHaveDisplayValue from './toHaveDisplayValue' 18 18 + import toHaveFocus from './toHaveFocus' 19 19 + import toHaveFormValues from './toHaveFormValues' 20 20 + import toHaveRole from './toHaveRole' 21 21 + import toHaveSelection from './toHaveSelection' 22 22 + import toHaveStyle from './toHaveStyle' 23 23 + import toHaveTextContent from './toHaveTextContent' 24 24 + import toHaveValue from './toHaveValue' 25 25 + 26 26 + export const matchers: MatchersObject = { 27 27 + toBeDisabled, 28 28 + toBeEnabled, 29 29 + toBeEmptyDOMElement, 30 30 + toBeInTheDocument, 31 31 + toBeInvalid, 32 32 + toBeRequired, 33 33 + toBeValid, 34 34 + toBeVisible, 35 35 + toContainElement, 36 36 + toContainHTML, 37 37 + toHaveAccessibleDescription, 38 38 + toHaveAccessibleErrorMessage, 39 39 + toHaveAccessibleName, 40 40 + toHaveAttribute, 41 41 + toHaveClass, 42 42 + toHaveFocus, 43 43 + toHaveFormValues, 44 44 + toHaveStyle, 45 45 + toHaveTextContent, 46 46 + toHaveValue, 47 47 + toHaveDisplayValue, 48 48 + toBeChecked, 49 49 + toBePartiallyChecked, 50 50 + toHaveRole, 51 51 + toHaveSelection, 52 52 + }

+77

packages/browser/src/client/tester/expect/toBeChecked.ts

Reviewed

··· 1 1 + /** 2 2 + * The MIT License (MIT) 3 3 + * Copyright (c) 2017 Kent C. Dodds 4 4 + * 5 5 + * Permission is hereby granted, free of charge, to any person obtaining a copy 6 6 + * of this software and associated documentation files (the "Software"), to deal 7 7 + * in the Software without restriction, including without limitation the rights 8 8 + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 9 + * copies of the Software, and to permit persons to whom the Software is 10 10 + * furnished to do so, subject to the following conditions: 11 11 + * 12 12 + * The above copyright notice and this permission notice shall be included in all 13 13 + * copies or substantial portions of the Software. 14 14 + */ 15 15 + 16 16 + import type { ExpectationResult, MatcherState } from '@vitest/expect' 17 17 + import type { Locator } from '../locators' 18 18 + import { getAriaChecked, getAriaCheckedRoles, getAriaRole } from 'ivya/utils' 19 19 + import { getElementFromUserInput, isInputElement, toSentence } from './utils' 20 20 + 21 21 + const supportedRoles = getAriaCheckedRoles() 22 22 + 23 23 + export default function toBeChecked( 24 24 + this: MatcherState, 25 25 + actual: Element | Locator, 26 26 + ): ExpectationResult { 27 27 + const htmlElement = getElementFromUserInput(actual, toBeChecked, this) 28 28 + 29 29 + const isValidInput = () => { 30 30 + return ( 31 31 + isInputElement(htmlElement) 32 32 + && ['checkbox', 'radio'].includes(htmlElement.type) 33 33 + ) 34 34 + } 35 35 + 36 36 + const isValidAriaElement = () => { 37 37 + return ( 38 38 + supportedRoles.includes(getAriaRole(htmlElement) || '') 39 39 + && ['true', 'false'].includes(htmlElement.getAttribute('aria-checked') || '') 40 40 + ) 41 41 + } 42 42 + 43 43 + if (!isValidInput() && !isValidAriaElement()) { 44 44 + return { 45 45 + pass: false, 46 46 + message: () => 47 47 + `only inputs with type="checkbox" or type="radio" or elements with ${supportedRolesSentence()} and a valid aria-checked attribute can be used with .toBeChecked(). Use .toHaveValue() instead`, 48 48 + } 49 49 + } 50 50 + 51 51 + const checkedValue = getAriaChecked(htmlElement) 52 52 + const isChecked = checkedValue === true // don't tolerate "mixed", see toBePartiallyChecked 53 53 + 54 54 + return { 55 55 + pass: isChecked, 56 56 + message: () => { 57 57 + const is = isChecked ? 'is' : 'is not' 58 58 + return [ 59 59 + this.utils.matcherHint( 60 60 + `${this.isNot ? '.not' : ''}.toBeChecked`, 61 61 + 'element', 62 62 + '', 63 63 + ), 64 64 + '', 65 65 + `Received element ${is} checked:`, 66 66 + ` ${this.utils.printReceived(htmlElement.cloneNode(false))}`, 67 67 + ].join('\n') 68 68 + }, 69 69 + } 70 70 + } 71 71 + 72 72 + function supportedRolesSentence() { 73 73 + return toSentence( 74 74 + supportedRoles.map(role => `role="${role}"`), 75 75 + { lastWordConnector: ' or ' }, 76 76 + ) 77 77 + }

+49

packages/browser/src/client/tester/expect/toBeEmptyDOMElement.ts

Reviewed

··· 1 1 + /** 2 2 + * The MIT License (MIT) 3 3 + * Copyright (c) 2017 Kent C. Dodds 4 4 + * 5 5 + * Permission is hereby granted, free of charge, to any person obtaining a copy 6 6 + * of this software and associated documentation files (the "Software"), to deal 7 7 + * in the Software without restriction, including without limitation the rights 8 8 + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 9 + * copies of the Software, and to permit persons to whom the Software is 10 10 + * furnished to do so, subject to the following conditions: 11 11 + * 12 12 + * The above copyright notice and this permission notice shall be included in all 13 13 + * copies or substantial portions of the Software. 14 14 + */ 15 15 + 16 16 + import type { ExpectationResult, MatcherState } from '@vitest/expect' 17 17 + import type { Locator } from '../locators' 18 18 + import { getElementFromUserInput } from './utils' 19 19 + 20 20 + export default function toBeEmptyDOMElement( 21 21 + this: MatcherState, 22 22 + actual: Element | Locator, 23 23 + ): ExpectationResult { 24 24 + const htmlElement = getElementFromUserInput(actual, toBeEmptyDOMElement, this) 25 25 + 26 26 + return { 27 27 + pass: isEmptyElement(htmlElement), 28 28 + message: () => { 29 29 + return [ 30 30 + this.utils.matcherHint( 31 31 + `${this.isNot ? '.not' : ''}.toBeEmptyDOMElement`, 32 32 + 'element', 33 33 + '', 34 34 + ), 35 35 + '', 36 36 + 'Received:', 37 37 + ` ${this.utils.printReceived(htmlElement.innerHTML)}`, 38 38 + ].join('\n') 39 39 + }, 40 40 + } 41 41 + } 42 42 + 43 43 + /** 44 44 + * Identifies if an element doesn't contain child nodes (excluding comments) 45 45 + */ 46 46 + function isEmptyElement(element: HTMLElement | SVGElement): boolean { 47 47 + const nonCommentChildNodes = [...element.childNodes].filter(node => node.nodeType !== Node.COMMENT_NODE) 48 48 + return nonCommentChildNodes.length === 0 49 49 + }

+75

packages/browser/src/client/tester/expect/toBeEnabled.ts

Reviewed

··· 1 1 + /** 2 2 + * The MIT License (MIT) 3 3 + * Copyright (c) 2017 Kent C. Dodds 4 4 + * 5 5 + * Permission is hereby granted, free of charge, to any person obtaining a copy 6 6 + * of this software and associated documentation files (the "Software"), to deal 7 7 + * in the Software without restriction, including without limitation the rights 8 8 + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 9 + * copies of the Software, and to permit persons to whom the Software is 10 10 + * furnished to do so, subject to the following conditions: 11 11 + * 12 12 + * The above copyright notice and this permission notice shall be included in all 13 13 + * copies or substantial portions of the Software. 14 14 + */ 15 15 + 16 16 + import type { ExpectationResult, MatcherState } from '@vitest/expect' 17 17 + import type { Locator } from '../locators' 18 18 + import { getAriaDisabled } from 'ivya/utils' 19 19 + import { getElementFromUserInput, getTag } from './utils' 20 20 + 21 21 + export function toBeDisabled( 22 22 + this: MatcherState, 23 23 + actual: Element | Locator, 24 24 + ): ExpectationResult { 25 25 + const htmlElement = getElementFromUserInput(actual, toBeDisabled, this) 26 26 + const isDisabled = isElementDisabled(htmlElement) 27 27 + return { 28 28 + pass: isDisabled, 29 29 + message: () => { 30 30 + const is = isDisabled ? 'is' : 'is not' 31 31 + return [ 32 32 + this.utils.matcherHint( 33 33 + `${this.isNot ? '.not' : ''}.toBeDisabled`, 34 34 + 'element', 35 35 + '', 36 36 + ), 37 37 + '', 38 38 + `Received element ${is} disabled:`, 39 39 + ` ${this.utils.printReceived(htmlElement.cloneNode(false))}`, 40 40 + ].join('\n') 41 41 + }, 42 42 + } 43 43 + } 44 44 + 45 45 + export function toBeEnabled( 46 46 + this: MatcherState, 47 47 + actual: Element | Locator, 48 48 + ): ExpectationResult { 49 49 + const htmlElement = getElementFromUserInput(actual, toBeEnabled, this) 50 50 + const isDisabled = isElementDisabled(htmlElement) 51 51 + return { 52 52 + pass: !isDisabled, 53 53 + message: () => { 54 54 + const is = !isDisabled ? 'is' : 'is not' 55 55 + return [ 56 56 + this.utils.matcherHint( 57 57 + `${this.isNot ? '.not' : ''}.toBeEnabled`, 58 58 + 'element', 59 59 + '', 60 60 + ), 61 61 + '', 62 62 + `Received element ${is} enabled:`, 63 63 + ` ${this.utils.printReceived(htmlElement.cloneNode(false))}`, 64 64 + ].join('\n') 65 65 + }, 66 66 + } 67 67 + } 68 68 + 69 69 + function isElementDisabled(element: HTMLElement | SVGElement) { 70 70 + // ivya doesn't support custom elements check 71 71 + if (getTag(element).includes('-')) { 72 72 + return element.hasAttribute('disabled') 73 73 + } 74 74 + return getAriaDisabled(element) 75 75 + }

+59

packages/browser/src/client/tester/expect/toBeInTheDocument.ts

Reviewed

··· 1 1 + /** 2 2 + * The MIT License (MIT) 3 3 + * Copyright (c) 2017 Kent C. Dodds 4 4 + * 5 5 + * Permission is hereby granted, free of charge, to any person obtaining a copy 6 6 + * of this software and associated documentation files (the "Software"), to deal 7 7 + * in the Software without restriction, including without limitation the rights 8 8 + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 9 + * copies of the Software, and to permit persons to whom the Software is 10 10 + * furnished to do so, subject to the following conditions: 11 11 + * 12 12 + * The above copyright notice and this permission notice shall be included in all 13 13 + * copies or substantial portions of the Software. 14 14 + */ 15 15 + 16 16 + import type { ExpectationResult, MatcherState } from '@vitest/expect' 17 17 + import type { Locator } from '../locators' 18 18 + import { getElementFromUserInput } from './utils' 19 19 + 20 20 + export default function toBeInTheDocument( 21 21 + this: MatcherState, 22 22 + actual: Element | Locator | null, 23 23 + ): ExpectationResult { 24 24 + let htmlElement: null | HTMLElement | SVGElement = null 25 25 + 26 26 + if (actual !== null || !this.isNot) { 27 27 + htmlElement = getElementFromUserInput(actual, toBeInTheDocument, this) 28 28 + } 29 29 + 30 30 + const pass 31 31 + = htmlElement === null 32 32 + ? false 33 33 + : htmlElement.ownerDocument === htmlElement.getRootNode({ composed: true }) 34 34 + 35 35 + const errorFound = () => { 36 36 + return `expected document not to contain element, found ${this.utils.stringify( 37 37 + htmlElement?.cloneNode(true), 38 38 + )} instead` 39 39 + } 40 40 + const errorNotFound = () => { 41 41 + return `element could not be found in the document` 42 42 + } 43 43 + 44 44 + return { 45 45 + pass, 46 46 + message: () => { 47 47 + return [ 48 48 + this.utils.matcherHint( 49 49 + `${this.isNot ? '.not' : ''}.toBeInTheDocument`, 50 50 + 'element', 51 51 + '', 52 52 + ), 53 53 + '', 54 54 + 55 55 + this.utils.RECEIVED_COLOR(this.isNot ? errorFound() : errorNotFound()), 56 56 + ].join('\n') 57 57 + }, 58 58 + } 59 59 + }

+93

packages/browser/src/client/tester/expect/toBeInvalid.ts

Reviewed

··· 1 1 + /** 2 2 + * The MIT License (MIT) 3 3 + * Copyright (c) 2017 Kent C. Dodds 4 4 + * 5 5 + * Permission is hereby granted, free of charge, to any person obtaining a copy 6 6 + * of this software and associated documentation files (the "Software"), to deal 7 7 + * in the Software without restriction, including without limitation the rights 8 8 + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 9 + * copies of the Software, and to permit persons to whom the Software is 10 10 + * furnished to do so, subject to the following conditions: 11 11 + * 12 12 + * The above copyright notice and this permission notice shall be included in all 13 13 + * copies or substantial portions of the Software. 14 14 + */ 15 15 + 16 16 + import type { ExpectationResult, MatcherState } from '@vitest/expect' 17 17 + import type { Locator } from '../locators' 18 18 + import { getElementFromUserInput, getTag } from './utils' 19 19 + 20 20 + const FORM_TAGS = ['FORM', 'INPUT', 'SELECT', 'TEXTAREA'] 21 21 + 22 22 + function isElementHavingAriaInvalid(element: HTMLElement | SVGElement) { 23 23 + return ( 24 24 + element.hasAttribute('aria-invalid') 25 25 + && element.getAttribute('aria-invalid') !== 'false' 26 26 + ) 27 27 + } 28 28 + 29 29 + function isSupportsValidityMethod(element: HTMLElement | SVGElement): element is HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | HTMLFormElement { 30 30 + return FORM_TAGS.includes(getTag(element)) 31 31 + } 32 32 + 33 33 + function isElementInvalid(element: HTMLElement | SVGElement) { 34 34 + const isHaveAriaInvalid = isElementHavingAriaInvalid(element) 35 35 + if (isSupportsValidityMethod(element)) { 36 36 + return isHaveAriaInvalid || !element.checkValidity() 37 37 + } 38 38 + else { 39 39 + return isHaveAriaInvalid 40 40 + } 41 41 + } 42 42 + 43 43 + export function toBeInvalid( 44 44 + this: MatcherState, 45 45 + element: HTMLElement | SVGElement | Locator, 46 46 + ): ExpectationResult { 47 47 + const htmlElement = getElementFromUserInput(element, toBeInvalid, this) 48 48 + 49 49 + const isInvalid = isElementInvalid(htmlElement) 50 50 + 51 51 + return { 52 52 + pass: isInvalid, 53 53 + message: () => { 54 54 + const is = isInvalid ? 'is' : 'is not' 55 55 + return [ 56 56 + this.utils.matcherHint( 57 57 + `${this.isNot ? '.not' : ''}.toBeInvalid`, 58 58 + 'element', 59 59 + '', 60 60 + ), 61 61 + '', 62 62 + `Received element ${is} currently invalid:`, 63 63 + ` ${this.utils.printReceived(htmlElement.cloneNode(false))}`, 64 64 + ].join('\n') 65 65 + }, 66 66 + } 67 67 + } 68 68 + 69 69 + export function toBeValid( 70 70 + this: MatcherState, 71 71 + element: HTMLElement | SVGElement | Locator, 72 72 + ): ExpectationResult { 73 73 + const htmlElement = getElementFromUserInput(element, toBeInvalid, this) 74 74 + 75 75 + const isValid = !isElementInvalid(htmlElement) 76 76 + 77 77 + return { 78 78 + pass: isValid, 79 79 + message: () => { 80 80 + const is = isValid ? 'is' : 'is not' 81 81 + return [ 82 82 + this.utils.matcherHint( 83 83 + `${this.isNot ? '.not' : ''}.toBeValid`, 84 84 + 'element', 85 85 + '', 86 86 + ), 87 87 + '', 88 88 + `Received element ${is} currently valid:`, 89 89 + ` ${this.utils.printReceived(htmlElement.cloneNode(false))}`, 90 90 + ].join('\n') 91 91 + }, 92 92 + } 93 93 + }

+80

packages/browser/src/client/tester/expect/toBePartiallyChecked.ts

Reviewed

··· 1 1 + /** 2 2 + * The MIT License (MIT) 3 3 + * Copyright (c) 2017 Kent C. Dodds 4 4 + * 5 5 + * Permission is hereby granted, free of charge, to any person obtaining a copy 6 6 + * of this software and associated documentation files (the "Software"), to deal 7 7 + * in the Software without restriction, including without limitation the rights 8 8 + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 9 + * copies of the Software, and to permit persons to whom the Software is 10 10 + * furnished to do so, subject to the following conditions: 11 11 + * 12 12 + * The above copyright notice and this permission notice shall be included in all 13 13 + * copies or substantial portions of the Software. 14 14 + */ 15 15 + 16 16 + import type { ExpectationResult, MatcherState } from '@vitest/expect' 17 17 + import type { Locator } from '../locators' 18 18 + import { getAriaChecked as ivyaGetAriaChecked } from 'ivya/utils' 19 19 + import { getElementFromUserInput, isInputElement } from './utils' 20 20 + 21 21 + export default function toBePartiallyChecked( 22 22 + this: MatcherState, 23 23 + actual: Element | Locator, 24 24 + ): ExpectationResult { 25 25 + const htmlElement = getElementFromUserInput(actual, toBePartiallyChecked, this) 26 26 + 27 27 + const isValidInput = () => { 28 28 + return ( 29 29 + isInputElement(htmlElement) && htmlElement.type === 'checkbox' 30 30 + ) 31 31 + } 32 32 + 33 33 + const isValidAriaElement = () => { 34 34 + return htmlElement.getAttribute('role') === 'checkbox' 35 35 + } 36 36 + 37 37 + if (!isValidInput() && !isValidAriaElement()) { 38 38 + return { 39 39 + pass: false, 40 40 + message: () => 41 41 + 'only inputs with type="checkbox" or elements with role="checkbox" and a valid aria-checked attribute can be used with .toBePartiallyChecked(). Use .toHaveValue() instead', 42 42 + } 43 43 + } 44 44 + 45 45 + const isPartiallyChecked = isAriaMixed(htmlElement) 46 46 + 47 47 + return { 48 48 + pass: isPartiallyChecked, 49 49 + message: () => { 50 50 + const is = isPartiallyChecked ? 'is' : 'is not' 51 51 + return [ 52 52 + this.utils.matcherHint( 53 53 + `${this.isNot ? '.not' : ''}.toBePartiallyChecked`, 54 54 + 'element', 55 55 + '', 56 56 + ), 57 57 + '', 58 58 + `Received element ${is} partially checked:`, 59 59 + ` ${this.utils.printReceived(htmlElement.cloneNode(false))}`, 60 60 + ].join('\n') 61 61 + }, 62 62 + } 63 63 + } 64 64 + 65 65 + function isAriaMixed(element: HTMLElement | SVGElement): boolean { 66 66 + const isMixed = ivyaGetAriaChecked(element) === 'mixed' 67 67 + if (!isMixed) { 68 68 + // playwright only looks at aria-checked if element is not a checkbox/radio 69 69 + if ( 70 70 + isInputElement(element) 71 71 + && ['checkbox', 'radio'].includes((element as HTMLInputElement).type) 72 72 + ) { 73 73 + const ariaValue = element.getAttribute('aria-checked') 74 74 + if (ariaValue === 'mixed') { 75 75 + return true 76 76 + } 77 77 + } 78 78 + } 79 79 + return isMixed 80 80 + }

+96

packages/browser/src/client/tester/expect/toBeRequired.ts

Reviewed

··· 1 1 + /** 2 2 + * The MIT License (MIT) 3 3 + * Copyright (c) 2017 Kent C. Dodds 4 4 + * 5 5 + * Permission is hereby granted, free of charge, to any person obtaining a copy 6 6 + * of this software and associated documentation files (the "Software"), to deal 7 7 + * in the Software without restriction, including without limitation the rights 8 8 + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 9 + * copies of the Software, and to permit persons to whom the Software is 10 10 + * furnished to do so, subject to the following conditions: 11 11 + * 12 12 + * The above copyright notice and this permission notice shall be included in all 13 13 + * copies or substantial portions of the Software. 14 14 + */ 15 15 + 16 16 + import type { ExpectationResult, MatcherState } from '@vitest/expect' 17 17 + import type { Locator } from '../locators' 18 18 + import { getElementFromUserInput, getTag } from './utils' 19 19 + 20 20 + // form elements that support 'required' 21 21 + const FORM_TAGS = ['SELECT', 'TEXTAREA'] 22 22 + 23 23 + const ARIA_FORM_TAGS = ['INPUT', 'SELECT', 'TEXTAREA'] 24 24 + 25 25 + const UNSUPPORTED_INPUT_TYPES = [ 26 26 + 'color', 27 27 + 'hidden', 28 28 + 'range', 29 29 + 'submit', 30 30 + 'image', 31 31 + 'reset', 32 32 + ] 33 33 + 34 34 + const SUPPORTED_ARIA_ROLES = [ 35 35 + 'checkbox', 36 36 + 'combobox', 37 37 + 'gridcell', 38 38 + 'listbox', 39 39 + 'radiogroup', 40 40 + 'spinbutton', 41 41 + 'textbox', 42 42 + 'tree', 43 43 + ] 44 44 + 45 45 + function isRequiredOnFormTagsExceptInput(element: HTMLElement | SVGElement) { 46 46 + return FORM_TAGS.includes(getTag(element)) && element.hasAttribute('required') 47 47 + } 48 48 + 49 49 + function isRequiredOnSupportedInput(element: HTMLElement | SVGElement) { 50 50 + return ( 51 51 + getTag(element) === 'INPUT' 52 52 + && element.hasAttribute('required') 53 53 + && ((element.hasAttribute('type') 54 54 + && !UNSUPPORTED_INPUT_TYPES.includes(element.getAttribute('type') || '')) 55 55 + || !element.hasAttribute('type')) 56 56 + ) 57 57 + } 58 58 + 59 59 + function isElementRequiredByARIA(element: HTMLElement | SVGElement) { 60 60 + return ( 61 61 + element.hasAttribute('aria-required') 62 62 + && element.getAttribute('aria-required') === 'true' 63 63 + && (ARIA_FORM_TAGS.includes(getTag(element)) 64 64 + || (element.hasAttribute('role') 65 65 + && SUPPORTED_ARIA_ROLES.includes(element.getAttribute('role') || ''))) 66 66 + ) 67 67 + } 68 68 + 69 69 + export default function toBeRequired( 70 70 + this: MatcherState, 71 71 + element: HTMLElement | SVGElement | Locator, 72 72 + ): ExpectationResult { 73 73 + const htmlElement = getElementFromUserInput(element, toBeRequired, this) 74 74 + 75 75 + const isRequired 76 76 + = isRequiredOnFormTagsExceptInput(htmlElement) 77 77 + || isRequiredOnSupportedInput(htmlElement) 78 78 + || isElementRequiredByARIA(htmlElement) 79 79 + 80 80 + return { 81 81 + pass: isRequired, 82 82 + message: () => { 83 83 + const is = isRequired ? 'is' : 'is not' 84 84 + return [ 85 85 + this.utils.matcherHint( 86 86 + `${this.isNot ? '.not' : ''}.toBeRequired`, 87 87 + 'element', 88 88 + '', 89 89 + ), 90 90 + '', 91 91 + `Received element ${is} required:`, 92 92 + ` ${this.utils.printReceived(htmlElement.cloneNode(false))}`, 93 93 + ].join('\n') 94 94 + }, 95 95 + } 96 96 + }

+81

packages/browser/src/client/tester/expect/toBeVisible.ts

Reviewed

··· 1 1 + /** 2 2 + * The MIT License (MIT) 3 3 + * Copyright (c) 2017 Kent C. Dodds 4 4 + * 5 5 + * Permission is hereby granted, free of charge, to any person obtaining a copy 6 6 + * of this software and associated documentation files (the "Software"), to deal 7 7 + * in the Software without restriction, including without limitation the rights 8 8 + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 9 + * copies of the Software, and to permit persons to whom the Software is 10 10 + * furnished to do so, subject to the following conditions: 11 11 + * 12 12 + * The above copyright notice and this permission notice shall be included in all 13 13 + * copies or substantial portions of the Software. 14 14 + */ 15 15 + 16 16 + import type { ExpectationResult, MatcherState } from '@vitest/expect' 17 17 + import type { Locator } from '../locators' 18 18 + import { server } from '@vitest/browser/context' 19 19 + import { beginAriaCaches, endAriaCaches, isElementVisible as ivyaIsVisible } from 'ivya/utils' 20 20 + import { getElementFromUserInput } from './utils' 21 21 + 22 22 + export default function toBeVisible( 23 23 + this: MatcherState, 24 24 + actual: Element | Locator, 25 25 + ): ExpectationResult { 26 26 + const htmlElement = getElementFromUserInput(actual, toBeVisible, this) 27 27 + const isInDocument 28 28 + = htmlElement.ownerDocument === htmlElement.getRootNode({ composed: true }) 29 29 + beginAriaCaches() 30 30 + const isVisible = isInDocument && isElementVisible(htmlElement) 31 31 + endAriaCaches() 32 32 + return { 33 33 + pass: isVisible, 34 34 + message: () => { 35 35 + const is = isVisible ? 'is' : 'is not' 36 36 + return [ 37 37 + this.utils.matcherHint( 38 38 + `${this.isNot ? '.not' : ''}.toBeVisible`, 39 39 + 'element', 40 40 + '', 41 41 + ), 42 42 + '', 43 43 + `Received element ${is} visible${ 44 44 + isInDocument ? '' : ' (element is not in the document)' 45 45 + }:`, 46 46 + ` ${this.utils.printReceived(htmlElement.cloneNode(false))}`, 47 47 + ].join('\n') 48 48 + }, 49 49 + } 50 50 + } 51 51 + 52 52 + function isElementVisible(element: HTMLElement | SVGElement): boolean { 53 53 + const isIvyaVisible = ivyaIsVisible(element) 54 54 + // if it's visible or not, but we are not in webkit, respect the result 55 55 + if (server.browser !== 'webkit') { 56 56 + return isIvyaVisible 57 57 + } 58 58 + // if we are in webkit and it's not visible, fallback to jest-dom check 59 59 + // because ivya doesn't use .checkVisibility here 60 60 + const detailsElement = element.closest('details') 61 61 + if (!detailsElement || element === detailsElement) { 62 62 + return isIvyaVisible 63 63 + } 64 64 + return isElementVisibleInDetails(element as HTMLElement) 65 65 + } 66 66 + 67 67 + function isElementVisibleInDetails(targetElement: HTMLElement) { 68 68 + let currentElement: HTMLElement | null = targetElement 69 69 + 70 70 + while (currentElement) { 71 71 + if (currentElement.tagName === 'DETAILS') { 72 72 + const isSummary = currentElement.querySelector('summary') === targetElement 73 73 + if (!(currentElement as HTMLDetailsElement).open && !isSummary) { 74 74 + return false 75 75 + } 76 76 + } 77 77 + currentElement = currentElement.parentElement 78 78 + } 79 79 + 80 80 + return targetElement.offsetParent !== null 81 81 + }

+50

packages/browser/src/client/tester/expect/toContainElement.ts

Reviewed

··· 1 1 + /** 2 2 + * The MIT License (MIT) 3 3 + * Copyright (c) 2017 Kent C. Dodds 4 4 + * 5 5 + * Permission is hereby granted, free of charge, to any person obtaining a copy 6 6 + * of this software and associated documentation files (the "Software"), to deal 7 7 + * in the Software without restriction, including without limitation the rights 8 8 + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 9 + * copies of the Software, and to permit persons to whom the Software is 10 10 + * furnished to do so, subject to the following conditions: 11 11 + * 12 12 + * The above copyright notice and this permission notice shall be included in all 13 13 + * copies or substantial portions of the Software. 14 14 + */ 15 15 + 16 16 + import type { ExpectationResult, MatcherState } from '@vitest/expect' 17 17 + import type { Locator } from '../locators' 18 18 + import { getElementFromUserInput } from './utils' 19 19 + 20 20 + export default function toContainElement( 21 21 + this: MatcherState, 22 22 + actual: Element | Locator, 23 23 + expectedElement: Element | Locator | null, 24 24 + ): ExpectationResult { 25 25 + const containerElement = getElementFromUserInput(actual, toContainElement, this) 26 26 + const childElement = expectedElement !== null 27 27 + ? getElementFromUserInput(expectedElement, toContainElement, this) 28 28 + : null 29 29 + 30 30 + return { 31 31 + pass: containerElement.contains(childElement), 32 32 + message: () => { 33 33 + return [ 34 34 + this.utils.matcherHint( 35 35 + `${this.isNot ? '.not' : ''}.toContainElement`, 36 36 + 'element', 37 37 + 'element', 38 38 + ), 39 39 + '', 40 40 + 41 41 + this.utils.RECEIVED_COLOR(`${this.utils.stringify( 42 42 + containerElement.cloneNode(false), 43 43 + )} ${ 44 44 + this.isNot ? 'contains:' : 'does not contain:' 45 45 + } ${this.utils.stringify(childElement ? childElement.cloneNode(false) : null)} 46 46 + `), 47 47 + ].join('\n') 48 48 + }, 49 49 + } 50 50 + }

+53

packages/browser/src/client/tester/expect/toContainHTML.ts

Reviewed

··· 1 1 + /** 2 2 + * The MIT License (MIT) 3 3 + * Copyright (c) 2017 Kent C. Dodds 4 4 + * 5 5 + * Permission is hereby granted, free of charge, to any person obtaining a copy 6 6 + * of this software and associated documentation files (the "Software"), to deal 7 7 + * in the Software without restriction, including without limitation the rights 8 8 + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 9 + * copies of the Software, and to permit persons to whom the Software is 10 10 + * furnished to do so, subject to the following conditions: 11 11 + * 12 12 + * The above copyright notice and this permission notice shall be included in all 13 13 + * copies or substantial portions of the Software. 14 14 + */ 15 15 + 16 16 + import type { ExpectationResult, MatcherState } from '@vitest/expect' 17 17 + import type { Locator } from '../locators' 18 18 + import { getElementFromUserInput } from './utils' 19 19 + 20 20 + function getNormalizedHtml(container: HTMLElement | SVGElement, htmlText: string) { 21 21 + const div = container.ownerDocument.createElement('div') 22 22 + div.innerHTML = htmlText 23 23 + return div.innerHTML 24 24 + } 25 25 + 26 26 + export default function toContainHTML( 27 27 + this: MatcherState, 28 28 + actual: Element | Locator, 29 29 + htmlText: string, 30 30 + ): ExpectationResult { 31 31 + const htmlElement = getElementFromUserInput(actual, toContainHTML, this) 32 32 + 33 33 + if (typeof htmlText !== 'string') { 34 34 + throw new TypeError(`.toContainHTML() expects a string value, got ${htmlText}`) 35 35 + } 36 36 + 37 37 + return { 38 38 + pass: htmlElement.outerHTML.includes(getNormalizedHtml(htmlElement, htmlText)), 39 39 + message: () => { 40 40 + return [ 41 41 + this.utils.matcherHint( 42 42 + `${this.isNot ? '.not' : ''}.toContainHTML`, 43 43 + 'element', 44 44 + '', 45 45 + ), 46 46 + 'Expected:', 47 47 + ` ${this.utils.EXPECTED_COLOR(htmlText)}`, 48 48 + 'Received:', 49 49 + ` ${this.utils.printReceived(htmlElement.cloneNode(true))}`, 50 50 + ].join('\n') 51 51 + }, 52 52 + } 53 53 + }

+67

packages/browser/src/client/tester/expect/toHaveAccessibleDescription.ts

Reviewed

··· 1 1 + /** 2 2 + * The MIT License (MIT) 3 3 + * Copyright (c) 2017 Kent C. Dodds 4 4 + * 5 5 + * Permission is hereby granted, free of charge, to any person obtaining a copy 6 6 + * of this software and associated documentation files (the "Software"), to deal 7 7 + * in the Software without restriction, including without limitation the rights 8 8 + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 9 + * copies of the Software, and to permit persons to whom the Software is 10 10 + * furnished to do so, subject to the following conditions: 11 11 + * 12 12 + * The above copyright notice and this permission notice shall be included in all 13 13 + * copies or substantial portions of the Software. 14 14 + */ 15 15 + 16 16 + import type { ExpectationResult, MatcherState } from '@vitest/expect' 17 17 + import type { Locator } from '../locators' 18 18 + import { getElementAccessibleDescription } from 'ivya/utils' 19 19 + import { getElementFromUserInput, getMessage } from './utils' 20 20 + 21 21 + export default function toHaveAccessibleDescription( 22 22 + this: MatcherState, 23 23 + actual: Element | Locator, 24 24 + expectedAccessibleDescription?: string | RegExp, 25 25 + ): ExpectationResult { 26 26 + const htmlElement = getElementFromUserInput(actual, toHaveAccessibleDescription, this) 27 27 + const actualAccessibleDescription = getElementAccessibleDescription(htmlElement, false) 28 28 + 29 29 + const missingExpectedValue = arguments.length === 1 30 30 + 31 31 + let pass = false 32 32 + if (missingExpectedValue) { 33 33 + // When called without an expected value we only want to validate that the element has an 34 34 + // accessible description, whatever it may be. 35 35 + pass = actualAccessibleDescription !== '' 36 36 + } 37 37 + else { 38 38 + pass 39 39 + = expectedAccessibleDescription instanceof RegExp 40 40 + ? expectedAccessibleDescription.test(actualAccessibleDescription) 41 41 + : this.equals( 42 42 + actualAccessibleDescription, 43 43 + expectedAccessibleDescription, 44 44 + this.customTesters, 45 45 + ) 46 46 + } 47 47 + 48 48 + return { 49 49 + pass, 50 50 + 51 51 + message: () => { 52 52 + const to = this.isNot ? 'not to' : 'to' 53 53 + return getMessage( 54 54 + this, 55 55 + this.utils.matcherHint( 56 56 + `${this.isNot ? '.not' : ''}.toHaveAccessibleDescription`, 57 57 + 'element', 58 58 + '', 59 59 + ), 60 60 + `Expected element ${to} have accessible description`, 61 61 + expectedAccessibleDescription, 62 62 + 'Received', 63 63 + actualAccessibleDescription, 64 64 + ) 65 65 + }, 66 66 + } 67 67 + }

+78

packages/browser/src/client/tester/expect/toHaveAccessibleErrorMessage.ts

Reviewed

··· 1 1 + /** 2 2 + * The MIT License (MIT) 3 3 + * Copyright (c) 2017 Kent C. Dodds 4 4 + * 5 5 + * Permission is hereby granted, free of charge, to any person obtaining a copy 6 6 + * of this software and associated documentation files (the "Software"), to deal 7 7 + * in the Software without restriction, including without limitation the rights 8 8 + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 9 + * copies of the Software, and to permit persons to whom the Software is 10 10 + * furnished to do so, subject to the following conditions: 11 11 + * 12 12 + * The above copyright notice and this permission notice shall be included in all 13 13 + * copies or substantial portions of the Software. 14 14 + */ 15 15 + 16 16 + import type { ExpectationResult, MatcherState } from '@vitest/expect' 17 17 + import type { Locator } from '../locators' 18 18 + import { getElementAccessibleErrorMessage } from 'ivya/utils' 19 19 + import { getElementFromUserInput, getMessage, redent } from './utils' 20 20 + 21 21 + export default function toHaveAccessibleErrorMessage( 22 22 + this: MatcherState, 23 23 + actual: Element | Locator, 24 24 + expectedAccessibleErrorMessage?: string | RegExp, 25 25 + ): ExpectationResult { 26 26 + const htmlElement = getElementFromUserInput(actual, toHaveAccessibleErrorMessage, this) 27 27 + const actualAccessibleErrorMessage = getElementAccessibleErrorMessage(htmlElement) ?? '' 28 28 + 29 29 + const missingExpectedValue = arguments.length === 1 30 30 + 31 31 + let pass = false 32 32 + if (missingExpectedValue) { 33 33 + // When called without an expected value we only want to validate that the element has an 34 34 + // accessible description, whatever it may be. 35 35 + pass = actualAccessibleErrorMessage !== '' 36 36 + } 37 37 + else { 38 38 + pass 39 39 + = expectedAccessibleErrorMessage instanceof RegExp 40 40 + ? expectedAccessibleErrorMessage.test(actualAccessibleErrorMessage) 41 41 + : this.equals( 42 42 + actualAccessibleErrorMessage, 43 43 + expectedAccessibleErrorMessage, 44 44 + this.customTesters, 45 45 + ) 46 46 + } 47 47 + 48 48 + return { 49 49 + pass, 50 50 + 51 51 + message: () => { 52 52 + const to = this.isNot ? 'not to' : 'to' 53 53 + if (expectedAccessibleErrorMessage == null) { 54 54 + return [ 55 55 + this.utils.matcherHint( 56 56 + `${this.isNot ? '.not' : ''}.toHaveAccessibleErrorMessage`, 57 57 + 'element', 58 58 + '', 59 59 + ), 60 60 + `Expected element ${to} have accessible error message, but got${!this.isNot ? ' nothing' : ''}`, 61 61 + this.isNot ? this.utils.RECEIVED_COLOR(redent(actualAccessibleErrorMessage, 2)) : '', 62 62 + ].filter(Boolean).join('\n\n') 63 63 + } 64 64 + return getMessage( 65 65 + this, 66 66 + this.utils.matcherHint( 67 67 + `${this.isNot ? '.not' : ''}.toHaveAccessibleErrorMessage`, 68 68 + 'element', 69 69 + '', 70 70 + ), 71 71 + `Expected element ${to} have accessible error message`, 72 72 + expectedAccessibleErrorMessage, 73 73 + 'Received', 74 74 + actualAccessibleErrorMessage, 75 75 + ) 76 76 + }, 77 77 + } 78 78 + }

+62

packages/browser/src/client/tester/expect/toHaveAccessibleName.ts

Reviewed

··· 1 1 + /** 2 2 + * The MIT License (MIT) 3 3 + * Copyright (c) 2017 Kent C. Dodds 4 4 + * 5 5 + * Permission is hereby granted, free of charge, to any person obtaining a copy 6 6 + * of this software and associated documentation files (the "Software"), to deal 7 7 + * in the Software without restriction, including without limitation the rights 8 8 + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 9 + * copies of the Software, and to permit persons to whom the Software is 10 10 + * furnished to do so, subject to the following conditions: 11 11 + * 12 12 + * The above copyright notice and this permission notice shall be included in all 13 13 + * copies or substantial portions of the Software. 14 14 + */ 15 15 + 16 16 + import type { ExpectationResult, MatcherState } from '@vitest/expect' 17 17 + import type { Locator } from '../locators' 18 18 + import { getElementAccessibleName } from 'ivya/utils' 19 19 + import { getElementFromUserInput, getMessage } from './utils' 20 20 + 21 21 + export default function toHaveAccessibleName( 22 22 + this: MatcherState, 23 23 + actual: Element | Locator, 24 24 + expectedAccessibleName?: string | RegExp, 25 25 + ): ExpectationResult { 26 26 + const htmlElement = getElementFromUserInput(actual, toHaveAccessibleName, this) 27 27 + const actualAccessibleName = getElementAccessibleName(htmlElement, false) 28 28 + const missingExpectedValue = arguments.length === 1 29 29 + 30 30 + let pass = false 31 31 + if (missingExpectedValue) { 32 32 + // When called without an expected value we only want to validate that the element has an 33 33 + // accessible name, whatever it may be. 34 34 + pass = actualAccessibleName !== '' 35 35 + } 36 36 + else { 37 37 + pass 38 38 + = expectedAccessibleName instanceof RegExp 39 39 + ? expectedAccessibleName.test(actualAccessibleName) 40 40 + : this.equals(actualAccessibleName, expectedAccessibleName, this.customTesters) 41 41 + } 42 42 + 43 43 + return { 44 44 + pass, 45 45 + 46 46 + message: () => { 47 47 + const to = this.isNot ? 'not to' : 'to' 48 48 + return getMessage( 49 49 + this, 50 50 + this.utils.matcherHint( 51 51 + `${this.isNot ? '.not' : ''}.${toHaveAccessibleName.name}`, 52 52 + 'element', 53 53 + '', 54 54 + ), 55 55 + `Expected element ${to} have accessible name`, 56 56 + expectedAccessibleName, 57 57 + 'Received', 58 58 + actualAccessibleName, 59 59 + ) 60 60 + }, 61 61 + } 62 62 + }

+74

packages/browser/src/client/tester/expect/toHaveAttribute.ts

Reviewed

··· 1 1 + /** 2 2 + * The MIT License (MIT) 3 3 + * Copyright (c) 2017 Kent C. Dodds 4 4 + * 5 5 + * Permission is hereby granted, free of charge, to any person obtaining a copy 6 6 + * of this software and associated documentation files (the "Software"), to deal 7 7 + * in the Software without restriction, including without limitation the rights 8 8 + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 9 + * copies of the Software, and to permit persons to whom the Software is 10 10 + * furnished to do so, subject to the following conditions: 11 11 + * 12 12 + * The above copyright notice and this permission notice shall be included in all 13 13 + * copies or substantial portions of the Software. 14 14 + */ 15 15 + 16 16 + import type { ExpectationResult, MatcherState } from '@vitest/expect' 17 17 + import type { Locator } from '../locators' 18 18 + import { getElementFromUserInput, getMessage } from './utils' 19 19 + 20 20 + export default function toHaveAttribute( 21 21 + this: MatcherState, 22 22 + actual: Element | Locator, 23 23 + attribute: string, 24 24 + expectedValue?: string, 25 25 + ): ExpectationResult { 26 26 + const htmlElement = getElementFromUserInput(actual, toHaveAttribute, this) 27 27 + const isExpectedValuePresent = expectedValue !== undefined 28 28 + const hasAttribute = htmlElement.hasAttribute(attribute) 29 29 + const receivedValue = htmlElement.getAttribute(attribute) 30 30 + return { 31 31 + pass: isExpectedValuePresent 32 32 + ? hasAttribute && this.equals(receivedValue, expectedValue, this.customTesters) 33 33 + : hasAttribute, 34 34 + message: () => { 35 35 + const to = this.isNot ? 'not to' : 'to' 36 36 + const receivedAttribute = hasAttribute 37 37 + ? printAttribute(this.utils.stringify, attribute, receivedValue) 38 38 + : null 39 39 + const matcher = this.utils.matcherHint( 40 40 + `${this.isNot ? '.not' : ''}.toHaveAttribute`, 41 41 + 'element', 42 42 + this.utils.printExpected(attribute), 43 43 + { 44 44 + secondArgument: isExpectedValuePresent 45 45 + ? this.utils.printExpected(expectedValue) 46 46 + : undefined, 47 47 + comment: getAttributeComment( 48 48 + this.utils.stringify, 49 49 + attribute, 50 50 + expectedValue, 51 51 + ), 52 52 + }, 53 53 + ) 54 54 + return getMessage( 55 55 + this, 56 56 + matcher, 57 57 + `Expected the element ${to} have attribute`, 58 58 + printAttribute(this.utils.stringify, attribute, expectedValue), 59 59 + 'Received', 60 60 + receivedAttribute, 61 61 + ) 62 62 + }, 63 63 + } 64 64 + } 65 65 + 66 66 + function printAttribute(stringify: (obj: unknown) => string, name: string, value: unknown) { 67 67 + return value === undefined ? name : `${name}=${stringify(value)}` 68 68 + } 69 69 + 70 70 + function getAttributeComment(stringify: (obj: unknown) => string, name: string, value: unknown) { 71 71 + return value === undefined 72 72 + ? `element.hasAttribute(${stringify(name)})` 73 73 + : `element.getAttribute(${stringify(name)}) === ${stringify(value)}` 74 74 + }

+137

packages/browser/src/client/tester/expect/toHaveClass.ts

Reviewed

··· 1 1 + /** 2 2 + * The MIT License (MIT) 3 3 + * Copyright (c) 2017 Kent C. Dodds 4 4 + * 5 5 + * Permission is hereby granted, free of charge, to any person obtaining a copy 6 6 + * of this software and associated documentation files (the "Software"), to deal 7 7 + * in the Software without restriction, including without limitation the rights 8 8 + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 9 + * copies of the Software, and to permit persons to whom the Software is 10 10 + * furnished to do so, subject to the following conditions: 11 11 + * 12 12 + * The above copyright notice and this permission notice shall be included in all 13 13 + * copies or substantial portions of the Software. 14 14 + */ 15 15 + 16 16 + import type { ExpectationResult, MatcherState } from '@vitest/expect' 17 17 + import type { Locator } from '../locators' 18 18 + import { getElementFromUserInput, getMessage } from './utils' 19 19 + 20 20 + export default function toHaveClass( 21 21 + this: MatcherState, 22 22 + actual: Element | Locator, 23 23 + ...params: (string | RegExp)[] | [string, options?: { exact: boolean }] 24 24 + ): ExpectationResult { 25 25 + const htmlElement = getElementFromUserInput(actual, toHaveClass, this) 26 26 + const { expectedClassNames, options } = getExpectedClassNamesAndOptions(params) 27 27 + 28 28 + const received = splitClassNames(htmlElement.getAttribute('class')) 29 29 + const expected = expectedClassNames.reduce( 30 30 + (acc, className) => { 31 31 + return acc.concat( 32 32 + typeof className === 'string' || !className 33 33 + ? splitClassNames(className) 34 34 + : className, 35 35 + ) 36 36 + }, 37 37 + [] as (string | RegExp)[], 38 38 + ) 39 39 + 40 40 + const hasRegExp = expected.some(className => className instanceof RegExp) 41 41 + if (options.exact && hasRegExp) { 42 42 + throw new Error('Exact option does not support RegExp expected class names') 43 43 + } 44 44 + 45 45 + if (options.exact) { 46 46 + return { 47 47 + pass: isSubset(expected, received) && expected.length === received.length, 48 48 + message: () => { 49 49 + const to = this.isNot ? 'not to' : 'to' 50 50 + return getMessage( 51 51 + this, 52 52 + this.utils.matcherHint( 53 53 + `${this.isNot ? '.not' : ''}.toHaveClass`, 54 54 + 'element', 55 55 + this.utils.printExpected(expected.join(' ')), 56 56 + ), 57 57 + `Expected the element ${to} have EXACTLY defined classes`, 58 58 + expected.join(' '), 59 59 + 'Received', 60 60 + received.join(' '), 61 61 + ) 62 62 + }, 63 63 + } 64 64 + } 65 65 + 66 66 + return expected.length > 0 67 67 + ? { 68 68 + pass: isSubset(expected, received), 69 69 + message: () => { 70 70 + const to = this.isNot ? 'not to' : 'to' 71 71 + return getMessage( 72 72 + this, 73 73 + this.utils.matcherHint( 74 74 + `${this.isNot ? '.not' : ''}.toHaveClass`, 75 75 + 'element', 76 76 + this.utils.printExpected(expected.join(' ')), 77 77 + ), 78 78 + `Expected the element ${to} have class`, 79 79 + expected.join(' '), 80 80 + 'Received', 81 81 + received.join(' '), 82 82 + ) 83 83 + }, 84 84 + } 85 85 + : { 86 86 + pass: this.isNot ? received.length > 0 : false, 87 87 + message: () => 88 88 + this.isNot 89 89 + ? getMessage( 90 90 + this, 91 91 + this.utils.matcherHint('.not.toHaveClass', 'element', ''), 92 92 + 'Expected the element to have classes', 93 93 + '(none)', 94 94 + 'Received', 95 95 + received.join(' '), 96 96 + ) 97 97 + : [ 98 98 + this.utils.matcherHint(`.toHaveClass`, 'element'), 99 99 + 'At least one expected class must be provided.', 100 100 + ].join('\n'), 101 101 + } 102 102 + } 103 103 + 104 104 + function getExpectedClassNamesAndOptions( 105 105 + params: (string | RegExp)[] | [string, options?: { exact: boolean }], 106 106 + ): { 107 107 + expectedClassNames: (string | RegExp)[] 108 108 + options: { exact: boolean } 109 109 + } { 110 110 + const lastParam = params.pop() 111 111 + let expectedClassNames, options 112 112 + 113 113 + if (typeof lastParam === 'object' && !(lastParam instanceof RegExp)) { 114 114 + expectedClassNames = params 115 115 + options = lastParam 116 116 + } 117 117 + else { 118 118 + expectedClassNames = params.concat(lastParam) 119 119 + options = { exact: false } 120 120 + } 121 121 + return { expectedClassNames: expectedClassNames as string[], options } 122 122 + } 123 123 + 124 124 + function splitClassNames(str: string | undefined | null): string[] { 125 125 + if (!str) { 126 126 + return [] 127 127 + } 128 128 + return str.split(/\s+/).filter(s => s.length > 0) 129 129 + } 130 130 + 131 131 + function isSubset(subset: (string | RegExp)[], superset: string[]) { 132 132 + return subset.every(strOrRegexp => 133 133 + typeof strOrRegexp === 'string' 134 134 + ? superset.includes(strOrRegexp) 135 135 + : superset.some(className => strOrRegexp.test(className)), 136 136 + ) 137 137 + }

+82

packages/browser/src/client/tester/expect/toHaveDisplayValue.ts

Reviewed

··· 1 1 + /** 2 2 + * The MIT License (MIT) 3 3 + * Copyright (c) 2017 Kent C. Dodds 4 4 + * 5 5 + * Permission is hereby granted, free of charge, to any person obtaining a copy 6 6 + * of this software and associated documentation files (the "Software"), to deal 7 7 + * in the Software without restriction, including without limitation the rights 8 8 + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 9 + * copies of the Software, and to permit persons to whom the Software is 10 10 + * furnished to do so, subject to the following conditions: 11 11 + * 12 12 + * The above copyright notice and this permission notice shall be included in all 13 13 + * copies or substantial portions of the Software. 14 14 + */ 15 15 + 16 16 + import type { ExpectationResult, MatcherState } from '@vitest/expect' 17 17 + import type { Locator } from '../locators' 18 18 + import { getElementFromUserInput, getMessage, getTag, isInputElement } from './utils' 19 19 + 20 20 + export default function toHaveDisplayValue( 21 21 + this: MatcherState, 22 22 + actual: Element | Locator, 23 23 + expectedValue: string | RegExp | Array<string | RegExp>, 24 24 + ): ExpectationResult { 25 25 + const htmlElement = getElementFromUserInput(actual, toHaveDisplayValue, this) 26 26 + const tagName = getTag(htmlElement) 27 27 + 28 28 + if (!['SELECT', 'INPUT', 'TEXTAREA'].includes(tagName)) { 29 29 + throw new Error( 30 30 + '.toHaveDisplayValue() currently supports only input, textarea or select elements, try with another matcher instead.', 31 31 + ) 32 32 + } 33 33 + 34 34 + if (isInputElement(htmlElement) && ['radio', 'checkbox'].includes(htmlElement.type)) { 35 35 + throw new Error( 36 36 + `.toHaveDisplayValue() currently does not support input[type="${htmlElement.type}"], try with another matcher instead.`, 37 37 + ) 38 38 + } 39 39 + 40 40 + const values = getValues(tagName, htmlElement) 41 41 + const expectedValues = getExpectedValues(expectedValue) 42 42 + const numberOfMatchesWithValues = expectedValues.filter(expected => 43 43 + values.some(value => 44 44 + expected instanceof RegExp 45 45 + ? expected.test(value) 46 46 + : this.equals(value, String(expected), this.customTesters), 47 47 + ), 48 48 + ).length 49 49 + 50 50 + const matchedWithAllValues = numberOfMatchesWithValues === values.length 51 51 + const matchedWithAllExpectedValues 52 52 + = numberOfMatchesWithValues === expectedValues.length 53 53 + 54 54 + return { 55 55 + pass: matchedWithAllValues && matchedWithAllExpectedValues, 56 56 + message: () => 57 57 + getMessage( 58 58 + this, 59 59 + this.utils.matcherHint( 60 60 + `${this.isNot ? '.not' : ''}.toHaveDisplayValue`, 61 61 + 'element', 62 62 + '', 63 63 + ), 64 64 + `Expected element ${this.isNot ? 'not ' : ''}to have display value`, 65 65 + expectedValue, 66 66 + 'Received', 67 67 + values, 68 68 + ), 69 69 + } 70 70 + } 71 71 + 72 72 + function getValues(tagName: string, htmlElement: HTMLElement | SVGElement) { 73 73 + return tagName === 'SELECT' 74 74 + ? Array.from(htmlElement as HTMLSelectElement) 75 75 + .filter(option => (option as HTMLOptionElement).selected) 76 76 + .map(option => option.textContent || '') 77 77 + : [(htmlElement as HTMLInputElement).value] 78 78 + } 79 79 + 80 80 + function getExpectedValues(expectedValue: string | RegExp | Array<string | RegExp>): Array<string | RegExp> { 81 81 + return Array.isArray(expectedValue) ? expectedValue : [expectedValue] 82 82 + }

+52

packages/browser/src/client/tester/expect/toHaveFocus.ts

Reviewed

··· 1 1 + /** 2 2 + * The MIT License (MIT) 3 3 + * Copyright (c) 2017 Kent C. Dodds 4 4 + * 5 5 + * Permission is hereby granted, free of charge, to any person obtaining a copy 6 6 + * of this software and associated documentation files (the "Software"), to deal 7 7 + * in the Software without restriction, including without limitation the rights 8 8 + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 9 + * copies of the Software, and to permit persons to whom the Software is 10 10 + * furnished to do so, subject to the following conditions: 11 11 + * 12 12 + * The above copyright notice and this permission notice shall be included in all 13 13 + * copies or substantial portions of the Software. 14 14 + */ 15 15 + 16 16 + import type { ExpectationResult, MatcherState } from '@vitest/expect' 17 17 + import type { Locator } from '../locators' 18 18 + import { getElementFromUserInput } from './utils' 19 19 + 20 20 + export default function toHaveFocus( 21 21 + this: MatcherState, 22 22 + actual: Element | Locator, 23 23 + ): ExpectationResult { 24 24 + const htmlElement = getElementFromUserInput(actual, toHaveFocus, this) 25 25 + 26 26 + return { 27 27 + pass: htmlElement.ownerDocument.activeElement === htmlElement, 28 28 + message: () => { 29 29 + return [ 30 30 + this.utils.matcherHint( 31 31 + `${this.isNot ? '.not' : ''}.toHaveFocus`, 32 32 + 'element', 33 33 + '', 34 34 + ), 35 35 + '', 36 36 + ...(this.isNot 37 37 + ? [ 38 38 + 'Received element is focused:', 39 39 + ` ${this.utils.printReceived(htmlElement)}`, 40 40 + ] 41 41 + : [ 42 42 + 'Expected element with focus:', 43 43 + ` ${this.utils.printExpected(htmlElement)}`, 44 44 + 'Received element with focus:', 45 45 + ` ${this.utils.printReceived( 46 46 + htmlElement.ownerDocument.activeElement, 47 47 + )}`, 48 48 + ]), 49 49 + ].join('\n') 50 50 + }, 51 51 + } 52 52 + }

+119

packages/browser/src/client/tester/expect/toHaveFormValues.ts

Reviewed

··· 1 1 + /** 2 2 + * The MIT License (MIT) 3 3 + * Copyright (c) 2017 Kent C. Dodds 4 4 + * 5 5 + * Permission is hereby granted, free of charge, to any person obtaining a copy 6 6 + * of this software and associated documentation files (the "Software"), to deal 7 7 + * in the Software without restriction, including without limitation the rights 8 8 + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 9 + * copies of the Software, and to permit persons to whom the Software is 10 10 + * furnished to do so, subject to the following conditions: 11 11 + * 12 12 + * The above copyright notice and this permission notice shall be included in all 13 13 + * copies or substantial portions of the Software. 14 14 + */ 15 15 + 16 16 + import type { ExpectationResult, MatcherState } from '@vitest/expect' 17 17 + import type { Locator } from '../locators' 18 18 + import { cssEscape } from 'ivya/utils' 19 19 + import { arrayAsSetComparison, getElementFromUserInput, getSingleElementValue, getTag } from './utils' 20 20 + 21 21 + export default function toHaveFormValues( 22 22 + this: MatcherState, 23 23 + actual: Element | Locator, 24 24 + expectedValues: Record<string, unknown>, 25 25 + ): ExpectationResult { 26 26 + const formElement = getElementFromUserInput(actual, toHaveFormValues, this) 27 27 + 28 28 + if (!(formElement instanceof HTMLFieldSetElement) && !(formElement instanceof HTMLFormElement)) { 29 29 + throw new TypeError(`toHaveFormValues must be called on a form or a fieldset, instead got ${getTag(formElement)}`) 30 30 + } 31 31 + 32 32 + if (!expectedValues || typeof expectedValues !== 'object') { 33 33 + throw new TypeError( 34 34 + `toHaveFormValues must be called with an object of expected form values. Got ${expectedValues}`, 35 35 + ) 36 36 + } 37 37 + 38 38 + const formValues = getAllFormValues(formElement) 39 39 + return { 40 40 + pass: Object.entries(expectedValues).every(([name, expectedValue]) => 41 41 + this.equals(formValues[name], expectedValue, [arrayAsSetComparison, ...this.customTesters]), 42 42 + ), 43 43 + message: () => { 44 44 + const to = this.isNot ? 'not to' : 'to' 45 45 + const matcher = `${this.isNot ? '.not' : ''}.toHaveFormValues` 46 46 + 47 47 + const commonKeyValues: Record<string, unknown> = {} 48 48 + for (const key in formValues) { 49 49 + if (!Object.hasOwn(expectedValues, key)) { 50 50 + continue 51 51 + } 52 52 + commonKeyValues[key] = formValues[key] 53 53 + } 54 54 + 55 55 + return [ 56 56 + this.utils.matcherHint(matcher, 'element', ''), 57 57 + `Expected the element ${to} have form values`, 58 58 + this.utils.diff(expectedValues, commonKeyValues), 59 59 + ].join('\n\n') 60 60 + }, 61 61 + } 62 62 + } 63 63 + 64 64 + // Returns the combined value of several elements that have the same name 65 65 + // e.g. radio buttons or groups of checkboxes 66 66 + function getMultiElementValue(elements: HTMLInputElement[]) { 67 67 + const types = [...new Set(elements.map(element => element.type))] 68 68 + if (types.length !== 1) { 69 69 + throw new Error( 70 70 + 'Multiple form elements with the same name must be of the same type', 71 71 + ) 72 72 + } 73 73 + switch (types[0]) { 74 74 + case 'radio': { 75 75 + const selected = elements.find(radio => radio.checked) 76 76 + return selected ? selected.value : undefined 77 77 + } 78 78 + case 'checkbox': 79 79 + return elements 80 80 + .filter(checkbox => checkbox.checked) 81 81 + .map(checkbox => checkbox.value) 82 82 + default: 83 83 + // NOTE: Not even sure this is a valid use case, but just in case... 84 84 + return elements.map(element => element.value) 85 85 + } 86 86 + } 87 87 + 88 88 + function getFormValue(container: HTMLFormElement | HTMLFieldSetElement, name: string) { 89 89 + const elements = [...container.querySelectorAll(`[name="${cssEscape(name)}"]`)] 90 90 + /* istanbul ignore if */ 91 91 + if (elements.length === 0) { 92 92 + return undefined // shouldn't happen, but just in case 93 93 + } 94 94 + switch (elements.length) { 95 95 + case 1: 96 96 + return getSingleElementValue(elements[0]) 97 97 + default: 98 98 + return getMultiElementValue(elements as HTMLInputElement[]) 99 99 + } 100 100 + } 101 101 + 102 102 + // Strips the `[]` suffix off a form value name 103 103 + function getPureName(name: string) { 104 104 + return /\[\]$/.test(name) ? name.slice(0, -2) : name 105 105 + } 106 106 + 107 107 + function getAllFormValues(container: HTMLFormElement | HTMLFieldSetElement) { 108 108 + const values: Record<string, unknown> = {} 109 109 + 110 110 + for (const element of container.elements) { 111 111 + if (!('name' in element)) { 112 112 + continue 113 113 + } 114 114 + const name = element.name as string 115 115 + values[getPureName(name)] = getFormValue(container, name) 116 116 + } 117 117 + 118 118 + return values 119 119 + }

+48

packages/browser/src/client/tester/expect/toHaveRole.ts

Reviewed

··· 1 1 + /** 2 2 + * The MIT License (MIT) 3 3 + * Copyright (c) 2017 Kent C. Dodds 4 4 + * 5 5 + * Permission is hereby granted, free of charge, to any person obtaining a copy 6 6 + * of this software and associated documentation files (the "Software"), to deal 7 7 + * in the Software without restriction, including without limitation the rights 8 8 + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 9 + * copies of the Software, and to permit persons to whom the Software is 10 10 + * furnished to do so, subject to the following conditions: 11 11 + * 12 12 + * The above copyright notice and this permission notice shall be included in all 13 13 + * copies or substantial portions of the Software. 14 14 + */ 15 15 + 16 16 + import type { ExpectationResult, MatcherState } from '@vitest/expect' 17 17 + import type { Locator } from '../locators' 18 18 + import { beginAriaCaches, endAriaCaches, getAriaRole } from 'ivya/utils' 19 19 + import { getElementFromUserInput, getMessage } from './utils' 20 20 + 21 21 + export default function toHaveRole( 22 22 + this: MatcherState, 23 23 + actual: Element | Locator, 24 24 + expectedRole: string, 25 25 + ): ExpectationResult { 26 26 + const htmlElement = getElementFromUserInput(actual, toHaveRole, this) 27 27 + beginAriaCaches() 28 28 + const actualRole = getAriaRole(htmlElement) 29 29 + endAriaCaches() 30 30 + return { 31 31 + pass: actualRole === expectedRole, 32 32 + message: () => { 33 33 + const to = this.isNot ? 'not to' : 'to' 34 34 + return getMessage( 35 35 + this, 36 36 + this.utils.matcherHint( 37 37 + `${this.isNot ? '.not' : ''}.toHaveRole`, 38 38 + 'element', 39 39 + '', 40 40 + ), 41 41 + `Expected element ${to} have role`, 42 42 + expectedRole, 43 43 + 'Received', 44 44 + actualRole, 45 45 + ) 46 46 + }, 47 47 + } 48 48 + }

+134

packages/browser/src/client/tester/expect/toHaveSelection.ts

Reviewed

··· 1 1 + /** 2 2 + * The MIT License (MIT) 3 3 + * Copyright (c) 2017 Kent C. Dodds 4 4 + * 5 5 + * Permission is hereby granted, free of charge, to any person obtaining a copy 6 6 + * of this software and associated documentation files (the "Software"), to deal 7 7 + * in the Software without restriction, including without limitation the rights 8 8 + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 9 + * copies of the Software, and to permit persons to whom the Software is 10 10 + * furnished to do so, subject to the following conditions: 11 11 + * 12 12 + * The above copyright notice and this permission notice shall be included in all 13 13 + * copies or substantial portions of the Software. 14 14 + */ 15 15 + 16 16 + import type { ExpectationResult, MatcherState } from '@vitest/expect' 17 17 + import type { Locator } from '../locators' 18 18 + import { arrayAsSetComparison, getElementFromUserInput, getMessage, getTag } from './utils' 19 19 + 20 20 + export default function toHaveSelection( 21 21 + this: MatcherState, 22 22 + element: HTMLElement | SVGElement | Locator, 23 23 + expectedSelection: string, 24 24 + ): ExpectationResult { 25 25 + const htmlElement = getElementFromUserInput(element, toHaveSelection, this) 26 26 + 27 27 + const expectsSelection = expectedSelection !== undefined 28 28 + 29 29 + if (expectsSelection && typeof expectedSelection !== 'string') { 30 30 + throw new Error(`expected selection must be a string or undefined`) 31 31 + } 32 32 + 33 33 + const receivedSelection = getSelection(htmlElement) 34 34 + 35 35 + return { 36 36 + pass: expectsSelection 37 37 + ? this.equals(receivedSelection, expectedSelection, [arrayAsSetComparison, ...this.customTesters]) 38 38 + : Boolean(receivedSelection), 39 39 + message: () => { 40 40 + const to = this.isNot ? 'not to' : 'to' 41 41 + const matcher = this.utils.matcherHint( 42 42 + `${this.isNot ? '.not' : ''}.toHaveSelection`, 43 43 + 'element', 44 44 + expectedSelection, 45 45 + ) 46 46 + return getMessage( 47 47 + this, 48 48 + matcher, 49 49 + `Expected the element ${to} have selection`, 50 50 + expectsSelection ? expectedSelection : '(any)', 51 51 + 'Received', 52 52 + receivedSelection, 53 53 + ) 54 54 + }, 55 55 + } 56 56 + } 57 57 + 58 58 + function getSelection(element: HTMLElement | SVGElement): string { 59 59 + const selection = element.ownerDocument.getSelection() 60 60 + 61 61 + if (!selection) { 62 62 + return '' 63 63 + } 64 64 + 65 65 + if (['INPUT', 'TEXTAREA'].includes(getTag(element))) { 66 66 + const input = element as HTMLInputElement | HTMLTextAreaElement 67 67 + if (['radio', 'checkbox'].includes(input.type)) { 68 68 + return '' 69 69 + } 70 70 + if (input.selectionStart == null || input.selectionEnd == null) { 71 71 + return '' 72 72 + } 73 73 + return input.value 74 74 + .toString() 75 75 + .substring(input.selectionStart, input.selectionEnd) 76 76 + } 77 77 + 78 78 + if (selection.anchorNode === null || selection.focusNode === null) { 79 79 + // No selection 80 80 + return '' 81 81 + } 82 82 + 83 83 + const originalRange = selection.getRangeAt(0) 84 84 + const temporaryRange = element.ownerDocument.createRange() 85 85 + 86 86 + if (selection.containsNode(element, false)) { 87 87 + // Whole element is inside selection 88 88 + temporaryRange.selectNodeContents(element) 89 89 + selection.removeAllRanges() 90 90 + selection.addRange(temporaryRange) 91 91 + } 92 92 + else if ( 93 93 + element.contains(selection.anchorNode) 94 94 + && element.contains(selection.focusNode) 95 95 + ) { 96 96 + // Element contains selection, nothing to do 97 97 + } 98 98 + else { 99 99 + // Element is partially selected 100 100 + const selectionStartsWithinElement 101 101 + = element === originalRange.startContainer 102 102 + || element.contains(originalRange.startContainer) 103 103 + const selectionEndsWithinElement 104 104 + = element === originalRange.endContainer 105 105 + || element.contains(originalRange.endContainer) 106 106 + selection.removeAllRanges() 107 107 + 108 108 + if (selectionStartsWithinElement || selectionEndsWithinElement) { 109 109 + temporaryRange.selectNodeContents(element) 110 110 + 111 111 + if (selectionStartsWithinElement) { 112 112 + temporaryRange.setStart( 113 113 + originalRange.startContainer, 114 114 + originalRange.startOffset, 115 115 + ) 116 116 + } 117 117 + if (selectionEndsWithinElement) { 118 118 + temporaryRange.setEnd( 119 119 + originalRange.endContainer, 120 120 + originalRange.endOffset, 121 121 + ) 122 122 + } 123 123 + 124 124 + selection.addRange(temporaryRange) 125 125 + } 126 126 + } 127 127 + 128 128 + const result = selection.toString() 129 129 + 130 130 + selection.removeAllRanges() 131 131 + selection.addRange(originalRange) 132 132 + 133 133 + return result 134 134 + }

+178

packages/browser/src/client/tester/expect/toHaveStyle.ts

Reviewed

··· 1 1 + import type { ExpectationResult, MatcherState } from '@vitest/expect' 2 2 + import type { Locator } from '../locators' 3 3 + import { server } from '@vitest/browser/context' 4 4 + import { getElementFromUserInput } from './utils' 5 5 + 6 6 + const browser = server.config.browser.name 7 7 + 8 8 + // these values should keep the `style` attribute instead of computing px to be consistent with jsdom 9 9 + // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascade/used_value#difference_from_computed_value 10 10 + const usedValuesProps = new Set([ 11 11 + 'backgroundPosition', 12 12 + 'background-position', 13 13 + 'bottom', 14 14 + 'left', 15 15 + 'right', 16 16 + 'top', 17 17 + 'height', 18 18 + 'width', 19 19 + 'margin-bottom', 20 20 + 'marginBottom', 21 21 + 'margin-left', 22 22 + 'marginLeft', 23 23 + 'margin-right', 24 24 + 'marginRight', 25 25 + 'margin-top', 26 26 + 'marginTop', 27 27 + 'min-height', 28 28 + 'minHeight', 29 29 + 'min-width', 30 30 + 'minWidth', 31 31 + 'padding-bottom', 32 32 + 'padding-left', 33 33 + 'padding-right', 34 34 + 'padding-top', 35 35 + 'text-indent', 36 36 + 'paddingBottom', 37 37 + 'paddingLeft', 38 38 + 'paddingRight', 39 39 + 'paddingTop', 40 40 + 'textIndent', 41 41 + ]) 42 42 + 43 43 + export default function toHaveStyle( 44 44 + this: MatcherState, 45 45 + actual: Element | Locator, 46 46 + css: string | Record<string, unknown>, 47 47 + ): ExpectationResult { 48 48 + const htmlElement = getElementFromUserInput(actual, toHaveStyle, this) 49 49 + const { getComputedStyle } = htmlElement.ownerDocument.defaultView! 50 50 + 51 51 + const expected = typeof css === 'object' 52 52 + ? getStyleFromObjectCSS(css) 53 53 + : computeCSSStyleDeclaration(css) 54 54 + const received = getComputedStyle(htmlElement) 55 55 + const receivedCustomKeys = new Set(Array.from(htmlElement.style)) 56 56 + 57 57 + return { 58 58 + pass: isSubset(expected, htmlElement, received, receivedCustomKeys), 59 59 + message: () => { 60 60 + const matcher = `${this.isNot ? '.not' : ''}.toHaveStyle` 61 61 + const expectedKeys = new Set(Object.keys(expected)) 62 62 + const receivedObject = Array.from(received) 63 63 + .filter(prop => expectedKeys.has(prop)) 64 64 + .reduce( 65 65 + (obj, prop) => { 66 66 + const styleSheet = receivedCustomKeys.has(prop) && usedValuesProps.has(prop) 67 67 + ? htmlElement.style 68 68 + : received 69 69 + obj[prop] = styleSheet[prop as 'color'] 70 70 + return obj 71 71 + }, 72 72 + {} as Record<string, unknown>, 73 73 + ) 74 74 + const receivedString = printoutObjectStyles(receivedObject) 75 75 + const diff = receivedString === '' 76 76 + ? 'Expected styles could not be parsed by the browser. Did you make a typo?' 77 77 + : this.utils.diff( 78 78 + printoutObjectStyles(expected), 79 79 + receivedString, 80 80 + ) 81 81 + return [ 82 82 + this.utils.matcherHint(matcher, 'element', ''), 83 83 + diff, 84 84 + ].join('\n\n') 85 85 + }, 86 86 + } 87 87 + } 88 88 + 89 89 + function getStyleFromObjectCSS(css: Record<string, unknown>): Record<string, unknown> { 90 90 + const doc = browser === 'chrome' || browser === 'chromium' 91 91 + ? document 92 92 + : document.implementation.createHTMLDocument('') 93 93 + 94 94 + const copy = doc.createElement('div') 95 95 + doc.body.appendChild(copy) 96 96 + const keys = Object.keys(css) 97 97 + 98 98 + keys.forEach((property) => { 99 99 + copy.style[property as 'color'] = css[property] as string 100 100 + }) 101 101 + 102 102 + const styles: Record<string, unknown> = {} 103 103 + // to get normalized colors (blue -> rgb(0, 0, 255)) 104 104 + const computedStyles = window.getComputedStyle(copy) 105 105 + keys.forEach((property) => { 106 106 + const styleSheet = usedValuesProps.has(property) ? copy.style : computedStyles 107 107 + const value = styleSheet[property as 'color'] 108 108 + // ignore invalid keys 109 109 + if (value != null) { 110 110 + styles[property] = value 111 111 + } 112 112 + }) 113 113 + copy.remove() 114 114 + 115 115 + return styles 116 116 + } 117 117 + 118 118 + function computeCSSStyleDeclaration(css: string): Record<string, unknown> { 119 119 + // on chromium for styles to be computed, they need to be inserted into the actual document 120 120 + // webkit will also not compute _some_ style like transform if it's not in the document 121 121 + const doc = browser === 'chrome' || browser === 'chromium' || browser === 'webkit' 122 122 + ? document 123 123 + : document.implementation.createHTMLDocument('') 124 124 + 125 125 + const rootElement = doc.createElement('div') 126 126 + rootElement.setAttribute('style', css.replace(/\n/g, '')) 127 127 + doc.body.appendChild(rootElement) 128 128 + 129 129 + const computedStyle = window.getComputedStyle(rootElement) 130 130 + 131 131 + const styleDeclaration = Array.from(rootElement.style).reduce((acc, prop) => { 132 132 + acc[prop] = usedValuesProps.has(prop) 133 133 + ? rootElement.style.getPropertyValue(prop) 134 134 + : computedStyle.getPropertyValue(prop) 135 135 + return acc 136 136 + }, {} as Record<string, unknown>) 137 137 + rootElement.remove() 138 138 + return styleDeclaration 139 139 + } 140 140 + 141 141 + function printoutObjectStyles(styles: Record<string, unknown>): string { 142 142 + return Object.keys(styles) 143 143 + .sort() 144 144 + .map(prop => `${prop}: ${styles[prop]};`) 145 145 + .join('\n') 146 146 + } 147 147 + 148 148 + function isSubset( 149 149 + styles: Record<string, unknown>, 150 150 + element: HTMLElement | SVGElement, 151 151 + computedStyle: CSSStyleDeclaration, 152 152 + receivedCustomKeys: Set<string>, 153 153 + ): boolean { 154 154 + const keys = Object.keys(styles) 155 155 + if (!keys.length) { 156 156 + return false 157 157 + } 158 158 + return keys.every((prop) => { 159 159 + const value = styles[prop as 'color'] 160 160 + const isCustomProperty = prop.startsWith('--') 161 161 + const spellingVariants = [prop] 162 162 + if (!isCustomProperty) { 163 163 + spellingVariants.push(prop.toLowerCase()) 164 164 + } 165 165 + 166 166 + const pass = spellingVariants.some( 167 167 + (name) => { 168 168 + const styleSheet = receivedCustomKeys.has(prop) && usedValuesProps.has(prop) 169 169 + ? element.style 170 170 + : computedStyle 171 171 + return styleSheet[name as 'color'] === value 172 172 + || styleSheet.getPropertyValue(name) === value 173 173 + }, 174 174 + ) 175 175 + return pass 176 176 + }, 177 177 + ) 178 178 + }

+54

packages/browser/src/client/tester/expect/toHaveTextContent.ts

Reviewed

··· 1 1 + /** 2 2 + * The MIT License (MIT) 3 3 + * Copyright (c) 2017 Kent C. Dodds 4 4 + * 5 5 + * Permission is hereby granted, free of charge, to any person obtaining a copy 6 6 + * of this software and associated documentation files (the "Software"), to deal 7 7 + * in the Software without restriction, including without limitation the rights 8 8 + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 9 + * copies of the Software, and to permit persons to whom the Software is 10 10 + * furnished to do so, subject to the following conditions: 11 11 + * 12 12 + * The above copyright notice and this permission notice shall be included in all 13 13 + * copies or substantial portions of the Software. 14 14 + */ 15 15 + 16 16 + import type { ExpectationResult, MatcherState } from '@vitest/expect' 17 17 + import type { Locator } from '../locators' 18 18 + import { getMessage, getNodeFromUserInput, matches, normalize } from './utils' 19 19 + 20 20 + export default function toHaveTextContent( 21 21 + this: MatcherState, 22 22 + actual: Element | Locator, 23 23 + matcher: string | RegExp, 24 24 + options: { normalizeWhitespace?: boolean } = { normalizeWhitespace: true }, 25 25 + ): ExpectationResult { 26 26 + const node = getNodeFromUserInput(actual, toHaveTextContent, this) 27 27 + 28 28 + const textContent = options.normalizeWhitespace 29 29 + ? normalize(node.textContent || '') 30 30 + : (node.textContent || '').replace(/\u00A0/g, ' ') // Replace &nbsp; with normal spaces 31 31 + 32 32 + const checkingWithEmptyString = textContent !== '' && matcher === '' 33 33 + 34 34 + return { 35 35 + pass: !checkingWithEmptyString && matches(textContent, matcher), 36 36 + message: () => { 37 37 + const to = this.isNot ? 'not to' : 'to' 38 38 + return getMessage( 39 39 + this, 40 40 + this.utils.matcherHint( 41 41 + `${this.isNot ? '.not' : ''}.toHaveTextContent`, 42 42 + 'element', 43 43 + '', 44 44 + ), 45 45 + checkingWithEmptyString 46 46 + ? `Checking with empty string will always match, use .toBeEmptyDOMElement() instead` 47 47 + : `Expected element ${to} have text content`, 48 48 + matcher, 49 49 + 'Received', 50 50 + textContent, 51 51 + ) 52 52 + }, 53 53 + } 54 54 + }

+68

packages/browser/src/client/tester/expect/toHaveValue.ts

Reviewed

··· 1 1 + /** 2 2 + * The MIT License (MIT) 3 3 + * Copyright (c) 2017 Kent C. Dodds 4 4 + * 5 5 + * Permission is hereby granted, free of charge, to any person obtaining a copy 6 6 + * of this software and associated documentation files (the "Software"), to deal 7 7 + * in the Software without restriction, including without limitation the rights 8 8 + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 9 + * copies of the Software, and to permit persons to whom the Software is 10 10 + * furnished to do so, subject to the following conditions: 11 11 + * 12 12 + * The above copyright notice and this permission notice shall be included in all 13 13 + * copies or substantial portions of the Software. 14 14 + */ 15 15 + 16 16 + import type { ExpectationResult, MatcherState } from '@vitest/expect' 17 17 + import type { Locator } from '../locators' 18 18 + import { arrayAsSetComparison, getElementFromUserInput, getMessage, getSingleElementValue, isInputElement } from './utils' 19 19 + 20 20 + export default function toHaveValue( 21 21 + this: MatcherState, 22 22 + actual: Element | Locator, 23 23 + expectedValue?: string, 24 24 + ): ExpectationResult { 25 25 + const htmlElement = getElementFromUserInput(actual, toHaveValue, this) 26 26 + 27 27 + if ( 28 28 + isInputElement(htmlElement) 29 29 + && ['checkbox', 'radio'].includes(htmlElement.type) 30 30 + ) { 31 31 + throw new Error( 32 32 + 'input with type=checkbox or type=radio cannot be used with .toHaveValue(). Use .toBeChecked() for type=checkbox or .toHaveFormValues() instead', 33 33 + ) 34 34 + } 35 35 + 36 36 + const receivedValue = getSingleElementValue(htmlElement) 37 37 + const expectsValue = expectedValue !== undefined 38 38 + 39 39 + let expectedTypedValue = expectedValue 40 40 + let receivedTypedValue = receivedValue 41 41 + // eslint-disable-next-line eqeqeq 42 42 + if (expectedValue == receivedValue && expectedValue !== receivedValue) { 43 43 + expectedTypedValue = `${expectedValue} (${typeof expectedValue})` 44 44 + receivedTypedValue = `${receivedValue} (${typeof receivedValue})` 45 45 + } 46 46 + 47 47 + return { 48 48 + pass: expectsValue 49 49 + ? this.equals(receivedValue, expectedValue, [arrayAsSetComparison, ...this.customTesters]) 50 50 + : Boolean(receivedValue), 51 51 + message: () => { 52 52 + const to = this.isNot ? 'not to' : 'to' 53 53 + const matcher = this.utils.matcherHint( 54 54 + `${this.isNot ? '.not' : ''}.toHaveValue`, 55 55 + 'element', 56 56 + expectedValue, 57 57 + ) 58 58 + return getMessage( 59 59 + this, 60 60 + matcher, 61 61 + `Expected the element ${to} have value`, 62 62 + expectsValue ? expectedTypedValue : '(any)', 63 63 + 'Received', 64 64 + receivedTypedValue, 65 65 + ) 66 66 + }, 67 67 + } 68 68 + }

+281

packages/browser/src/client/tester/expect/utils.ts

Reviewed

··· 1 1 + /** 2 2 + * The MIT License (MIT) 3 3 + * Copyright (c) 2017 Kent C. Dodds 4 4 + * 5 5 + * Permission is hereby granted, free of charge, to any person obtaining a copy 6 6 + * of this software and associated documentation files (the "Software"), to deal 7 7 + * in the Software without restriction, including without limitation the rights 8 8 + * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 9 + * copies of the Software, and to permit persons to whom the Software is 10 10 + * furnished to do so, subject to the following conditions: 11 11 + * 12 12 + * The above copyright notice and this permission notice shall be included in all 13 13 + * copies or substantial portions of the Software. 14 14 + */ 15 15 + 16 16 + import type { MatcherState } from '@vitest/expect' 17 17 + import { Locator } from '../locators' 18 18 + 19 19 + export function getElementFromUserInput( 20 20 + elementOrLocator: Element | Locator | null, 21 21 + // TODO: minifier doesn't keep names, so we need to update this 22 22 + matcherFn: (...args: any) => any, 23 23 + context: MatcherState, 24 24 + ): HTMLElement | SVGElement { 25 25 + if (elementOrLocator instanceof Locator) { 26 26 + elementOrLocator = elementOrLocator.element() 27 27 + } 28 28 + 29 29 + if ( 30 30 + elementOrLocator instanceof HTMLElement 31 31 + || elementOrLocator instanceof SVGElement 32 32 + ) { 33 33 + return elementOrLocator 34 34 + } 35 35 + 36 36 + throw new UserInputElementTypeError( 37 37 + elementOrLocator, 38 38 + matcherFn, 39 39 + context, 40 40 + ) 41 41 + } 42 42 + 43 43 + export function getNodeFromUserInput( 44 44 + elementOrLocator: Element | Locator, 45 45 + matcherFn: (...args: any) => any, 46 46 + context: MatcherState, 47 47 + ): Node { 48 48 + if (elementOrLocator instanceof Locator) { 49 49 + elementOrLocator = elementOrLocator.element() 50 50 + } 51 51 + 52 52 + if ( 53 53 + elementOrLocator instanceof Node 54 54 + ) { 55 55 + return elementOrLocator 56 56 + } 57 57 + 58 58 + throw new UserInputNodeTypeError( 59 59 + elementOrLocator, 60 60 + matcherFn, 61 61 + context, 62 62 + ) 63 63 + } 64 64 + 65 65 + export function getMessage( 66 66 + context: MatcherState, 67 67 + matcher: string, 68 68 + expectedLabel: string, 69 69 + expectedValue: unknown, 70 70 + receivedLabel: string, 71 71 + receivedValue: unknown, 72 72 + ): string { 73 73 + return [ 74 74 + `${matcher}\n`, 75 75 + 76 76 + `${expectedLabel}:\n${context.utils.EXPECTED_COLOR( 77 77 + redent(display(context, expectedValue), 2), 78 78 + )}`, 79 79 + 80 80 + `${receivedLabel}:\n${context.utils.RECEIVED_COLOR( 81 81 + redent(display(context, receivedValue), 2), 82 82 + )}`, 83 83 + ].join('\n') 84 84 + } 85 85 + 86 86 + export function redent(string: string, count: number): string { 87 87 + return indentString(stripIndent(string), count) 88 88 + } 89 89 + 90 90 + function indentString(string: string, count: number) { 91 91 + const regex = /^(?!\s*$)/gm 92 92 + 93 93 + return string.replace(regex, ' '.repeat(count)) 94 94 + } 95 95 + 96 96 + function minIndent(string: string) { 97 97 + const match = string.match(/^[ \t]*(?=\S)/gm) 98 98 + 99 99 + if (!match) { 100 100 + return 0 101 101 + } 102 102 + 103 103 + return match.reduce((r, a) => Math.min(r, a.length), Infinity) 104 104 + } 105 105 + 106 106 + function stripIndent(string: string) { 107 107 + const indent = minIndent(string) 108 108 + 109 109 + if (indent === 0) { 110 110 + return string 111 111 + } 112 112 + 113 113 + const regex = new RegExp(`^[ \\t]{${indent}}`, 'gm') 114 114 + 115 115 + return string.replace(regex, '') 116 116 + } 117 117 + 118 118 + function display(context: MatcherState, value: unknown) { 119 119 + return typeof value === 'string' ? value : context.utils.stringify(value) 120 120 + } 121 121 + 122 122 + interface ToSentenceOptions { 123 123 + wordConnector?: string 124 124 + lastWordConnector?: string 125 125 + } 126 126 + 127 127 + export function toSentence( 128 128 + array: string[], 129 129 + { wordConnector = ', ', lastWordConnector = ' and ' }: ToSentenceOptions = {}, 130 130 + ): string { 131 131 + return [array.slice(0, -1).join(wordConnector), array[array.length - 1]].join( 132 132 + array.length > 1 ? lastWordConnector : '', 133 133 + ) 134 134 + } 135 135 + 136 136 + class GenericTypeError extends Error { 137 137 + constructor(expectedString: string, received: unknown, matcherFn: (...args: any) => any, context: MatcherState) { 138 138 + super() 139 139 + 140 140 + if (Error.captureStackTrace) { 141 141 + Error.captureStackTrace(this, matcherFn) 142 142 + } 143 143 + let withType = '' 144 144 + try { 145 145 + withType = context.utils.printWithType( 146 146 + 'Received', 147 147 + received, 148 148 + context.utils.printReceived, 149 149 + ) 150 150 + } 151 151 + catch { 152 152 + // Can throw for Document: 153 153 + // https://github.com/jsdom/jsdom/issues/2304 154 154 + } 155 155 + this.message = [ 156 156 + context.utils.matcherHint( 157 157 + `${context.isNot ? '.not' : ''}.${matcherFn.name}`, 158 158 + 'received', 159 159 + '', 160 160 + ), 161 161 + '', 162 162 + 163 163 + `${context.utils.RECEIVED_COLOR( 164 164 + 'received', 165 165 + )} value must ${expectedString} or a Locator that returns ${expectedString}.`, 166 166 + withType, 167 167 + ].join('\n') 168 168 + } 169 169 + } 170 170 + 171 171 + class UserInputElementTypeError extends GenericTypeError { 172 172 + constructor( 173 173 + element: unknown, 174 174 + matcherFn: (...args: any) => any, 175 175 + context: MatcherState, 176 176 + ) { 177 177 + super('an HTMLElement or an SVGElement', element, matcherFn, context) 178 178 + } 179 179 + } 180 180 + 181 181 + class UserInputNodeTypeError extends GenericTypeError { 182 182 + constructor( 183 183 + element: unknown, 184 184 + matcherFn: (...args: any) => any, 185 185 + context: MatcherState, 186 186 + ) { 187 187 + super('a Node', element, matcherFn, context) 188 188 + } 189 189 + } 190 190 + 191 191 + export function getTag(element: Element): string { 192 192 + // Named inputs, e.g. <input name=tagName>, will be exposed as fields on the parent <form> 193 193 + // and override its properties. 194 194 + if (element instanceof HTMLFormElement) { 195 195 + return 'FORM' 196 196 + } 197 197 + // Elements from the svg namespace do not have uppercase tagName right away. 198 198 + return element.tagName.toUpperCase() 199 199 + } 200 200 + 201 201 + export function isInputElement(element: HTMLElement | SVGElement): element is HTMLInputElement { 202 202 + return getTag(element) === 'INPUT' 203 203 + } 204 204 + 205 205 + type SimpleInputValue = string | number | boolean | null 206 206 + 207 207 + export function getSingleElementValue( 208 208 + element: Element | undefined, 209 209 + ): SimpleInputValue | string[] | undefined { 210 210 + if (!element) { 211 211 + return undefined 212 212 + } 213 213 + 214 214 + switch (getTag(element)) { 215 215 + case 'INPUT': 216 216 + return getInputValue(element as HTMLInputElement) 217 217 + case 'SELECT': 218 218 + return getSelectValue(element as HTMLSelectElement) 219 219 + default: { 220 220 + return (element as any).value ?? getAccessibleValue(element) 221 221 + } 222 222 + } 223 223 + } 224 224 + 225 225 + function getSelectValue({ multiple, options }: HTMLSelectElement) { 226 226 + const selectedOptions = [...options].filter(option => option.selected) 227 227 + 228 228 + if (multiple) { 229 229 + return [...selectedOptions].map(opt => opt.value) 230 230 + } 231 231 + /* istanbul ignore if */ 232 232 + if (selectedOptions.length === 0) { 233 233 + return undefined // Couldn't make this happen, but just in case 234 234 + } 235 235 + return selectedOptions[0].value 236 236 + } 237 237 + 238 238 + function getInputValue(inputElement: HTMLInputElement) { 239 239 + switch (inputElement.type) { 240 240 + case 'number': 241 241 + return inputElement.value === '' ? null : Number(inputElement.value) 242 242 + case 'checkbox': 243 243 + return inputElement.checked 244 244 + default: 245 245 + return inputElement.value 246 246 + } 247 247 + } 248 248 + 249 249 + const rolesSupportingValues = ['meter', 'progressbar', 'slider', 'spinbutton'] 250 250 + function getAccessibleValue(element: Element) { 251 251 + if (!rolesSupportingValues.includes(element.getAttribute('role') || '')) { 252 252 + return undefined 253 253 + } 254 254 + return Number(element.getAttribute('aria-valuenow')) 255 255 + } 256 256 + 257 257 + export function normalize(text: string): string { 258 258 + return text.replace(/\s+/g, ' ').trim() 259 259 + } 260 260 + 261 261 + export function matches(textToMatch: string, matcher: string | RegExp): boolean { 262 262 + if (matcher instanceof RegExp) { 263 263 + return matcher.test(textToMatch) 264 264 + } 265 265 + else { 266 266 + return textToMatch.includes(String(matcher)) 267 267 + } 268 268 + } 269 269 + 270 270 + export function arrayAsSetComparison(a: unknown, b: unknown): boolean | undefined { 271 271 + if (Array.isArray(a) && Array.isArray(b)) { 272 272 + const setB = new Set(b) 273 273 + for (const item of new Set(a)) { 274 274 + if (!setB.has(item)) { 275 275 + return false 276 276 + } 277 277 + } 278 278 + return true 279 279 + } 280 280 + return undefined 281 281 + }

+2 -2

packages/browser/src/client/tester/locators/preview.ts

Reviewed

··· 84 84 return userEvent.upload(this.element(), file) 85 85 } 86 86 87 87 - selectOptions(options_: string | string[] | HTMLElement | HTMLElement[] | Locator | Locator[]): Promise<void> { 88 88 - return userEvent.selectOptions(this.element(), options_) 87 87 + selectOptions(options: string | string[] | HTMLElement | HTMLElement[] | Locator | Locator[]): Promise<void> { 88 88 + return userEvent.selectOptions(this.element(), options) 89 89 } 90 90 91 91 clear(): Promise<void> {