Skip to content
This repository has been archived by the owner on Nov 4, 2024. It is now read-only.

Commit

Permalink
feat: migrate enzyme to RTL (#844)
Browse files Browse the repository at this point in the history 
* feat: migrate enzyme to RTL

* fix: snapshots

* fix: updated paragon to fix issues

---------

Co-authored-by: Muhammad Abdullah Waheed <[email protected]>
  • Loading branch information
@Syed-Ali-Abbas-Zaidi @abdullahwaheed
Syed-Ali-Abbas-Zaidi and abdullahwaheed authored Mar 11, 2024
1 parent 9dc662f commit 8188cbf
Show file tree
Hide file tree
Showing 37 changed files with 9,438 additions and 10,062 deletions.
2 changes: 1 addition & 1 deletion jest.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
const { createConfig } = require('@openedx/frontend-build');

module.exports = createConfig('jest', {
setupFiles: [
setupFilesAfterEnv: [
'<rootDir>/src/setupTest.js',
],
coveragePathIgnorePatterns: [
Expand Down
1,252 changes: 462 additions & 790 deletions package-lock.json
View file

Large diffs are not rendered by default.

6 changes: 1 addition & 5 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
"@fortawesome/free-regular-svg-icons": "^6.1.1",
"@fortawesome/free-solid-svg-icons": "^6.1.1",
"@fortawesome/react-fontawesome": "^0.2.0",
"@openedx/paragon": "^22.0.0",
"@openedx/paragon": "22.1.1",
"@stripe/react-stripe-js": "^1.10.0",
"@stripe/stripe-js": "^1.36.0",
"axios": "^0.27.2",
Expand Down Expand Up @@ -75,17 +75,13 @@
"@openedx/frontend-build": "13.0.27",
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^12.1.5",
"@wojtekmaj/enzyme-adapter-react-17": "^0.8.0",
"audit-ci": "^6.3.0",
"axios-mock-adapter": "^1.21.1",
"chance": "^1.1.8",
"enzyme": "^3.11.0",
"enzyme-to-json": "^3.6.2",
"html-webpack-plugin": "^5.5.0",
"husky": "^8.0.1",
"lodash.defaultsdeep": "^4.6.1",
"qs": "^6.11.0",
"react-test-renderer": "^17.0.2",
"redux-mock-store": "^1.5.4",
"rosie": "^2.1.0",
"webpack-merge": "^5.8.0"
Expand Down
8 changes: 4 additions & 4 deletions src/feedback/AlertList.test.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import renderer, { act } from 'react-test-renderer';
import { render, act } from '@testing-library/react';
import { IntlProvider } from '@edx/frontend-platform/i18n';

import ConnectedAlertList from './AlertList';
Expand All @@ -28,7 +28,7 @@ describe('AlertList', () => {
</Provider>
</IntlProvider>
);
const tree = renderer.create(component).toJSON();
const { container: tree } = render(component);
expect(tree).toMatchSnapshot();
});

Expand All @@ -46,7 +46,7 @@ describe('AlertList', () => {
</Provider>
</IntlProvider>
);
const tree = renderer.create(component);
const { container: tree } = render(component);
act(() => {
store.dispatch(addMessage('boo', null, { needed: 'data' }, MESSAGE_TYPES.WARNING));
store.dispatch(addMessage('bah', 'Bah!', null, MESSAGE_TYPES.INFO));
Expand All @@ -55,6 +55,6 @@ describe('AlertList', () => {
store.dispatch(addMessage(null, 'Debug debug', null, MESSAGE_TYPES.DEBUG));
store.dispatch(addMessage('fallback-error', null, null, MESSAGE_TYPES.ERROR));
});
expect(tree.toJSON()).toMatchSnapshot();
expect(tree).toMatchSnapshot();
});
});
14 changes: 7 additions & 7 deletions src/feedback/AlertMessage.test.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from 'react';
import { mount } from 'enzyme';
import renderer from 'react-test-renderer';
import { fireEvent, render } from '@testing-library/react';
import { IntlProvider } from '@edx/frontend-platform/i18n';

import AlertMessage from './AlertMessage';
Expand All @@ -23,8 +22,9 @@ describe('AlertMessage', () => {
</IntlProvider>
);

const wrapper = mount(component);
wrapper.find('.btn').simulate('click');
const { container } = render(component);
const button = container.querySelector('.btn');
fireEvent.click(button);

expect(closeHandlerMock).toHaveBeenCalledWith(123);
});
Expand All @@ -43,7 +43,7 @@ describe('AlertMessage', () => {
</IntlProvider>
);

const tree = renderer.create(component).toJSON();
const { container: tree } = render(component);
// The alert should have an 'alert-warning' class. That's the default in the code.
expect(tree).toMatchSnapshot();
});
Expand All @@ -59,7 +59,7 @@ describe('AlertMessage', () => {
</IntlProvider>
);

const tree = renderer.create(component).toJSON();
const { container: tree } = render(component);
expect(tree).toMatchSnapshot();
});

Expand All @@ -74,7 +74,7 @@ describe('AlertMessage', () => {
</IntlProvider>
);

const tree = renderer.create(component).toJSON();
const { container: tree } = render(component);
expect(tree).toMatchSnapshot();
});
});
111 changes: 47 additions & 64 deletions src/feedback/__snapshots__/AlertList.test.jsx.snap
View file
Original file line number Diff line number Diff line change
@@ -1,201 +1,184 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`AlertList should be null by default 1`] = `null`;
exports[`AlertList should be null by default 1`] = `<div />`;

exports[`AlertList should render messages of each type 1`] = `
Array [
<div>
<div
className="fade alert-content alert alert-warning show"
class="fade alert-content alert alert-warning show"
dialog="Boo indeed!"
role="alert"
>
<div
className="pgn__alert-message-wrapper"
class="pgn__alert-message-wrapper"
>
<div
className="alert-message-content"
class="alert-message-content"
>
Boo indeed!
</div>
<div
className="pgn__alert-actions pgn__action-row"
class="pgn__alert-actions pgn__action-row"
>
<span
className="pgn__action-row-spacer"
class="pgn__action-row-spacer"
/>
<button
className="btn btn-tertiary btn-sm"
disabled={false}
onClick={[Function]}
class="btn btn-tertiary btn-sm"
type="button"
>
Dismiss
</button>
</div>
</div>
</div>,
</div>
<div
className="fade alert-content alert alert-info show"
class="fade alert-content alert alert-info show"
dialog="Bah!"
role="alert"
>
<div
className="pgn__alert-message-wrapper"
class="pgn__alert-message-wrapper"
>
<div
className="alert-message-content"
class="alert-message-content"
>
Bah!
</div>
<div
className="pgn__alert-actions pgn__action-row"
class="pgn__alert-actions pgn__action-row"
>
<span
className="pgn__action-row-spacer"
class="pgn__action-row-spacer"
/>
<button
className="btn btn-tertiary btn-sm"
disabled={false}
onClick={[Function]}
class="btn btn-tertiary btn-sm"
type="button"
>
Dismiss
</button>
</div>
</div>
</div>,
</div>
<div
className="fade alert-content alert alert-success show"
class="fade alert-content alert alert-success show"
dialog="Meh!"
role="alert"
>
<div
className="pgn__alert-message-wrapper"
class="pgn__alert-message-wrapper"
>
<div
className="alert-message-content"
class="alert-message-content"
>
Meh!
</div>
<div
className="pgn__alert-actions pgn__action-row"
class="pgn__alert-actions pgn__action-row"
>
<span
className="pgn__action-row-spacer"
class="pgn__action-row-spacer"
/>
<button
className="btn btn-tertiary btn-sm"
disabled={false}
onClick={[Function]}
class="btn btn-tertiary btn-sm"
type="button"
>
Dismiss
</button>
</div>
</div>
</div>,
</div>
<div
className="fade alert-content alert alert-danger show"
class="fade alert-content alert alert-danger show"
dialog="Gah! An error!"
role="alert"
>
<div
className="pgn__alert-message-wrapper"
class="pgn__alert-message-wrapper"
>
<div
className="alert-message-content"
class="alert-message-content"
>
Gah! An error!
</div>
<div
className="pgn__alert-actions pgn__action-row"
class="pgn__alert-actions pgn__action-row"
>
<span
className="pgn__action-row-spacer"
class="pgn__action-row-spacer"
/>
<button
className="btn btn-tertiary btn-sm"
disabled={false}
onClick={[Function]}
class="btn btn-tertiary btn-sm"
type="button"
>
Dismiss
</button>
</div>
</div>
</div>,
</div>
<div
className="fade alert-content alert alert-warning show"
class="fade alert-content alert alert-warning show"
dialog="Debug debug"
role="alert"
>
<div
className="pgn__alert-message-wrapper"
class="pgn__alert-message-wrapper"
>
<div
className="alert-message-content"
class="alert-message-content"
>
Debug debug
</div>
<div
className="pgn__alert-actions pgn__action-row"
class="pgn__alert-actions pgn__action-row"
>
<span
className="pgn__action-row-spacer"
class="pgn__action-row-spacer"
/>
<button
className="btn btn-tertiary btn-sm"
disabled={false}
onClick={[Function]}
class="btn btn-tertiary btn-sm"
type="button"
>
Dismiss
</button>
</div>
</div>
</div>,
</div>
<div
className="fade alert-content alert alert-danger show"
dialog={
<FallbackErrorMessage
values={Object {}}
/>
}
class="fade alert-content alert alert-danger show"
dialog="[object Object]"
role="alert"
>
<div
className="pgn__alert-message-wrapper"
class="pgn__alert-message-wrapper"
>
<div
className="alert-message-content"
class="alert-message-content"
>
There was an unexpected problem. If the problem persists, please
<a
className="pgn__hyperlink default-link standalone-link"
class="pgn__hyperlink default-link standalone-link"
href="http://localhost:18000/support"
onClick={[Function]}
target="_self"
>
contact support
</a>
.
</div>
<div
className="pgn__alert-actions pgn__action-row"
class="pgn__alert-actions pgn__action-row"
>
<span
className="pgn__action-row-spacer"
class="pgn__action-row-spacer"
/>
<button
className="btn btn-tertiary btn-sm"
disabled={false}
onClick={[Function]}
class="btn btn-tertiary btn-sm"
type="button"
>
Dismiss
</button>
</div>
</div>
</div>,
]
</div>
</div>
`;
Loading

0 comments on commit 8188cbf

Please sign in to comment.