Updating SentryError to use hooks

This commit is contained in:
Jeff Avallone 2019-03-26 20:38:07 -04:00
parent 94d7f3d3ce
commit e01b6d424e
3 changed files with 12 additions and 16 deletions

View File

@ -9,7 +9,7 @@ exports[`SentryBoundary error handling 1`] = `
exports[`SentryBoundary error handling 2`] = ` exports[`SentryBoundary error handling 2`] = `
<DocumentFragment> <DocumentFragment>
<span <span
data-component="withI18nextTranslation(SentryError)" data-component="SentryError"
data-props="{}" data-props="{}"
/> />
</DocumentFragment> </DocumentFragment>

View File

@ -1,7 +1,6 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types';
import * as Sentry from '@sentry/browser'; import * as Sentry from '@sentry/browser';
import { withTranslation, Trans } from 'react-i18next'; import { useTranslation, Trans } from 'react-i18next';
import Message from 'components/Message'; import Message from 'components/Message';
@ -13,19 +12,17 @@ const reportError = event => {
} }
}; };
export const SentryError = ({ t }) => ( export const SentryError = () => {
<Message type="error" heading={ t('An error has occurred') }> const { t } = useTranslation();
return <Message type="error" heading={ t('An error has occurred') }>
<p> <p>
<Trans>This error has been logged. You may also <a <Trans>This error has been logged. You may also <a
href="#error-report" href="#error-report"
data-testid="error-report" data-testid="error-report"
onClick={ reportError }>fill out a report</a>.</Trans> onClick={ reportError }>fill out a report</a>.</Trans>
</p> </p>
</Message> </Message>;
);
SentryError.propTypes = {
t: PropTypes.func.isRequired
}; };
export default withTranslation()(SentryError); export default SentryError;

View File

@ -7,13 +7,12 @@ import React from 'react';
import { render, fireEvent } from 'react-testing-library'; import { render, fireEvent } from 'react-testing-library';
import * as Sentry from '@sentry/browser'; import * as Sentry from '@sentry/browser';
import { mockT } from 'i18n'; import SentryError from 'components/SentryError';
import { SentryError } from 'components/SentryError';
describe('SentryError', () => { describe('SentryError', () => {
test('rendering', () => { test('rendering', () => {
const { asFragment } = render( const { asFragment } = render(
<SentryError t={ mockT }/> <SentryError/>
); );
expect(asFragment()).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
}); });
@ -22,7 +21,7 @@ describe('SentryError', () => {
test('fill out a report when an event has been logged', () => { test('fill out a report when an event has been logged', () => {
Sentry.lastEventId.mockReturnValue(1); Sentry.lastEventId.mockReturnValue(1);
const { getByTestId } = render( const { getByTestId } = render(
<SentryError t={ mockT } /> <SentryError/>
); );
const event = new MouseEvent('click', { bubbles: true }); const event = new MouseEvent('click', { bubbles: true });
jest.spyOn(event, 'preventDefault'); jest.spyOn(event, 'preventDefault');
@ -35,7 +34,7 @@ describe('SentryError', () => {
test('fill out a report when an event has not been logged', () => { test('fill out a report when an event has not been logged', () => {
Sentry.lastEventId.mockReturnValue(false); Sentry.lastEventId.mockReturnValue(false);
const { getByTestId } = render( const { getByTestId } = render(
<SentryError t={ mockT } /> <SentryError/>
); );
const event = new MouseEvent('click', { bubbles: true }); const event = new MouseEvent('click', { bubbles: true });
jest.spyOn(event, 'preventDefault'); jest.spyOn(event, 'preventDefault');