VEMBA UPLOADER 2 UI REACT COMPONENT
This is React Component from Vemba Corp. for Video Upload functionality.
Maintainers
Arunesh
Presil
Harsha
Recommended Browsers
Google Chrome Morzilla Firefox Apple Safari all latest.
Installation
npm install vemba-uploader-ui
Usage
Using as NPM Package
1 . Importing the Vemba Uploader Component
import VembaUploaderUI from 'vemba-uploader-ui'
2 . Render the element
ReactDOM.render(<VembaUploaderUI props={value} />, document.getElementById('element'));
3 . Expected props to render the component.
- partnerId : Integer (associated Partner ID) eg. '379'
- apiUrl : String Base url of Vemba Backend Service Deployment eg. (https://api-staging.vemba.io)
- apiToken : String Login Token of the Partner.
NOTE All user uploads by 'ZMG' will automatically transition to "Transcoding" as per the setting.
Important Settings Important user settings for Uploader : - isuploaderEnabled (to enable edit/upload mode) - auto_transcode (to enable/disable auto transcoding for user uploaded videos) - use_file_stack (to enable/disable filestack upload feature)
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 [Uploader 2 Homepage](http://localhost:4000) 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```
- On completion the code is commited and push to the remote branch and new fresh build is published to npm with version number patched and bumped.
Material UI
We are using V3. (https://v3.material-ui.com)
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
- Navigate to the src/asssets/folder and in the terminal, enter:
*git submodule add https://bitbucket.org/vembainc/sharedassets.git
- This will create the empty sharedasssets folder and to import files
*git submodule init
then
git submodule update
Testing
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. Uploader 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
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
Updates
Stay tuned. Comming shortly!!