add c2p data to queue when inject status is 'none'. Proper use of set…

…TabInfo. Updated unit tests

app/scss/partials/_blocking_tracker.scss

@@ -165,10 +165,10 @@
 			}
 
 			.cliqz-tracker-trust > g > path:nth-child(1) {
-				stroke: #00AEF0;
+				stroke: #d8d8d8;
 			}
 			.cliqz-tracker-trust > g > path:nth-child(2) {
-				fill: #00AEF0;
+				fill: #f7f7f7;
 			}
 			.cliqz-tracker-scrub > g > .border {
 				fill: #FFF;

src/utils/click2play.js

@@ -102,24 +102,35 @@ export function buildC2P(details, app_id) {
 	// top-level document before sending c2p data to the page
 	switch (tab.c2pStatus) {
 		case 'none':
-			tab.c2pStatus = 'loading';
+			tabInfo.setTabInfo(tab_id, 'c2pStatus', 'loading');
+			// Push current C2P data into existing queue
+			if (!tab.c2pQueue.hasOwnProperty(app_id)) {
+				tabInfo.setTabInfo(tab_id, 'c2pQueue', Object.assign({}, tab.c2pQueue, {
+					[app_id]: {
+						data: c2pApp,
+						html: c2pHtml
+					}
+				}));
+			}
 			// Scripts injected at document_idle are guaranteed to run after the DOM is complete
 			injectScript(tab_id, 'dist/click_to_play.js', '', 'document_idle').then(() => {
 				// Send the entire queue to the content script to reduce message passing
 				sendMessage(tab_id, 'c2p', tab.c2pQueue);
-				tab.c2pStatus = 'done';
-				tab.c2pQueue = {};
+				tabInfo.setTabInfo(tab_id, 'c2pStatus', 'done');
+				tabInfo.setTabInfo(tab_id, 'c2pQueue', {});
 			}).catch((err) => {
 				log('buildC2P error', err);
 			});
 			break;
 		case 'loading':
 			// Push C2P data to a holding queue until click_to_play.js has finished loading on the page
 			if (!tab.c2pQueue.hasOwnProperty(app_id)) {
-				tab.c2pQueue[app_id] = {
-					data: c2pApp,
-					html: c2pHtml
-				};
+				tabInfo.setTabInfo(tab_id, 'c2pQueue', Object.assign({}, tab.c2pQueue, {
+					[app_id]: {
+						data: c2pApp,
+						html: c2pHtml
+					}
+				}));
 			}
 			break;
 		case 'done':

test/utils/click2play.test.js

@@ -87,43 +87,89 @@ jest.mock('../../src/classes/bugDb', () => ({
 // Mock TabInfo data
 tabInfo.getTabInfo = jest.fn();
 tabInfo.getTabInfo.mockReturnValue(tabInfo);
+tabInfo.setTabInfo = jest.fn().mockImplementation((tab_id, property, value) => {
+	tabInfo[property] = value;
+});
 
 describe('src/utils/click2play.js', () => {
-	const tab = tabInfo.getTabInfo(1);
+	const details = {
+		tab_id: 1
+	};
+	const tab = tabInfo.getTabInfo(details.tab_id);
 
 	describe('testing buildC2P()', () => {
-		const details = {
-			tab_id: 1
-		};
 
-		test('c2pStatus is \'none\'', () => {
-			expect(tab.c2pStatus).toBe('none');
-		});
+		describe('c2pStatus is "none"', () => {
+			beforeAll(() => {
+				tabInfo.c2pStatus = 'none';
+				sendMessage.mockClear();
+				injectScript.mockClear();
+			});
 
-		test('injectScript() is called when c2pStatus is \'none\'', () => {
-			buildC2P(details, 464);
-			expect(injectScript).toHaveBeenCalledWith(details.tab_id, 'dist/click_to_play.js', '', 'document_idle');
-		});
+			test('c2pStatus defaults to "none"', () => {
+				expect(tab.c2pStatus).toBe('none');
+			});
 
-		test('sendMessage() called with correct C2P data', () => {
-			expect(sendMessage).toHaveBeenCalledWith(details.tab_id, 'c2p', tab.c2pQueue);
-		});
+			test('injectScript() is called', () => {
+				buildC2P(details, 464);
+				expect(injectScript).toHaveBeenCalledWith(details.tab_id, 'dist/click_to_play.js', '', 'document_idle');
+			});
 
-		test('c2pStatus is \'done\'', () => {
-			expect(tab.c2pStatus).toBe('done');
-		});
+			test('c2pApp and c2pHtml data added to c2pQueue', () => {
+				// Look at what data was added to c2pQueue via setTabInfo
+				const c2pQueue = tabInfo.setTabInfo.mock.calls[1][2];
+				expect(c2pQueue).toHaveProperty('464');
+			});
+
+			test('sendMessage() called with correct C2P data', () => {
+				const c2pQueue = tabInfo.setTabInfo.mock.calls[1][2];
+				expect(sendMessage).toHaveBeenCalledWith(details.tab_id, 'c2p', c2pQueue);
+			});
 
-		test('injectScript() is not called when c2pStatus is \'loading\'', () => {
-			tabInfo.c2pStatus = 'loading';
-			injectScript.mockClear();
-			buildC2P(details, 464);
-			expect(injectScript).not.toHaveBeenCalled();
+			test('c2pStatus set to "done"', () => {
+				expect(tab.c2pStatus).toBe('done');
+			});
+
+			test('c2pQueue cleared', () => {
+				expect(tab.c2pQueue).toEqual({});
+			});
 		});
 
-		test('c2p app and html data added to c2pQueue when c2pStatus is \'loading\'', () => {
-			expect(tab.c2pQueue).toHaveProperty('464');
+		describe('c2pStatus is "loading"', () => {
+			beforeAll(() => {
+				sendMessage.mockClear();
+				injectScript.mockClear();
+				tabInfo.c2pStatus = 'loading';
+				buildC2P(details, 464);
+			});
+
+			test('injectScript() and sendMessage() are not called', () => {
+				expect(injectScript).not.toHaveBeenCalled();
+				expect(sendMessage).not.toHaveBeenCalled();
+			});
+
+			test('c2pApp and c2pHtml data added to c2pQueue', () => {
+				expect(tab.c2pQueue).toHaveProperty('464');
+			});
 		});
 
+		describe('c2pStatus is "done"', () => {
+			beforeAll(() => {
+				sendMessage.mockClear();
+				injectScript.mockClear();
+				tabInfo.c2pStatus = 'done';
+				tabInfo.c2pQueue = {};
+				buildC2P(details, 464);
+			});
 
+			test('injectScript() is not called. sendMessage() is called', () => {
+				expect(injectScript).not.toHaveBeenCalled();
+				expect(sendMessage).toHaveBeenCalled();
+			});
+
+			test('c2pQueue is empty', () => {
+				expect(tab.c2pQueue).toEqual({});
+			});
+		});
 	});
 });