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.

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

Added unit tests for WorkflowDetail component #326

Closed
wants to merge 1 commit into from
Closed
Changes from all commits
Commits
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
50 changes: 50 additions & 0 deletions public/pages/workflow_detail/workflow_detail.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/

import React from 'react';
import { render } from '@testing-library/react';
import { Provider } from 'react-redux';

import {
BrowserRouter as Router,
RouteComponentProps,
Route,
Switch,
} from 'react-router-dom';
import { store } from '../../store';
import { WorkflowDetail } from './workflow_detail';
import { WorkflowDetailRouterProps } from '../../pages';

jest.mock('../../services', () => {
const { mockCoreServices } = require('../../../test');
return {
...jest.requireActual('../../services'),
...mockCoreServices,
};
});

const renderWithRouter = () =>
render(
<Provider store={store}>
<Router>
<Switch>
<Route
path="/workflow/:workflowId"
render={(props: RouteComponentProps<WorkflowDetailRouterProps>) => (
<WorkflowDetail setActionMenu={jest.fn()} {...props} />
)}
/>
</Switch>
</Router>
</Provider>
);

describe('WorkflowDetail', () => {
test('renders the page', () => {
const { container, baseElement } = renderWithRouter();
expect(baseElement.tagName).toBe('BODY');
expect(container.tagName).toBe('DIV');
Comment on lines +47 to +48
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This isn't a useful thing to test. We should test that certain wording exists, or other descriptors of components that we would be expecting when this renders. I would recommend looking at the AD OSD plugin unit tests for more examples. You can also refer to the testing-library documentation for more info and examples.

At a high-level, we use jest as the test framework, and @testing-library/react as a helper library for rendering and pulling out UI elements. A basic flow for testing UI components/pages is:

  1. Render the component using render() (optionally with different props for different states)
  2. Run testing-library queries (linked above) against that returned component to ensure certain elements exist etc.
  3. Assert that those queries return what is expected using jest, such as expect()

});
});
Loading