2021-02-04 19:15:23 +01:00
import React from 'react' ;
import { shallow } from 'enzyme' ;
import { getMessage } from './i18n-helper' ;
2020-03-11 16:00:05 +01:00
2021-04-15 20:01:46 +02:00
describe ( 'i18n helper' , ( ) => {
2021-02-04 19:15:23 +01:00
const TEST _LOCALE _CODE = 'TEST_LOCALE_CODE' ;
2020-03-11 16:00:05 +01:00
2021-02-04 19:15:23 +01:00
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' ;
2020-03-11 16:00:05 +01:00
2021-02-04 19:15:23 +01:00
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' ;
2020-03-11 16:00:05 +01:00
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 ] : {
2020-11-03 00:41:28 +01:00
message : 'Testing a react substitution $1.' ,
2020-03-11 16:00:05 +01:00
} ,
[ TEST _KEY _6 _HELPER ] : {
2020-11-03 00:41:28 +01:00
message : TEST _SUBSTITUTION _1 ,
2020-03-11 16:00:05 +01:00
} ,
[ TEST _KEY _7 ] : {
2020-11-03 00:41:28 +01:00
message : 'Testing a react substitution $1 and another $2.' ,
2020-03-11 16:00:05 +01:00
} ,
[ TEST _KEY _7 _HELPER _1 ] : {
2020-11-03 00:41:28 +01:00
message : TEST _SUBSTITUTION _1 ,
2020-03-11 16:00:05 +01:00
} ,
[ TEST _KEY _7 _HELPER _2 ] : {
2020-11-03 00:41:28 +01:00
message : TEST _SUBSTITUTION _2 ,
2020-03-11 16:00:05 +01:00
} ,
[ TEST _KEY _8 ] : {
2020-11-03 00:41:28 +01:00
message :
'Testing a mix $1 of react substitutions $2 and string substitutions $3 + $4.' ,
2020-03-11 16:00:05 +01:00
} ,
[ TEST _KEY _8 _HELPER _1 ] : {
2020-11-03 00:41:28 +01:00
message : TEST _SUBSTITUTION _3 ,
2020-03-11 16:00:05 +01:00
} ,
[ TEST _KEY _8 _HELPER _2 ] : {
2020-11-03 00:41:28 +01:00
message : TEST _SUBSTITUTION _4 ,
2020-03-11 16:00:05 +01:00
} ,
2021-02-04 19:15:23 +01:00
} ;
const t = getMessage . bind ( null , TEST _LOCALE _CODE , testLocaleMessages ) ;
2020-03-11 16:00:05 +01:00
const TEST _SUBSTITUTION _6 = (
2020-11-03 00:41:28 +01:00
< div style = { { color : 'red' } } key = "test-react-substitutions-1" >
{ t ( TEST _KEY _6 _HELPER ) }
2020-03-11 16:00:05 +01:00
< / d i v >
2021-02-04 19:15:23 +01:00
) ;
2020-03-11 16:00:05 +01:00
const TEST _SUBSTITUTION _7 _1 = (
2020-11-03 00:41:28 +01:00
< div style = { { color : 'red' } } key = "test-react-substitutions-1" >
{ t ( TEST _KEY _7 _HELPER _1 ) }
2020-03-11 16:00:05 +01:00
< / d i v >
2021-02-04 19:15:23 +01:00
) ;
2020-03-11 16:00:05 +01:00
const TEST _SUBSTITUTION _7 _2 = (
2020-11-03 00:41:28 +01:00
< div style = { { color : 'blue' } } key = "test-react-substitutions-1" >
{ t ( TEST _KEY _7 _HELPER _2 ) }
2020-03-11 16:00:05 +01:00
< / d i v >
2021-02-04 19:15:23 +01:00
) ;
2020-03-11 16:00:05 +01:00
const TEST _SUBSTITUTION _8 _1 = (
2020-11-03 00:41:28 +01:00
< div style = { { color : 'orange' } } key = "test-react-substitutions-1" >
{ t ( TEST _KEY _8 _HELPER _1 ) }
2020-03-11 16:00:05 +01:00
< / d i v >
2021-02-04 19:15:23 +01:00
) ;
2020-03-11 16:00:05 +01:00
const TEST _SUBSTITUTION _8 _2 = (
2020-11-03 00:41:28 +01:00
< div style = { { color : 'pink' } } key = "test-react-substitutions-1" >
{ t ( TEST _KEY _8 _HELPER _2 ) }
2020-03-11 16:00:05 +01:00
< / d i v >
2021-02-04 19:15:23 +01:00
) ;
2020-03-11 16:00:05 +01:00
2021-04-15 20:01:46 +02:00
describe ( 'getMessage' , ( ) => {
it ( 'should return the exact message paired with key if there are no substitutions' , ( ) => {
2021-02-04 19:15:23 +01:00
const result = t ( TEST _KEY _1 ) ;
2021-04-15 20:01:46 +02:00
expect ( result ) . toStrictEqual ( 'This is a simple message.' ) ;
2021-02-04 19:15:23 +01:00
} ) ;
2020-03-11 16:00:05 +01:00
2021-04-15 20:01:46 +02:00
it ( 'should return the correct message when a single non-react substitution is made' , ( ) => {
2021-02-04 19:15:23 +01:00
const result = t ( TEST _KEY _2 , [ TEST _SUBSTITUTION _1 ] ) ;
2021-04-15 20:01:46 +02:00
expect ( result ) . t oStrictEqual (
2020-11-03 00:41:28 +01:00
` This is a message with a single non-react substitution ${ TEST _SUBSTITUTION _1 } . ` ,
2021-02-04 19:15:23 +01:00
) ;
} ) ;
2020-03-11 16:00:05 +01:00
2021-04-15 20:01:46 +02:00
it ( 'should return the correct message when two non-react substitutions are made' , ( ) => {
2021-02-04 19:15:23 +01:00
const result = t ( TEST _KEY _3 , [ TEST _SUBSTITUTION _1 , TEST _SUBSTITUTION _2 ] ) ;
2021-04-15 20:01:46 +02:00
expect ( result ) . toStrictEqual (
2020-11-03 00:41:28 +01:00
` This is a message with two non-react substitutions ${ TEST _SUBSTITUTION _1 } and ${ TEST _SUBSTITUTION _2 } . ` ,
2021-02-04 19:15:23 +01:00
) ;
} ) ;
2020-03-11 16:00:05 +01:00
2021-04-15 20:01:46 +02:00
it ( 'should return the correct message when multiple non-react substitutions are made' , ( ) => {
2020-11-03 00:41:28 +01:00
const result = t ( TEST _KEY _4 , [
TEST _SUBSTITUTION _1 ,
TEST _SUBSTITUTION _2 ,
TEST _SUBSTITUTION _3 ,
TEST _SUBSTITUTION _4 ,
TEST _SUBSTITUTION _5 ,
2021-02-04 19:15:23 +01:00
] ) ;
2021-04-15 20:01:46 +02:00
expect ( result ) . toStrictEqual (
2020-11-03 00:41:28 +01:00
` ${ TEST _SUBSTITUTION _1 } - ${ TEST _SUBSTITUTION _2 } - ${ TEST _SUBSTITUTION _3 } - ${ TEST _SUBSTITUTION _4 } - ${ TEST _SUBSTITUTION _5 } ` ,
2021-02-04 19:15:23 +01:00
) ;
} ) ;
2020-03-11 16:00:05 +01:00
2021-04-15 20:01:46 +02:00
it ( 'should correctly render falsey substitutions' , ( ) => {
2021-02-04 19:15:23 +01:00
const result = t ( TEST _KEY _4 , [ 0 , - 0 , '' , false , NaN ] ) ;
2021-04-15 20:01:46 +02:00
expect ( result ) . toStrictEqual ( '0 - 0 - - false - NaN' ) ;
2021-02-04 19:15:23 +01:00
} ) ;
2020-07-03 18:02:35 +02:00
2021-04-15 20:01:46 +02:00
it ( 'should render nothing for "null" and "undefined" substitutions' , ( ) => {
2021-02-04 19:15:23 +01:00
const result = t ( TEST _KEY _5 , [ null , TEST _SUBSTITUTION _2 ] ) ;
2021-04-15 20:01:46 +02:00
expect ( result ) . toStrictEqual ( ` - ${ TEST _SUBSTITUTION _2 } - ` ) ;
2021-02-04 19:15:23 +01:00
} ) ;
2020-03-11 16:00:05 +01:00
2021-04-15 20:01:46 +02:00
it ( 'should return the correct message when a single react substitution is made' , ( ) => {
2021-02-04 19:15:23 +01:00
const result = t ( TEST _KEY _6 , [ TEST _SUBSTITUTION _6 ] ) ;
2021-04-15 20:01:46 +02:00
expect ( shallow ( result ) . html ( ) ) . toStrictEqual (
2020-11-03 00:41:28 +01:00
'<span> Testing a react substitution <div style="color:red">TEST_SUBSTITUTION_1</div>. </span>' ,
2021-02-04 19:15:23 +01:00
) ;
} ) ;
2020-03-11 16:00:05 +01:00
2021-04-15 20:01:46 +02:00
it ( 'should return the correct message when two react substitutions are made' , ( ) => {
2020-11-03 00:41:28 +01:00
const result = t ( TEST _KEY _7 , [
TEST _SUBSTITUTION _7 _1 ,
TEST _SUBSTITUTION _7 _2 ,
2021-02-04 19:15:23 +01:00
] ) ;
2021-04-15 20:01:46 +02:00
expect ( shallow ( result ) . html ( ) ) . toStrictEqual (
2020-11-03 00:41:28 +01:00
'<span> Testing a react substitution <div style="color:red">TEST_SUBSTITUTION_1</div> and another <div style="color:blue">TEST_SUBSTITUTION_2</div>. </span>' ,
2021-02-04 19:15:23 +01:00
) ;
} ) ;
2020-03-11 16:00:05 +01:00
2021-04-15 20:01:46 +02:00
it ( 'should return the correct message when substituting a mix of react elements and strings' , ( ) => {
2020-11-03 00:41:28 +01:00
const result = t ( TEST _KEY _8 , [
TEST _SUBSTITUTION _1 ,
TEST _SUBSTITUTION _8 _1 ,
TEST _SUBSTITUTION _2 ,
TEST _SUBSTITUTION _8 _2 ,
2021-02-04 19:15:23 +01:00
] ) ;
2021-04-15 20:01:46 +02:00
expect ( shallow ( result ) . html ( ) ) . toStrictEqual (
2020-11-03 00:41:28 +01:00
'<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>' ,
2021-02-04 19:15:23 +01:00
) ;
} ) ;
} ) ;
} ) ;