Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adds HtmlElement pretty-format plugin. #3230

Merged
merged 13 commits into from
Apr 17, 2017
Merged

Adds HtmlElement pretty-format plugin. #3230

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
ec3a6a0
Merge pull request #1 from facebook/master
mute Mar 30, 2017
15ef7d9
Adds HtmlElement pretty-format plugin.
Mar 30, 2017
311afcf
Adds missing copyright and 'use strict'
Mar 30, 2017
6bcf0fa
Fixes variable naming / formatting.
Mar 30, 2017
478f108
Improves performance for isHtmlElement.
Apr 10, 2017
33d2633
Merge remote-tracking branch 'jester/master'
Apr 11, 2017
25c85c8
Merge branch 'master' into 2146-pretty-jsdom
Apr 11, 2017
55f797f
Updating snapshots
Apr 11, 2017
cb5781a
Revert "Updating snapshots"
Apr 11, 2017
4195c59
Fixes node 4 syntax
Apr 11, 2017
b3cff75
- Switches to tagName rather than constructor.
Apr 13, 2017
b08ee74
Adds HTMLElement Plugin usage.
Apr 13, 2017
e86a25d
Removes `HTMLElement` fallback in favor of tagName
Apr 13, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/jest-diff/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ import type {DiffOptions} from './diffStrings';
const ReactElementPlugin = require('pretty-format/build/plugins/ReactElement');
const ReactTestComponentPlugin = require('pretty-format/build/plugins/ReactTestComponent');
const AsymmetricMatcherPlugin = require('pretty-format/build/plugins/AsymmetricMatcher');
const HTMLElementPlugin = require('pretty-format/build/plugins/HTMLElement');
const ImmutablePlugins = require('pretty-format/build/plugins/ImmutablePlugins');

const chalk = require('chalk');
Expand All @@ -31,6 +32,7 @@ const PLUGINS = [
ReactTestComponentPlugin,
ReactElementPlugin,
AsymmetricMatcherPlugin,
HTMLElementPlugin,
].concat(ImmutablePlugins);
const FORMAT_OPTIONS = {
plugins: PLUGINS,
Expand Down
9 changes: 6 additions & 3 deletions packages/jest-matcher-utils/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,14 @@ const chalk = require('chalk');
const prettyFormat = require('pretty-format');
const AsymmetricMatcherPlugin = require('pretty-format/build/plugins/AsymmetricMatcher');
const ReactElementPlugin = require('pretty-format/build/plugins/ReactElement');
const HTMLElementPlugin = require('pretty-format/build/plugins/HTMLElement');
const ImmutablePlugins = require('pretty-format/build/plugins/ImmutablePlugins');

const PLUGINS = [AsymmetricMatcherPlugin, ReactElementPlugin].concat(
ImmutablePlugins,
);
const PLUGINS = [
AsymmetricMatcherPlugin,
ReactElementPlugin,
HTMLElementPlugin,
].concat(ImmutablePlugins);

export type ValueType =
| 'array'
Expand Down
2 changes: 1 addition & 1 deletion packages/jest-snapshot/src/__tests__/plugins-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const testPath = names => {
it('gets plugins', () => {
const {getSerializers} = require('../plugins');
const plugins = getSerializers();
expect(plugins.length).toBe(8);
expect(plugins.length).toBe(9);
});

it('adds plugins from an empty array', () => testPath([]));
Expand Down
9 changes: 6 additions & 3 deletions packages/jest-snapshot/src/plugins.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,14 @@

const ReactElementPlugin = require('pretty-format/build/plugins/ReactElement');
const ReactTestComponentPlugin = require('pretty-format/build/plugins/ReactTestComponent');
const HTMLElementPlugin = require('pretty-format/build/plugins/HTMLElement');
const ImmutablePlugins = require('pretty-format/build/plugins/ImmutablePlugins');

let PLUGINS = [ReactElementPlugin, ReactTestComponentPlugin].concat(
ImmutablePlugins,
);
let PLUGINS = [
ReactElementPlugin,
ReactTestComponentPlugin,
HTMLElementPlugin,
].concat(ImmutablePlugins);

// Prepend to list so the last added is the first tested.
exports.addSerializer = (plugin: any) => {
Expand Down
25 changes: 10 additions & 15 deletions packages/pretty-format/src/__tests__/HTMLElementPlugin-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,56 +21,51 @@ expect.extend({toPrettyPrintTo});

describe('HTMLElement Plugin', () => {
it('supports a single HTML element', () => {
expect(document.createElement('div')).toPrettyPrintTo('<HTMLDivElement />');
expect(document.createElement('div')).toPrettyPrintTo('<div />');
});

it('supports an HTML element with a class property', () => {
const parent = document.createElement('div');
parent.className = 'classy';

expect(parent).toPrettyPrintTo('<HTMLDivElement\n class="classy"\n/>');
expect(parent).toPrettyPrintTo('<div\n class="classy"\n/>');
});

it('supports an HTML element with a title property', () => {
const parent = document.createElement('div');
parent.title = 'title text';

expect(parent).toPrettyPrintTo('<HTMLDivElement\n title="title text"\n/>');
expect(parent).toPrettyPrintTo('<div\n title="title text"\n/>');
});

it('supports an HTML element with a single attribute', () => {
const parent = document.createElement('div');
parent.setAttribute('class', 'classy');

expect(parent).toPrettyPrintTo('<HTMLDivElement\n class="classy"\n/>');
expect(parent).toPrettyPrintTo('<div\n class="classy"\n/>');
});

it('supports an HTML element with multiple attributes', () => {
const parent = document.createElement('div');
parent.setAttribute('id', 123);
parent.setAttribute('class', 'classy');

expect(
parent,
).toPrettyPrintTo('<HTMLDivElement\n id="123"\n class="classy"\n/>', {});
expect(parent).toPrettyPrintTo('<div\n id="123"\n class="classy"\n/>', {
});
});

it('supports an element with text content', () => {
const parent = document.createElement('div');
parent.innerHTML = 'texty texty';

expect(parent).toPrettyPrintTo(
'<HTMLDivElement>\n texty texty\n</HTMLDivElement>',
);
expect(parent).toPrettyPrintTo('<div>\n texty texty\n</div>');
});

it('supports nested elements', () => {
const parent = document.createElement('div');
const child = document.createElement('span');
parent.appendChild(child);
expect(parent).toPrettyPrintTo(
'<HTMLDivElement>\n <HTMLSpanElement />\n</HTMLDivElement>',
);
expect(parent).toPrettyPrintTo('<div>\n <span />\n</div>');
});

it('supports nested elements with attributes', () => {
Expand All @@ -82,7 +77,7 @@ describe('HTMLElement Plugin', () => {
child.setAttribute('class', 'classy');

expect(parent).toPrettyPrintTo(
'<HTMLDivElement>\n <HTMLSpanElement\n id="123"\n class="classy"\n />\n</HTMLDivElement>',
'<div>\n <span\n id="123"\n class="classy"\n />\n</div>',
);
});

Expand All @@ -93,7 +88,7 @@ describe('HTMLElement Plugin', () => {
child.textContent = 'texty texty';

expect(parent).toPrettyPrintTo(
'<HTMLDivElement>\n <HTMLSpanElement>\n texty texty\n </HTMLSpanElement>\n</HTMLDivElement>',
'<div>\n <span>\n texty texty\n </span>\n</div>',
);
});
});
3 changes: 2 additions & 1 deletion packages/pretty-format/src/plugins/HTMLElement.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ const test = isHTMLElement;

function isHTMLElement(value: any) {
return value !== undefined &&
value !== null &&
value.nodeType === 1 &&
value.constructor !== undefined &&
value.constructor.name !== undefined &&
Expand Down Expand Up @@ -60,7 +61,7 @@ const print = (
) => {
let result = colors.tag.open + '<';
const elementName = element.constructor
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

const elementName = element.tagName

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

tagName defaults to all uppercase, which felt odd to me -- should I leave it that way or is the .toLowerCase() call okay here?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lower case is better, leave it as is :)

? element.constructor.name
? element.tagName.toLowerCase()
: 'HTMLElement';
result += elementName + colors.tag.close;

Expand Down