feat(toHaveAttribute): support asymetric matchers for value (#93)

Fixes #91

Author: revathskumar

.all-contributorsrc

@@ -238,6 +238,15 @@
         "bug",
         "code"
       ]
+    },
+    {
+      "login": "revathskumar",
+      "name": "Revath S Kumar",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/463904?v=4",
+      "profile": "https://blog.revathskumar.com",
+      "contributions": [
+        "code"
+      ]
     }
   ]
 }

README.md

@@ -16,7 +16,7 @@
 [![downloads][downloads-badge]][npmtrends]
 [![MIT License][license-badge]][license]
 
-[![All Contributors](https://img.shields.io/badge/all_contributors-23-orange.svg?style=flat-square)](#contributors)
+[![All Contributors](https://img.shields.io/badge/all_contributors-24-orange.svg?style=flat-square)](#contributors)
 [![PRs Welcome][prs-badge]][prs]
 [![Code of Conduct][coc-badge]][coc]
 
@@ -381,11 +381,11 @@ expect(getByTestId(container, 'parent')).toContainHTML(
 ### `toHaveAttribute`
 
 ```typescript
-toHaveAttribute(attr: string, value?: string)
+toHaveAttribute(attr: string, value?: any)
 ```
 
 This allows you to check whether the given element has an attribute or not. You
-can also optionally check that the attribute has a specific expected value.
+can also optionally check that the attribute has a specific expected value or partial match using [expect.stringContaining](https://jestjs.io/docs/en/expect.html#expectnotstringcontainingstring)/[expect.stringMatching](https://jestjs.io/docs/en/expect.html#expectstringmatchingstring-regexp)
 
 #### Examples
 
@@ -411,6 +411,9 @@ const button = getByTestId(container, 'ok-button')
 expect(button).toHaveAttribute('disabled')
 expect(button).toHaveAttribute('type', 'submit')
 expect(button).not.toHaveAttribute('type', 'button')
+
+expect(button).toHaveAttribute('type', expect.stringContaining('sub'))
+expect(button).toHaveAttribute('type', expect.not.stringContaining('but'))
 ```
 
 <hr />
@@ -760,8 +763,7 @@ Thanks goes to these people ([emoji key][emojis]):
 | :---: | :---: | :---: | :---: | :---: | :---: | :---: |
 | [<img src="https://avatars1.githubusercontent.com/u/1241511?s=460&v=4" width="100px;" alt="Anto Aravinth"/><br /><sub><b>Anto Aravinth</b></sub>](https://github.com/antoaravinth)<br />[💻](https://github.com/testing-library/jest-dom/commits?author=antoaravinth "Code") [⚠️](https://github.com/testing-library/jest-dom/commits?author=antoaravinth "Tests") [📖](https://github.com/testing-library/jest-dom/commits?author=antoaravinth "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/3462296?v=4" width="100px;" alt="Jonah Moses"/><br /><sub><b>Jonah Moses</b></sub>](https://github.com/JonahMoses)<br />[📖](https://github.com/testing-library/jest-dom/commits?author=JonahMoses "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/4002543?v=4" width="100px;" alt="Łukasz Gandecki"/><br /><sub><b>Łukasz Gandecki</b></sub>](http://team.thebrain.pro)<br />[💻](https://github.com/testing-library/jest-dom/commits?author=lgandecki "Code") [⚠️](https://github.com/testing-library/jest-dom/commits?author=lgandecki "Tests") [📖](https://github.com/testing-library/jest-dom/commits?author=lgandecki "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/498274?v=4" width="100px;" alt="Ivan Babak"/><br /><sub><b>Ivan Babak</b></sub>](https://sompylasar.github.io)<br />[🐛](https://github.com/testing-library/jest-dom/issues?q=author%3Asompylasar "Bug reports") [🤔](#ideas-sompylasar "Ideas, Planning, & Feedback") | [<img src="https://avatars3.githubusercontent.com/u/4439618?v=4" width="100px;" alt="Jesse Day"/><br /><sub><b>Jesse Day</b></sub>](https://github.com/jday3)<br />[💻](https://github.com/testing-library/jest-dom/commits?author=jday3 "Code") | [<img src="https://avatars0.githubusercontent.com/u/15199?v=4" width="100px;" alt="Ernesto García"/><br /><sub><b>Ernesto García</b></sub>](http://gnapse.github.io)<br />[💻](https://github.com/testing-library/jest-dom/commits?author=gnapse "Code") [📖](https://github.com/testing-library/jest-dom/commits?author=gnapse "Documentation") [⚠️](https://github.com/testing-library/jest-dom/commits?author=gnapse "Tests") | [<img src="https://avatars0.githubusercontent.com/u/79312?v=4" width="100px;" alt="Mark Volkmann"/><br /><sub><b>Mark Volkmann</b></sub>](http://ociweb.com/mark/)<br />[🐛](https://github.com/testing-library/jest-dom/issues?q=author%3Amvolkmann "Bug reports") [💻](https://github.com/testing-library/jest-dom/commits?author=mvolkmann "Code") |
 | [<img src="https://avatars1.githubusercontent.com/u/1659099?v=4" width="100px;" alt="smacpherson64"/><br /><sub><b>smacpherson64</b></sub>](https://github.com/smacpherson64)<br />[💻](https://github.com/testing-library/jest-dom/commits?author=smacpherson64 "Code") [📖](https://github.com/testing-library/jest-dom/commits?author=smacpherson64 "Documentation") [⚠️](https://github.com/testing-library/jest-dom/commits?author=smacpherson64 "Tests") | [<img src="https://avatars2.githubusercontent.com/u/132233?v=4" width="100px;" alt="John Gozde"/><br /><sub><b>John Gozde</b></sub>](https://github.com/jgoz)<br />[🐛](https://github.com/testing-library/jest-dom/issues?q=author%3Ajgoz "Bug reports") [💻](https://github.com/testing-library/jest-dom/commits?author=jgoz "Code") | [<img src="https://avatars2.githubusercontent.com/u/7830590?v=4" width="100px;" alt="Iwona"/><br /><sub><b>Iwona</b></sub>](https://github.com/callada)<br />[💻](https://github.com/testing-library/jest-dom/commits?author=callada "Code") [📖](https://github.com/testing-library/jest-dom/commits?author=callada "Documentation") [⚠️](https://github.com/testing-library/jest-dom/commits?author=callada "Tests") | [<img src="https://avatars0.githubusercontent.com/u/840609?v=4" width="100px;" alt="Lewis"/><br /><sub><b>Lewis</b></sub>](https://github.com/6ewis)<br />[💻](https://github.com/testing-library/jest-dom/commits?author=6ewis "Code") | [<img src="https://avatars3.githubusercontent.com/u/2339362?v=4" width="100px;" alt="Leandro Lourenci"/><br /><sub><b>Leandro Lourenci</b></sub>](https://blog.lourenci.com/)<br />[🐛](https://github.com/testing-library/jest-dom/issues?q=author%3Alourenci "Bug reports") [📖](https://github.com/testing-library/jest-dom/commits?author=lourenci "Documentation") [💻](https://github.com/testing-library/jest-dom/commits?author=lourenci "Code") [⚠️](https://github.com/testing-library/jest-dom/commits?author=lourenci "Tests") | [<img src="https://avatars1.githubusercontent.com/u/626420?v=4" width="100px;" alt="Shukhrat Mukimov"/><br /><sub><b>Shukhrat Mukimov</b></sub>](https://github.com/mufasa71)<br />[🐛](https://github.com/testing-library/jest-dom/issues?q=author%3Amufasa71 "Bug reports") | [<img src="https://avatars3.githubusercontent.com/u/1481264?v=4" width="100px;" alt="Roman Usherenko"/><br /><sub><b>Roman Usherenko</b></sub>](https://github.com/dreyks)<br />[💻](https://github.com/testing-library/jest-dom/commits?author=dreyks "Code") [⚠️](https://github.com/testing-library/jest-dom/commits?author=dreyks "Tests") |
-| [<img src="https://avatars1.githubusercontent.com/u/648?v=4" width="100px;" alt="Joe Hsu"/><br /><sub><b>Joe Hsu</b></sub>](http://josephhsu.com)<br />[📖](https://github.com/testing-library/jest-dom/commits?author=jhsu "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/3068563?v=4" width="100px;" alt="Haz"/><br /><sub><b>Haz</b></sub>](https://twitter.com/diegohaz)<br />[🐛](https://github.com/testing-library/jest-dom/issues?q=author%3Adiegohaz "Bug reports") [💻](https://github.com/testing-library/jest-dom/commits?author=diegohaz "Code") |
-
+| [<img src="https://avatars1.githubusercontent.com/u/648?v=4" width="100px;" alt="Joe Hsu"/><br /><sub><b>Joe Hsu</b></sub>](http://josephhsu.com)<br />[📖](https://github.com/testing-library/jest-dom/commits?author=jhsu "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/3068563?v=4" width="100px;" alt="Haz"/><br /><sub><b>Haz</b></sub>](https://twitter.com/diegohaz)<br />[🐛](https://github.com/testing-library/jest-dom/issues?q=author%3Adiegohaz "Bug reports") [💻](https://github.com/testing-library/jest-dom/commits?author=diegohaz "Code") | [<img src="https://avatars3.githubusercontent.com/u/463904?v=4" width="100px;" alt="Revath S Kumar"/><br /><sub><b>Revath S Kumar</b></sub>](https://blog.revathskumar.com)<br />[💻](https://github.com/testing-library/jest-dom/commits?author=revathskumar "Code") |
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors][all-contributors] specification.

extend-expect.d.ts

@@ -1,4 +1,24 @@
 declare namespace jest {
+  interface InverseStringAsymmetricMatchers {
+    stringMatching(str: string | RegExp): any
+    stringContaining(str: string): any
+  }
+  interface Expect {
+    stringMatching(str: string | RegExp): any
+    stringContaining(str: string): any
+    anything(): any
+    any(classType: any): any
+    not: InverseStringAsymmetricMatchers
+  }
+
+  type attributeValueType =
+    | string
+    | Expect.stringContaining
+    | Expect.stringMatching
+    | Expect.any
+    | Expect.anything
+    | Expect.not
+
   interface Matchers<R> {
     /**
      * @deprecated
@@ -11,7 +31,7 @@ declare namespace jest {
     toBeEnabled(): R
     toContainElement(element: HTMLElement | SVGElement | null): R
     toContainHTML(htmlText: string): R
-    toHaveAttribute(attr: string, value?: string): R
+    toHaveAttribute(attr: string, value?: attributeValueType): R
     toHaveClass(...classNames: string[]): R
     toHaveFocus(): R
     toHaveFormValues(expectedValues: {[name: string]: any}): R

package.json

@@ -36,6 +36,7 @@
     "chalk": "^2.4.1",
     "css": "^2.2.3",
     "css.escape": "^1.5.1",
+    "expect": "^24.7.1",
     "jest-diff": "^24.0.0",
     "jest-matcher-utils": "^24.0.0",
     "lodash": "^4.17.11",

src/__tests__/to-have-attribute.js

@@ -41,4 +41,22 @@ test('.toHaveAttribute', () => {
   expect(() =>
     expect({thisIsNot: 'an html element'}).not.toHaveAttribute(),
   ).toThrowError()
+
+  // Asymettic matchers
+  expect(queryByTestId('ok-button')).toHaveAttribute(
+    'type',
+    expect.stringContaining('sub'),
+  )
+  expect(queryByTestId('ok-button')).toHaveAttribute(
+    'type',
+    expect.stringMatching(/sub*/),
+  )
+  expect(queryByTestId('ok-button')).toHaveAttribute('type', expect.anything())
+
+  expect(() =>
+    expect(queryByTestId('ok-button')).toHaveAttribute(
+      'type',
+      expect.not.stringContaining('sub'),
+    ),
+  ).toThrowError()
 })

src/to-have-attribute.js

@@ -1,4 +1,5 @@
 import {matcherHint, stringify, printExpected} from 'jest-matcher-utils'
+import {equals} from 'expect/build/jasmineUtils'
 import {checkHtmlElement, getMessage} from './utils'
 
 function printAttribute(name, value) {
@@ -18,7 +19,7 @@ export function toHaveAttribute(htmlElement, name, expectedValue) {
   const receivedValue = htmlElement.getAttribute(name)
   return {
     pass: isExpectedValuePresent
-      ? hasAttribute && receivedValue === expectedValue
+      ? hasAttribute && equals(receivedValue, expectedValue)
       : hasAttribute,
     message: () => {
       const to = this.isNot ? 'not to' : 'to'