@theforeman/test

> Adds theforeman testing tools to you project.


Installation

``sh
npm install --save-dev @theforeman/test
`

1. Use tfm-test and tfm-publish-coverage (for coverage) scripts under test and publish-coverage respectively in package.json:

`json
{
"test": "tfm-test --plugin",
"publish-coverage": "tfm-publish-coverage"
}
`

This script accepts all jest's arguments, including plugin
which is a flag indicator for plugins.

Configuration

In order to extend general settings or creating global mocks, create a test_setup.js
file under /webpack directory

For example, some global mocks :

`js
// test_setup.js
jest.mock("jed");
jest.mock("./assets/javascripts/react_app/common/I18n");
jest.mock("./assets/javascripts/foreman_tools", () => ({
foremanUrl: url => url
}));
`

Usage

This package gives an opiniated approach for test configurations and tools,
including jest, enzyme, react-testing-library, and a test utils library.

These functions can be imported directly from @theforeman/test:
mount and shallow- which are from enzyme
testComponentSnapshotsWithFixtures
testReducerSnapshotWithFixtures,
testActionSnapshotWithFixtures
testSelectorsSnapshotWithFixtures,
IntegrationTestHelper - which are from react-redux-test-utils
MockAdapter - which is from axios-mock-adapter
and also adding coveralls for coverage.

jest docs

enzyme docs

react-testing-library docs

react-redux-test-utils




$3


You can use testComponentSnapshotsWithFixtures for a unit testing without redux.
Keep in mind to import unconnected component (wrapped by connect nor redux-hooks)

`js
/ UserProfile.test.js /
import { testComponentSnapshotsWithFixtures } from "@theforeman/test";
import UserProfile from "../UserProfile"; // not redux connected

const fixtures = {
"should render UserProfile": {
user: "some-user"
},
"should render UserProfile with avatar": {
user: "some-user",
showAvatar: true
},
"should render UserProfile with posts and photos": {
user: "some-user",
showPosts: true,
showPhotos: true
}
};

describe("UserProfile - component", () =>
testComponentSnapshotsWithFixtures(UserProfile, fixtures));
`

$3

This will create a snapshot for UserProfileActions.js actions file:

`js
/ UserProfileActions.test.js /
import { testActionSnapshotWithFixtures } from '@theforeman/test';
import {
updateShowAvatar,
updateShowPosts,
updateShowPhotos
} from "../UserProfileActions";

const fixtures = {
"should update-show-avatar": () => updateShowAvatar(true),
"should update-show-posts": () => updateShowPosts(true),
"should update-show-photos": () => updateShowPhotos(true)
};

describe("UserProfile - Actions", () =>
testActionSnapshotWithFixtures(fixtures));
`

For async actions and further explanation please look here

$3

testReducerSnapshotWithFixtures creates a snapshot of a given reducer and fixtures:

`js
/ LoginFormReducer.test.js /
import { testReducerSnapshotWithFixtures } from '@theforeman/test';
import {
LOGIN_FORM_UPDATE_USERNAME,
LOGIN_FORM_UPDATE_PASSWORD,
LOGIN_FORM_TOGGLE_REMEMBER_ME,
} from '../LoginFormConstants';

import reducer from '../LoginFormReducer';

const fixtures = {
'it should update username': {
action: {
type: LOGIN_FORM_UPDATE_USERNAME,
payload: { username: 'some-username' }
}
},
'it should update password': {
action: {
type: LOGIN_FORM_UPDATE_PASSWORD,
payload: { password: 'some-password' }
}
},
'it should toggle remember-me': {
state: { rememberMe: false },
action: {
type: LOGIN_FORM_TOGGLE_REMEMBER_ME,
}
},
};

describe('LoginForm - Reducer', () =>
testReducerSnapshotWithFixtures(reducer, fixtures));
`

$3

This test a full cycle of a component including redux (actions, reducers and store)

`js
/ __tests__/integration.test.js /
import React from 'react';
import { IntegrationTestHelper } from '@theforeman/test';

import UserProfile, { reducers } from '../index'; // This is a connected component

describe('UserProfile - Integration Test', () => {
it('should flow', () => {
const integrationTestHelper = new IntegrationTestHelper(reducers);

const component = integrationTestHelper.mount(

);

// The user-avatar should not be shown
expect(component.exists('UserAvatar')).toEqual(false);
integrationTestHelper.takeStoreSnapshot('initial state');

// trigger checkbox change
component
.find('input#show-avatar-toggler')
.simulate('change', { target: { checked: true } });

// The user-avatar should be shown now
expect(component.exists('UserAvatar')).toEqual(true);
integrationTestHelper.takeStoreAndLastActionSnapshot(
'Update to show the user-avatar'
);
});
});
`

$3

The package react-testing-library is included and is a way to test functionality in a React application from a user perspective rather than testing the implementation. To use this library, please see the official documentation. It can be imported directly from @testing-library/react.

This approach is flexible and can be used to test smaller components as well as full pages made up of many components. For functional testing, it is recommended to test components connected to redux and mock the http calls, allowing the component to function as it does in the production application. These tests also tend to be less brittle than other approaches and can be good at catching regressions when refactoring.

For an example of how this is library is used within the Foreman ecosystem, please see Katello's react-testing-library-wrapper

Contributing

Please checkout the contributing.md, the roadmap.md` and the open issues.