feat: Add method to change translation for screenshot taking (#496)

Author: JanCizmar

packages/core/src/helpers/sleep.ts

@@ -0,0 +1,2 @@
+export const sleep = (ms: number) =>
+  new Promise((resolve) => setTimeout(resolve, ms));

packages/core/src/services/DependencyStore.ts

@@ -92,7 +92,8 @@ export class DependencyStore {
     this.messages,
     this.properties,
     this.eventService,
-    this.elementRegistrar
+    this.elementRegistrar,
+    this.translationService
   );
 
   constructor(config: TolgeeConfig = new TolgeeConfig()) {

packages/core/src/services/TranslationService.test.ts

@@ -48,12 +48,16 @@ global.fetch = jest.fn(async (url: string) => {
 describe('TranslationService', () => {
   let translationService: TranslationService;
   const languageLoadedEmitMock = jest.fn();
+  const translationChangedEmitMock = jest.fn();
 
   beforeEach(async () => {
     translationService = new DependencyStore().translationService;
     (getMockedInstance(EventService) as any).LANGUAGE_LOADED = {
       emit: languageLoadedEmitMock,
     };
+    (getMockedInstance(EventService) as any).TRANSLATION_CHANGED = {
+      emit: translationChangedEmitMock,
+    };
     getMockedInstance(ApiHttpService).fetchJson = jest.fn(
       async () => mockedTranslations
     );
@@ -198,6 +202,11 @@ describe('TranslationService', () => {
       expect(getMockedInstance(CoreService).checkScope).toBeCalledTimes(1);
     });
 
+    test('emits translation changed event', async () => {
+      expect(translationChangedEmitMock).toBeCalledTimes(1);
+      expect(translationChangedEmitMock).toBeCalledWith(dummyTranslationData);
+    });
+
     test('will update the data', async () => {
       await translationService.loadTranslations('en');
       await translationService.setTranslations(dummyTranslationData);

packages/core/src/services/TranslationService.ts

@@ -122,9 +122,60 @@ export class TranslationService {
         data[translationData.key] = translationData.translations[lang];
       }
     });
+
+    await (
+      this.eventService.TRANSLATION_CHANGED as EventEmitterImpl<TranslationData>
+    ).emit(translationData);
+
     return result;
   }
 
+  /**
+   * Change translations of some keys to some value temporarily.
+   * For screenshot taking with provided values, before actually saving
+   * the values
+   *
+   * @return Returns callback changing affected translations back
+   */
+  async changeTranslations({
+    key,
+    translations,
+  }: TranslationData): Promise<() => void> {
+    const old: Record<string, string> = {};
+
+    Object.entries(translations).forEach(([language, value]) => {
+      const data = this.translationsCache.get(language);
+      if (data) {
+        old[language] = value;
+        data[key] = value;
+      }
+    });
+
+    await (
+      this.eventService.TRANSLATION_CHANGED as EventEmitterImpl<TranslationData>
+    ).emit({
+      key,
+      translations,
+    });
+
+    // callback to revert the operation
+    return async () => {
+      Object.entries(old).forEach(([language, value]) => {
+        const data = this.translationsCache.get(language);
+        if (data) {
+          data[key] = value;
+        }
+      });
+      await (
+        this.eventService
+          .TRANSLATION_CHANGED as EventEmitterImpl<TranslationData>
+      ).emit({
+        key,
+        translations: old,
+      });
+    };
+  }
+
   async uploadScreenshot(key, data) {
     this.coreService.checkScope('translations.edit');
 

packages/core/src/toolsManager/Messages.test.ts

@@ -0,0 +1,79 @@
+jest.dontMock('./Messages');
+jest.dontMock('../services/DependencyStore');
+
+import { Messages } from './Messages';
+import { DependencyStore } from '../services/DependencyStore';
+
+describe('Messages', () => {
+  let messages: Messages;
+  let windowAddEventListenerSpy;
+  let windowRemoveEventListenerSpy;
+
+  beforeEach(async () => {
+    messages = new DependencyStore().messages;
+    windowAddEventListenerSpy = jest.spyOn(window, 'addEventListener');
+    windowRemoveEventListenerSpy = jest.spyOn(window, 'removeEventListener');
+    messages.startListening();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('Can be created', () => {
+    expect(messages).toBeInstanceOf(Messages);
+  });
+
+  describe('starListening method', () => {
+    test('adds event listener to window', () => {
+      expect(windowAddEventListenerSpy).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('listening', () => {
+    let resolve;
+    const promise = new Promise((r) => (resolve = r));
+    const callbackMock = jest.fn(() => {
+      resolve();
+    });
+    const data = {};
+    let removeListener;
+    const sendMessage = () =>
+      window.dispatchEvent(
+        new MessageEvent('message', {
+          data: { type: 'TEST_EVENT', data },
+          source: window,
+          origin: window.origin,
+        })
+      );
+
+    beforeEach(async () => {
+      removeListener = messages.listen('TEST_EVENT', callbackMock);
+      sendMessage();
+      await promise;
+    });
+
+    test('listens to event', async () => {
+      expect(callbackMock).toHaveBeenCalledTimes(1);
+      expect(callbackMock).toHaveBeenCalledWith(data);
+    });
+
+    test('returns callback to remove listener', () => {
+      expect((messages as any).listeners).toHaveLength(1);
+      removeListener();
+      expect((messages as any).listeners).toHaveLength(0);
+    });
+  });
+
+  describe('stopListening method', () => {
+    test('stopsListening', () => {
+      messages.stopListening();
+      expect(windowRemoveEventListenerSpy).toHaveBeenCalledTimes(1);
+      expect(windowRemoveEventListenerSpy).toHaveBeenCalledWith(
+        windowAddEventListenerSpy.mock.calls[0][0],
+        windowAddEventListenerSpy.mock.calls[0][1],
+        windowAddEventListenerSpy.mock.calls[0][2]
+      );
+    });
+  });
+});

packages/core/src/toolsManager/Messages.ts

@@ -8,17 +8,16 @@ type Message = {
   type: string;
 };
 
-type PgEvent = {
+type TolgeeEvent = {
   data: Message;
 } & MessageEvent;
 
 export class Messages {
   private listeners: Listener[] = [];
-  private listenersPopup: Listener[] = [];
   private _stopListening: () => void;
 
   readonly startListening = () => {
-    const receiveMessage = (event: PgEvent) => {
+    const receiveMessage = (event: TolgeeEvent) => {
       if (event.source != window) {
         return;
       }
@@ -35,38 +34,27 @@ export class Messages {
     this._stopListening = () => {
       window.removeEventListener('message', receiveMessage, false);
     };
-
-    this.startPopupListening();
   };
 
   public stopListening() {
     this._stopListening();
   }
 
-  readonly startPopupListening = () => {
-    this.listen('POPUP_TO_LIB', (data: Message) => {
-      this.listenersPopup.forEach((listener) => {
-        if (data.type == listener.type) {
-          listener.callback(data.data);
-        }
-      });
-    });
-  };
-
-  readonly listenPopup = (type: string, callback: (data) => void) => {
-    this.listenersPopup.push({ type, callback });
-  };
-
   readonly listen = (type: string, callback: (data) => void) => {
-    this.listeners.push({ type, callback });
+    const listenerInfo = { type, callback };
+    this.listeners.push(listenerInfo);
+    // return callback to remove the listener
+    return () => {
+      this.listeners.splice(this.listeners.indexOf(listenerInfo), 1);
+    };
   };
 
   readonly send = (type: string, data?: any) => {
     try {
       window.postMessage({ type, data }, window.origin);
     } catch (e) {
       // eslint-disable-next-line no-console
-      console.warn('Can not send message.', e);
+      console.warn('Cannot send message.', e);
     }
   };
 }

packages/core/src/toolsManager/PluginManager.test.ts

@@ -0,0 +1,108 @@
+jest.dontMock('./PluginManager');
+jest.dontMock('../services/DependencyStore');
+
+import { ElementWithMeta } from '../types';
+import { ElementRegistrar } from '../services/ElementRegistrar';
+import { getMockedInstance } from '@testFixtures/mocked';
+import { PluginManager } from './PluginManager';
+import { DependencyStore } from '../services/DependencyStore';
+import { TranslationService } from '../services/TranslationService';
+import { Messages } from './Messages';
+
+describe('PluginManager', () => {
+  let pluginManager: PluginManager;
+
+  beforeEach(async () => {
+    pluginManager = new DependencyStore().pluginManager;
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('Can be created', () => {
+    expect(pluginManager).toBeInstanceOf(PluginManager);
+  });
+
+  describe('take screenshot methods', () => {
+    const data = {
+      key: 'test_key',
+      translations: { en: 'English!' },
+    };
+
+    let resolve;
+    const highlightMock = jest.fn();
+    const unHighlightMock = jest.fn();
+    let listenCallback;
+    const cancelMock = jest.fn();
+    const revertMock = jest.fn();
+
+    beforeEach(async () => {
+      getMockedInstance(TranslationService).changeTranslations = jest.fn(
+        () =>
+          new Promise((r) => {
+            resolve = r;
+          })
+      );
+
+      getMockedInstance(ElementRegistrar).findAllByKey = jest.fn(() => {
+        const element = document.createElement(
+          'span'
+        ) as any as ElementWithMeta;
+        element._tolgee = {
+          highlight: highlightMock,
+          unhighlight: unHighlightMock,
+        } as any;
+
+        return [element];
+      });
+
+      (getMockedInstance(Messages) as any).send = jest.fn();
+
+      (getMockedInstance(Messages) as any).listen = jest.fn((_, callback) => {
+        listenCallback = callback;
+        return cancelMock;
+      });
+
+      pluginManager.takeScreenshot(data);
+      resolve(revertMock);
+    });
+
+    test('calls change translation', () => {
+      expect(
+        getMockedInstance(TranslationService).changeTranslations
+      ).toHaveBeenCalledWith(data);
+    });
+
+    test('sends the message to take screenshots', () => {
+      expect((getMockedInstance(Messages) as any).send).toHaveBeenCalledTimes(
+        1
+      );
+    });
+
+    test('highlights all', () => {
+      expect(
+        getMockedInstance(ElementRegistrar).findAllByKey
+      ).toHaveBeenCalledWith(data.key);
+      expect(
+        getMockedInstance(ElementRegistrar).findAllByKey
+      ).toHaveBeenCalledTimes(1);
+      expect(highlightMock).toHaveBeenCalledTimes(1);
+    });
+
+    test('unhighlights all after', () => {
+      listenCallback();
+      expect(unHighlightMock).toHaveBeenCalledTimes(1);
+    });
+
+    test('reverts the translation change', () => {
+      listenCallback();
+      expect(revertMock).toHaveBeenCalledTimes(1);
+    });
+
+    test('cancels the listening', () => {
+      listenCallback();
+      expect(cancelMock).toHaveBeenCalledTimes(1);
+    });
+  });
+});