Skip to content
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

Jump to bottom

add button to redirect to results page #129

Merged
merged 1 commit into from
Jun 3, 2022
Merged

add button to redirect to results page #129

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
21 changes: 21 additions & 0 deletions src/components/Search/SearchView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import { ArrowForward } from '@mui/icons-material';
import { Button } from '@mui/material';
import Container from '@mui/material/Container';
import Grid from '@mui/material/Grid';
import { connect } from 'react-redux';
import { useNavigate } from 'react-router-dom';

import useFocusInput from '../../hooks/useFocusInput';
import { Revision, State } from '../../types/state';
Expand All @@ -15,6 +18,12 @@ import SearchViewInit from './SearchViewInit';
function SearchView(props: SearchViewProps) {
const { focused, handleParentClick, handleFocus } = useFocusInput();

const navigate = useNavigate();

const goToResultsPage = () => {
navigate('/results', { replace: false });
};

const { searchResults, selectedRevisions } = props;

return (
Expand All @@ -25,6 +34,18 @@ function SearchView(props: SearchViewProps) {
<Grid item xs={12}>
{selectedRevisions.length > 0 && <SelectedRevisionsTable />}
</Grid>
<Grid item className="compare-button-section">
{selectedRevisions.length > 0 && (
<Button
className="compare-button"
variant="contained"
onClick={goToResultsPage}
>
compare
<ArrowForward className="compare-icon" />
</Button>
)}
</Grid>
<Grid container>
<Grid item xs={1} />
<SearchDropdown />
Expand Down
8 changes: 4 additions & 4 deletions src/tests/Search/SearchResultsList.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import userEvent from '@testing-library/user-event';

import SearchView from '../../components/Search/SearchView';
import getTestData from '../utils/fixtures';
import { render, screen } from '../utils/test-utils';
import { renderWithRouter, screen } from '../utils/test-utils';

describe('SearchResultsList', () => {
it('should fill the checkbox when a result is clicked', async () => {
Expand All @@ -18,7 +18,7 @@ describe('SearchResultsList', () => {
// set delay to null to prevent test time-out due to useFakeTimers
const user = userEvent.setup({ delay: null });

render(<SearchView />);
renderWithRouter(<SearchView />);
// focus input to show results
const searchInput = screen.getByRole('textbox');
await user.click(searchInput);
Expand Down Expand Up @@ -46,7 +46,7 @@ describe('SearchResultsList', () => {
// set delay to null to prevent test time-out due to useFakeTimers
const user = userEvent.setup({ delay: null });

render(<SearchView />);
renderWithRouter(<SearchView />);
// focus input to show results
const searchInput = screen.getByRole('textbox');
await user.click(searchInput);
Expand Down Expand Up @@ -79,7 +79,7 @@ describe('SearchResultsList', () => {
// set delay to null to prevent test time-out due to useFakeTimers
const user = userEvent.setup({ delay: null });

render(<SearchView />);
renderWithRouter(<SearchView />);
// focus input to show results
const searchInput = screen.getByRole('textbox');
await user.click(searchInput);
Expand Down
29 changes: 21 additions & 8 deletions src/tests/Search/SearchView.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,11 @@ import userEvent from '@testing-library/user-event';

import SearchView from '../../components/Search/SearchView';
import getTestData from '../utils/fixtures';
import { render, screen, store } from '../utils/test-utils';
import { renderWithRouter, screen, store } from '../utils/test-utils';

describe('Search View', () => {
it('renders correctly when there are no results', () => {
render(<SearchView />);
it('render correctly when there are no results', () => {
renderWithRouter(<SearchView />);

// Title appears
expect(screen.getByText(/PerfCompare/i)).toBeInTheDocument();
Expand Down Expand Up @@ -42,7 +42,7 @@ describe('Search View', () => {
// set delay to null to prevent test time-out due to useFakeTimers
const user = userEvent.setup({ delay: null });

render(<SearchView />);
renderWithRouter(<SearchView />);

await screen.findByRole('button', { name: 'repository' });

Expand Down Expand Up @@ -74,7 +74,7 @@ describe('Search View', () => {
// set delay to null to prevent test time-out due to useFakeTimers
const user = userEvent.setup({ delay: null });

render(<SearchView />);
renderWithRouter(<SearchView />);

const searchInput = screen.getByRole('textbox');

Expand Down Expand Up @@ -107,7 +107,7 @@ describe('Search View', () => {
// set delay to null to prevent test time-out due to useFakeTimers
const user = userEvent.setup({ delay: null });

render(<SearchView />);
renderWithRouter(<SearchView />);

await screen.findByRole('button', { name: 'repository' });

Expand Down Expand Up @@ -140,7 +140,7 @@ describe('Search View', () => {
// set delay to null to prevent test time-out due to useFakeTimers
const user = userEvent.setup({ delay: null });

render(<SearchView />);
renderWithRouter(<SearchView />);

await screen.findByRole('button', { name: 'repository' });

Expand Down Expand Up @@ -170,7 +170,7 @@ describe('Search View', () => {
global.fetch = jest.fn(() => Promise.reject(new Error())) as jest.Mock;
const spyOnFetch = jest.spyOn(global, 'fetch');

render(<SearchView />);
renderWithRouter(<SearchView />);

await screen.findByRole('button', { name: 'repository' });

Expand All @@ -183,4 +183,17 @@ describe('Search View', () => {
'An error has occurred',
);
});

it('should have compare button and once clicked should redirect to results page', async () => {
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
const { history } = renderWithRouter(<SearchView />);
expect(history.location.pathname).toEqual('/');

const user = userEvent.setup({ delay: null });

const compareButton = document.querySelector('.compare-button');
await user.click(compareButton as HTMLElement);

expect(history.location.pathname).toEqual('/results');
});
});
77 changes: 76 additions & 1 deletion src/tests/Search/__snapshots__/SearchView.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Search View renders correctly when there are no results 1`] = `
exports[`Search View render correctly when there are no results 1`] = `
<body>
<div>
<div
Expand Down Expand Up @@ -203,6 +203,31 @@ exports[`Search View renders correctly when there are no results 1`] = `
</table>
</div>
</div>
<div
class="MuiGrid-root MuiGrid-item compare-button-section css-13i4rnv-MuiGrid-root"
>
<button
class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root compare-button css-sghohy-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
compare
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium compare-icon css-i4bv87-MuiSvgIcon-root"
data-testid="ArrowForwardIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
/>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
<div
class="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
>
Expand Down Expand Up @@ -550,6 +575,31 @@ exports[`Search View should hide search results when clicking outside of search
</table>
</div>
</div>
<div
class="MuiGrid-root MuiGrid-item compare-button-section css-13i4rnv-MuiGrid-root"
>
<button
class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root compare-button css-sghohy-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
compare
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium compare-icon css-i4bv87-MuiSvgIcon-root"
data-testid="ArrowForwardIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
/>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
<div
class="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
>
Expand Down Expand Up @@ -897,6 +947,31 @@ exports[`Search View should not hide search results when clicking search results
</table>
</div>
</div>
<div
class="MuiGrid-root MuiGrid-item compare-button-section css-13i4rnv-MuiGrid-root"
>
<button
class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root compare-button css-sghohy-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
compare
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium compare-icon css-i4bv87-MuiSvgIcon-root"
data-testid="ArrowForwardIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
/>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
<div
class="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
>
Expand Down
25 changes: 25 additions & 0 deletions src/tests/Search/__snapshots__/fetchRecentRevisions.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -205,6 +205,31 @@ exports[`SearchView/fetchRecentRevisions should fetch and display recent results
</table>
</div>
</div>
<div
class="MuiGrid-root MuiGrid-item compare-button-section css-13i4rnv-MuiGrid-root"
>
<button
class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root compare-button css-sghohy-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
compare
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium compare-icon css-i4bv87-MuiSvgIcon-root"
data-testid="ArrowForwardIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
/>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
<div
class="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
>
Expand Down
25 changes: 25 additions & 0 deletions src/tests/Search/__snapshots__/fetchRevisionByID.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,6 +203,31 @@ exports[`SearchView/fetchRevisionByID should fetch revisions by ID if searchValu
</table>
</div>
</div>
<div
class="MuiGrid-root MuiGrid-item compare-button-section css-13i4rnv-MuiGrid-root"
>
<button
class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root compare-button css-sghohy-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
compare
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium compare-icon css-i4bv87-MuiSvgIcon-root"
data-testid="ArrowForwardIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
/>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
<div
class="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
>
Expand Down
25 changes: 25 additions & 0 deletions src/tests/Search/__snapshots__/fetchRevisionsByAuthor.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -203,6 +203,31 @@ exports[`SearchView/fetchRevisionsByAuthor should fetch revisions by author if s
</table>
</div>
</div>
<div
class="MuiGrid-root MuiGrid-item compare-button-section css-13i4rnv-MuiGrid-root"
>
<button
class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root compare-button css-sghohy-MuiButtonBase-root-MuiButton-root"
tabindex="0"
type="button"
>
compare
<svg
aria-hidden="true"
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium compare-icon css-i4bv87-MuiSvgIcon-root"
data-testid="ArrowForwardIcon"
focusable="false"
viewBox="0 0 24 24"
>
<path
d="m12 4-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"
/>
</svg>
<span
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</div>
<div
class="MuiGrid-root MuiGrid-container css-11lq3yg-MuiGrid-root"
>
Expand Down
8 changes: 4 additions & 4 deletions src/tests/Search/fetchRecentRevisions.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import userEvent from '@testing-library/user-event';

import SearchView from '../../components/Search/SearchView';
import getTestData from '../utils/fixtures';
import { render, screen, store } from '../utils/test-utils';
import { renderWithRouter, screen, store } from '../utils/test-utils';

describe('SearchView/fetchRecentRevisions', () => {
it('should fetch and display recent results when repository is selected', async () => {
Expand All @@ -18,7 +18,7 @@ describe('SearchView/fetchRecentRevisions', () => {
// set delay to null to prevent test time-out due to useFakeTimers
const user = userEvent.setup({ delay: null });

render(<SearchView />);
renderWithRouter(<SearchView />);

await screen.findByRole('button', { name: 'repository' });
await user.click(screen.getByRole('button', { name: 'repository' }));
Expand Down Expand Up @@ -61,7 +61,7 @@ describe('SearchView/fetchRecentRevisions', () => {
) as jest.Mock;
const spyOnFetch = jest.spyOn(global, 'fetch');

render(<SearchView />);
renderWithRouter(<SearchView />);

await screen.findByRole('button', { name: 'repository' });

Expand All @@ -79,7 +79,7 @@ describe('SearchView/fetchRecentRevisions', () => {
) as jest.Mock;
const spyOnFetch = jest.spyOn(global, 'fetch');

render(<SearchView />);
renderWithRouter(<SearchView />);

await screen.findByRole('button', { name: 'repository' });

Expand Down
Loading