diff --git a/src/__tests__/to-have-tag-name.js b/src/__tests__/to-have-tag-name.js new file mode 100644 index 0000000..23af5f8 --- /dev/null +++ b/src/__tests__/to-have-tag-name.js @@ -0,0 +1,18 @@ +import {render} from './helpers/test-utils' + +describe('.toHaveTagName', () => { + test('handles HTML elements', () => { + const {container} = render(` +
+
+
+ + `) + + expect(container.querySelector('div')).toHaveTagName('div') + expect(container.querySelector('figure')).toHaveTagName('figure') + expect(container.querySelector('section')).toHaveTagName('section') + expect(container.querySelector('span')).toHaveTagName('span') + expect(container.querySelector('span')).not.toHaveTagName('div') + }) +}) diff --git a/src/matchers.js b/src/matchers.js index f67054f..f902502 100644 --- a/src/matchers.js +++ b/src/matchers.js @@ -11,6 +11,7 @@ export {toHaveRole} from './to-have-role' export {toHaveAccessibleName} from './to-have-accessible-name' export {toHaveAttribute} from './to-have-attribute' export {toHaveClass} from './to-have-class' +export {toHaveTagName} from './to-have-tag-name' export {toHaveStyle} from './to-have-style' export {toHaveFocus} from './to-have-focus' export {toHaveFormValues} from './to-have-form-values' diff --git a/src/to-have-tag-name.js b/src/to-have-tag-name.js new file mode 100644 index 0000000..fb34f28 --- /dev/null +++ b/src/to-have-tag-name.js @@ -0,0 +1,38 @@ +import {checkHtmlElement, getMessage} from './utils' + +export function toHaveTagName(htmlElement, expectedTagName) { + checkHtmlElement(htmlElement, toHaveTagName, this) + + if (!isValidTagName(expectedTagName)) { + throw new Error( + `Expected tag name must be a single lowercase word, got ${expectedTagName}`, + ) + } + + const actualTagName = htmlElement.tagName.toLowerCase() + const pass = expectedTagName === actualTagName + + return { + pass, + + message: () => { + const to = this.isNot ? 'not to' : 'to' + return getMessage( + this, + this.utils.matcherHint( + `${this.isNot ? '.not' : ''}.${toHaveTagName.name}`, + 'element', + '', + ), + `Expected element ${to} have tag name`, + expectedTagName, + 'Received', + actualTagName, + ) + }, + } +} + +function isValidTagName(value) { + return typeof value === 'string' && /^[a-z]+$/.test(value) +}