<commit_before>/* eslint-disable */

import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { expect } from 'chai';
import { mount } from 'enzyme';
import MediaQueryProvider from '../src/media-query-provider';
import sinon from 'sinon';

describe('<MediaQueryProvider />', () => {
  let component;

  before(() => {
    // TODO see https://github.com/sinonjs/sinon/issues/1377
    Object.defineProperty(global, 'HTMLElement', {
      configurable: true,
      value: () => {},
    });
  });

  after(() => {
    Reflect.deleteProperty(global, 'HTMLElement');
  });


  it('should render app', () => {
    expect(() => {
      component = mount(
        <MediaQueryProvider>
          <p>Test123</p>
        </MediaQueryProvider>,
      );
    }).to.not.throw();
  });

  it('should have a default queries prop', () => {
    expect(component.props().queries).to.be.an('object');
  });

  it('should have child context with default media', () => {
    expect(component.node.getChildContext().media).to.eql({
      desktop: false,
      largeDesktop: false,
      mobile: false,
      tablet: false,
    });
  });

  it('should have child context with other media', () => {
    const queries = {
      someMediaQuery: 'screen and (max-width: 1111px)',
      someMediaQuery2: 'screen and (min-width: 2222px) and (max-width: 33333px)',
      someMediaQuery3: 'screen and (min-width: 44444px) and (max-width: 55555px)',
      someMediaQuery4: 'screen and (min-width: 66666px)',
    };

    const otherComponent = mount(
      <MediaQueryProvider queries={queries}>
        <p>Test123</p>
      </MediaQueryProvider>,
    );

    expect(otherComponent.node.getChildContext().media).to.eql({
      someMediaQuery: false,
      someMediaQuery2: false,
      someMediaQuery3: false,
      someMediaQuery4: false,
    });
  });

  context('when mobile matches', () => {
    let mobileComponent;

    before(() => {
      mobileComponent = mount(
        <MediaQueryProvider>
          <p>Test123</p>
        </MediaQueryProvider>,
      );
    });

    it('should include mobile in the media context', () => {
      const { media } = mobileComponent.node.getChildContext();
      expect(media).to.eql({
        desktop: false,
        largeDesktop: false,
        mobile: false,
        tablet: false,
      });
    });
  });

  it('should render mobile when value specified from server', () => {

    const values = {
      width: 300,
      type: 'screen',
    };

    // dont want to do client mount
    const stub = sinon.stub(MediaQueryProvider.prototype, 'componentDidMount').returns('hi!');

    const componentWithValues = mount(
      <MediaQueryProvider values={values}>
        <p>Test123</p>
      </MediaQueryProvider>,
    );

    expect(MediaQueryProvider.prototype.componentDidMount).to.have.property('callCount', 1);

    const { media } = componentWithValues.node.getChildContext();

    expect(media).to.eql({
      mobile: true,
      tablet: false,
      desktop: false,
      largeDesktop: false,
    });

    stub.restore();
  });

  context('when rendering server-side', () => {
    it('should render', () => {
      expect(() => {
        const html = ReactDOMServer.renderToString(
          <MediaQueryProvider>
            <p>Test123</p>
          </MediaQueryProvider>,
        );
      }).to.not.throw();
    });
  });

  if (React.Fragment) {
    context('when React.Fragment is available', () => {
      it('should render a div', () => {
        const component = mount(
          <MediaQueryProvider>
            <p>Test123</p>
          </MediaQueryProvider>,
        );
        expect(component.find('div').is('div')).to.eql(false);
        expect(component.find('p').is('p')).to.eql(true);
      });
    });
  } else {
    context('when React.Fragment is not available', () => {
      it('should render a div', () => {
        const component = mount(
          <MediaQueryProvider>
            <p>Test123</p>
          </MediaQueryProvider>,
        );
        expect(component.find('div').is('div')).to.eql(true);
      });
    });
  }
});<commit_msg>Updated tests per @willmendesneto's recommendation<commit_after>/* eslint-disable */

import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { expect } from 'chai';
import { mount } from 'enzyme';
import MediaQueryProvider from '../src/media-query-provider';
import sinon from 'sinon';

describe('<MediaQueryProvider />', () => {
  let component;

  before(() => {
    // TODO see https://github.com/sinonjs/sinon/issues/1377
    Object.defineProperty(global, 'HTMLElement', {
      configurable: true,
      value: () => {},
    });
  });

  after(() => {
    Reflect.deleteProperty(global, 'HTMLElement');
  });


  it('should render app', () => {
    expect(() => {
      component = mount(
        <MediaQueryProvider>
          <p>Test123</p>
        </MediaQueryProvider>,
      );
    }).to.not.throw();
  });

  it('should have a default queries prop', () => {
    expect(component.props().queries).to.be.an('object');
  });

  it('should have child context with default media', () => {
    expect(component.node.getChildContext().media).to.eql({
      desktop: false,
      largeDesktop: false,
      mobile: false,
      tablet: false,
    });
  });

  it('should have child context with other media', () => {
    const queries = {
      someMediaQuery: 'screen and (max-width: 1111px)',
      someMediaQuery2: 'screen and (min-width: 2222px) and (max-width: 33333px)',
      someMediaQuery3: 'screen and (min-width: 44444px) and (max-width: 55555px)',
      someMediaQuery4: 'screen and (min-width: 66666px)',
    };

    const otherComponent = mount(
      <MediaQueryProvider queries={queries}>
        <p>Test123</p>
      </MediaQueryProvider>,
    );

    expect(otherComponent.node.getChildContext().media).to.eql({
      someMediaQuery: false,
      someMediaQuery2: false,
      someMediaQuery3: false,
      someMediaQuery4: false,
    });
  });

  context('when mobile matches', () => {
    let mobileComponent;

    before(() => {
      mobileComponent = mount(
        <MediaQueryProvider>
          <p>Test123</p>
        </MediaQueryProvider>,
      );
    });

    it('should include mobile in the media context', () => {
      const { media } = mobileComponent.node.getChildContext();
      expect(media).to.eql({
        desktop: false,
        largeDesktop: false,
        mobile: false,
        tablet: false,
      });
    });
  });

  it('should render mobile when value specified from server', () => {

    const values = {
      width: 300,
      type: 'screen',
    };

    // dont want to do client mount
    const stub = sinon.stub(MediaQueryProvider.prototype, 'componentDidMount').returns('hi!');

    const componentWithValues = mount(
      <MediaQueryProvider values={values}>
        <p>Test123</p>
      </MediaQueryProvider>,
    );

    expect(MediaQueryProvider.prototype.componentDidMount).to.have.property('callCount', 1);

    const { media } = componentWithValues.node.getChildContext();

    expect(media).to.eql({
      mobile: true,
      tablet: false,
      desktop: false,
      largeDesktop: false,
    });

    stub.restore();
  });

  context('when rendering server-side', () => {
    it('should render', () => {
      expect(() => {
        const html = ReactDOMServer.renderToString(
          <MediaQueryProvider>
            <p>Test123</p>
          </MediaQueryProvider>,
        );
      }).to.not.throw();
    });
  });

  context('when React.Fragment is available', () => {
    before(() => {
      Object.defineProperty(React, 'Fragment', {
        configurable: true,
        value: React.createClass({
          render: function() {
            return React.createElement(
              'span',
              {className: 'wrapper'},
              Array.isArray(this.props.children) ? 
                this.props.children.map((el) => <span>{el}</span>) :
                this.props.children
            );
          }
        }),
      });
    });

    after(() => {
      Reflect.deleteProperty(React, 'Fragment');
    });

    it('should use React.Fragment component', () => {
      const fragmentChildren = [
        <p>Test123</p>,
        <p>Test123</p>,
      ];
      const component = mount(
        <MediaQueryProvider>
          <fragmentChildren />
        </MediaQueryProvider>,
      );
      expect(component.find('span').is('span')).to.eql(true);
    });
  });

  context('when React.Fragment is not available', () => {
    it('should render a div', () => {
      const component = mount(
        <MediaQueryProvider>
          <p>Test123</p>
        </MediaQueryProvider>,
      );
      expect(component.find('div').is('div')).to.eql(true);
    });
  });
});
{'fraction_non_alphanumeric': 0.16227920227920228, 'fraction_numerical': 0.014700854700854702, 'mean_word_length': 2.4442700156985873, 'pattern_counts': {'":': 0, '<': 66, '<?xml version=': 0, '>': 109, 'https://': 2, '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': '5975014', 'n_tokens_mistral': 2689, 'n_tokens_neox': 2564, 'n_words': 523}