jsx-no-leaked-zero.js

/**
 * @fileoverview Prevent zero from being rendered on numerical condition
 * @author Mario Beltrán
 */

'use strict';

//------------------------------------------------------------------------------
// Requirements
//------------------------------------------------------------------------------

const RuleTester = require('eslint').RuleTester;
const rule = require('../../../lib/rules/jsx-no-leaked-zero');

const parsers = require('../../helpers/parsers');

const parserOptions = {
  ecmaVersion: 2018,
  sourceType: 'module',
  ecmaFeatures: {
    jsx: true,
  },
};

//------------------------------------------------------------------------------
// Tests
//------------------------------------------------------------------------------

const ruleTester = new RuleTester({ parserOptions });
ruleTester.run('jsx-no-leaked-zero', rule, {
  valid: parsers.all([
    {
      code: `
        const Component = () => {
          return <div>{customTitle || defaultTitle}</div>
        }
      `,
    },
    {
      code: `
        const Component = ({ elements }) => {
          return <div>{elements}</div>
        }
      `,
    },
    {
      code: `
        const Component = ({ elements }) => {
          return <div>There are {elements.length} elements</div>
        }
      `,
    },
    {
      code: `
        const Component = ({ elements, count }) => {
          return <div>{!count && 'No results found'}</div>
        }
      `,
    },
    {
      code: `
        const Component = ({ elements }) => {
          return <div>{!!elements.length && <List elements={elements}/>}</div>
        }
      `,
    },
    {
      code: `
        const Component = ({ elements }) => {
          return <div>{Boolean(elements.length) && <List elements={elements}/>}</div>
        }
      `,
    },
    {
      code: `
        const Component = ({ elements }) => {
          return <div>{elements.length > 0 && <List elements={elements}/>}</div>
        }
      `,
    },
    {
      code: `
        const Component = ({ elements }) => {
          return <div>{elements.length ? <List elements={elements}/> : null}</div>
        }
      `,
    },
    {
      code: `
        const Component = ({ elements, count }) => {
          return <div>{count ? <List elements={elements}/> : null}</div>
        }
      `,
    },
    {
      options: [{ validFixStrategies: ['ternary'] }],
      code: `
        const Component = ({ elements, count }) => {
          return <div>{count ? <List elements={elements}/> : null}</div>
        }
      `,
    },
    {
      options: [{ validFixStrategies: ['cast'] }],
      code: `
        const Component = ({ elements, count }) => {
          return <div>{!!count && <List elements={elements}/>}</div>
        }
      `,
    },
    {
      options: [{ validFixStrategies: ['cast', 'ternary'] }],
      code: `
        const Component = ({ elements, count }) => {
          return <div>{count ? <List elements={elements}/> : null}</div>
        }
      `,
    },
    {
      options: [{ validFixStrategies: ['cast', 'ternary'] }],
      code: `
        const Component = ({ elements, count }) => {
          return <div>{!!count && <List elements={elements}/>}</div>
        }
      `,
    },
  ]),

  invalid: parsers.all([
    // Invalid tests with both fix strategies (default)
    {
      code: `
        const Component = ({ count, title }) => {
          return <div>{count && title}</div>
        }
      `,
      errors: [{
        message: 'Potential numeric evaluation resulting in an unintentionally rendered `0`',
        line: 3,
        column: 24,
      }],
      output: `
        const Component = ({ count, title }) => {
          return <div>{count ? title : null}</div>
        }
      `,
    },
    {
      code: `
        const Component = ({ count }) => {
          return <div>{count && <span>There are {count} results</span>}</div>
        }
      `,
      errors: [{
        message: 'Potential numeric evaluation resulting in an unintentionally rendered `0`',
        line: 3,
        column: 24,
      }],
      output: `
        const Component = ({ count }) => {
          return <div>{count ? <span>There are {count} results</span> : null}</div>
        }
      `,
    },
    {
      code: `
        const Component = ({ elements }) => {
          return <div>{elements.length && <List elements={elements}/>}</div>
        }
      `,
      errors: [{
        message: 'Potential numeric evaluation resulting in an unintentionally rendered `0`',
        line: 3,
        column: 24,
      }],
      output: `
        const Component = ({ elements }) => {
          return <div>{elements.length ? <List elements={elements}/> : null}</div>
        }
      `,
    },
    {
      code: `
        const Component = ({ nestedCollection }) => {
          return <div>{nestedCollection.elements.length && <List elements={nestedCollection.elements}/>}</div>
        }
      `,
      errors: [{
        message: 'Potential numeric evaluation resulting in an unintentionally rendered `0`',
        line: 3,
        column: 24,
      }],
      output: `
        const Component = ({ nestedCollection }) => {
          return <div>{nestedCollection.elements.length ? <List elements={nestedCollection.elements}/> : null}</div>
        }
      `,
    },
    {
      code: `
        const Component = ({ elements }) => {
          return <div>{elements[0] && <List elements={elements}/>}</div>
        }
      `,
      errors: [{
        message: 'Potential numeric evaluation resulting in an unintentionally rendered `0`',
        line: 3,
        column: 24,
      }],
      output: `
        const Component = ({ elements }) => {
          return <div>{elements[0] ? <List elements={elements}/> : null}</div>
        }
      `,
    },
    {
      code: `
        const Component = ({ numberA, numberB }) => {
          return <div>{(numberA || numberB) && <Results>{numberA+numberB}</Results>}</div>
        }
      `,
      errors: [{
        message: 'Potential numeric evaluation resulting in an unintentionally rendered `0`',
        line: 3,
        column: 24,
      }],
      output: `
        const Component = ({ numberA, numberB }) => {
          return <div>{(numberA || numberB) ? <Results>{numberA+numberB}</Results> : null}</div>
        }
      `,
    },
    {
      code: `
        const Component = ({ numberA, numberB }) => {
          return <div>{(numberA || numberB) && <Results>{numberA+numberB}</Results>}</div>
        }
      `,
      options: [{ validFixStrategies: ['cast', 'ternary'] }],
      errors: [{
        message: 'Potential numeric evaluation resulting in an unintentionally rendered `0`',
        line: 3,
        column: 24,
      }],
      output: `
        const Component = ({ numberA, numberB }) => {
          return <div>{!!(numberA || numberB) && <Results>{numberA+numberB}</Results>}</div>
        }
      `,
    },

    // Invalid tests with "ternary" fix strategy
    {
      code: `
        const Component = ({ count, title }) => {
          return <div>{count && title}</div>
        }
      `,
      options: [{ validFixStrategies: ['ternary'] }],
      errors: [{
        message: 'Potential numeric evaluation resulting in an unintentionally rendered `0`',
        line: 3,
        column: 24,
      }],
      output: `
        const Component = ({ count, title }) => {
          return <div>{count ? title : null}</div>
        }
      `,
    },
    {
      code: `
        const Component = ({ count }) => {
          return <div>{count && <span>There are {count} results</span>}</div>
        }
      `,
      options: [{ validFixStrategies: ['ternary'] }],
      errors: [{
        message: 'Potential numeric evaluation resulting in an unintentionally rendered `0`',
        line: 3,
        column: 24,
      }],
      output: `
        const Component = ({ count }) => {
          return <div>{count ? <span>There are {count} results</span> : null}</div>
        }
      `,
    },
    {
      code: `
        const Component = ({ elements }) => {
          return <div>{elements.length && <List elements={elements}/>}</div>
        }
      `,
      options: [{ validFixStrategies: ['ternary'] }],
      errors: [{
        message: 'Potential numeric evaluation resulting in an unintentionally rendered `0`',
        line: 3,
        column: 24,
      }],
      output: `
        const Component = ({ elements }) => {
          return <div>{elements.length ? <List elements={elements}/> : null}</div>
        }
      `,
    },
    {
      code: `
        const Component = ({ nestedCollection }) => {
          return <div>{nestedCollection.elements.length && <List elements={nestedCollection.elements}/>}</div>
        }
      `,
      options: [{ validFixStrategies: ['ternary'] }],
      errors: [{
        message: 'Potential numeric evaluation resulting in an unintentionally rendered `0`',
        line: 3,
        column: 24,
      }],
      output: `
        const Component = ({ nestedCollection }) => {
          return <div>{nestedCollection.elements.length ? <List elements={nestedCollection.elements}/> : null}</div>
        }
      `,
    },
    {
      code: `
        const Component = ({ elements }) => {
          return <div>{elements[0] && <List elements={elements}/>}</div>
        }
      `,
      options: [{ validFixStrategies: ['ternary'] }],
      errors: [{
        message: 'Potential numeric evaluation resulting in an unintentionally rendered `0`',
        line: 3,
        column: 24,
      }],
      output: `
        const Component = ({ elements }) => {
          return <div>{elements[0] ? <List elements={elements}/> : null}</div>
        }
      `,
    },
    {
      code: `
        const Component = ({ numberA, numberB }) => {
          return <div>{(numberA || numberB) && <Results>{numberA+numberB}</Results>}</div>
        }
      `,
      options: [{ validFixStrategies: ['ternary'] }],
      errors: [{
        message: 'Potential numeric evaluation resulting in an unintentionally rendered `0`',
        line: 3,
        column: 24,
      }],
      output: `
        const Component = ({ numberA, numberB }) => {
          return <div>{(numberA || numberB) ? <Results>{numberA+numberB}</Results> : null}</div>
        }
      `,
    },

    // cases: boolean cast isn't valid if fix strategy is only "ternary"
    {
      code: `
        const Component = ({ someCondition, title }) => {
          return <div>{!someCondition && title}</div>
        }
      `,
      options: [{ validFixStrategies: ['ternary'] }],
      errors: [{
        message: 'Potential numeric evaluation resulting in an unintentionally rendered `0`',
        line: 3,
        column: 24,
      }],
      output: `
        const Component = ({ someCondition, title }) => {
          return <div>{!someCondition ? title : null}</div>
        }
      `,
    },
    {
      code: `
        const Component = ({ count, title }) => {
          return <div>{!!count && title}</div>
        }
      `,
      options: [{ validFixStrategies: ['ternary'] }],
      errors: [{
        message: 'Potential numeric evaluation resulting in an unintentionally rendered `0`',
        line: 3,
        column: 24,
      }],
      output: `
        const Component = ({ count, title }) => {
          return <div>{count ? title : null}</div>
        }
      `,
    },
    {
      code: `
        const Component = ({ count, title }) => {
          return <div>{count > 0 && title}</div>
        }
      `,
      options: [{ validFixStrategies: ['ternary'] }],
      errors: [{
        message: 'Potential numeric evaluation resulting in an unintentionally rendered `0`',
        line: 3,
        column: 24,
      }],
      output: `
        const Component = ({ count, title }) => {
          return <div>{count > 0 ? title : null}</div>
        }
      `,
    },
    {
      code: `
        const Component = ({ count, title }) => {
          return <div>{0 != count && title}</div>
        }
      `,
      options: [{ validFixStrategies: ['ternary'] }],
      errors: [{
        message: 'Potential numeric evaluation resulting in an unintentionally rendered `0`',
        line: 3,
        column: 24,
      }],
      output: `
        const Component = ({ count, title }) => {
          return <div>{0 != count ? title : null}</div>
        }
      `,
    },
    {
      code: `
        const Component = ({ count, total, title }) => {
          return <div>{count < total && title}</div>
        }
      `,
      options: [{ validFixStrategies: ['ternary'] }],
      errors: [{
        message: 'Potential numeric evaluation resulting in an unintentionally rendered `0`',
        line: 3,
        column: 24,
      }],
      output: `
        const Component = ({ count, total, title }) => {
          return <div>{count < total ? title : null}</div>
        }
      `,
    },
    {
      code: `
        const Component = ({ count, title, somethingElse }) => {
          return <div>{!!(count && somethingElse) && title}</div>
        }
      `,
      options: [{ validFixStrategies: ['ternary'] }],
      errors: [{
        message: 'Potential numeric evaluation resulting in an unintentionally rendered `0`',
        line: 3,
        column: 24,
      }],
      output: `
        const Component = ({ count, title, somethingElse }) => {
          return <div>{count && somethingElse ? title : null}</div>
        }
      `,
    },

    // Invalid tests with "cast" fix strategy
    {
      code: `
        const Component = ({ count, title }) => {
          return <div>{count && title}</div>
        }
      `,
      options: [{ validFixStrategies: ['cast'] }],
      errors: [{
        message: 'Potential numeric evaluation resulting in an unintentionally rendered `0`',
        line: 3,
        column: 24,
      }],
      output: `
        const Component = ({ count, title }) => {
          return <div>{!!count && title}</div>
        }
      `,
    },
    {
      code: `
        const Component = ({ count }) => {
          return <div>{count && <span>There are {count} results</span>}</div>
        }
      `,
      options: [{ validFixStrategies: ['cast'] }],
      errors: [{
        message: 'Potential numeric evaluation resulting in an unintentionally rendered `0`',
        line: 3,
        column: 24,
      }],
      output: `
        const Component = ({ count }) => {
          return <div>{!!count && <span>There are {count} results</span>}</div>
        }
      `,
    },
    {
      code: `
        const Component = ({ elements }) => {
          return <div>{elements.length && <List elements={elements}/>}</div>
        }
      `,
      options: [{ validFixStrategies: ['cast'] }],
      errors: [{
        message: 'Potential numeric evaluation resulting in an unintentionally rendered `0`',
        line: 3,
        column: 24,
      }],
      output: `
        const Component = ({ elements }) => {
          return <div>{!!elements.length && <List elements={elements}/>}</div>
        }
      `,
    },
    {
      code: `
        const Component = ({ nestedCollection }) => {
          return <div>{nestedCollection.elements.length && <List elements={nestedCollection.elements}/>}</div>
        }
      `,
      options: [{ validFixStrategies: ['cast'] }],
      errors: [{
        message: 'Potential numeric evaluation resulting in an unintentionally rendered `0`',
        line: 3,
        column: 24,
      }],
      output: `
        const Component = ({ nestedCollection }) => {
          return <div>{!!nestedCollection.elements.length && <List elements={nestedCollection.elements}/>}</div>
        }
      `,
    },
    {
      code: `
        const Component = ({ elements }) => {
          return <div>{elements[0] && <List elements={elements}/>}</div>
        }
      `,
      options: [{ validFixStrategies: ['cast'] }],
      errors: [{
        message: 'Potential numeric evaluation resulting in an unintentionally rendered `0`',
        line: 3,
        column: 24,
      }],
      output: `
        const Component = ({ elements }) => {
          return <div>{!!elements[0] && <List elements={elements}/>}</div>
        }
      `,
    },
    {
      code: `
        const Component = ({ numberA, numberB }) => {
          return <div>{(numberA || numberB) && <Results>{numberA+numberB}</Results>}</div>
        }
      `,
      options: [{ validFixStrategies: ['cast'] }],
      errors: [{
        message: 'Potential numeric evaluation resulting in an unintentionally rendered `0`',
        line: 3,
        column: 24,
      }],
      output: `
        const Component = ({ numberA, numberB }) => {
          return <div>{!!(numberA || numberB) && <Results>{numberA+numberB}</Results>}</div>
        }
      `,
    },

    // cases: ternary isn't valid if fix strategy is only "cast"
    {
      code: `
        const Component = ({ count, title }) => {
          return <div>{count ? title : null}</div>
        }
      `,
      options: [{ validFixStrategies: ['cast'] }],
      errors: [{
        message: 'Potential numeric evaluation resulting in an unintentionally rendered `0`',
        line: 3,
        column: 24,
      }],
      output: `
        const Component = ({ count, title }) => {
          return <div>{!!count && title}</div>
        }
      `,
    },
    {
      code: `
        const Component = ({ count, title }) => {
          return <div>{!count ? title : null}</div>
        }
      `,
      options: [{ validFixStrategies: ['cast'] }],
      errors: [{
        message: 'Potential numeric evaluation resulting in an unintentionally rendered `0`',
        line: 3,
        column: 24,
      }],
      output: `
        const Component = ({ count, title }) => {
          return <div>{!count && title}</div>
        }
      `,
    },
    {
      code: `
        const Component = ({ count, somethingElse, title }) => {
          return <div>{count && somethingElse ? title : null}</div>
        }
      `,
      options: [{ validFixStrategies: ['cast'] }],
      errors: [{
        message: 'Potential numeric evaluation resulting in an unintentionally rendered `0`',
        line: 3,
        column: 24,
      }],
      output: `
        const Component = ({ count, somethingElse, title }) => {
          return <div>{!!count && somethingElse && title}</div>
        }
      `,
    },
  ]),
});