VEMBA SYNDICATE REACT COMPONENT
This is React Component from Vemba Corp. for syndicate component.
Local Development set up
1 . Standalone with (Hot Reload)
- Clone the repo
- CD to ```/devops```
- RUN ```make mount```
- RUN ```make deploy``` (Deploys to local Kubernetes Cluster)
- Goto any recommended Browser and navigate as [Syndicate Homepage](http://localhost:5007/formats) should load the home page.
NPM Publishing
To Publish the stable build or bug-fixes to @vemba Org in NPM
*** (make sure you should not commit changes to git before publish) below automation takes care of all ***
- CD to ```/devops```
- RUN ```make publish```
- make sure you push the version number change to the branch.
NPM Publish for release
- CD to ```/devops```
- RUN ```make publish-release```
- make sure you push the version number change to the branch.
if you run into version error, you can run ```npm version patch``` and run the previous commend again
make sure you push the version number change to the branch.
Submodule
Initialize submodule
Git Submodule (sharedassets) - this step is included in 'make deploy' now
```https://git-scm.com/book/en/v2/Git-Tools-Submodules```
To include the submodule in an existing repo
1. Navigate to the src/assets/folder and in the terminal, enter:
```git submodule add https://bitbucket.org/vembainc/sharedassets.git```
2. run ```git submodule init```, this will create the empty sharedassets folder and to import files
3. run ```git submodule update```
Clone projects with submodule
Clone the project repo and automatically setup the submodules using --recure-submodules
```git clone --recurse-submodules https://bitbucket.org/vembain/vemba-ott-ui.git```
This should automatically initialize and update each submodule in the repo.
###Pushing and Pulling branches
To push/pull all changes (this needs to be done with each push/pull)
```git push --recurse-submodules=on-demand```
Alternately, you can do regular push/pull from the parent git or from the submodule independently.
NOTE:
- It is important to remember that any changes to the Theme or any of the shared assets will be promoted across multiple projects. It is vitally important to make only changes that are project non-specific in this repo.
- if you have added any test files in sharedAssets, make sure the component is exported in the parent repo as well.
Testing
- run
npm test
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
This section has details on how to use Jest to test the client. The tests will be run automatically as part of the build process, handled by modifying the jenkinsfile. (MORE DETAILS TO FOLLOW)
The function of these tests is to maintain functionality of components, helpers and other smaller bits of functionality. Testing the app as a whole is impractical for react apps. Syndicate-UI testing should be built using the following considerations:
- Start with simple components first. When creating tests for more complex components we won't have to consider the testing of smaller functionality used within.
- Don't test third party libraries or components. Testing whether a Material-UI package is working is redundant. Testing how a parent class that uses Material UI components will provide better coverage.
- Test default props as well as custom values
- Test all of the conditions required to render the class. This becomes more important and increasingly complex with the complexity of the component being tested.
- Mock all backend OTT methods. Backend has it's own set of tests and we don't need to validate responses here as well.
The following article gives an excellent run down of how we will test:
In order for the tests to run with "npm test", package.json must have the following added to the scripts object: (MORE DETAILS TO FOLLOW FOR ADDITIONAL TEST REQUIREMENTS)
"scripts": {
"test": "set TZ=America/Toronto && jest"
},
Where jest is the command that runs the tests and we set the timezone so the tests run in the same date time structure.
Run the tests
The tests will run as part of the jenkins build and can logs and results can be accessed through bitbucket. To run the tests locally, type npm test.
Mocking Functions:
https://jestjs.io/docs/en/es6-class-mocks
Here is an example of mocking the jwtDecode function so we can control the response:
jest.mock('jwt-decode', () => {
return jest.fn().mockImplementation(() => {
return {userId: 1234};
});
});
Configuring Jest in package.json
An important point to note is that because we have moved all of the tests to the src/tests/ folder, we need to configure Jest through the package.json so it can access all of the node modules
"jest": {
"setupFilesAfterEnv": ["<rootDir>/src/tests/setupTests.js"],
"moduleNameMapper": {
"\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/tests/__mocks__/fileMock.js",
"\\.(scss|css|less)$": "<rootDir>/src/tests/__mocks__/styleMock.js",
"config.js": "<rootDir>/src/tests/__mocks__/configMock.js",
"jwt-decode": "<rootDir>/node_modules/jwt-decode",
"moment": "<rootDir>/node_modules/moment"
}
}
"setupFilesAfterEnv": ["/src/tests/setupTests.js"] - This allows us to provide an array of paths to setup files. These contain tasks that need to be set for all tests, like mocks for localStorage and configuration for enzyme.
"moduleNameMapper" - This allows files like scss and images to be mapped to appropriate mock files. - We also need to map the node modules here (jwt-decode and moment, for example) - We can also mock config files here as well.
Essentially, anything added to moduleNameMapper will be substituted for the files called by the application build.
Enzyme vs Material-UI testing
Material UI needs to use a special library for testing it's components. Import import { createMount, createShallow } from '@material-ui/core/test-utils'; for testing Material-UI components.
For React Components that don't include Material-UI components, you can use Enzyme testing. The enzyme package has been configured as part of setupTests.js.
Pro tips
- fit() to focus on a specific test
- xit() to exclude a specific test
- it() to test
Testing sagas
- we are using redux-saga-test-plan package
- most of the components are wrapped inside a redux store provide. if you need to a mock store, we use redux-mock-store
Testing sharedAssets component
- if you have added any test files in sharedAssets, make sure the component is exported in the parent repo as well.
- Testing if string exists in component
- Keep in mind that the message id you pass in might not exist in every repo. We won't be able to use .text() as the test will fail in another repo.
- You can check if the formattedMessage.prop('id') contains the correct message id.
- Passing a message id that does not exist in en.json will generate a console error or console warning. If you want to hide these errors, you will need to suppress the messages in beforeEach and afterEach.
Important Documents for Testing
- https://github.com/facebook/create-react-app/blob/master/docusaurus/docs/running-tests.md#srcsetuptestsjs-1
- https://github.com/sapegin/jest-cheat-sheet/blob/master/Readme.md
- https://material-ui.com/guides/testing/#api
- https://jestjs.io/docs/en/es6-class-mocks
- https://jestjs.io/docs/en/mock-function-api.html