<commit_before>// @flow weak
/* eslint-disable no-loop-func */

import React from 'react';
import { assert } from 'chai';
import { createShallow } from 'src/test-utils';
import HiddenJs from './HiddenJs';
import type { Breakpoint } from '../styles/breakpoints';
import Typography from '../Typography';

describe('<HiddenJs />', () => {
  let shallowWithWidth;

  before(() => {
    const shallow = createShallow();
    shallowWithWidth = (node, options = {}) => shallow(node, options).dive();
  });

  function resolveProp(upDownOnly, breakpoint) {
    if (upDownOnly === 'only') {
      return { only: breakpoint };
    }

    return { [`${breakpoint}${upDownOnly}`]: true };
  }

  function shouldNotRender(
    width: Breakpoint,
    upDownOnly: 'Up' | 'Down' | 'only',
    hiddenBreakpoints: Array<*>,
  ) {
    const descriptions = {
      Up: '(smaller)',
      Down: '(same or smaller)',
      only: '(exact match)',
    };
    hiddenBreakpoints.forEach((breakpoint) => {
      const prop = resolveProp(upDownOnly, breakpoint);

      it(`should not render children ${breakpoint} ${descriptions[upDownOnly]}`, () => {
        const props = { width, ...prop };
        const wrapper = shallowWithWidth(<HiddenJs component="div" {...props}>foo</HiddenJs>);
        assert.isNull(wrapper.type(), 'should render null');
      });

      it(`should not render Element ${breakpoint} ${descriptions[upDownOnly]}`, () => {
        const props = { width, ...prop };
        const wrapper = shallowWithWidth(
          <HiddenJs component={<Typography>foo</Typography>} {...props}>foo</HiddenJs>,
        );
        assert.isNull(wrapper.type(), 'should render null');
      });
    });
  }

  function shouldRender(
    width: Breakpoint,
    upDownOnly: 'Up' | 'Down' | 'only',
    visibleBreakpoints: Array<*>,
  ) {
    const descriptions = {
      Up: '(same or larger)',
      Down: '(larger)',
      only: '(not exact match)',
    };
    visibleBreakpoints.forEach((breakpoint) => {
      const prop = resolveProp(upDownOnly, breakpoint);
      it(`should render children ${breakpoint} ${descriptions[upDownOnly]}`, () => {
        const props = { width, ...prop };
        const wrapper = shallowWithWidth(<HiddenJs {...props}><div>foo</div></HiddenJs>);
        assert.isNotNull(wrapper.type(), 'should render');
        assert.strictEqual(wrapper.name(), 'div');
        assert.strictEqual(wrapper.first().text(), 'foo', 'should render children');
      });

      it(`should render Element ${breakpoint} ${descriptions[upDownOnly]}`, () => {
        const props = { width, ...prop };
        const wrapper = shallowWithWidth(
          <HiddenJs {...props}>
            <Typography>foo</Typography>
          </HiddenJs>,
        );
        assert.isNotNull(wrapper.type(), 'should render');
        assert.strictEqual(wrapper.name(), 'Typography');
      });
    });
  }

  describe('screen width: xs', () => {
    const screenWidth = 'xs';
    describe('up', () => {
      shouldNotRender(screenWidth, 'Up', ['xs', 'sm', 'md', 'lg', 'xl']);
    });

    describe('down', () => {
      shouldNotRender(screenWidth, 'Down', ['xs']);
      shouldRender(screenWidth, 'Down', ['sm', 'md', 'lg']);
    });

    describe('only', () => {
      shouldNotRender(screenWidth, 'only', ['xs', ['xs', 'xl']]);
      shouldRender(screenWidth, 'only', ['sm', 'md', 'lg', 'xl', ['sm', 'md', 'lg', 'xl']]);
    });
  });

  describe('screen width: sm', () => {
    const screenWidth = 'sm';
    describe('up', () => {
      shouldRender(screenWidth, 'Up', ['xs']);
      shouldNotRender(screenWidth, 'Up', ['sm', 'md', 'lg', 'xl']);
    });

    describe('down', () => {
      shouldNotRender(screenWidth, 'Down', ['xs', 'sm']);
      shouldRender(screenWidth, 'Down', ['md', 'lg', 'xl']);
    });

    describe('only', () => {
      shouldNotRender(screenWidth, 'only', ['sm', ['sm', 'md']]);
      shouldRender(screenWidth, 'only', ['xs', 'md', 'lg', 'xl', ['xs', 'md', 'lg', 'xl']]);
    });
  });

  describe('screen width: md', () => {
    const screenWidth = 'md';
    describe('up', () => {
      shouldRender(screenWidth, 'Up', ['xs', 'sm']);
      shouldNotRender(screenWidth, 'Up', ['md', 'lg', 'xl']);
    });

    describe('down', () => {
      shouldNotRender(screenWidth, 'Down', ['xs', 'sm', 'md']);
      shouldRender(screenWidth, 'Down', ['lg', 'xl']);
    });

    describe('only', () => {
      shouldNotRender(screenWidth, 'only', ['md', ['md', 'lg']]);
      shouldRender(screenWidth, 'only', ['xs', 'sm', 'lg', 'xl', ['xs', 'sm', 'lg', 'xl']]);
    });
  });

  describe('screen width: lg', () => {
    const screenWidth = 'lg';
    describe('up', () => {
      shouldRender(screenWidth, 'Up', ['xs', 'sm', 'md']);
      shouldNotRender(screenWidth, 'Up', ['lg', 'xl']);
    });

    describe('down', () => {
      shouldNotRender(screenWidth, 'Down', ['xs', 'sm', 'md', 'lg']);
      shouldRender(screenWidth, 'Down', ['xl']);
    });

    describe('only', () => {
      shouldNotRender(screenWidth, 'only', ['lg', ['lg', 'xl']]);
      shouldRender(screenWidth, 'only', ['xs', 'sm', 'md', 'xl', ['xs', 'sm', 'md', 'xl']]);
    });
  });

  describe('screen width: xl', () => {
    const screenWidth = 'xl';
    describe('up', () => {
      shouldRender(screenWidth, 'Up', ['xs', 'sm', 'md', 'lg']);
      shouldNotRender(screenWidth, 'Up', ['xl']);
    });

    describe('down', () => {
      shouldNotRender(screenWidth, 'Down', ['xs', 'sm', 'md', 'lg', 'xl']);
    });

    describe('only', () => {
      shouldNotRender(screenWidth, 'only', ['xl', ['xl', 'xs']]);
      shouldRender(screenWidth, 'only', ['xs', 'sm', 'md', 'lg', ['xs', 'sm', 'md', 'lg']]);
    });<commit_msg>[HiddenJs.spec] refactor for different use of width functions, increase comprehension of test meaning.<commit_after>// @flow weak
/* eslint-disable no-loop-func */

import React from 'react';
import { assert } from 'chai';
import { createShallow } from 'src/test-utils';
import HiddenJs from './HiddenJs';
import type { Breakpoint } from '../styles/breakpoints';
import Typography from '../Typography';

describe('<HiddenJs />', () => {
  let shallowWithWidth;

  before(() => {
    const shallow = createShallow();
    shallowWithWidth = (node, options = {}) => shallow(node, options).dive();
  });

  function resolvePropName(upDownOnly, breakpoint) {
    if (upDownOnly === 'only') {
      return 'only';
    }

    return `${breakpoint}${upDownOnly}`;
  }

  function isHidden(
    hiddenBreakpoints: Array<*>,
    upDownOnly: 'Up' | 'Down' | 'only',
    width: Breakpoint,
  ) {
    hiddenBreakpoints.forEach((breakpoint) => {
      const prop = resolvePropName(upDownOnly, breakpoint);
      const descriptions = {
        Up: `${prop} is hidden for width: ${width} >= ${breakpoint}`,
        Down: `${prop} is hidden for width: ${width} <= ${breakpoint}`,
        only: `${prop} is hidden for width: ${width} === ${breakpoint}`,
      };

      it(descriptions[upDownOnly], () => {
        const props = { width, [prop]: breakpoint };

        // children
        let wrapper = shallowWithWidth(<HiddenJs component="div" {...props}>foo</HiddenJs>);
        assert.isNull(wrapper.type(), 'should render null');

        // element
        wrapper = shallowWithWidth(
          <HiddenJs component={<Typography>foo</Typography>} {...props}>foo</HiddenJs>,
        );
        assert.isNull(wrapper.type(), 'should render null');
      });
    });
  }

  function isVisible(
    visibleBreakpoints: Array<*>,
    upDownOnly: 'Up' | 'Down' | 'only',
    width: Breakpoint,
  ) {
    visibleBreakpoints.forEach((breakpoint) => {
      const prop = resolvePropName(upDownOnly, breakpoint);
      const descriptions = {
        Up: `${prop} is visible for width: ${width} < ${breakpoint}`,
        Down: `${prop} is visible for width: ${width} > ${breakpoint}`,
        only: `${prop} is visible for width: ${width} !== ${breakpoint}`,
      };

      it(descriptions[upDownOnly], () => {
        const props = { width, [prop]: breakpoint };

        // children
        let wrapper = shallowWithWidth(<HiddenJs {...props}>
          <div>foo</div>
        </HiddenJs>);
        assert.isNotNull(wrapper.type(), 'should render');
        assert.strictEqual(wrapper.name(), 'div');
        assert.strictEqual(wrapper.first().text(), 'foo', 'should render children');

        // element
        wrapper = shallowWithWidth(
          <HiddenJs {...props}>
            <Typography>foo</Typography>
          </HiddenJs>,
        );
        assert.isNotNull(wrapper.type(), 'should render');
        assert.strictEqual(wrapper.name(), 'Typography');
      });
    });
  }

  describe('screen width: xs', () => {
    describe('up', () => {
      isHidden(['xs'], 'Up', 'xs');
      isVisible(['sm', 'md', 'lg', 'xl'], 'Up', 'xs');
    });

    describe('down', () => {
      isHidden(['xs', 'sm', 'md', 'lg', 'xl'], 'Down', 'xs');
    });

    describe('only', () => {
      isHidden(['xs', ['xs', 'xl']], 'only', 'xs');
      isVisible(['sm', 'md', 'lg', 'xl', ['sm', 'md', 'lg', 'xl']], 'only', 'xs');
    });
  });

  describe('screen width: sm', () => {
    describe('up', () => {
      isHidden(['xs', 'sm'], 'Up', 'sm');
      isVisible(['md', 'lg', 'xl'], 'Up', 'sm');
    });

    describe('down', () => {
      isHidden(['sm', 'md', 'lg', 'xl'], 'Down', 'sm');
      isVisible(['xs'], 'Down', 'sm');
    });

    describe('only', () => {
      isHidden(['sm', ['sm', 'md']], 'only', 'sm');
      isVisible(['xs', 'md', 'lg', 'xl', ['xs', 'md', 'lg', 'xl']], 'only', 'sm');
    });
  });

  describe('screen width: md', () => {
    describe('up', () => {
      isHidden(['xs', 'sm', 'md'], 'Up', 'md');
      isVisible(['lg', 'xl'], 'Up', 'md');
    });

    describe('down', () => {
      isHidden(['md', 'lg', 'xl'], 'Down', 'md');
      isVisible(['xs', 'sm'], 'Down', 'md');
    });

    describe('only', () => {
      isHidden(['md', ['md', 'lg']], 'only', 'md');
      isVisible(['xs', 'sm', 'lg', 'xl', ['xs', 'sm', 'lg', 'xl']], 'only', 'md');
    });
  });

  describe('screen width: lg', () => {
    describe('up', () => {
      isHidden(['xs', 'sm', 'md', 'lg'], 'Up', 'lg');
      isVisible(['xl'], 'Up', 'lg');
    });

    describe('down', () => {
      isHidden(['lg', 'xl'], 'Down', 'lg');
      isVisible(['xs', 'sm', 'md'], 'Down', 'lg');
    });

    describe('only', () => {
      isHidden(['lg', ['lg', 'xl']], 'only', 'lg');
      isVisible(['xs', 'sm', 'md', 'xl', ['xs', 'sm', 'md', 'xl']], 'only', 'lg');
    });
  });

  describe('screen width: xl', () => {
    describe('up', () => {
      isHidden(['xs', 'sm', 'md', 'lg', 'xl'], 'Up', 'xl');
    });

    describe('down', () => {
      isHidden(['xl'], 'Down', 'xl');
      isVisible(['xs', 'sm', 'md', 'lg'], 'Down', 'xl');
    });

    describe('only', () => {
      isHidden(['xl', ['xl', 'xs']], 'only', 'xl');
      isVisible(['xs', 'sm', 'md', 'lg', ['xs', 'sm', 'md', 'lg']], 'only', 'xl');
    });
{'fraction_non_alphanumeric': 0.24405791822238412, 'fraction_numerical': 0.0, 'mean_word_length': 3.0286133528980193, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 95, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '896217', 'n_tokens_mistral': 3531, 'n_tokens_neox': 3481, 'n_words': 793}