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 });
};