How to use @aurelia/i18n - 10 common examples

itemWithCount_plural: '{{count}} Artikel',
      itemWithCount_interval: '(0)$t(itemWithCount_plural);(1)$t(itemWithCount);(2-7)$t(itemWithCount_plural);(7-inf){viele Artikel};',

      html: 'Dies ist ein <i>HTML</i> Inhalt',
      pre: 'Tic ',
      mid: 'Tac',
      midHtml: '<i>Tac</i>',
      post: ' Toe',

      imgPath: 'bar.jpg'
    };
    /* eslint-enable @typescript-eslint/camelcase */
    const ctx = TestContext.createHTMLTestContext();
    const au = new Aurelia(ctx.container);
    await au.register(
      I18nConfiguration.customize((config) =&gt; {
        config.initOptions = {
          resources: { en: { translation }, de: { translation: deTranslation } },
          skipTranslationOnMissingKey
        };
        config.translationAttributeAliases = aliases;
      }))
      .register(CustomMessage as unknown as IRegistration)
      .app({ host, component })
      .start()
      .wait();
    const i18n = au.container.get(I18N);

    return {
      en: translation, de: deTranslation, container: au.container, i18n, ctx, tearDown: async () =&gt; {
        await au.stop().wait();
      }

async function createFixture(options: I18nInitOptions = {}) {
    const i18nextSpy = new Spy();
    const eaSpy: Spy = new Spy();
    const mockSignaler = new MockSignaler();
    const sut = new I18nService(
      { i18next: i18nextSpy.getMock(i18next) },
      options,
      eaSpy.getMock(new EventAggregator()),
      mockSignaler
    );
    await sut.task.wait();
    return { i18nextSpy, sut, eaSpy, mockSignaler };
  }

it('instantiated with instruction type', function () {
    const container = setup();
    const sut: IInstructionRenderer = new TranslationBindBindingRenderer(container.get(IExpressionParser), {} as unknown as IObserverLocator);
    assert.equal(sut.instructionType, TranslationBindInstructionType);
  });

it('#render adds expr to the existing TranslationBinding for the target element', function () {
    const container = setup();
    const sut: IInstructionRenderer = new TranslationBindBindingRenderer(container.get(IExpressionParser), {} as unknown as IObserverLocator);
    const expressionParser = container.get(IExpressionParser);
    const targetElement = DOM.createElement('span');
    const binding = new TranslationBinding(targetElement, {} as unknown as IObserverLocator, container);
    const renderable = ({ bindings: [binding] } as unknown as IController);

    const from = expressionParser.parse('simple.key', BindingType.BindCommand);
    const callBindingInstruction: ICallBindingInstruction = { from, to: '.bind' } as unknown as ICallBindingInstruction;
    sut.render(
      LifecycleFlags.none,
      DOM,
      container as unknown as IRenderContext,
      renderable,
      targetElement,
      callBindingInstruction);

    assert.equal(binding.expr, from);

it('#render add the paramExpr to the existing TranslationBinding for the target element', function () {
    const container = setup();
    const sut: IInstructionRenderer = new TranslationParametersBindingRenderer(container.get(IExpressionParser), container.get(IObserverLocator));
    const expressionParser = container.get(IExpressionParser);
    const targetElement = DOM.createElement('span');
    const binding = new TranslationBinding(targetElement, container.get(IObserverLocator), container);
    const renderable = ({ bindings: [binding] } as unknown as IController);
    const paramExpr = expressionParser.parse('{foo: "bar"}', BindingType.BindCommand);
    const callBindingInstruction: ICallBindingInstruction = { from: paramExpr } as unknown as ICallBindingInstruction;

    sut.render(
      LifecycleFlags.none,
      DOM,
      container,
      renderable,
      targetElement,
      callBindingInstruction
    );

    assert.equal(binding.parametersExpr, paramExpr);
  });
});

it('#render adds expr to the existing TranslationBinding for the target element', function () {
    const container = setup();
    const sut: IInstructionRenderer = new TranslationBindBindingRenderer(container.get(IExpressionParser), {} as unknown as IObserverLocator);
    const expressionParser = container.get(IExpressionParser);
    const targetElement = DOM.createElement('span');
    const binding = new TranslationBinding(targetElement, {} as unknown as IObserverLocator, container);
    const renderable = ({ bindings: [binding] } as unknown as IController);

    const from = expressionParser.parse('simple.key', BindingType.BindCommand);
    const callBindingInstruction: ICallBindingInstruction = { from, to: '.bind' } as unknown as ICallBindingInstruction;
    sut.render(
      LifecycleFlags.none,
      DOM,
      container as unknown as IRenderContext,
      renderable,
      targetElement,
      callBindingInstruction);

    assert.equal(binding.expr, from);
  });
});

it('#render instantiates TranslationBinding - simple string literal', function () {
    const container = setup();
    const sut: IInstructionRenderer = new TranslationBindingRenderer(container.get(IExpressionParser), {} as unknown as IObserverLocator);
    const expressionParser = container.get(IExpressionParser);
    const renderable = ({} as unknown as IController);

    const from = expressionParser.parse('simple.key', BindingType.CustomCommand);
    const callBindingInstruction: ICallBindingInstruction = { from } as unknown as ICallBindingInstruction;
    sut.render(
      LifecycleFlags.none,
      DOM,
      container as unknown as IRenderContext,
      renderable,
      DOM.createElement('span'),
      callBindingInstruction);

    assert.instanceOf(renderable.bindings[0], TranslationBinding);
  });

it('instantiated with instruction type', function () {
    const container = setup();
    const sut: IInstructionRenderer = new TranslationBindingRenderer(container.get(IExpressionParser), {} as unknown as IObserverLocator);
    assert.equal(sut.instructionType, TranslationInstructionType);
  });

it('instantiated with instruction type', function () {
    const container = setup();
    const sut: IInstructionRenderer = new TranslationParametersBindingRenderer(container.get(IExpressionParser), container.get(IObserverLocator));
    assert.equal(sut.instructionType, TranslationParametersInstructionType);
  });

it('#render add the paramExpr to the existing TranslationBinding for the target element', function () {
    const container = setup();
    const sut: IInstructionRenderer = new TranslationParametersBindingRenderer(container.get(IExpressionParser), container.get(IObserverLocator));
    const expressionParser = container.get(IExpressionParser);
    const targetElement = DOM.createElement('span');
    const binding = new TranslationBinding(targetElement, container.get(IObserverLocator), container);
    const renderable = ({ bindings: [binding] } as unknown as IController);
    const paramExpr = expressionParser.parse('{foo: "bar"}', BindingType.BindCommand);
    const callBindingInstruction: ICallBindingInstruction = { from: paramExpr } as unknown as ICallBindingInstruction;

    sut.render(
      LifecycleFlags.none,
      DOM,
      container,
      renderable,
      targetElement,
      callBindingInstruction
    );