@tolgee/core 4.7.0 → 4.7.2

package/src/__integration/Tolgee.test.ts

@@ -0,0 +1,90 @@
+jest.autoMockOff();
+
+import { waitFor } from '@testing-library/dom';
+import '@testing-library/jest-dom/extend-expect';
+import { Tolgee } from '..';
+import mockTranslations from './mockTranslations';
+import fetchMock from 'jest-fetch-mock';
+import { testConfig } from './testConfig';
+
+const API_URL = 'http://localhost';
+const API_KEY = 'dummyApiKey';
+
+const fetch = fetchMock.mockResponse(async (req) => {
+  if (req.url.includes('/v2/api-keys/current')) {
+    return JSON.stringify(testConfig);
+  } else if (req.url.includes('/v2/projects/translations/en')) {
+    return JSON.stringify(mockTranslations);
+  }
+
+  throw new Error('Invalid request');
+});
+
+describe('Tolgee invisble mode', () => {
+  let tolgee: Tolgee;
+  beforeEach(async () => {
+    fetch.enableMocks();
+    tolgee = Tolgee.init({
+      targetElement: document.body,
+      apiKey: API_KEY,
+      apiUrl: API_URL,
+      inputPrefix: '{{',
+      inputSuffix: '}}',
+    });
+    document.body.innerHTML = '';
+    await tolgee.run();
+  });
+
+  afterEach(() => {
+    tolgee.stop();
+  });
+
+  it('it translate text in body', async () => {
+    document.body.innerHTML = '{{hello_world}}';
+
+    await waitFor(() => {
+      const el = document
+        .evaluate(
+          "descendant-or-self::*[contains(text(), 'Hello world!')]",
+          document.body,
+          null,
+          0
+        )
+        .iterateNext();
+
+      expect(el).toBeInTheDocument();
+    });
+  });
+
+  it('returns default when provided', async () => {
+    expect(
+      await tolgee.translate({
+        key: 'nonexistant',
+        noWrap: true,
+        defaultValue: 'This is default',
+      })
+    ).toEqual('This is default');
+  });
+
+  test('returns empty value if orEmpty is true', async () => {
+    expect(
+      await tolgee.translate({
+        key: 'nonexistant',
+        noWrap: true,
+        orEmpty: true,
+      })
+    ).toEqual('');
+  });
+
+  test('will return key when no translation found', async () => {
+    expect(
+      await tolgee.translate({ key: 'test\\.key.this\\.is\\.it', noWrap: true })
+    ).toEqual('test\\.key.this\\.is\\.it');
+  });
+
+  test('will return proper text without any dot', async () => {
+    expect(
+      await tolgee.translate({ key: 'text without any dot', noWrap: true })
+    ).toEqual('text without any dot');
+  });
+});

package/src/__integration/TolgeeInvisible.test.ts

@@ -0,0 +1,145 @@
+jest.autoMockOff();
+
+import { waitFor } from '@testing-library/dom';
+import '@testing-library/jest-dom/extend-expect';
+import { Tolgee } from '..';
+import mockTranslations from './mockTranslations';
+import fetchMock from 'jest-fetch-mock';
+import { testConfig } from './testConfig';
+import { decodeFromText } from '../helpers/secret';
+
+const API_URL = 'http://localhost';
+const API_KEY = 'dummyApiKey';
+
+const fetch = fetchMock.mockResponse(async (req) => {
+  if (req.url.includes('/v2/api-keys/current')) {
+    return JSON.stringify(testConfig);
+  } else if (req.url.includes('/v2/projects/translations/en')) {
+    return JSON.stringify(mockTranslations);
+  }
+
+  throw new Error('Invalid request');
+});
+
+describe('Tolgee invisble mode', () => {
+  let tolgee: Tolgee;
+  beforeEach(async () => {
+    fetch.enableMocks();
+    tolgee = Tolgee.init({
+      targetElement: document.body,
+      apiKey: API_KEY,
+      apiUrl: API_URL,
+      wrapperMode: 'invisible',
+    });
+    document.body.innerHTML = '';
+    await tolgee.run();
+  });
+
+  afterEach(() => {
+    tolgee.stop();
+  });
+
+  it('handles translation in text', async () => {
+    const translation = await tolgee.translate('hello_world');
+
+    document.body.innerHTML = `<div id="test">${translation}</div>`;
+
+    await waitFor(() => {
+      return expect(
+        // @ts-ignore
+        document.getElementById('test')._tolgee
+      ).not.toBeUndefined();
+    });
+
+    expect(
+      decodeFromText(document.getElementById('test').textContent).length
+    ).toEqual(0);
+    expect(document.getElementById('test').textContent).toEqual('Hello world!');
+  });
+
+  it('handles missing translation in text', async () => {
+    const translation = await tolgee.translate('nonexistant');
+
+    document.body.innerHTML = `<div id="test">${translation}</div>`;
+
+    await waitFor(() => {
+      return expect(
+        // @ts-ignore
+        document.getElementById('test')._tolgee
+      ).not.toBeUndefined();
+    });
+
+    expect(
+      decodeFromText(document.getElementById('test').textContent).length
+    ).toEqual(0);
+    expect(document.getElementById('test').textContent).toEqual('nonexistant');
+  });
+
+  it('handles default value in text', async () => {
+    const translation = await tolgee.translate({
+      key: 'nonexistant',
+      defaultValue: 'Default value!',
+    });
+
+    document.body.innerHTML = `<div id="test">${translation}</div>`;
+
+    await waitFor(() => {
+      return expect(
+        // @ts-ignore
+        document.getElementById('test')._tolgee
+      ).not.toBeUndefined();
+    });
+
+    expect(
+      decodeFromText(document.getElementById('test').textContent).length
+    ).toEqual(0);
+    expect(document.getElementById('test').textContent).toEqual(
+      'Default value!'
+    );
+  });
+
+  it('handles translation in attribute', async () => {
+    const translation = await tolgee.translate('hello_world');
+
+    document.body.innerHTML = `<div id="test" title="${translation}"></div>`;
+
+    await waitFor(() => {
+      return expect(
+        // @ts-ignore
+        document.getElementById('test')._tolgee
+      ).not.toBeUndefined();
+    });
+
+    expect(
+      decodeFromText(document.getElementById('test').getAttribute('title'))
+        .length
+    ).toEqual(0);
+    expect(document.getElementById('test').getAttribute('title')).toEqual(
+      'Hello world!'
+    );
+  });
+
+  it('handles translation on select', async () => {
+    const translation = await tolgee.translate('hello_world');
+
+    document.body.innerHTML = `
+      <select id="select">
+        <option id="option">${translation}</option>
+      </select>
+    `;
+
+    await waitFor(() => {
+      return expect(
+        // @ts-ignore
+        document.getElementById('select')._tolgee
+      ).not.toBeUndefined();
+    });
+
+    expect(
+      decodeFromText(document.getElementById('option').textContent).length
+    ).toEqual(0);
+    expect(document.getElementById('option').textContent).toEqual(
+      'Hello world!'
+    );
+  });
+});

package/src/__integration/mockTranslations.ts

@@ -0,0 +1,6 @@
+export default {
+  en: {
+    peter_dogs: 'Peter has {dogsCount} dogs.',
+    hello_world: 'Hello world!',
+  },
+};

package/src/__integration/testConfig.ts

@@ -0,0 +1,16 @@
+export const testConfig = {
+  id: 42,
+  key: 'asdfasdsfasdfasdfasdf',
+  username: 'john@toe@tolgee.com',
+  userFullName: 'John Doe',
+  projectId: 15,
+  projectName: 'Tolgee test',
+  scopes: [
+    'screenshots.view',
+    'screenshots.upload',
+    'screenshots.delete',
+    'keys.edit',
+    'translations.edit',
+    'translations.view',
+  ],
+};

package/src/__testFixtures/classMock.ts

@@ -0,0 +1,11 @@
+export default <T>(
+  implementationFn: () => Partial<T>,
+  baseConstructor?: new (...args) => any
+) => {
+  function theMock() {
+    Object.assign(this, new baseConstructor());
+    Object.assign(this, implementationFn());
+  }
+
+  return jest.fn().mockImplementation(theMock);
+};

package/src/__testFixtures/createElement.ts

@@ -0,0 +1,43 @@
+import { ElementWithMeta, NodeMeta, NodeWithMeta } from '../types';
+import { TOLGEE_ATTRIBUTE_NAME } from '../Constants/Global';
+
+export const createElement = (
+  nodesCount: number,
+  keysCount: number,
+  sameKeys = false
+) => {
+  const mockedElement = document.createElement(
+    'div'
+  ) as Element as ElementWithMeta;
+
+  let keyNum = 0;
+
+  const cn = (text) => {
+    const node = document.createTextNode(text) as Node as NodeWithMeta;
+    const keys = [];
+
+    for (let i = 0; i < keysCount; i++) {
+      keys.push({
+        key: `key${sameKeys ? `` : ` ${keyNum++}`}`,
+        params: { a: 'aaa' },
+        defaultValue: 'default value',
+      });
+    }
+    node._tolgee = {
+      oldTextContent: `"${text}" before translation.`,
+      keys,
+    } as NodeMeta;
+    return node;
+  };
+
+  const nodes = [];
+  for (let i = 0; i < nodesCount; i++) {
+    nodes.push(cn(`text ${i}`));
+  }
+  mockedElement._tolgee = {
+    nodes: new Set(nodes),
+  };
+  mockedElement.append(...nodes);
+  mockedElement.setAttribute(TOLGEE_ATTRIBUTE_NAME, '');
+  return mockedElement;
+};

package/src/__testFixtures/createTestDom.ts

@@ -0,0 +1,25 @@
+export const createTestDom = (document: Document) => {
+  const c = {
+    keyInRoot: 'key_in_root',
+    keyInRootDiv: 'aaa_translate_Key.aaa',
+    hereKey: 'here',
+    hereTooKey: 'here_too',
+    appendedKey: 'appended_key',
+    ariaLabelKey: 'aria_label_key',
+    optionKey: 'option_key',
+  };
+
+  document.body = document.createElement('body');
+  document.body.innerHTML = `{{${c.keyInRoot}}}' +
+        '<div id="rootDiv">Some trash... {{${c.keyInRootDiv}}}' +
+        '   <div>Some other text to translate <span>{{${c.hereKey}}} and {{${c.hereTooKey}}}</span> text continues.'</div> +
+        '   <div id="multipleTextNodes">Before text</div>' +
+        '   <div aria-label="this is {{${c.ariaLabelKey}}} label"></div>' +
+        '   <select><option>{{${c.optionKey}}}</option></select>'+
+        '<div>`;
+  document.getElementById('multipleTextNodes').append('some text node');
+  document.getElementById('multipleTextNodes').append(`{{${c.appendedKey}}}`);
+  document.getElementById('multipleTextNodes').append(` after text`);
+
+  return c;
+};

package/src/__testFixtures/mocked.ts

@@ -0,0 +1,25 @@
+import { TolgeeConfig } from '../TolgeeConfig';
+import { Properties } from '../Properties';
+import { CoreService } from '../services/CoreService';
+import { Observer } from '../Observer';
+import { mocked } from 'ts-jest/utils';
+import { TranslationService } from '../services/TranslationService';
+import { TextService } from '../services/TextService';
+import { EventService } from '../services/EventService';
+import { EventEmitterImpl } from '../services/EventEmitter';
+import { ContentHandler } from '../wrappers/text/ContentHandler';
+
+export const configMock = mocked(TolgeeConfig);
+export const propertiesMock = mocked(Properties);
+export const coreServiceMock = mocked(CoreService);
+export const observerMock = mocked(Observer);
+export const translationServiceMock = mocked(TranslationService);
+export const textServiceMock = mocked(TextService);
+export const eventServiceMock = mocked(EventService);
+export const eventEmitterMock = mocked(EventEmitterImpl);
+export const tolgeeConfigMock = mocked(TolgeeConfig);
+export const textHandlerMock = mocked(ContentHandler);
+
+export const getMockedInstance = <T>(constructor: new (...args) => T) => {
+  return mocked(constructor).mock.instances[0];
+};

package/src/__testFixtures/setupAfterEnv.ts

@@ -0,0 +1,34 @@
+jest.dontMock('../helpers/NodeHelper.ts');
+
+import { NodeHelper } from '../helpers/NodeHelper';
+import { prettyDOM } from '@testing-library/dom';
+
+expect.extend({
+  toBeFoundIn(xpath, contextNode) {
+    const result = NodeHelper.evaluate(xpath, contextNode);
+    if (result.length > 0 && document.contains(result[0])) {
+      return {
+        message: () =>
+          `Xpath ${xpath} should not be found in ${contextNode}\n\n${prettyDOM(
+            contextNode
+          )}`,
+        pass: true,
+      };
+    }
+    return {
+      message: () =>
+        `Xpath ${xpath} should be found in ${contextNode}\n\n${prettyDOM(
+          contextNode
+        )}`,
+      pass: false,
+    };
+  },
+} as any);
+
+declare global {
+  namespace jest {
+    interface Matchers<R> {
+      toBeFoundIn(contextNode: Node): R;
+    }
+  }
+}

package/src/helpers/NodeHelper.ts

@@ -0,0 +1,90 @@
+import { ArgumentTypes } from './commonTypes';
+import { TOLGEE_TARGET_ATTRIBUTE } from '../Constants/Global';
+
+export class NodeHelper {
+  static evaluate<T extends Node>(
+    ...args: ArgumentTypes<typeof NodeHelper.evaluateGenerator>
+  ): T[] {
+    return Array.from(this.evaluateGenerator(...args)) as T[];
+  }
+
+  static evaluateToSingle<T extends Node>(
+    ...args: ArgumentTypes<typeof NodeHelper.evaluateGenerator>
+  ): T {
+    const arr = this.evaluate<T>(...args);
+    if (arr.length === 1) {
+      return arr[0];
+    }
+    if (arr.length < 1) {
+      throw new Error('No element found');
+    }
+    throw new Error('Multiple elements found');
+  }
+
+  public static closestElement(node: Element | Text) {
+    if (node instanceof Text) {
+      return node.parentElement;
+    }
+    return node;
+  }
+
+  static getParentElement(node: Node): Element | undefined {
+    if (node.parentElement) {
+      return node.parentElement;
+    }
+    if ((node as Attr).ownerElement) {
+      return (node as Attr).ownerElement;
+    }
+  }
+
+  static isElementTargetElement(element: Element): boolean {
+    return element.hasAttribute(TOLGEE_TARGET_ATTRIBUTE);
+  }
+
+  static markElementAsTargetElement(element: Element): void {
+    element.setAttribute(TOLGEE_TARGET_ATTRIBUTE, '');
+  }
+
+  static unmarkElementAsTargetElement(element: Element): void {
+    element.removeAttribute(TOLGEE_TARGET_ATTRIBUTE);
+  }
+
+  static nodeContains(descendant: Node, node: Node) {
+    if (descendant.contains(node)) {
+      return true;
+    }
+    if (node instanceof Attr) {
+      const ownerContainsAttr =
+        node.ownerElement &&
+        Object.values(node.ownerElement.attributes).indexOf(node) > -1;
+      if (descendant.contains(node.ownerElement) && ownerContainsAttr) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  private static *evaluateGenerator<T extends Node>(
+    expression: string,
+    targetNode: Node
+  ): Generator<T> {
+    let node: Node;
+    const evaluated = document.evaluate(
+      expression,
+      targetNode,
+      undefined,
+      XPathResult.ANY_TYPE
+    );
+    while ((node = evaluated.iterateNext()) !== null) {
+      yield node as T;
+    }
+  }
+
+  static getNodeText(node: Node) {
+    return node.textContent;
+  }
+
+  static setNodeText(node: Node, text: string) {
+    node.textContent = text;
+  }
+}

package/src/helpers/TextHelper.test.ts

@@ -0,0 +1,62 @@
+jest.dontMock('./TextHelper');
+
+import { TextHelper } from './TextHelper';
+
+describe('TextHelper', () => {
+  describe('will split', () => {
+    test('on non escaped properly', () => {
+      const strings = TextHelper.splitOnNonEscapedDelimiter(
+        'text.to.split',
+        '.'
+      );
+      expect(strings).toEqual(['text', 'to', 'split']);
+    });
+
+    test('on escaped and non escaped properly', () => {
+      const strings = TextHelper.splitOnNonEscapedDelimiter(
+        'text\\.to\\.split',
+        '.'
+      );
+      expect(strings).toEqual(['text.to.split']);
+    });
+
+    test('empty string properly', () => {
+      const strings = TextHelper.splitOnNonEscapedDelimiter('', '.');
+      expect(strings).toEqual(['']);
+    });
+
+    test('correctly when it begins with escape', async () => {
+      const strings = TextHelper.splitOnNonEscapedDelimiter('\\.aa', '.');
+      expect(strings).toEqual(['.aa']);
+    });
+
+    test('correctly when it ends with escape', async () => {
+      const strings = TextHelper.splitOnNonEscapedDelimiter('aa\\.', '.');
+      expect(strings).toEqual(['aa.']);
+    });
+
+    test('correctly when it contains escaped escape character', async () => {
+      const strings = TextHelper.splitOnNonEscapedDelimiter('aa\\\\.', '.');
+      expect(strings).toEqual(['aa\\', '']);
+    });
+
+    test('correctly when it contains escaped escape character and delimiter is escaped', async () => {
+      const strings = TextHelper.splitOnNonEscapedDelimiter('aa\\\\\\.', '.');
+      expect(strings).toEqual(['aa\\.']);
+    });
+  });
+
+  describe('It remove escapes', () => {
+    test('basically', async () => {
+      expect(TextHelper.removeEscapes('t\\t')).toEqual('tt');
+    });
+
+    test('not if escape character is escaped', async () => {
+      expect(TextHelper.removeEscapes('\\\\')).toEqual('\\');
+    });
+
+    test('if there is escaped escaped character', async () => {
+      expect(TextHelper.removeEscapes('\\\\\\')).toEqual('\\');
+    });
+  });
+});

package/src/helpers/TextHelper.ts

@@ -0,0 +1,58 @@
+export class TextHelper {
+  public static splitOnNonEscapedDelimiter(
+    string: string,
+    delimiter: string
+  ): string[] {
+    const result = [];
+    let actual = '';
+    let escaped = false;
+    for (let i = 0; i < string.length; i++) {
+      const char = string[i];
+      if (char === '\\' && !escaped) {
+        escaped = true;
+        continue;
+      }
+      if (escaped) {
+        escaped = false;
+        actual += char;
+        continue;
+      }
+      if (char === delimiter) {
+        result.push(actual);
+        actual = '';
+        continue;
+      }
+      actual += char;
+    }
+    result.push(actual);
+    return result;
+  }
+
+  public static isCharEscaped(position: number, fullString: string) {
+    let escapeCharsCount = 0;
+    while (position > -1 && fullString[position - 1] === '\\') {
+      escapeCharsCount++;
+      position--;
+    }
+    return escapeCharsCount % 2 == 1;
+  }
+
+  public static removeEscapes(string: string) {
+    let result = '';
+    let escaped = false;
+    for (let i = 0; i < string.length; i++) {
+      const char = string[i];
+      if (char === '\\' && !escaped) {
+        escaped = true;
+        continue;
+      }
+      if (escaped) {
+        escaped = false;
+        result += char;
+        continue;
+      }
+      result += char;
+    }
+    return result;
+  }
+}

package/src/helpers/commonTypes.ts

@@ -0,0 +1,8 @@
+// eslint-disable-next-line @typescript-eslint/ban-types
+export type ArgumentTypes<F extends Function> = F extends (
+  ...args: infer A
+) => any
+  ? A
+  : never;
+
+export type ThenArg<T> = T extends PromiseLike<infer U> ? U : T;