add toHaveAttribute custom matcher

Author: dfcook

.babelrc

@@ -3,17 +3,21 @@
     ["env", {
       "modules": false,
       "targets": {
-        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+        "browsers": [
+          "> 1%",
+          "last 2 versions",
+          "not ie <= 8"
+        ]
       }
-    }]    
-  ],  
+    }]
+  ],
   "plugins": [
     "transform-object-rest-spread",
     "transform-runtime"
   ],
   "env": {
     "test": {
-      "presets": ["env"]      
+      "presets": ["env"]
     }
   }
 }

src/extend-expect.js

@@ -1,4 +1,4 @@
 import extensions from './jest-extensions'
 
-const {toBeInTheDOM, toHaveTextContent} = extensions
-expect.extend({toBeInTheDOM, toHaveTextContent})
+const {toBeInTheDOM, toHaveTextContent, toHaveAttribute} = extensions
+expect.extend({toBeInTheDOM, toHaveTextContent, toHaveAttribute})

src/jest-extensions.js

@@ -1,4 +1,12 @@
-import {matcherHint, printReceived, printExpected} from 'jest-matcher-utils' //eslint-disable-line import/no-extraneous-dependencies
+//eslint-disable-next-line import/no-extraneous-dependencies
+import {
+  matcherHint,
+  printReceived,
+  printExpected,
+  stringify,
+  RECEIVED_COLOR as receivedColor,
+  EXPECTED_COLOR as expectedColor,
+} from 'jest-matcher-utils'
 import {matches} from './utils'
 
 function getDisplayName(subject) {
@@ -9,10 +17,30 @@ function getDisplayName(subject) {
   }
 }
 
+function checkHtmlElement(htmlElement) {
+  if (!(htmlElement instanceof HTMLElement)) {
+    throw new Error(
+      `The given subject is a ${getDisplayName(
+        htmlElement,
+      )}, not an HTMLElement`,
+    )
+  }
+}
+
 const assertMessage = (assertionName, message, received, expected) =>
   `${matcherHint(`${assertionName}`, 'received', '')} \n${message}: ` +
   `${printExpected(expected)} \nReceived: ${printReceived(received)}`
 
+function printAttribute(name, value) {
+  return value === undefined ? name : `${name}=${stringify(value)}`
+}
+
+function getAttributeComment(name, value) {
+  return value === undefined
+    ? `element.hasAttribute(${stringify(name)})`
+    : `element.getAttribute(${stringify(name)}) === ${stringify(value)}`
+}
+
 const extensions = {
   toBeInTheDOM(received) {
     getDisplayName(received)
@@ -42,13 +70,7 @@ const extensions = {
   },
 
   toHaveTextContent(htmlElement, checkWith) {
-    if (!(htmlElement instanceof HTMLElement))
-      throw new Error(
-        `The given subject is a ${getDisplayName(
-          htmlElement,
-        )}, not an HTMLElement`,
-      )
-
+    checkHtmlElement(htmlElement)
     const textContent = htmlElement.textContent
     const pass = matches(textContent, htmlElement, checkWith)
     if (pass) {
@@ -75,6 +97,41 @@ const extensions = {
       }
     }
   },
+
+  toHaveAttribute(htmlElement, name, expectedValue) {
+    checkHtmlElement(htmlElement)
+    const isExpectedValuePresent = expectedValue !== undefined
+    const hasAttribute = htmlElement.hasAttribute(name)
+    const receivedValue = htmlElement.getAttribute(name)
+    return {
+      pass: isExpectedValuePresent
+        ? hasAttribute && receivedValue === expectedValue
+        : hasAttribute,
+      message: () => {
+        const to = this.isNot ? 'not to' : 'to'
+        const receivedAttribute = receivedColor(
+          hasAttribute
+            ? printAttribute(name, receivedValue)
+            : 'attribute was not found',
+        )
+        const expectedMsg = `Expected the element ${to} have attribute:\n  ${expectedColor(
+          printAttribute(name, expectedValue),
+        )}`
+        const matcher = matcherHint(
+          `${this.isNot ? '.not' : ''}.toHaveAttribute`,
+          'element',
+          printExpected(name),
+          {
+            secondArgument: isExpectedValuePresent
+              ? printExpected(expectedValue)
+              : undefined,
+            comment: getAttributeComment(name, expectedValue),
+          },
+        )
+        return `${matcher}\n\n${expectedMsg}\nReceived:\n  ${receivedAttribute}`
+      },
+    }
+  },
 }
 
 export default extensions

tests/__tests__/components/Validate.vue

@@ -34,7 +34,6 @@ export default {
   },
   methods: {
     submit () {
-      this.$validator.validateAll()
     }
   }
 }

tests/__tests__/components/queries/Attribute.vue

@@ -0,0 +1,5 @@
+<template>
+  <button data-testid="ok-button" type="submit" disabled>
+    OK
+  </button>
+</template>

tests/__tests__/components/queries/index.js

@@ -1,4 +1,5 @@
 import AltText from './AltText'
+import Attribute from './Attribute'
 import Empty from './Empty'
 import LabelText from './LabelText'
 import Placeholder from './Placeholder'
@@ -9,6 +10,7 @@ import JestHelpers from './JestHelpers'
 
 export {
   AltText,
+  Attribute,
   Empty,
   GetByAltText,
   LabelText,

tests/__tests__/element-queries.js

@@ -3,6 +3,7 @@ import '../../src/extend-expect'
 
 import {
   Empty,
+  Attribute,
   GetByAltText,
   LabelText,
   LabelWithNoFormControl,
@@ -100,4 +101,30 @@ test('using jest helpers to assert element states', () => {
   ).toThrowError()
 })
 
+test('using jest helpers to check element attributes', () => {
+  const {queryByTestId} = render(Attribute)
+
+  expect(queryByTestId('ok-button')).toHaveAttribute('disabled')
+  expect(queryByTestId('ok-button')).toHaveAttribute('type')
+  expect(queryByTestId('ok-button')).not.toHaveAttribute('class')
+  expect(queryByTestId('ok-button')).toHaveAttribute('type', 'submit')
+  expect(queryByTestId('ok-button')).not.toHaveAttribute('type', 'button')
+
+  expect(() =>
+    expect(queryByTestId('ok-button')).not.toHaveAttribute('disabled'),
+  ).toThrowError()
+  expect(() =>
+    expect(queryByTestId('ok-button')).not.toHaveAttribute('type'),
+  ).toThrowError()
+  expect(() =>
+    expect(queryByTestId('ok-button')).toHaveAttribute('class'),
+  ).toThrowError()
+  expect(() =>
+    expect(queryByTestId('ok-button')).not.toHaveAttribute('type', 'submit'),
+  ).toThrowError()
+  expect(() =>
+    expect(queryByTestId('ok-button')).toHaveAttribute('type', 'button'),
+  ).toThrowError()
+})
+
 /* eslint jsx-a11y/label-has-for:0 */

tests/__tests__/form.js

@@ -1,8 +1,8 @@
 import Vue from 'vue'
-import { render, Simulate } from '../../src'
+import { render, Simulate, wait } from '../../src'
 import Login from './components/Login'
 
-test('login form submits', () => {
+test('login form submits', async () => {
   const fakeUser = {username: 'jackiechan', password: 'hiya! 🥋'}
   const handleSubmit = jest.fn()
   const {updateState, getByLabelText, getByText} = render(
@@ -16,8 +16,6 @@ test('login form submits', () => {
   // Act - this is waiting on an issue in @vue/test-utils to allow v-model to be updated by
   // changes to DOM elements
 
-  // Simulate.change(usernameNode, fakeUser.username)
-  // Simulate.change(passwordNode, fakeUser.password)
   updateState(fakeUser)
 
   // NOTE: in jsdom, it's not possible to trigger a form submission

tests/__tests__/validate-plugin.js

@@ -6,7 +6,7 @@ import '../../src/extend-expect'
 import Validate from './components/Validate'
 
 test('can validate using plugin', async () => {
-  const { getByPlaceholderText, queryByTestId, html } = render(Validate, {},
+  const { getByPlaceholderText, queryByTestId } = render(Validate, {},
     vue => vue.use(VeeValidate, { events: 'blur' }))
 
   const usernameInput = getByPlaceholderText('Username...')
@@ -15,6 +15,5 @@ test('can validate using plugin', async () => {
 
   await wait()
 
-  console.log(html())
   expect(queryByTestId('username-errors')).toBeInTheDOM()
 })