diff --git a/spec/annotateArea.spec.tsx b/spec/annotateArea.spec.tsx index 2359d14a..276f21c4 100644 --- a/spec/annotateArea.spec.tsx +++ b/spec/annotateArea.spec.tsx @@ -126,13 +126,58 @@ describe('', () => { }]); }); - it('should send capture_taken BI event on component mount', () => { + it('should send annotate_erased if clicked on path with tool eraser', () => { const spy = jest.spyOn(analyticsHandler.analytics, 'track'); - const expectedValue = { action_type: 'annotate_added', element: 'ScreenSnippet' }; + const pathProps = { + paths: [{ + points: [{ x: 0, y: 0 }], + shouldShow: true, + strokeWidth: 5, + color: 'rgba(233, 0, 0, 0.64)', + key: 'path0', + }], + highlightColor: 'rgba(233, 0, 0, 0.64)', + penColor: 'rgba(38, 196, 58, 1)', + onChange: jest.fn(), + imageDimensions: { width: 800, height: 800 }, + annotateAreaDimensions: { width: 800, height: 800 }, + chosenTool: Tool.eraser, + screenSnippetPath: 'very-nice-path', + }; + const wrapper = mount(); + const path = wrapper.find('[data-testid="path0"]'); + const expectedValue = { action_type: 'annotate_erased', element: 'screen_capture_annotate' }; + path.simulate('click'); + expect(spy).toBeCalledWith(expectedValue); + }); + + it('should send annotate_added_pen event when drawn with pen', () => { + const spy = jest.spyOn(analyticsHandler.analytics, 'track'); + const expectedValue = { action_type: 'annotate_added_pen', element: 'screen_capture_annotate' }; const wrapper = mount(); const area = wrapper.find('[data-testid="annotate-area"]'); area.simulate('mousedown', { pageX: 2, pageY: 49 }); area.simulate('mouseup'); expect(spy).toBeCalledWith(expectedValue); }); + + it('should send annotate_added_highlight event when drawn with highlight', () => { + const highlightProps = { + paths: [], + highlightColor: 'rgba(233, 0, 0, 0.64)', + penColor: 'rgba(38, 196, 58, 1)', + onChange: jest.fn(), + imageDimensions: { width: 800, height: 800 }, + annotateAreaDimensions: { width: 800, height: 800 }, + chosenTool: Tool.highlight, + screenSnippetPath: 'very-nice-path', + }; + const spy = jest.spyOn(analyticsHandler.analytics, 'track'); + const expectedValue = { action_type: 'annotate_added_highlight', element: 'screen_capture_annotate' }; + const wrapper = mount(); + const area = wrapper.find('[data-testid="annotate-area"]'); + area.simulate('mousedown', { pageX: 2, pageY: 49 }); + area.simulate('mouseup'); + expect(spy).toBeCalledWith(expectedValue); + }); }); diff --git a/spec/snippingTool.spec.tsx b/spec/snippingTool.spec.tsx index 4133fe2c..4eba4c49 100644 --- a/spec/snippingTool.spec.tsx +++ b/spec/snippingTool.spec.tsx @@ -22,16 +22,16 @@ describe('Snipping Tool', () => { expect(spy).toBeCalledWith('snipping-tool-data', expect.any(Function)); }); - it('should send capture_taken BI event on component mount', () => { + it('should send screenshot_taken BI event on component mount', () => { const spy = jest.spyOn(analyticsHandler.analytics, 'track'); - const expectedValue = { action_type: 'capture_taken', element: 'ScreenSnippet' }; + const expectedValue = { action_type: 'screenshot_taken', element: 'screen_capture_annotate' }; mount(React.createElement(SnippingTool)); expect(spy).toBeCalledWith(expectedValue); }); it('should send capture_sent BI event when clicking done', async () => { const spy = jest.spyOn(analyticsHandler.analytics, 'track'); - const expectedValue = { action_type: 'capture_sent', element: 'ScreenSnippet' }; + const expectedValue = { action_type: 'annotate_done', element: 'screen_capture_annotate' }; const wrapper = mount(React.createElement(SnippingTool)); wrapper.find('[data-testid="done-button"]').simulate('click'); wrapper.update(); @@ -39,6 +39,16 @@ describe('Snipping Tool', () => { expect(spy).toBeCalledWith(expectedValue); }); + it('should send annotate_cleared BI event when clicking clear', async () => { + const spy = jest.spyOn(analyticsHandler.analytics, 'track'); + const expectedValue = { action_type: 'annotate_cleared', element: 'screen_capture_annotate' }; + const wrapper = mount(React.createElement(SnippingTool)); + wrapper.find('[data-testid="clear-button"]').simulate('click'); + wrapper.update(); + await waitForPromisesToResolve(); + expect(spy).toBeCalledWith(expectedValue); + }); + it('should render pen color picker when clicked on pen', () => { const wrapper = shallow(React.createElement(SnippingTool)); wrapper.find('[data-testid="pen-button"]').simulate('click'); diff --git a/src/app/analytics-handler.ts b/src/app/analytics-handler.ts index fb585c5e..48b2051b 100644 --- a/src/app/analytics-handler.ts +++ b/src/app/analytics-handler.ts @@ -14,9 +14,12 @@ export enum MenuActionTypes { } export enum ScreenSnippetActionTypes { - CAPTURE_TAKEN = 'capture_taken', - ANNOTATE_ADDED = 'annotate_added', - CAPTURE_SENT = 'capture_sent', + SCREENSHOT_TAKEN = 'screenshot_taken', + ANNOTATE_ADDED_PEN = 'annotate_added_pen', + ANNOTATE_ADDED_HIGHLIGHT = 'annotate_added_highlight', + ANNOTATE_DONE = 'annotate_done', + ANNOTATE_CLEARED = 'annotate_cleared', + ANNOTATE_ERASED = 'annotate_erased', } export enum AnalyticsActions { @@ -26,7 +29,7 @@ export enum AnalyticsActions { export enum AnalyticsElements { MENU = 'Menu', - SCREEN_SNIPPET = 'ScreenSnippet', + SCREEN_CAPTURE_ANNOTATE = 'screen_capture_annotate', } const MAX_EVENT_QUEUE_LENGTH = 50; diff --git a/src/renderer/components/annotate-area.tsx b/src/renderer/components/annotate-area.tsx index a801ebd0..5bf6b3e2 100644 --- a/src/renderer/components/annotate-area.tsx +++ b/src/renderer/components/annotate-area.tsx @@ -50,6 +50,10 @@ const AnnotateArea: React.FunctionComponent = ({ updPaths.map((p) => { if (p && p.key === key) { p.shouldShow = false; + analytics.track({ + element: AnalyticsElements.SCREEN_CAPTURE_ANNOTATE, + action_type: ScreenSnippetActionTypes.ANNOTATE_ERASED, + }); } return p; }); @@ -227,10 +231,18 @@ const AnnotateArea: React.FunctionComponent = ({ const handleMouseUp = () => { stopDrawing(); - analytics.track({ - element: AnalyticsElements.SCREEN_SNIPPET, - action_type: ScreenSnippetActionTypes.ANNOTATE_ADDED, - }); + if (chosenTool === Tool.pen) { + analytics.track({ + element: AnalyticsElements.SCREEN_CAPTURE_ANNOTATE, + action_type: ScreenSnippetActionTypes.ANNOTATE_ADDED_PEN, + }); + } + if (chosenTool === Tool.highlight) { + analytics.track({ + element: AnalyticsElements.SCREEN_CAPTURE_ANNOTATE, + action_type: ScreenSnippetActionTypes.ANNOTATE_ADDED_HIGHLIGHT, + }); + } }; const getAnnotateWrapperStyle = () => { diff --git a/src/renderer/components/snipping-tool.tsx b/src/renderer/components/snipping-tool.tsx index 4bb6e4aa..69e97230 100644 --- a/src/renderer/components/snipping-tool.tsx +++ b/src/renderer/components/snipping-tool.tsx @@ -92,8 +92,8 @@ const SnippingTool: React.FunctionComponent = ({ existingPat useLayoutEffect(() => { ipcRenderer.once('snipping-tool-data', getSnipImageData); analytics.track({ - element: AnalyticsElements.SCREEN_SNIPPET, - action_type: ScreenSnippetActionTypes.CAPTURE_TAKEN, + element: AnalyticsElements.SCREEN_CAPTURE_ANNOTATE, + action_type: ScreenSnippetActionTypes.SCREENSHOT_TAKEN, }); return () => { ipcRenderer.removeListener('snipping-tool-data', getSnipImageData); @@ -165,6 +165,10 @@ const SnippingTool: React.FunctionComponent = ({ existingPat return p; }); setPaths(updPaths); + analytics.track({ + element: AnalyticsElements.SCREEN_CAPTURE_ANNOTATE, + action_type: ScreenSnippetActionTypes.ANNOTATE_CLEARED, + }); }; // Utility functions @@ -199,8 +203,8 @@ const SnippingTool: React.FunctionComponent = ({ existingPat const svg = document.getElementById('annotate-area'); const mergedImageData = svg ? await svgAsPngUri(document.getElementById('annotate-area'), {}) : 'MERGE_FAIL'; analytics.track({ - element: AnalyticsElements.SCREEN_SNIPPET, - action_type: ScreenSnippetActionTypes.CAPTURE_SENT, + element: AnalyticsElements.SCREEN_CAPTURE_ANNOTATE, + action_type: ScreenSnippetActionTypes.ANNOTATE_DONE, }); ipcRenderer.send('upload-snippet', { screenSnippetPath, mergedImageData }); };