Skip to content

Commit

Permalink
test: update test to use Vitest
Browse files Browse the repository at this point in the history
  • Loading branch information
@mihirsamdarshi
mihirsamdarshi committed May 10, 2024
1 parent ba0d9f3 commit 596cfc8
Show file tree
Hide file tree
Showing 9 changed files with 247 additions and 110 deletions.
6 changes: 4 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
"start": "vite",
"build": "vite build",
"serve": "vite preview",
"test": "react-scripts test",
"test": "vitest",
"storybook": "storybook dev -p 9009",
"build-storybook": "storybook build",
"sass-lint": "stylelint --config=stylelint.config.js '**/*.scss'",
Expand Down Expand Up @@ -79,7 +79,9 @@
"storybook-addon-remix-react-router": "^3.0.0",
"stylelint": "^16.2.0",
"stylelint-config-recommended": "^14.0.0",
"vitest": "^1.4.0"
"vite-plugin-image-optimizer": "^1.1.7",
"vitest": "^1.4.0",
"vitest-canvas-mock": "^0.3.3"
},
"resolutions": {
"autoprefixer": "10.4.5"
Expand Down
48 changes: 25 additions & 23 deletions src/AnalysisPage/__test__/analysisHomePage.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@ const loggedInRootState = {
};

const analysisActions = {
onPickAnalysis: jest.fn(),
goBack: jest.fn(),
onPickAnalysis: vi.fn(),
goBack: vi.fn(),
};

function constructMatchState(subject) {
Expand All @@ -46,19 +46,19 @@ function constructMatchState(subject) {
describe('Pure Analysis Home Page', () => {
test('Redirects to home if not logged in', () => {
const shallowAnalysis = shallow(
<AnalysisHomePage {...defaultAnalysisState} {...analysisActions} />
<AnalysisHomePage {...defaultAnalysisState} {...analysisActions} />,
);
expect(shallowAnalysis.find('Redirect')).toHaveLength(1);
expect(shallowAnalysis.find('Navigate')).toHaveLength(1);
});
test('Redirects if no url match (animal or human)', () => {
const shallowAnalysis = shallow(
<AnalysisHomePage
{...defaultAnalysisState}
{...analysisActions}
loggedIn
/>
/>,
);
expect(shallowAnalysis.find('Redirect')).toHaveLength(1);
expect(shallowAnalysis.find('Navigate')).toHaveLength(1);
});

const matchingSubjects = [
Expand All @@ -78,7 +78,7 @@ describe('Pure Analysis Home Page', () => {
<AnalysisHomePage
{...constructMatchState(match)}
{...analysisActions}
/>
/>,
);
expect(shallowAnalysis.find('Redirect')).toHaveLength(0);
});
Expand All @@ -95,7 +95,7 @@ describe('Pure Analysis Home Page', () => {
/>,
);
expect(shallowAnalysis.find('h3').text()).toEqual(
expect.stringMatching(expected)
expect.stringMatching(expected),
);
});
});
Expand All @@ -116,21 +116,21 @@ describe('Pure Analysis Home Page', () => {
});

describe('Connected Animal AnalysisPage', () => {
let mountedAnalysis = mount((
let mountedAnalysis = mount(
<Provider store={createStore(rootReducer, loggedInRootState)}>
<AnalysisHomePageConnected
match={{ params: { subjectType: 'animal' } }}
/>
</Provider>
));
</Provider>,
);
beforeAll(() => {
mountedAnalysis = mount((
mountedAnalysis = mount(
<Provider store={createStore(rootReducer, loggedInRootState)}>
<AnalysisHomePageConnected
match={{ params: { subjectType: 'animal' } }}
/>
</Provider>
));
</Provider>,
);
});
afterAll(() => {
mountedAnalysis.unmount();
Expand All @@ -144,7 +144,8 @@ describe('Connected Animal AnalysisPage', () => {
// Click button --> replace analysisTypeButton with SubAnalysisButton
mountedAnalysis.find('.activeAnalysis').first().simulate('click');
expect(
mountedAnalysis.find('Provider').props().store.getState().analysis.depth
mountedAnalysis.find('Provider').props().store.getState().analysis
.depth,
).toEqual(1);
mountedAnalysis.update();
expect(mountedAnalysis.find('AnalysisCard')).toHaveLength(0);
Expand All @@ -153,7 +154,8 @@ describe('Connected Animal AnalysisPage', () => {
// Click back button --> replace SubAnalysisButton with AnalysisTypeButton
mountedAnalysis.find('.backButton').first().simulate('click');
expect(
mountedAnalysis.find('Provider').props().store.getState().analysis.depth
mountedAnalysis.find('Provider').props().store.getState().analysis
.depth,
).toEqual(0);
mountedAnalysis.update();
expect(mountedAnalysis.find('AnimalDataAnalysis')).toHaveLength(0);
Expand All @@ -165,19 +167,19 @@ describe('Connected Animal AnalysisPage', () => {
});

describe('Connected Human AnalysisPage', () => {
let mountedAnalysis = mount((
let mountedAnalysis = mount(
<Provider store={createStore(rootReducer, loggedInRootState)}>
<AnalysisHomePageConnected match={{ params: { subjectType: 'human' } }} />
</Provider>
));
</Provider>,
);
beforeAll(() => {
mountedAnalysis = mount((
mountedAnalysis = mount(
<Provider store={createStore(rootReducer, loggedInRootState)}>
<AnalysisHomePageConnected
match={{ params: { subjectType: 'human' } }}
/>
</Provider>
));
</Provider>,
);
});
afterAll(() => {
mountedAnalysis.unmount();
Expand All @@ -189,7 +191,7 @@ describe('Connected Human AnalysisPage', () => {
expect(mountedAnalysis.find('.activeAnalysis')).toHaveLength(0);
expect(mountedAnalysis.find('SubAnalysisCard')).toHaveLength(0);
expect(
mountedAnalysis.find('Provider').props().store.getState().analysis.depth
mountedAnalysis.find('Provider').props().store.getState().analysis.depth,
).toEqual(0);
});
});
127 changes: 110 additions & 17 deletions src/App/__test__/App.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,10 @@ import App from '../App';
import testUser from '../../testData/testUser.json';

// Mocking Google Analytics
jest.mock('ga-gtag');
vi.mock('ga-gtag');

// Mocking scrollTo
window.scrollTo = jest.fn();
window.scrollTo = vi.fn();

describe('<App />', () => {
let component;
Expand All @@ -32,7 +32,14 @@ describe('<App />', () => {
});

// No other routes render components, and only one component rendered
function testCorrectComponentInPath(app, routeTag, componentName, path, history, auth = false) {
function testCorrectComponentInPath(
app,
routeTag,
componentName,
path,
history,
auth = false,
) {
let noPath = true;
// Checks the right component loaded at path and other components are not
app.find(routeTag).forEach((route) => {
Expand Down Expand Up @@ -63,31 +70,61 @@ describe('Unauthenticated Application routing', () => {
test('loads the landing page at /search', () => {
history.push('/search');
mountApp.update();
testCorrectComponentInPath(mountApp, 'Route', 'SearchPage', '/search', history);
testCorrectComponentInPath(
mountApp,
'Route',
'SearchPage',
'/search',
history,
);
});

test('loads the browse data page at /data-download', () => {
history.push('/data-download');
mountApp.update();
testCorrectComponentInPath(mountApp, 'Route', 'BrowseDataPage', '/data-download', history);
testCorrectComponentInPath(
mountApp,
'Route',
'BrowseDataPage',
'/data-download',
history,
);
});

test('loads the browse data page at /code-repositories', () => {
history.push('/code-repositories');
mountApp.update();
testCorrectComponentInPath(mountApp, 'Route', 'CodeRepositories', '/code-repositories', history);
testCorrectComponentInPath(
mountApp,
'Route',
'CodeRepositories',
'/code-repositories',
history,
);
});

test('loads the browse data page at /project-overview', () => {
history.push('/project-overview');
mountApp.update();
testCorrectComponentInPath(mountApp, 'Route', 'MainStudy', '/project-overview', history);
testCorrectComponentInPath(
mountApp,
'Route',
'MainStudy',
'/project-overview',
history,
);
});

test('loads the linkout page at /external-links', () => {
history.push('/external-links');
mountApp.update();
testCorrectComponentInPath(mountApp, 'Route', 'LinkoutPage', '/external-links', history);
testCorrectComponentInPath(
mountApp,
'Route',
'LinkoutPage',
'/external-links',
history,
);
});

test('loads the team page at /team', () => {
Expand All @@ -99,13 +136,25 @@ describe('Unauthenticated Application routing', () => {
test('loads the contact page at /contact', () => {
history.push('/contact');
mountApp.update();
testCorrectComponentInPath(mountApp, 'Route', 'Contact', '/contact', history);
testCorrectComponentInPath(
mountApp,
'Route',
'Contact',
'/contact',
history,
);
});

test('loads the error page at /error', () => {
history.push('/error');
mountApp.update();
testCorrectComponentInPath(mountApp, 'Route', 'ErrorPage', '/error', history);
testCorrectComponentInPath(
mountApp,
'Route',
'ErrorPage',
'/error',
history,
);
});
});

Expand Down Expand Up @@ -135,45 +184,89 @@ describe('Authenticated Application routing', () => {
});

test('State should change to logged in on loginSuccess dispatch', () => {
expect(mountApp.find('Provider').props().store.getState().auth.isAuthenticated).toBeTruthy();
expect(
mountApp.find('Provider').props().store.getState().auth.isAuthenticated,
).toBeTruthy();
});

test('loads the search page at /search', () => {
history.push('/search');
// Update required to re-render the application
mountApp.update();
testCorrectComponentInPath(mountApp, 'Route', 'SearchPage', '/search', history, true);
testCorrectComponentInPath(
mountApp,
'Route',
'SearchPage',
'/search',
history,
true,
);
});

test('loads the QC reports at /qc-reports', () => {
history.push('/qc-reports');
// Update required to re-render the application
mountApp.update();
testCorrectComponentInPath(mountApp, 'AuthWrapper', 'DataStatusPage', '/qc-data-monitor', history, true);
testCorrectComponentInPath(
mountApp,
'AuthWrapper',
'DataStatusPage',
'/qc-data-monitor',
history,
true,
);
});

test('loads the methods page at /methods', () => {
history.push('/methods');
// Update required to re-render the application
mountApp.update();
testCorrectComponentInPath(mountApp, 'AuthWrapper', 'Methods', '/methods', history, true);
testCorrectComponentInPath(
mountApp,
'AuthWrapper',
'Methods',
'/methods',
history,
true,
);
});

test('loads the sample summary page at /summary', () => {
history.push('/summary');
mountApp.update();
testCorrectComponentInPath(mountApp, 'AuthWrapper', 'DataSummaryPage', '/summary', history, true);
testCorrectComponentInPath(
mountApp,
'AuthWrapper',
'DataSummaryPage',
'/summary',
history,
true,
);
});

test('loads the linkout page at /external-links', () => {
history.push('/external-links');
mountApp.update();
testCorrectComponentInPath(mountApp, 'Route', 'LinkoutPage', '/external-links', history, true);
testCorrectComponentInPath(
mountApp,
'Route',
'LinkoutPage',
'/external-links',
history,
true,
);
});

test('loads the team page at /team', () => {
history.push('/team');
mountApp.update();
testCorrectComponentInPath(mountApp, 'Route', 'TeamPage', '/team', history, true);
testCorrectComponentInPath(
mountApp,
'Route',
'TeamPage',
'/team',
history,
true,
);
});
});
Loading

0 comments on commit 596cfc8

Please sign in to comment.