Skip to content

Button router test #2345

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lindapaiste merged 10 commits into from
Aug 14, 2023
Merged

Button router test #2345

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
c1fe2b0
feat: install userEvent
Aug 4, 2023
954bc11
Revert "feat: install userEvent"
Aug 4, 2023
439bf95
test: button renders internal link
Aug 4, 2023
043aede
Merge branch 'develop' into button-router-test
Aug 4, 2023
6157e2b
fix: remove unused imports
Aug 4, 2023
c71b6f8
Merge branch 'develop' into button-router-test
Aug 8, 2023
01aa443
test: clean up history
Aug 9, 2023
6fbcd65
Merge branch 'develop' into button-router-test
Aug 10, 2023
7b270be
Merge branch 'develop' into button-router-test
Aug 13, 2023
ac8f318
Merge branch 'develop' into button-router-test
lindapaiste Aug 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 7 additions & 3 deletions client/common/ButtonOrLink.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { render, screen, fireEvent } from '../test-utils';
import { render, screen, fireEvent, waitFor, history } from '../test-utils';
import ButtonOrLink from './ButtonOrLink';

describe('ButtonOrLink', () => {
Expand All @@ -25,8 +25,12 @@ describe('ButtonOrLink', () => {
expect(link).toHaveAttribute('href', 'https://p5js.org');
});

it('can render an internal link with react-router', () => {
it('can render an internal link with react-router', async () => {
render(<ButtonOrLink href="/about">About</ButtonOrLink>);
// TODO: how can this be tested? Needs a router provider?

const link = screen.getByText('About');
fireEvent.click(link);

await waitFor(() => expect(history.location.pathname).toEqual('/about'));
});
});
8 changes: 5 additions & 3 deletions client/test-utils.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,15 +16,17 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Provider } from 'react-redux';
import { Router } from 'react-router-dom';
import { createMemoryHistory } from 'history';
import { I18nextProvider } from 'react-i18next';
import { ThemeProvider as StyledThemeProvider } from 'styled-components';

import browserHistory from './browserHistory';
import i18n from './i18n-test';
import ThemeProvider from './modules/App/components/ThemeProvider';
import configureStore from './store';
import theme, { Theme } from './theme';

export const history = createMemoryHistory();

// re-export everything
// eslint-disable-next-line import/no-extraneous-dependencies
export * from '@testing-library/react';
Expand All @@ -33,7 +35,7 @@ const Providers = ({ children }) => (
// eslint-disable-next-line react/jsx-filename-extension
<StyledThemeProvider theme={{ ...theme[Theme.light] }}>
<I18nextProvider i18n={i18n}>
<Router history={browserHistory}>{children}</Router>
<Router history={history}>{children}</Router>
</I18nextProvider>
</StyledThemeProvider>
);
Expand All @@ -51,7 +53,7 @@ function reduxRender(
<I18nextProvider i18n={i18n}>
<Provider store={store}>
<ThemeProvider>
<Router history={browserHistory}>{children}</Router>
<Router history={history}>{children}</Router>
</ThemeProvider>
</Provider>
</I18nextProvider>
Expand Down