CorrelationText.spec.jsx

import React from 'react';
import { render } from '@testing-library/react';
import CorrelationText from './CorrelationText';
import '@testing-library/jest-dom/extend-expect';
describe('<CorrelationText />', () => {
  describe('more visits than clicks', () => {
    it('should x times visits state', () => {
      const props = {
        data: {
          clicks: 4400,
          visits: 331000
        }
      };
      const { container } = render(<CorrelationText {...props} />);
      expect(container).toMatchSnapshot();
    });

    it('should x more visits state', () => {
      const props = {
        data: {
          clicks: 0,
          visits: 331000
        }
      };
      const { container } = render(<CorrelationText {...props} />);
      expect(container).toMatchSnapshot();
    });
  });

  describe('more clicks than visits', () => {
    it('should x times clicks state', () => {
      const props = {
        data: {
          visits: 4400,
          clicks: 331000
        }
      };
      const { container } = render(<CorrelationText {...props} />);
      expect(container).toMatchSnapshot();
    });

    it('should x more clicks state', () => {
      const props = {
        data: {
          visits: 0,
          clicks: 331000
        }
      };
      const { container } = render(<CorrelationText {...props} />);
      expect(container).toMatchSnapshot();
    });
  });
});

CorrelationText.spec.jsx.snap

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<CorrelationText /> more clicks than visits should x more clicks state 1`] = `
<div>
  <div
    class="correlation"
  >
    <h3
      class="correlation__value"
      style="color: rgb(20, 33, 96);"
    >
      
          331000
          
        
    </h3>
    <p
      class="correlation__text"
      style="color: rgb(167, 167, 167);"
    >
      report_dashboard.influenced_visits.more_than params: {"first_metric":"reports.metrics.clicks ","second_metric":"reports.metrics.view_through_visits "}
    </p>
  </div>
</div>
`;

exports[`<CorrelationText /> more clicks than visits should x times clicks state 1`] = `
<div>
  <div
    class="correlation"
  >
    <h3
      class="correlation__value"
      style="color: rgb(20, 33, 96);"
    >
      
          75.2
          x
        
    </h3>
    <p
      class="correlation__text"
      style="color: rgb(167, 167, 167);"
    >
      report_dashboard.influenced_visits.more_than params: {"first_metric":"reports.metrics.clicks ","second_metric":"reports.metrics.view_through_visits "}
    </p>
  </div>
</div>
`;

exports[`<CorrelationText /> more visits than clicks should x more visits state 1`] = `
<div>
  <div
    class="correlation"
  >
    <h3
      class="correlation__value"
      style="color: rgb(20, 33, 96);"
    >
      
          331000
          
        
    </h3>
    <p
      class="correlation__text"
      style="color: rgb(167, 167, 167);"
    >
      report_dashboard.influenced_visits.more_than params: {"first_metric":"reports.metrics.view_through_visits ","second_metric":"reports.metrics.clicks "}
    </p>
  </div>
</div>
`;

exports[`<CorrelationText /> more visits than clicks should x times visits state 1`] = `
<div>
  <div
    class="correlation"
  >
    <h3
      class="correlation__value"
      style="color: rgb(20, 33, 96);"
    >
      
          75.2
          x
        
    </h3>
    <p
      class="correlation__text"
      style="color: rgb(167, 167, 167);"
    >
      report_dashboard.influenced_visits.more_than params: {"first_metric":"reports.metrics.view_through_visits ","second_metric":"reports.metrics.clicks "}
    </p>
  </div>
</div>
`;