@tolgee/core 4.7.0 → 4.7.2

package/src/wrappers/text/ContentHandler.test.ts

@@ -0,0 +1,185 @@
+jest.dontMock('./ContentHandler');
+jest.dontMock('./TextWrapper');
+jest.dontMock('../NodeHandler');
+jest.dontMock('../../services/EventService');
+jest.dontMock('../../helpers/NodeHelper.ts');
+jest.dontMock('../../services/DependencyService');
+
+import { ContentHandler } from './ContentHandler';
+import '@testing-library/jest-dom/extend-expect';
+import { ElementWithMeta, NodeWithMeta, Unwrapped } from '../../types';
+import { NodeHelper } from '../../helpers/NodeHelper';
+import { createTestDom } from '@testFixtures/createTestDom';
+import { getMockedInstance } from '@testFixtures/mocked';
+import { ElementRegistrar } from '../../services/ElementRegistrar';
+import { Properties } from '../../Properties';
+import { DependencyService } from '../../services/DependencyService';
+import { Coder } from './Coder';
+import { TextWrapper } from './TextWrapper';
+
+describe('TextHandler', () => {
+  let textHandler: ContentHandler;
+
+  const mockedKeys = [
+    {
+      key: 'dummyKey',
+      params: { dummyParam: 'dummyValue' },
+    },
+  ];
+
+  const mockedTranslateInner = (text) => {
+    return {
+      text: text.replace(/{{(.*?)}}/gs, 'translated $1'),
+      keys: mockedKeys,
+    } as Unwrapped;
+  };
+
+  const gv = (key) => mockedTranslateInner(key).text;
+  const mockedTranslate = jest.fn(mockedTranslateInner);
+  let c: ReturnType<typeof createTestDom>;
+  beforeEach(() => {
+    const dependencyService = new DependencyService();
+    dependencyService.init({});
+
+    // @ts-ignore
+    textHandler = (dependencyService.wrapper as TextWrapper).textHandler;
+    getMockedInstance(Properties).config = {
+      inputPrefix: '{{',
+      inputSuffix: '}}',
+      restrictedElements: [],
+      tagAttributes: {
+        '*': ['aria-label'],
+      },
+      passToParent: ['option'],
+    };
+    c = createTestDom(document);
+    getMockedInstance(Coder).unwrap = (...args) => mockedTranslate(...args);
+  });
+
+  afterEach(async () => {
+    jest.clearAllMocks();
+  });
+
+  describe('in production mode', () => {
+    beforeEach(async () => {
+      await textHandler.handle(document.body);
+    });
+
+    test('Can be created', () => {
+      expect(textHandler).not.toBeUndefined();
+    });
+
+    test('will handle text in root', async () => {
+      expect(`./text()[contains(., ${gv(c.keyInRoot)})]`).toBeFoundIn(
+        document.body
+      );
+    });
+
+    test('will handle text in div', async () => {
+      expect(
+        `./div/text()[contains(., 'Some trash... translated ${gv(
+          c.keyInRootDiv
+        )}')]`
+      ).toBeFoundIn(document.body);
+    });
+
+    test('will handle text in div > div > span', async () => {
+      const xpath = `./div/div/span/text()[contains(., 'translated ${gv(
+        c.hereKey
+      )} and translated ${gv(c.hereTooKey)}')]`;
+      expect(xpath).toBeFoundIn(document.body);
+    });
+
+    describe("Node's _tolgee property", () => {
+      let node: NodeWithMeta;
+
+      beforeEach(() => {
+        node = NodeHelper.evaluateToSingle(
+          `./text()[contains(., ${gv(c.keyInRoot)})]`,
+          document.body
+        ) as NodeWithMeta;
+      });
+
+      test('will be defined', () => {
+        expect(node._tolgee).toBeDefined();
+      });
+
+      test('will have proper oldTextContent', () => {
+        expect(node._tolgee.oldTextContent).toContain(`{{${c.keyInRoot}}}`);
+      });
+
+      test('will have proper keys length', () => {
+        expect(node._tolgee.keys).toHaveLength(1);
+      });
+
+      test('will have proper first key', () => {
+        expect(node._tolgee.keys).toEqual(mockedKeys);
+      });
+    });
+
+    describe("Parent element's _tolgee property and attribute", () => {
+      let element: ElementWithMeta;
+      let node: NodeWithMeta;
+
+      beforeEach(() => {
+        node = NodeHelper.evaluateToSingle(
+          `./text()[contains(., ${gv(c.keyInRoot)})]`,
+          document.body
+        );
+        element = node.parentElement as any as ElementWithMeta;
+      });
+
+      test('property will be defined', () => {
+        expect(element._tolgee).toBeDefined();
+      });
+
+      test('will contain nodes array with correct node', () => {
+        expect(element._tolgee.nodes).toEqual(new Set([node]));
+      });
+
+      test('attribute will be set', () => {
+        expect(element.getAttribute('_tolgee')).toEqual('');
+      });
+    });
+
+    test("will pass option's text node to select element", () => {
+      const xPath = `//text()[contains(., 'translated option_key')]`;
+      const node = NodeHelper.evaluateToSingle(xPath, document.body);
+      expect(node.parentElement.parentElement).toHaveAttribute('_tolgee', '');
+      expect(node.parentElement).not.toHaveAttribute('_tolgee');
+    });
+  });
+
+  test('will pass recursively', async () => {
+    getMockedInstance(Properties).config.passToParent = ['option', 'select'];
+    await textHandler.handle(document.body);
+    const xPath = `//text()[contains(., 'translated option_key')]`;
+    const node = NodeHelper.evaluateToSingle(xPath, document.body);
+    expect(node.parentElement.parentElement.parentElement).toHaveAttribute(
+      '_tolgee',
+      ''
+    );
+    expect(node.parentElement.parentElement).not.toHaveAttribute('_tolgee');
+  });
+
+  test('will pass with function', async () => {
+    getMockedInstance(Properties).config.passToParent = (element) =>
+      element.tagName === 'OPTION';
+    await textHandler.handle(document.body);
+    const xPath = `//text()[contains(., 'translated option_key')]`;
+    const node = NodeHelper.evaluateToSingle(xPath, document.body);
+    expect(node.parentElement.parentElement).toHaveAttribute('_tolgee', '');
+    expect(node.parentElement).not.toHaveAttribute('_tolgee');
+  });
+
+  test('will register the node', async () => {
+    await textHandler.handle(document.body);
+    const node = NodeHelper.evaluateToSingle(
+      `./text()[contains(., ${gv(c.keyInRoot)})]`,
+      document.body
+    );
+    expect(getMockedInstance(ElementRegistrar).register).toBeCalledWith(
+      node.parentElement
+    );
+  });
+});

package/src/wrappers/text/ContentHandler.ts

@@ -0,0 +1,21 @@
+import { NodeHelper } from '../../helpers/NodeHelper';
+import { Properties } from '../../Properties';
+import { NodeHandler } from '../NodeHandler';
+
+export class ContentHandler {
+  constructor(
+    private properties: Properties,
+    private nodeHandler: NodeHandler
+  ) {}
+
+  async handle(node: Node): Promise<void> {
+    const inputPrefix = this.properties.config.inputPrefix;
+    const inputSuffix = this.properties.config.inputSuffix;
+
+    const xPath = `./descendant-or-self::text()[contains(., '${inputPrefix}') and contains(., '${inputSuffix}')]`;
+    const nodes = NodeHelper.evaluate(xPath, node);
+    const filtered: Text[] = this.nodeHandler.filterRestricted(nodes as Text[]);
+
+    await this.nodeHandler.handleNodes(filtered);
+  }
+}

package/src/wrappers/text/CoreHandler.test.ts

@@ -0,0 +1,106 @@
+jest.dontMock('./CoreHandler');
+jest.dontMock('./TextWrapper');
+jest.dontMock('../../helpers/NodeHelper');
+jest.dontMock('../../services/EventEmitter');
+jest.dontMock('../../services/DependencyService');
+
+import { CoreHandler } from './CoreHandler';
+import { getMockedInstance } from '@testFixtures/mocked';
+import { ContentHandler } from './ContentHandler';
+import { AttributeHandler } from './AttributeHandler';
+import { EventService } from '../../services/EventService';
+import { EventEmitterImpl } from '../../services/EventEmitter';
+import { mocked } from 'ts-jest/utils';
+import { TranslationData } from '../../types/DTOs';
+import { Properties } from '../../Properties';
+import { ElementMeta, NodeMeta, NodeWithMeta, Unwrapped } from '../../types';
+import { DependencyService } from '../../services/DependencyService';
+import { Coder } from './Coder';
+
+describe('CoreHandler', () => {
+  const mockedTranslationChanged = new EventEmitterImpl<TranslationData>();
+  const mockedLanguageChanged = new EventEmitterImpl<string>();
+  const mockedUnwrap: Unwrapped = {
+    keys: [{} as any],
+    text: 'This is refreshed',
+  };
+
+  mocked(EventService).mockImplementation(() => {
+    return {
+      TRANSLATION_CHANGED: mockedTranslationChanged,
+      LANGUAGE_CHANGED: mockedLanguageChanged,
+      LANGUAGE_LOADED: null,
+      ELEMENT_REGISTERED: null,
+    } as EventService;
+  });
+
+  mocked(Coder).mockImplementation(() => {
+    return {
+      unwrap: jest.fn(() => mockedUnwrap),
+    } as any as Coder;
+  });
+
+  let coreHandler: CoreHandler;
+
+  beforeEach(async () => {
+    const dependencyStore = new DependencyService();
+    dependencyStore.init({});
+
+    // @ts-ignore
+    coreHandler = dependencyStore.wrapper.coreHandler;
+    getMockedInstance(Properties).config.targetElement = document.body;
+  });
+
+  afterEach(async () => {
+    jest.clearAllMocks();
+  });
+
+  test('Can be created', () => {
+    expect(coreHandler).not.toBeUndefined();
+  });
+
+  describe('handleSubtree function', () => {
+    beforeEach(async () => {
+      await coreHandler.handleSubtree(document.body);
+    });
+
+    test('will call basic text handler', async () => {
+      expect(getMockedInstance(ContentHandler).handle).toBeCalledWith(
+        document.body
+      );
+      expect(getMockedInstance(ContentHandler).handle).toBeCalledTimes(1);
+    });
+
+    test('will call attribute handler', async () => {
+      expect(getMockedInstance(AttributeHandler).handle).toBeCalledWith(
+        document.body
+      );
+      expect(getMockedInstance(AttributeHandler).handle).toBeCalledTimes(1);
+    });
+  });
+
+  describe('refresh', () => {
+    const pgDiv = document.createElement('div');
+    pgDiv.setAttribute('_tolgee', '');
+    const textNode = document.createTextNode('Translated text');
+    textNode['_tolgee'] = {
+      oldTextContent: 'some_translation_key',
+    } as NodeMeta;
+    pgDiv['_tolgee'] = {
+      nodes: new Set([textNode as any as NodeWithMeta]),
+    } as ElementMeta;
+    pgDiv.append(textNode);
+
+    beforeEach(async () => {
+      document.body = document.createElement('body');
+      document.body.append(pgDiv);
+
+      await mockedLanguageChanged.emit('aaa');
+      await mockedTranslationChanged.emit(null);
+    });
+
+    test('will refresh the text', async () => {
+      expect(textNode.textContent).toEqual(mockedUnwrap.text);
+    });
+  });
+});

package/src/wrappers/text/CoreHandler.ts

@@ -0,0 +1,45 @@
+import { NodeHelper } from '../../helpers/NodeHelper';
+import { ContentHandler } from './ContentHandler';
+import { EventService } from '../../services/EventService';
+import { Properties } from '../../Properties';
+import { AttributeHandler } from './AttributeHandler';
+import { ElementWithMeta } from '../../types';
+import { WrappedHandler } from '../WrappedHandler';
+import { Coder } from './Coder';
+
+export class CoreHandler {
+  constructor(
+    private textHandler: ContentHandler,
+    private eventService: EventService,
+    private properties: Properties,
+    private attributeHandler: AttributeHandler,
+    private coder: Coder,
+    private wrappedHandler: WrappedHandler
+  ) {
+    if (typeof window !== 'undefined') {
+      eventService.LANGUAGE_CHANGED.subscribe(this.refresh.bind(this));
+      eventService.TRANSLATION_CHANGED.subscribe(this.refresh.bind(this));
+    }
+  }
+
+  public async handleSubtree(target: Element) {
+    await this.attributeHandler.handle(target);
+    await this.textHandler.handle(target);
+    await this.wrappedHandler.handle(target);
+  }
+
+  private async refresh() {
+    const nodes: ElementWithMeta[] = NodeHelper.evaluate(
+      `//*[@_tolgee]`,
+      this.properties.config.targetElement
+    );
+    for (const node of nodes) {
+      for (const textNode of node._tolgee.nodes) {
+        const result = await this.coder.unwrap(textNode._tolgee.oldTextContent);
+        if (result) {
+          NodeHelper.setNodeText(textNode, result.text);
+        }
+      }
+    }
+  }
+}

package/src/wrappers/text/TextWrapper.ts

@@ -0,0 +1,69 @@
+import { Properties } from '../../Properties';
+import { ElementRegistrar } from '../../services/ElementRegistrar';
+import { EventService } from '../../services/EventService';
+import { TextService } from '../../services/TextService';
+import { TranslationParams } from '../../types';
+import { NodeHandler } from '../NodeHandler';
+import { AttributeHandler } from './AttributeHandler';
+import { Coder } from './Coder';
+import { CoreHandler } from './CoreHandler';
+import { ContentHandler } from './ContentHandler';
+import { WrappedHandler } from '../WrappedHandler';
+import { AbstractWrapper } from '../AbstractWrapper';
+
+export class TextWrapper implements AbstractWrapper {
+  private coder: Coder;
+  private coreHandler: CoreHandler;
+  private attributeHandler: AttributeHandler;
+  private wrappedHandler: WrappedHandler;
+  private textHandler: ContentHandler;
+  private nodeHandler: any;
+  constructor(
+    eventService: EventService,
+    properties: Properties,
+    textService: TextService,
+    elementRegistrar: ElementRegistrar
+  ) {
+    this.coder = new Coder(properties, textService);
+    this.nodeHandler = new NodeHandler(properties, elementRegistrar, this);
+    this.textHandler = new ContentHandler(properties, this.nodeHandler);
+    this.attributeHandler = new AttributeHandler(properties, this.nodeHandler);
+    this.wrappedHandler = new WrappedHandler(
+      elementRegistrar,
+      this.nodeHandler
+    );
+    this.coreHandler = new CoreHandler(
+      this.textHandler,
+      eventService,
+      properties,
+      this.attributeHandler,
+      this.coder,
+      this.wrappedHandler
+    );
+  }
+
+  public handleText(node: Element) {
+    return this.textHandler.handle(node);
+  }
+
+  public handleSubtree(node: Element) {
+    return this.coreHandler.handleSubtree(node);
+  }
+
+  public handleAttribute(node: Element) {
+    return this.attributeHandler.handle(node);
+  }
+
+  public wrap(
+    key: string,
+    params: TranslationParams = {},
+    defaultValue: string | undefined = undefined,
+    translation: string
+  ) {
+    return this.coder.wrap(key, params, defaultValue);
+  }
+
+  public unwrap(text: string) {
+    return this.coder.unwrap(text);
+  }
+}