Skip to content

Commit

Permalink
adding support for react components in Immutable pretty-format plugins
Browse files Browse the repository at this point in the history
  • Loading branch information
@cpenarrieta
cpenarrieta committed Feb 24, 2017
1 parent 2cd9b50 commit e981653
Show file tree
Hide file tree
Showing 8 changed files with 176 additions and 18 deletions.
92 changes: 92 additions & 0 deletions packages/pretty-format/src/__tests__/ImmutablePlugins-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,11 @@
* LICENSE file in the root directory of this source tree. An additional grant
* of patent rights can be found in the PATENTS file in the same directory.
*/
/* eslint-disable max-len */

'use strict';

const React = require('react');
const prettyFormat = require('../');
const Immutable = require('immutable');
const ImmutableOrderedSet = require('../plugins/ImmutableOrderedSet');
Expand Down Expand Up @@ -67,6 +69,21 @@ describe('ImmutableOrderedSet plugin', () => {
'Immutable.OrderedSet { 1, 2, 3 }'
);
});

it('supports object elements', () => {
assertImmutableObject(
Immutable.OrderedSet([{a: 1, b: 2, c: 3}]),
'Immutable.OrderedSet { \"Object {\\n \\\"a\\\": 1,\\n \\\"b\\\": 2,\\n \\\"c\\\": 3,\\n}\" }'
);
});

it('supports React components', () => {
const reactComponent = React.createElement('Mouse', null, 'Hello World');
assertImmutableObject(
Immutable.OrderedSet([reactComponent, reactComponent]),
'Immutable.OrderedSet { \"<Mouse>\\n Hello World\\n</Mouse>\" }'
);
});
});

describe('ImmutableList plugin', () => {
Expand Down Expand Up @@ -104,6 +121,21 @@ describe('ImmutableList plugin', () => {
'Immutable.List [ 1, 2, 3 ]'
);
});

it('supports object elements', () => {
assertImmutableObject(
Immutable.List([{a: 1, b: 2, c: 3}]),
'Immutable.List [ \"Object {\\n \\\"a\\\": 1,\\n \\\"b\\\": 2,\\n \\\"c\\\": 3,\\n}\" ]'
);
});

it('supports React components', () => {
const reactComponent = React.createElement('Mouse', null, 'Hello World');
assertImmutableObject(
Immutable.List([reactComponent, reactComponent]),
'Immutable.List [ \"<Mouse>\\n Hello World\\n</Mouse>\", \"<Mouse>\\n Hello World\\n</Mouse>\" ]'
);
});
});

describe('ImmutableStack plugin', () => {
Expand Down Expand Up @@ -141,6 +173,21 @@ describe('ImmutableStack plugin', () => {
'Immutable.Stack [ 1, 2, 3 ]'
);
});

it('supports object elements', () => {
assertImmutableObject(
Immutable.Stack([{a: 1, b: 2, c: 3}]),
'Immutable.Stack [ \"Object {\\n \\\"a\\\": 1,\\n \\\"b\\\": 2,\\n \\\"c\\\": 3,\\n}\" ]'
);
});

it('supports React components', () => {
const reactComponent = React.createElement('Mouse', null, 'Hello World');
assertImmutableObject(
Immutable.Stack([reactComponent, reactComponent]),
'Immutable.Stack [ \"<Mouse>\\n Hello World\\n</Mouse>\", \"<Mouse>\\n Hello World\\n</Mouse>\" ]'
);
});
});

describe('ImmutableSet plugin', () => {
Expand Down Expand Up @@ -178,6 +225,21 @@ describe('ImmutableSet plugin', () => {
'Immutable.Set { 1, 2, 3 }'
);
});

it('supports object elements', () => {
assertImmutableObject(
Immutable.Set([{a: 1, b: 2, c: 3}]),
'Immutable.Set { \"Object {\\n \\\"a\\\": 1,\\n \\\"b\\\": 2,\\n \\\"c\\\": 3,\\n}\" }'
);
});

it('supports React components', () => {
const reactComponent = React.createElement('Mouse', null, 'Hello World');
assertImmutableObject(
Immutable.Set([reactComponent, reactComponent]),
'Immutable.Set { \"<Mouse>\\n Hello World\\n</Mouse>\" }'
);
});
});

describe('ImmutableMap plugin', () => {
Expand All @@ -201,6 +263,21 @@ describe('ImmutableMap plugin', () => {
'Immutable.Map { "a": 1, "b": 2, "c": 3 }'
);
});

it('supports object elements', () => {
assertImmutableObject(
Immutable.Map({key: {a: 1, b: 2, c: 3}}),
'Immutable.Map { \"key\": \"Object {\\n \\\"a\\\": 1,\\n \\\"b\\\": 2,\\n \\\"c\\\": 3,\\n}\" }'
);
});

it('supports React components', () => {
const reactComponent = React.createElement('Mouse', null, 'Hello World');
assertImmutableObject(
Immutable.Map({a: reactComponent, b: reactComponent}),
'Immutable.Map { \"a\": \"<Mouse>\\n Hello World\\n</Mouse>\", \"b\": \"<Mouse>\\n Hello World\\n</Mouse>\" }'
);
});
});

describe('ImmutableOrderedMap plugin', () => {
Expand All @@ -224,4 +301,19 @@ describe('ImmutableOrderedMap plugin', () => {
'Immutable.OrderedMap { "a": 1, "b": 2, "c": 3 }'
);
});

it('supports object elements', () => {
assertImmutableObject(
Immutable.OrderedMap({key: {a: 1, b: 2, c: 3}}),
'Immutable.OrderedMap { \"key\": \"Object {\\n \\\"a\\\": 1,\\n \\\"b\\\": 2,\\n \\\"c\\\": 3,\\n}\" }'
);
});

it('supports React components', () => {
const reactComponent = React.createElement('Mouse', null, 'Hello World');
assertImmutableObject(
Immutable.OrderedMap({a: reactComponent, b: reactComponent}),
'Immutable.OrderedMap { \"a\": \"<Mouse>\\n Hello World\\n</Mouse>\", \"b\": \"<Mouse>\\n Hello World\\n</Mouse>\" }'
);
});
});
12 changes: 9 additions & 3 deletions packages/pretty-format/src/plugins/ImmutableList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,21 @@

'use strict';

const IMMUTABLE_NAMESPACE = 'Immutable.';
const traverseImmutable = require('./traverseImmutable');
const IS_LIST_SENTINEL = '@@__IMMUTABLE_LIST__@@';

const isList = (maybeList: Object) => {
return !!(maybeList && maybeList[IS_LIST_SENTINEL]);
};

const printImmutableList = (val: Object) => {
return IMMUTABLE_NAMESPACE + val.toString();
const printImmutableList = (
val: Object,
print: Function,
indent: Function,
opts: Object,
colors: Object
) => {
return traverseImmutable(val, print, indent, opts, colors);
};

module.exports = {
Expand Down
12 changes: 9 additions & 3 deletions packages/pretty-format/src/plugins/ImmutableMap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,21 @@

'use strict';

const IMMUTABLE_NAMESPACE = 'Immutable.';
const traverseImmutable = require('./traverseImmutable');
const IS_MAP_SENTINEL = '@@__IMMUTABLE_MAP__@@';

const isMap = (maybeMap: Object) => {
return !!(maybeMap && maybeMap[IS_MAP_SENTINEL]);
};

const printImmutableMap = (val: Object) => {
return IMMUTABLE_NAMESPACE + val.toString();
const printImmutableMap = (
val: Object,
print: Function,
indent: Function,
opts: Object,
colors: Object
) => {
return traverseImmutable(val, print, indent, opts, colors);
};

module.exports = {
Expand Down
12 changes: 9 additions & 3 deletions packages/pretty-format/src/plugins/ImmutableOrderedMap.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

'use strict';

const IMMUTABLE_NAMESPACE = 'Immutable.';
const traverseImmutable = require('./traverseImmutable');
const IS_MAP_SENTINEL = '@@__IMMUTABLE_MAP__@@';
const IS_ORDERED_SENTINEL = '@@__IMMUTABLE_ORDERED__@@';

Expand All @@ -25,8 +25,14 @@ const isOrderedMap = (maybeOrderedMap: Object) => {
return isMap(maybeOrderedMap) && isOrdered(maybeOrderedMap);
};

const printImmutableOrderedMap = (val: Object) => {
return IMMUTABLE_NAMESPACE + val.toString();
const printImmutableOrderedMap = (
val: Object,
print: Function,
indent: Function,
opts: Object,
colors: Object
) => {
return traverseImmutable(val, print, indent, opts, colors);
};

module.exports = {
Expand Down
12 changes: 9 additions & 3 deletions packages/pretty-format/src/plugins/ImmutableOrderedSet.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@

'use strict';

const IMMUTABLE_NAMESPACE = 'Immutable.';
const traverseImmutable = require('./traverseImmutable');
const IS_SET_SENTINEL = '@@__IMMUTABLE_SET__@@';
const IS_ORDERED_SENTINEL = '@@__IMMUTABLE_ORDERED__@@';

Expand All @@ -25,8 +25,14 @@ const isOrderedSet = (maybeOrderedSet: Object) => {
return isSet(maybeOrderedSet) && isOrdered(maybeOrderedSet);
};

const printImmutableOrderedSet = (val: Object) => {
return IMMUTABLE_NAMESPACE + val.toString();
const printImmutableOrderedSet = (
val: Object,
print: Function,
indent: Function,
opts: Object,
colors: Object
) => {
return traverseImmutable(val, print, indent, opts, colors);
};

module.exports = {
Expand Down
12 changes: 9 additions & 3 deletions packages/pretty-format/src/plugins/ImmutableSet.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,21 @@

'use strict';

const IMMUTABLE_NAMESPACE = 'Immutable.';
const traverseImmutable = require('./traverseImmutable');
const IS_SET_SENTINEL = '@@__IMMUTABLE_SET__@@';

const isSet = (maybeSet: Object) => {
return !!(maybeSet && maybeSet[IS_SET_SENTINEL]);
};

const printImmutableSet = (val: Object) => {
return IMMUTABLE_NAMESPACE + val.toString();
const printImmutableSet = (
val: Object,
print: Function,
indent: Function,
opts: Object,
colors: Object
) => {
return traverseImmutable(val, print, indent, opts, colors);
};

module.exports = {
Expand Down
12 changes: 9 additions & 3 deletions packages/pretty-format/src/plugins/ImmutableStack.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,21 @@

'use strict';

const IMMUTABLE_NAMESPACE = 'Immutable.';
const traverseImmutable = require('./traverseImmutable');
const IS_STACK_SENTINEL = '@@__IMMUTABLE_STACK__@@';

const isStack = (maybeStack: Object) => {
return !!(maybeStack && maybeStack[IS_STACK_SENTINEL]);
};

const printImmutableStack = (val: Object) => {
return IMMUTABLE_NAMESPACE + val.toString();
const printImmutableStack = (
val: Object,
print: Function,
indent: Function,
opts: Object,
colors: Object
) => {
return traverseImmutable(val, print, indent, opts, colors);
};

module.exports = {
Expand Down
30 changes: 30 additions & 0 deletions packages/pretty-format/src/plugins/traverseImmutable.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
'use strict';

const reactPlugin = require('./ReactElement');
const prettyFormat = require('../');

const IMMUTABLE_NAMESPACE = 'Immutable.';

const traverseImmutable = (
val: Object,
print: Function,
indent: Function,
opts: Object,
colors: Object
) : string => {
let result = IMMUTABLE_NAMESPACE;

result += val.map((item: any) => {
if (reactPlugin.test(item)) {
return reactPlugin.print(item, print, indent, opts, colors);
} else if (item instanceof Object) {
return prettyFormat(item);

This comment has been minimized.

Sign in to view

Copy link
@thymikee

thymikee Feb 24, 2017

Collaborator

You should use print instead of prettyFormat and reactPlugin.print here. Plugins should be automatically resolved then?

This comment has been minimized.

Sign in to view

Copy link
@cpenarrieta

cpenarrieta Feb 24, 2017

Author Contributor

using print works for objects and arrays but not for React components, I'm trying to find out why.
Any clue?
this is what I get if I use only print {"$$typeof": Symbol(react.element), "_owner": null, "_store": {}, "key": null, "props": {}, "ref": null, "type": "Mouse"}

This comment has been minimized.

Sign in to view

Copy link
@cpenarrieta

cpenarrieta Feb 25, 2017 •
edited
Loading

Author Contributor

@thymikee I updated my method using print instead of prettyFormat
} else {
return item;
}
});

return result;
};

module.exports = traverseImmutable;

0 comments on commit e981653

Please sign in to comment.