Set up Unit Tests for Your UI

At the end of this page, you should know how to write and run tests for:

• Epics
• Transforms
• Application State

Unit testing is to test an isolated part of your code and determine if it works as intended. This is an important step because you can catch early flaws in the code that may be more difficult to catch at a later stage.

All unit tests are created under the folder: examplePackage/test.

Copy link to this section

Write epic unit tests

Components can interact with one another through custom epics. To learn more about epics, see communication between components.

Copy link to this section

Create a custom epic

Under examplePackage/src/ui/epics, create the custom epic Type file, DemoEpicExample.c3typ, and the related TypeScript file, DemoEpicExample.ts. All epics must have epic in their filename.

@typeScript
type DemoEpicExample extends UiSdlEpic mixes Value {

  epic: ~ ts-client
}

Copy link to this section

Test a created custom epic

1. Import the custom epic.

   Type

   Copy code to clipboard

   import { epic } from '@c3/ui/epics/DemoEpicExample';

2. Import SpecHelper.

   Type

   Copy code to clipboard

   import SpecHelper from '@c3/ui/UiSdlSpecHelper';

3. Create the test using the method, SpecHelper.expectObservable(). Refer to the UiSdlSpecHelper#expectObservable documentation to see examples. Do not use expectObservable to test the async function or Promise.

   Text

   Copy code to clipboard

   SpecHelper.expectObservable(
           done,
           {
             epic: epic,
             input: [
               '-a',
               {
                 a: inputAction, // The action that triggers this epic
               },
             ],
             output: [
               '--b--c',
               {
                 b: example1Action(arg1, arg2),
                 c: example2Action(arg3),
               },
             ],
           },
           {
             // You can set up state using SpecHelper.getState()
             value: this.state,
           }
         );

Copy link to this section

Write transform unit test

Custom transform changes the original data format to one that you need in your applications. To test that the data is in the correct format, create a unit test for transforms.

Copy link to this section

Create a custom transform

1. Under examplePackage/src/ui/dataTransforms, create the custom transform Type file, TransformDataAToDataB.c3typ.

   Type

   Copy code to clipboard

   @typeScript
   type TransformDataAToDataB extends UiSdlDataTransform<json, [any]> mixes Value {
     transform: ~ ts-client
   }

2. Under examplePackage/src/ui/dataTransforms, create the implementations file TransformDataAToDataB.ts.

Copy link to this section

Test a created custom transform

1. Import the custom transform and create and implement the test file.

   JavaScript

   Copy code to clipboard

   import { transform } from '@c3/ui/TransformDataAToDataB';
   
   const filename = 'test_TransformDataAToDataB';
   describe(filename, function () {
     describe('transform', function () {
       describe('possible valid input 1', function () {
         beforeAll(function () {
           this.expectedInput1 = {}; // expected input data
           this.result = {}; //expected output data
         });
   
         it('should return correct output', function () {
             expect(transform(this.expectedInput1)).toEqual(this.result);
           });
       });
   
       describe('possible valid input 2', function () {
         beforeAll(function () {
           this.expectedInput2 = {}; // expected input data
           this.result = {}; //expected output data
         });
   
         it('should return correct output', function () {
             expect(transform(this.expectedInput2)).toEqual(this.result);
           });
       });
   
       describe('invalid input input', function () {
       beforeAll(function () {
           this.invalidInput1 = {}; // invalid input data
           this.error = {}; //expected error
         });
   
         it('should give ', function () {
             expect(transform(this.invalidInput1)).toEqual(this.error);
           });
       });
     });
   });

Copy link to this section

Write application state unit test

To maintain application-specific logic or state, you can create a custom application state. Implementing a custom application state as a component means the component can have its action, reducers, and epics. To test these functionalities:

1. Under examplePackage/src/ui/, create a custom application state Type file DemoApplicationStateCustom.c3typ.

Copy link to this section

Test a created custom application state unit test

1. Implement the test file similar to the following:

   JavaScript

   Copy code to clipboard

   import {
     helperFunction,
     exampleAction,
     exampleReducer, 
     exampleEpic
   } from '@c3/ui/DemoApplicationStateCustom';
   import SpecHelper from '@c3/ui/UiSdlSpecHelper';
   
   const filename = 'test_DemoApplicationStateCustom';
   describe(filename, function () {
     beforeAll(function () {
       this.appStateId = ...;
       // Other variables needed
     });
   
     describe('actions', function () {
       describe('::exampleAction', function () {
         beforeAll(function () {
           this.result = exampleAction(args);
           this.expectedResult = {
             type: this.appStateId + '.EXPECTED_SUFFIX',
             payload: ...,
           };
         });
   
         it('...', function () {
           expect(this.result).toEqual(this.expectedResult);
         });
       });
     });
   
     describe('reducers', function () {
       describe('::exampleReducer', function () {
         beforeAll(function () {
           // set up state
           this.result = exampleReducer(args);
           this.expectedResult = ...;
         });
   
         it('...', function () {
           expect(this.result).toEqual(this.expectedResult);
         });
       });
     });
   
     describe('epic', function () {
       describe('::exampleEpic', function () {
         // similar to epic example above
       });
     });
   
     describe('::helperFunction', function () {
       // test your helper function
     });
   });
   

Copy link to this section

View and run tests

1. Set up your application through the C3 AI VS Code Extension. To learn how to set up your application, see Set up the VS Code Extension.
2. To see all the tests, go to http://localhost:50081/c3/test.html and select the test you would like to run.
   • 
   • Alternatively, go to http://localhost:50081/c3/test.html?file={yourTestFileName} to see the individual test.
   • 
3. To debug, add breakpoints in the Chrome Source tab. To learn more about debugging your UI, see Debug and troubleshoot your UI.

Copy link to this section

View test in release management

To learn more about release management, see Release Management.