Skip to content

isStatelessComponent: Handle Logical and Conditional Expressions #245

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

Merged
merged 1 commit into from
Feb 7, 2018
Merged

isStatelessComponent: Handle Logical and Conditional Expressions #245

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
236 changes: 116 additions & 120 deletions src/utils/__tests__/isStatelessComponent-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,109 +22,122 @@ describe('isStatelessComponent', () => {
({statement, parse} = require('../../../tests/utils'));
});

describe('Stateless Function Components with JSX', () => {
it('accepts simple arrow function components', () => {
var def = parse(
'var Foo = () => <div />'
).get('body', 0).get('declarations', [0]).get('init');
expect(isStatelessComponent(def)).toBe(true);
});

it('accepts simple function expressions components', () => {
var def = parse(
'let Foo = function() { return <div />; };'
).get('body', 0).get('declarations', [0]).get('init');
expect(isStatelessComponent(def)).toBe(true);
});

it('accepts simple function declaration components', () => {
var def = parse('function Foo () { return <div /> }').get('body', 0);
expect(isStatelessComponent(def)).toBe(true);
});
});

describe('Stateless Function Components with React.createElement', () => {
it('accepts simple arrow function components', () => {
var def = parse(`
var AlphaBetters = require('react');
var Foo = () => AlphaBetters.createElement("div", null);
`).get('body', 1).get('declarations', [0]).get('init');

expect(isStatelessComponent(def)).toBe(true);
});

it('accepts simple function expressions components', () => {
var def = parse(`
const componentIdentifiers = {
'JSX': '<div />',
'React.createElement': 'React.createElement("div", null)',
'React.cloneElement': 'React.cloneElement(children, null)',
'React.Children.only()': 'React.Children.only(children, null)',
};

const componentStyle = {
'ArrowExpression': [
(name, expr) => `var ${name} = () => (${expr});`,
['declarations', 0, 'init'],
],
'ArrowBlock': [
(name, expr) => `var ${name} = () => { return (${expr}); };`,
['declarations', 0, 'init'],
],
'FunctionExpression': [
(name, expr) => `var ${name} = function () { return (${expr}); }`,
['declarations', 0, 'init'],
],
'FunctionDeclaration': [
(name, expr) => `function ${name} () { return (${expr}); }`,
[],
],
};

const modifiers = {
'default': (expr) => expr,
'conditional consequent': (expr) => `x ? ${expr} : null`,
'conditional alternate': (expr) => `x ? null : ${expr}`,
'OR left': (expr) => `${expr} || null`,
'AND right': (expr) => `x && ${expr}`,
};

const cases = {
'no reference': [
(expr, componentFactory) => `
var React = require('react');
let Foo = function() { return React.createElement("div", null); };
`).get('body', 1).get('declarations', [0]).get('init');

expect(isStatelessComponent(def)).toBe(true);
});

it('accepts simple function declaration components', () => {
var def = parse(`
${componentFactory('Foo', expr)}
`,
['body', 1],
],
'with Identifier reference': [
(expr, componentFactory) => `
var React = require('react');
function Foo () { return React.createElement("div", null); }
`).get('body', 1);
expect(isStatelessComponent(def)).toBe(true);
});
});

describe('Stateless Function Components with React.cloneElement', () => {
it('accepts simple arrow function components', () => {
var def = parse(`
var AlphaBetters = require('react');
var Foo = ({ children }) => AlphaBetters.cloneElement(children, null);
`).get('body', 1).get('declarations', [0]).get('init');

expect(isStatelessComponent(def)).toBe(true);
});

it('accepts simple function expressions components', () => {
var def = parse(`
var jsx = (${expr});
${componentFactory('Foo', 'jsx')}
`,
['body', 2],
],
};

Object.keys(componentStyle).forEach((name) => {
cases[`with ${name} reference`] = [
(expr, componentFactory) => `
var React = require('react');
let Foo = function({ children }) { return React.cloneElement(children, null); };
`).get('body', 1).get('declarations', [0]).get('init');

expect(isStatelessComponent(def)).toBe(true);
});

it('accepts simple function declaration components', () => {
var def = parse(`
var React = require('react');
function Foo ({ children }) { return React.cloneElement(children, null); }
`).get('body', 1);
expect(isStatelessComponent(def)).toBe(true);
});
${componentStyle[name][0]('jsx', expr)}
${componentFactory('Foo', 'jsx()')}
`,
['body', 2],
]
});

describe('Stateless Function Components with React.Children.only', () => {
it('accepts simple arrow function components', () => {
var def = parse(`
var React = require('react');
var Foo = ({ children }) => React.Children.only(children, null);
`).get('body', 1).get('declarations', [0]).get('init');

expect(isStatelessComponent(def)).toBe(true);
const negativeModifiers = {
'nested ArrowExpression': (expr) => `() => ${expr}`,
'nested ArrowBlock': (expr) => `() => { return ${expr} }`,
'nested FunctionExpression': (expr) => `function () { return ${expr} }`,
};

Object.keys(cases).forEach((name) => {
const [caseFactory, caseSelector] = cases[name];

describe(name, () => {
Object.keys(componentIdentifiers).forEach((componentIdentifierName) => {

const returnExpr = componentIdentifiers[componentIdentifierName];
describe(componentIdentifierName, () => {
Object.keys(componentStyle).forEach((componentName) => {
const [componentFactory, componentSelector] = componentStyle[componentName];
describe(componentName, () => {

Object.keys(modifiers).forEach((modifierName) => {
const modifierFactory = modifiers[modifierName];

it(modifierName, () => {
const code = caseFactory(modifierFactory(returnExpr), componentFactory);
const def = parse(code).get(...caseSelector, ...componentSelector);
expect(isStatelessComponent(def)).toBe(true);
});
});

Object.keys(negativeModifiers).forEach((modifierName) => {
const modifierFactory = negativeModifiers[modifierName];

it(modifierName, () => {
const code = caseFactory(modifierFactory(returnExpr), componentFactory);
const def = parse(code).get(...caseSelector, ...componentSelector);
expect(isStatelessComponent(def)).toBe(false);
});
});
});
});
});
});
});
});

it('accepts simple function expressions components', () => {
describe('Stateless Function Components with React.createElement', () => {
it('accepts different name than React', () => {
var def = parse(`
var React = require('react');
let Foo = function({ children }) { return React.Children.only(children, null); };
var AlphaBetters = require('react');
var Foo = () => AlphaBetters.createElement("div", null);
`).get('body', 1).get('declarations', [0]).get('init');

expect(isStatelessComponent(def)).toBe(true);
});

it('accepts simple function declaration components', () => {
var def = parse(`
var React = require('react');
function Foo ({ children }) { return React.Children.only(children, null); }
`).get('body', 1);
expect(isStatelessComponent(def)).toBe(true);
});
});

describe('Stateless Function Components inside module pattern', () => {
Expand Down Expand Up @@ -190,21 +203,6 @@ describe('isStatelessComponent', () => {

expect(isStatelessComponent(def)).toBe(false);
});

it('does not mark containing functions as StatelessComponents', () => {
var def = parse(`
var React = require('react');
function Foo (props) {
function Bar() {
return React.createElement("div", props);
}

return {Bar}
}
`).get('body', 1);

expect(isStatelessComponent(def)).toBe(false);
});
});

describe('resolving return values', () => {
Expand All @@ -216,6 +214,18 @@ describe('isStatelessComponent', () => {
});
}

it('does not see ifs as separate block', () => {
var def = statement(`
function Foo (props) {
if (x) {
return <div />;
}
}
`);

expect(isStatelessComponent(def)).toBe(true);
});

test('handles simple resolves', `
var React = require('react');
function Foo (props) {
Expand Down Expand Up @@ -282,20 +292,6 @@ describe('isStatelessComponent', () => {
}
`);

test('handles external reference member call expression resolves', `
var React = require('react');
function Foo (props) {
var member = () => <div />;
var obj = {
deep: {
member: member
}
};

return obj.deep.member();
}
`);

test('handles all sorts of JavaScript things', `
var React = require('react');
function Foo (props) {
Expand Down
Loading