core-app-api: add failing formatting tests for TranslationApi

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>
2023-09-15 10:41:17 +02:00
parent 2a901d83ab
commit a9f7e17e2d
1 changed files with 131 additions and 0 deletions
@@ -374,4 +374,135 @@ describe('I18nextTranslationApi', () => {

    expect(translations).toEqual(['foo', null, 'Föö', null, 'Føø']);
  });
+
+  describe('formatting', () => {
+    function snapshotWithMessages<
+      TMessages extends { [key in string]: string },
+    >(messages: TMessages) {
+      const translationApi = I18nextTranslationApi.create({
+        languageApi: AppLanguageSelector.create(),
+      });
+      const ref = createTranslationRef({
+        id: 'test',
+        messages,
+      });
+      return assertReady(translationApi.getTranslation(ref));
+    }
+
+    it('should format plain messages', () => {
+      const snapshot = snapshotWithMessages({
+        foo: 'Foo',
+        bar: 'Bar',
+        baz: 'Baz',
+      });
+
+      expect(snapshot.t('foo')).toBe('Foo');
+      expect(snapshot.t('bar')).toBe('Bar');
+      expect(snapshot.t('baz')).toBe('Baz');
+    });
+
+    it('should support interpolation', () => {
+      const snapshot = snapshotWithMessages({
+        shallow: 'Foo {{ bar }}',
+        multiple: 'Foo {{ bar }} {{ baz }}',
+        deep: 'Foo {{ bar.baz }}',
+      });
+
+      expect(snapshot.t('shallow')).toBe('Foo {{ bar }}');
+      expect(snapshot.t('shallow', { bar: 'Bar' })).toBe('Foo Bar');
+
+      expect(snapshot.t('multiple')).toBe('Foo {{ bar }} {{ baz }}');
+      expect(snapshot.t('multiple', { bar: 'Bar' })).toBe('Foo Bar {{ baz }}');
+      expect(snapshot.t('multiple', { bar: 'Bar', baz: 'Baz' })).toBe(
+        'Foo Bar Baz',
+      );
+
+      expect(snapshot.t('deep')).toBe('Foo {{ bar.baz }}');
+      expect(snapshot.t('deep', { bar: { baz: 'Baz' } })).toBe('Foo Baz');
+    });
+
+    // Escaping isn't as useful in React, since we don't need to escape HTML in strings
+    it('should not escape by default', () => {
+      const snapshot = snapshotWithMessages({
+        foo: 'Foo {{ foo }}',
+      });
+
+      expect(snapshot.t('foo', { foo: '<div>' })).toBe('Foo <div>');
+      expect(
+        snapshot.t('foo', {
+          foo: '<div>',
+          interpolation: { escapeValue: true },
+        }),
+      ).toBe('Foo &lt;div&gt;');
+    });
+
+    it('should support nesting', () => {
+      const snapshot = snapshotWithMessages({
+        foo: 'Foo $t(bar) $t(baz)',
+        bar: 'Nested',
+        baz: 'Baz {{ qux }}',
+      });
+
+      expect(snapshot.t('foo', { qux: 'Deep' })).toBe('Foo Nested Baz Deep');
+    });
+
+    it('should support formatting', () => {
+      const snapshot = snapshotWithMessages({
+        plain: '= {{ x }}',
+        number: '= {{ x, number }}',
+        numberFixed: '= {{ x, number(minimumFractionDigits: 2) }}',
+        relativeTime: '= {{ x, relativeTime }}',
+        relativeSeconds: '= {{ x, relativeTime(second) }}',
+        relativeSecondsShort:
+          '= {{ x, relativeTime(range: second; style: narrow) }}',
+        list: '= {{ x, list }}',
+      });
+
+      expect(snapshot.t('plain', { x: 5 })).toBe('= 5');
+      expect(snapshot.t('number', { x: 5 })).toBe('= 5');
+      expect(snapshot.t('number', { x: 5, minimumFractionDigits: 1 })).toBe(
+        '= 5.0',
+      );
+      expect(snapshot.t('numberFixed', { x: 5 })).toBe('= 5.00');
+      expect(
+        snapshot.t('numberFixed', { x: 5, minimumFractionDigits: 3 }),
+      ).toBe('= 5.000');
+      expect(snapshot.t('relativeTime', { x: 3 })).toBe('= in 3 days');
+      expect(snapshot.t('relativeTime', { x: -3 })).toBe('= 3 days ago');
+      expect(snapshot.t('relativeTime', { x: 15, range: 'weeks' })).toBe(
+        '= in 15 weeks',
+      );
+      expect(
+        snapshot.t('relativeTime', { x: 15, range: 'weeks', style: 'short' }),
+      ).toBe('= in 15 wk.');
+      expect(snapshot.t('relativeSeconds', { x: 1 })).toBe('= in 1 second');
+      expect(snapshot.t('relativeSeconds', { x: 2 })).toBe('= in 2 seconds');
+      expect(snapshot.t('relativeSeconds', { x: -3 })).toBe('= 3 seconds ago');
+      expect(snapshot.t('relativeSeconds', { x: 0 })).toBe('= in 0 seconds');
+      expect(snapshot.t('relativeSecondsShort', { x: 1 })).toBe('= in 1s');
+      expect(snapshot.t('relativeSecondsShort', { x: 2 })).toBe('= in 2s');
+      expect(snapshot.t('relativeSecondsShort', { x: -3 })).toBe('= 3s ago');
+      expect(snapshot.t('relativeSecondsShort', { x: 0 })).toBe('= in 0s');
+      expect(snapshot.t('list', { x: ['a'] })).toBe('= a');
+      expect(snapshot.t('list', { x: ['a', 'b'] })).toBe('= a and b');
+      expect(snapshot.t('list', { x: ['a', 'b', 'c'] })).toBe('= a, b, and c');
+    });
+
+    it('should support plurals', () => {
+      const snapshot = snapshotWithMessages({
+        derp_one: 'derp',
+        derp_other: 'derps',
+        derpWithCount_one: '{{ count }} derp',
+        derpWithCount_other: '{{ count }} derps',
+      });
+
+      // TODO(Rugvip): Support plural keys
+      expect(snapshot.t('derp' as any, { count: 1 })).toBe('derp');
+      expect(snapshot.t('derp' as any, { count: 2 })).toBe('derps');
+      expect(snapshot.t('derp' as any, { count: 0 })).toBe('derps');
+      expect(snapshot.t('derpWithCount' as any, { count: 1 })).toBe('1 derp');
+      expect(snapshot.t('derpWithCount' as any, { count: 2 })).toBe('2 derps');
+      expect(snapshot.t('derpWithCount' as any, { count: 0 })).toBe('0 derps');
+    });
+  });
 });