if/SymphonyElectron
1
0
Fork 0
mirror of https://github.com/finos/SymphonyElectron.git synced 2024-12-27 01:11:13 -06:00
Code Issues Packages Projects Releases Wiki Activity

SDA-2571 Added correct BI events to screen annotate

Browse Source
This commit is contained in:
psjostrom 2020-12-03 17:22:06 +01:00
parent 09315ec6ce
commit 2d80e41695
5 changed files with 91 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
spec/annotateArea.spec.tsx
View File

@ -126,13 +126,58 @@ describe('<AnnotateArea/>', () => {
}]);
});
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(<AnnotateArea {...pathProps} />);
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(<AnnotateArea {...defaultProps} />);
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(<AnnotateArea {...highlightProps} />);
const area = wrapper.find('[data-testid="annotate-area"]');
area.simulate('mousedown', { pageX: 2, pageY: 49 });
area.simulate('mouseup');
expect(spy).toBeCalledWith(expectedValue);
});
});

16
spec/snippingTool.spec.tsx
View File

@ -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');

11
src/app/analytics-handler.ts
View File

@ -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;

20
src/renderer/components/annotate-area.tsx
View File

@ -50,6 +50,10 @@ const AnnotateArea: React.FunctionComponent<IAnnotateAreaProps> = ({
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<IAnnotateAreaProps> = ({
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 = () => {

12
src/renderer/components/snipping-tool.tsx
View File

@ -92,8 +92,8 @@ const SnippingTool: React.FunctionComponent<ISnippingToolProps> = ({ 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<ISnippingToolProps> = ({ 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<ISnippingToolProps> = ({ 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 });
};