Pruebas de traducción

Para probar las traducciones, utilice los siguientes ayudantes:

Es posible que también necesite lo siguiente:

Probaremos las traducciones en el siguiente ejemplo de un modal de Jutro.

MyModalExample.js
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { useTranslator } from '@jutro/locale';
import { ModalNext } from '@jutro/components';

import { messages } from './MyModalExample.messages';
import { OpenModalTrigger } from './OpenModalTrigger';

export const MyModalExample = () => {
  const translator = useTranslator();

  const [showModal, setShowModal] = useState(false);

  return (
    <React.Fragment>
      <OpenModalTrigger
        onClick={() => setShowModal((value) => !value)}
        isOpen={showModal}
      />
      <ModalNext isOpen={showModal}>
        <span>{translator(messages.modalContent)}</span>
      </ModalNext>
    </React.Fragment>
  );
};

MyModalExample.propTypes = {
  title: PropTypes.string,
};

MyModalExample.defaultProps = {
  title: 'sample',
};

OpenModalTrigger.js
import React from 'react';
import PropTypes from 'prop-types';
import { Button } from '@jutro/components';

import { messages } from '../MyModalExample.messages';

export const OpenModalTrigger = ({ onClick, isOpen }) => (
  <Button
    data-testid="youDontNeedThisId"
    onClick={onClick}>
    {isOpen ? messages.hideModalButton : messages.showModalButton}
  </Button>
);

OpenModalTrigger.propTypes = {
  onClick: PropTypes.func,
  isOpen: PropTypes.bool,
};

Utilice esta prueba como guía para implementar sus propias pruebas de traducción.

MyModalExample.test.js
import React from 'react';
import {
  render,
  screen,
  getTranslation,
  translatorForTestsWithSuffix,
  getTranslationWithSuffix,
} from '@jutro/test';
import { TranslatorContext } from '@jutro/legacy/locale';

import { messages } from '../MyModalExample.messages';
import { OpenModalTrigger } from '../OpenModalTrigger';

describe('Testing translations', () => {
  it('test messages using messages file', () => {
    render(
      <OpenModalTrigger
        onClick={jest.fn()}
        isOpen={false}
      />
    );

    // good
    expect(
      screen.getByRole('button', {
        name: getTranslation(messages.showModalButton),
      })
    ).toBeInTheDocument();

    // also good
    expect(
      screen.getByRole('button', {
        name: getTranslation('Show modal'),
      })
    ).toBeInTheDocument();

    // use only when necessary, e.g., when the messages are really complex
    expect(
      screen.getByRole('button', { name: /Show modal/ })
    ).toBeInTheDocument();

    // not good: use getTranslation() instead of adding 'Tx: ' yourself
    expect(
      screen.getByRole('button', { name: 'Tx: Show modal' })
    ).toBeInTheDocument();

    // not good: does not test for 'button' role
    expect(screen.getByText(getTranslation('Show modal'))).toBeInTheDocument();

    // not good: do not use data-testid when there are better alternatives
    expect(screen.getByTestId('youDontNeedThisId')).toBeInTheDocument();
  });

  it('replacing translator used in tests for a different one', () => {
    // In some cases you might need to use a different translator function.
    // Jutro provides an alternative one, useful for testing for example localized URLs:
    // 'Tx: example.com/en/localizedPath' is an invalid URL,
    // but 'example.com/en/localizedPath-translated' is okay for testing purposes.
    // Here's how you could do it:
    render(<OpenModalTrigger />, {
      providers: {
        globalization: {
          props: {
            translatorProvider: (props) => (
              <TranslatorContext.Provider
                {...props}
                value={translatorForTestsWithSuffix}
              />
            ),
          },
        },
      },
    });

    expect(
      screen.getByRole('button', {
        name: getTranslationWithSuffix('Show modal'),
      })
    ).toBeInTheDocument();

    // just for illustration:
    expect(
      screen.getByRole('button', { name: 'Show modal-translated' })
    ).toBeInTheDocument();
  });
});

Ejemplo: prueba de traducciones en un modal​

Ejemplo: prueba de traducciones en un modal