1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 15:35:46 +01:00
metamask-extension/ui/helpers/utils/i18n-helper.test.js
2021-04-28 14:53:59 -05:00

172 lines
6.0 KiB
JavaScript

import React from 'react';
import { shallow } from 'enzyme';
import { getMessage } from './i18n-helper';
describe('i18n helper', () => {
const TEST_LOCALE_CODE = 'TEST_LOCALE_CODE';
const TEST_KEY_1 = 'TEST_KEY_1';
const TEST_KEY_2 = 'TEST_KEY_2';
const TEST_KEY_3 = 'TEST_KEY_3';
const TEST_KEY_4 = 'TEST_KEY_4';
const TEST_KEY_5 = 'TEST_KEY_5';
const TEST_KEY_6 = 'TEST_KEY_6';
const TEST_KEY_6_HELPER = 'TEST_KEY_6_HELPER';
const TEST_KEY_7 = 'TEST_KEY_7';
const TEST_KEY_7_HELPER_1 = 'TEST_KEY_7_HELPER_1';
const TEST_KEY_7_HELPER_2 = 'TEST_KEY_7_HELPER_2';
const TEST_KEY_8 = 'TEST_KEY_8';
const TEST_KEY_8_HELPER_1 = 'TEST_KEY_8_HELPER_1';
const TEST_KEY_8_HELPER_2 = 'TEST_KEY_8_HELPER_2';
const TEST_SUBSTITUTION_1 = 'TEST_SUBSTITUTION_1';
const TEST_SUBSTITUTION_2 = 'TEST_SUBSTITUTION_2';
const TEST_SUBSTITUTION_3 = 'TEST_SUBSTITUTION_3';
const TEST_SUBSTITUTION_4 = 'TEST_SUBSTITUTION_4';
const TEST_SUBSTITUTION_5 = 'TEST_SUBSTITUTION_5';
const testLocaleMessages = {
[TEST_KEY_1]: {
message: 'This is a simple message.',
expectedResult: 'This is a simple message.',
},
[TEST_KEY_2]: {
message: 'This is a message with a single non-react substitution $1.',
},
[TEST_KEY_3]: {
message: 'This is a message with two non-react substitutions $1 and $2.',
},
[TEST_KEY_4]: {
message: '$1 - $2 - $3 - $4 - $5',
},
[TEST_KEY_5]: {
message: '$1 - $2 - $3',
},
[TEST_KEY_6]: {
message: 'Testing a react substitution $1.',
},
[TEST_KEY_6_HELPER]: {
message: TEST_SUBSTITUTION_1,
},
[TEST_KEY_7]: {
message: 'Testing a react substitution $1 and another $2.',
},
[TEST_KEY_7_HELPER_1]: {
message: TEST_SUBSTITUTION_1,
},
[TEST_KEY_7_HELPER_2]: {
message: TEST_SUBSTITUTION_2,
},
[TEST_KEY_8]: {
message:
'Testing a mix $1 of react substitutions $2 and string substitutions $3 + $4.',
},
[TEST_KEY_8_HELPER_1]: {
message: TEST_SUBSTITUTION_3,
},
[TEST_KEY_8_HELPER_2]: {
message: TEST_SUBSTITUTION_4,
},
};
const t = getMessage.bind(null, TEST_LOCALE_CODE, testLocaleMessages);
const TEST_SUBSTITUTION_6 = (
<div style={{ color: 'red' }} key="test-react-substitutions-1">
{t(TEST_KEY_6_HELPER)}
</div>
);
const TEST_SUBSTITUTION_7_1 = (
<div style={{ color: 'red' }} key="test-react-substitutions-1">
{t(TEST_KEY_7_HELPER_1)}
</div>
);
const TEST_SUBSTITUTION_7_2 = (
<div style={{ color: 'blue' }} key="test-react-substitutions-1">
{t(TEST_KEY_7_HELPER_2)}
</div>
);
const TEST_SUBSTITUTION_8_1 = (
<div style={{ color: 'orange' }} key="test-react-substitutions-1">
{t(TEST_KEY_8_HELPER_1)}
</div>
);
const TEST_SUBSTITUTION_8_2 = (
<div style={{ color: 'pink' }} key="test-react-substitutions-1">
{t(TEST_KEY_8_HELPER_2)}
</div>
);
describe('getMessage', () => {
it('should return the exact message paired with key if there are no substitutions', () => {
const result = t(TEST_KEY_1);
expect(result).toStrictEqual('This is a simple message.');
});
it('should return the correct message when a single non-react substitution is made', () => {
const result = t(TEST_KEY_2, [TEST_SUBSTITUTION_1]);
expect(result).toStrictEqual(
`This is a message with a single non-react substitution ${TEST_SUBSTITUTION_1}.`,
);
});
it('should return the correct message when two non-react substitutions are made', () => {
const result = t(TEST_KEY_3, [TEST_SUBSTITUTION_1, TEST_SUBSTITUTION_2]);
expect(result).toStrictEqual(
`This is a message with two non-react substitutions ${TEST_SUBSTITUTION_1} and ${TEST_SUBSTITUTION_2}.`,
);
});
it('should return the correct message when multiple non-react substitutions are made', () => {
const result = t(TEST_KEY_4, [
TEST_SUBSTITUTION_1,
TEST_SUBSTITUTION_2,
TEST_SUBSTITUTION_3,
TEST_SUBSTITUTION_4,
TEST_SUBSTITUTION_5,
]);
expect(result).toStrictEqual(
`${TEST_SUBSTITUTION_1} - ${TEST_SUBSTITUTION_2} - ${TEST_SUBSTITUTION_3} - ${TEST_SUBSTITUTION_4} - ${TEST_SUBSTITUTION_5}`,
);
});
it('should correctly render falsey substitutions', () => {
const result = t(TEST_KEY_4, [0, -0, '', false, NaN]);
expect(result).toStrictEqual('0 - 0 - - false - NaN');
});
it('should render nothing for "null" and "undefined" substitutions', () => {
const result = t(TEST_KEY_5, [null, TEST_SUBSTITUTION_2]);
expect(result).toStrictEqual(` - ${TEST_SUBSTITUTION_2} - `);
});
it('should return the correct message when a single react substitution is made', () => {
const result = t(TEST_KEY_6, [TEST_SUBSTITUTION_6]);
expect(shallow(result).html()).toStrictEqual(
'<span> Testing a react substitution <div style="color:red">TEST_SUBSTITUTION_1</div>. </span>',
);
});
it('should return the correct message when two react substitutions are made', () => {
const result = t(TEST_KEY_7, [
TEST_SUBSTITUTION_7_1,
TEST_SUBSTITUTION_7_2,
]);
expect(shallow(result).html()).toStrictEqual(
'<span> Testing a react substitution <div style="color:red">TEST_SUBSTITUTION_1</div> and another <div style="color:blue">TEST_SUBSTITUTION_2</div>. </span>',
);
});
it('should return the correct message when substituting a mix of react elements and strings', () => {
const result = t(TEST_KEY_8, [
TEST_SUBSTITUTION_1,
TEST_SUBSTITUTION_8_1,
TEST_SUBSTITUTION_2,
TEST_SUBSTITUTION_8_2,
]);
expect(shallow(result).html()).toStrictEqual(
'<span> Testing a mix TEST_SUBSTITUTION_1 of react substitutions <div style="color:orange">TEST_SUBSTITUTION_3</div> and string substitutions TEST_SUBSTITUTION_2 + <div style="color:pink">TEST_SUBSTITUTION_4</div>. </span>',
);
});
});
});