chore: add unit tests

src/@types/events.ts

@@ -1,12 +1,12 @@
 enum Event {
     ACTIVE_CHANGE = 'annotations_active_change',
     ACTIVE_SET = 'annotations_active_set',
+    CREATOR_STAGED_CHANGE = 'creator_staged_change',
     ANNOTATION_CREATE = 'annotations_create',
     ANNOTATION_FETCH_ERROR = 'annotations_fetch_error',
     ANNOTATION_REMOVE = 'annotations_remove',
     ANNOTATIONS_INITIALIZED = 'annotations_initialized',
     ANNOTATIONS_MODE_CHANGE = 'annotations_mode_change',
-    ANNOTATIONS_STAGED_CHANGE = 'annotations_staged_change',
     VISIBLE_SET = 'annotations_visible_set',
 }
 

src/store/eventing/__tests__/staged-test.ts

@@ -0,0 +1,111 @@
+import eventManager from '../../../common/EventManager';
+import { getStatus, getType, handleSetStagedAction, handleResetCreatorAction } from '../staged';
+import { createStore } from '../..';
+import { CreatorItemHighlight, CreatorItemRegion, CreatorState } from '../../creator';
+import { Event } from '../../../@types';
+
+jest.mock('../../../common/EventManager');
+
+describe('store/eventing/staged', () => {
+    const getStagedHighlight = (): CreatorItemHighlight => ({
+        location: 1,
+        shapes: [
+            {
+                type: 'rect',
+                height: 50,
+                width: 50,
+                x: 10,
+                y: 10,
+            },
+        ],
+    });
+
+    const getStagedRegion = (): CreatorItemRegion => ({
+        location: 1,
+        shape: {
+            type: 'rect',
+            height: 50,
+            width: 50,
+            x: 10,
+            y: 10,
+        },
+    });
+
+    const getCreatorHighlight = (): CreatorState =>
+        ({
+            staged: getStagedHighlight(),
+        } as CreatorState);
+
+    const getCreatorRegion = (): CreatorState =>
+        ({
+            staged: getStagedRegion(),
+        } as CreatorState);
+
+    describe('getStatus()', () => {
+        test.each`
+            prev         | next         | expectedStatus
+            ${null}      | ${null}      | ${null}
+            ${null}      | ${'notnull'} | ${'create'}
+            ${'notnull'} | ${null}      | ${null}
+            ${'notnull'} | ${'notnull'} | ${'update'}
+        `(
+            'should return $expectedStatus if prevStaged=$prev and nextStaged=$next',
+            ({ prev, next, expectedStatus }) => {
+                expect(getStatus(prev, next)).toBe(expectedStatus);
+            },
+        );
+    });
+
+    describe('getType()', () => {
+        test.each`
+            staged                  | expectedType
+            ${null}                 | ${null}
+            ${getStagedHighlight()} | ${'highlight'}
+            ${getStagedRegion()}    | ${'region'}
+        `('should returned $expectedType if staged=$staged', ({ staged, expectedType }) => {
+            expect(getType(staged)).toBe(expectedType);
+        });
+    });
+
+    describe('handleSetStagedAction()', () => {
+        test.each`
+            prev                                                          | next
+            ${createStore().getState()}                                   | ${createStore().getState()}
+            ${createStore({ creator: getCreatorHighlight() }).getState()} | ${createStore().getState()}
+        `('should not emit event if status or type is null', ({ prev, next }) => {
+            handleSetStagedAction(prev, next);
+
+            expect(eventManager.emit).not.toHaveBeenCalled();
+        });
+
+        test.each`
+            prev                                                       | next                                                          | type           | status
+            ${createStore().getState()}                                | ${createStore({ creator: getCreatorHighlight() }).getState()} | ${'highlight'} | ${'create'}
+            ${createStore().getState()}                                | ${createStore({ creator: getCreatorRegion() }).getState()}    | ${'region'}    | ${'create'}
+            ${createStore({ creator: getCreatorRegion() }).getState()} | ${createStore({ creator: getCreatorRegion() }).getState()}    | ${'region'}    | ${'update'}
+        `('should emit event with type=$type and status=$status', ({ prev, next, type, status }) => {
+            handleSetStagedAction(prev, next);
+
+            expect(eventManager.emit).toHaveBeenCalledWith(Event.CREATOR_STAGED_CHANGE, { type, status });
+        });
+    });
+
+    describe('handleResetCreatorAction()', () => {
+        test('should not emit event if type is null', () => {
+            const prevState = createStore().getState();
+            handleResetCreatorAction(prevState);
+
+            expect(eventManager.emit).not.toHaveBeenCalled();
+        });
+
+        test.each`
+            prev                                                          | type
+            ${createStore({ creator: getCreatorHighlight() }).getState()} | ${'highlight'}
+            ${createStore({ creator: getCreatorRegion() }).getState()}    | ${'region'}
+        `('should emit cancel event if with type=$type', ({ prev, type }) => {
+            handleResetCreatorAction(prev);
+
+            expect(eventManager.emit).toHaveBeenCalledWith(Event.CREATOR_STAGED_CHANGE, { type, status: 'cancel' });
+        });
+    });
+});

src/store/eventing/middleware.ts

@@ -13,8 +13,8 @@ import { handleCreateErrorEvents, handleCreatePendingEvents, handleCreateSuccess
 import { handleFetchErrorEvents } from './fetch';
 import { handleResetCreatorAction, handleSetStagedAction } from './staged';
 import { handleToggleAnnotationModeAction } from './mode';
+import { resetCreatorAction, setStagedAction } from '../creator';
 import { toggleAnnotationModeAction } from '../common/actions';
-import { setStagedAction, resetCreatorAction } from '../creator';
 
 // Array of event handlers based on redux action. To add handling for new events add an entry keyed by action
 const eventHandlers: EventHandlerMap = {

src/store/eventing/staged.ts

@@ -1,18 +1,13 @@
 import eventManager from '../../common/EventManager';
 import { AppState } from '../types';
-import { getCreatorStaged, CreatorItem, isCreatorStagedRegion, isCreatorStagedHighlight } from '../creator';
+import { CreatorItem, getCreatorStaged, isCreatorStagedHighlight, isCreatorStagedRegion } from '../creator';
 import { Event } from '../../@types';
 
 type Status = 'create' | 'update' | 'cancel';
 
 type Type = 'highlight' | 'region';
 
-type StagedChangeEvent = {
-    status: Status;
-    type: Type;
-};
-
-const getStatus = (prevStaged: CreatorItem, nextStaged: CreatorItem): Status | null => {
+export const getStatus = (prevStaged: CreatorItem, nextStaged: CreatorItem): Status | null => {
     let status: Status | null = null;
 
     if (prevStaged === null && nextStaged !== null) {
@@ -26,7 +21,7 @@ const getStatus = (prevStaged: CreatorItem, nextStaged: CreatorItem): Status | n
     return status;
 };
 
-const getType = (staged: CreatorItem): Type | null => {
+export const getType = (staged: CreatorItem): Type | null => {
     let type: Type | null = null;
 
     if (isCreatorStagedRegion(staged)) {
@@ -50,8 +45,7 @@ export const handleSetStagedAction = (prevState: AppState, nextState: AppState):
         return;
     }
 
-    const payload: StagedChangeEvent = { type, status };
-    eventManager.emit(Event.ANNOTATIONS_STAGED_CHANGE, payload);
+    eventManager.emit(Event.CREATOR_STAGED_CHANGE, { type, status });
 };
 
 export const handleResetCreatorAction = (prevState: AppState): void => {
@@ -62,7 +56,5 @@ export const handleResetCreatorAction = (prevState: AppState): void => {
         return;
     }
 
-    const payload: StagedChangeEvent = { type, status: 'cancel' };
-
-    eventManager.emit(Event.ANNOTATIONS_STAGED_CHANGE, payload);
+    eventManager.emit(Event.CREATOR_STAGED_CHANGE, { type, status: 'cancel' });
 };