chore: enables translation in the introduction section

refs #944
marabesi · Feb 27, 2022 · 7042e6d · 7042e6d
1 parent f57d38c
commit 7042e6d
Show file tree

Hide file tree

Showing 17 changed files with 152 additions and 96 deletions.
diff --git a/webapp/src/components/ui/interface/guide/Guide.spec.tsx b/webapp/src/components/ui/interface/guide/Guide.spec.tsx
@@ -2,8 +2,8 @@ import { shallow, mount } from 'enzyme';
 import { Guide } from './Guide';
 
 const content = [
-  { line: 'my text' },
-  { line: 'line 2' },
+  { line: 'my_text' },
+  { line: 'line_2' },
   { line: 'last' },
 ];
 

diff --git a/webapp/src/components/ui/interface/guide/Guide.tsx b/webapp/src/components/ui/interface/guide/Guide.tsx
@@ -3,7 +3,7 @@ import { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import Buggy, {BuggyBug, BuggySleepy, BuggyHappy} from '../../images/buggy/Buggy';
-import AnimatedText from '../text-keyboard-animation/AnimatedText';
+import AnimatedText, { TextItem } from '../text-keyboard-animation/AnimatedText';
 import { onHover } from '../../../../data-flow/redux/actions/guideAction';
 import Next from '../../icons/Next';
 
@@ -65,7 +65,7 @@ export class Guide extends Component {
   }
 
   renderHint() {
-    return this.props.guideContent.map((item, index) => {
+    return this.props.guideContent.map((item: TextItem, index) => {
       if (index === this.props.currentHint) {
         return (
           <Fragment

diff --git a/webapp/src/components/ui/interface/language-selector/LanguageSelector.tsx b/webapp/src/components/ui/interface/language-selector/LanguageSelector.tsx
@@ -44,7 +44,7 @@ export const LanguageSelector = ({ intl, locale, setLocale, onChange }: Props) =
   return (
     <>
       {loading && <Loading />}
-      <select onChange={didChange} value={locale}>
+      <select onChange={didChange} value={locale} data-testid="languages">
         <option value="en">{intl.messages.options.languages.en}</option>
         <option value="pt-br">{intl.messages.options.languages['pt-br']}</option>
         <option value="ro">{intl.messages.options.languages['ro']}</option>

diff --git a/webapp/src/components/ui/interface/profile/container/Profile.tsx b/webapp/src/components/ui/interface/profile/container/Profile.tsx
@@ -69,7 +69,7 @@ export class Profile extends Component {
         .then(image => {
           const photo = URL.createObjectURL(image);
           this.setState({ photo });
-        });
+        }).catch(error => console.error(error));
     }
   }
 

diff --git a/webapp/src/components/ui/interface/scene-manager/Scene.spec.tsx b/webapp/src/components/ui/interface/scene-manager/Scene.spec.tsx
@@ -3,39 +3,44 @@ import { act } from 'react-dom/test-utils';
 import Scene from './Scene';
 import Button from '../../buttons/primary/Primary';
 import { TextItem } from '../text-keyboard-animation/AnimatedText';
+import IntlProvider from '../../../../third-party/wrappers/i18n/IntlProvider';
 
 const fakeText: TextItem[] = [ { key: 0, line: 'my', style: '' } ];
 
+const BuildComponent = (props: any) =>
+  <IntlProvider locale="en">
+    <Scene {...props} />
+  </IntlProvider>;
+
 describe('Scene component', () => {
+  let wrapper;
 
   beforeEach(() => {
     jest.useFakeTimers();
     window.localStorage.removeItem('testable.alien.png');
+    wrapper = mount(<BuildComponent />);
   });
 
   afterEach(() => {
     window.localStorage.removeItem('testable.alien.png');
     jest.restoreAllMocks();
+    wrapper = null;
   });
 
   test('default props value', () => {
-    const wrapper = mount(<Scene />);
-
-    expect(wrapper.props().onCompleted).toEqual({});
-    expect(wrapper.props().releaseButton).toEqual(2000);
-    expect(wrapper.props().showBuggy).toEqual({});
-    expect(wrapper.props().showNextButton).toEqual(900);
+    expect(wrapper.find('Scene').props().onCompleted).toEqual({});
+    expect(wrapper.find('Scene').props().releaseButton).toEqual(2000);
+    expect(wrapper.find('Scene').props().showBuggy).toEqual({});
+    expect(wrapper.find('Scene').props().showNextButton).toEqual(900);
   });
 
   test('by default, does not show up the next button', () => {
-    const wrapper = mount(<Scene />);
-
     expect(wrapper.find(Button).length).toEqual(0);
   });
 
   test('remove disable from button after finished typing', () => {
     const wrapper = mount(
-      <Scene
+      <BuildComponent
         text={fakeText}
         button="just a label"
         showNextButton={1}
@@ -52,20 +57,20 @@ describe('Scene component', () => {
   });
 
   test('by default, does not show alien component', () => {
-    const wrapper = mount(<Scene />);
+    const wrapper = mount(<BuildComponent />);
 
     expect(wrapper.find('AlienSvg').prop('className')).toContain('hidden');
   });
 
   test('by default, does not show buggy bug component', () => {
-    const wrapper = mount(<Scene />);
+    const wrapper = mount(<BuildComponent />);
 
     expect(wrapper.find('BuggyBug').length).toBe(0);
   });
 
   test('should show alien component', () => {
     const wrapper = mount(
-      <Scene
+      <BuildComponent
         showAlien={{}}
       />
     );
@@ -77,7 +82,7 @@ describe('Scene component', () => {
 
   test('should show alien component with animation', () => {
     const wrapper = mount(
-      <Scene
+      <BuildComponent
         showAlien={{
           animate: true
         }}
@@ -89,7 +94,7 @@ describe('Scene component', () => {
 
   test('pass in a custom class to the scene container', () => {
     const wrapper = mount(
-      <Scene
+      <BuildComponent
         className="custom-class"
         text={fakeText}
       />
@@ -101,7 +106,7 @@ describe('Scene component', () => {
   test('should show up buggy component after typing', () => {
     const NODE_INDEX = 1;
     const wrapper = mount(
-      <Scene
+      <BuildComponent
         onCompleted={{showBug: true}}
         text={fakeText}
       />
@@ -121,7 +126,7 @@ describe('Scene component', () => {
   test('should show up alien character', () => {
     window.localStorage.setItem('testable.alien.png', 'img content');
     const wrapper = mount(
-      <Scene
+      <BuildComponent
         showAlien={{
           'show': true,
           'animate': false
@@ -138,7 +143,7 @@ describe('Scene component', () => {
     const handleNextScene = jest.fn();
 
     const wrapper = mount(
-      <Scene
+      <BuildComponent
         lastScene={true}
         handleLastScene={handleLastScene}
         next={handleNextScene}
@@ -165,7 +170,7 @@ describe('Scene component', () => {
     const handleNextScene = jest.fn();
 
     const wrapper = mount(
-      <Scene
+      <BuildComponent
         lastScene={false}
         handleLastScene={handleLastScene}
         next={handleNextScene}
@@ -189,7 +194,7 @@ describe('Scene component', () => {
   test('should disable button once clicked to prevent firing the event twice', () => {
     const onClick = jest.fn();
     const wrapper = mount(
-      <Scene
+      <BuildComponent
         text={fakeText}
         button="my button"
         next={onClick}
@@ -217,7 +222,7 @@ describe('Scene component', () => {
   test('should release disable from next button based on releaseButton prop', () => {
     const onClick = jest.fn();
     const wrapper = mount(
-      <Scene
+      <BuildComponent
         text={fakeText}
         button="my button"
         next={onClick}
@@ -237,7 +242,7 @@ describe('Scene component', () => {
 
   test('should render buggy bug version', () => {
     const wrapper = mount(
-      <Scene
+      <BuildComponent
         showBuggy={{
           type: 'bug',
         }}
@@ -250,7 +255,7 @@ describe('Scene component', () => {
 
   test('should render buggy happy version', () => {
     const wrapper = mount(
-      <Scene
+      <BuildComponent
         showBuggy={{
           type: 'happy',
         }}
@@ -262,22 +267,22 @@ describe('Scene component', () => {
   });
 
   test('should apply responsive classes to buggy when animate is set', () => {
-    const wrapper = mount(<Scene showBuggy={{ animate: true}} />);
+    const wrapper = mount(<BuildComponent showBuggy={{ animate: true}} />);
     const buggy = wrapper.find('BuggyLeft').at(0);
     const classes = buggy.prop('className') || '';
     expect(classes.includes('md:slide-in-bck-right')).toBeTruthy();
   });
 
   test('should not apply block class to buggy when there is not buggy type', () => {
-    const wrapper = mount(<Scene showBuggy={{}} />);
+    const wrapper = mount(<BuildComponent showBuggy={{}} />);
     const buggy = wrapper.find('BuggyLeft').at(0);
     const classes = buggy.prop('className') || '';
     expect(classes.includes('md:block')).toBeFalsy();
   });
 
   test('should apply animation class to buggy happy', () => {
     const wrapper = mount(
-      <Scene
+      <BuildComponent
         onCompleted={{ type: 'happy' }}
         text={fakeText}
         button="my button"

diff --git a/webapp/src/components/ui/interface/scene-manager/Scene.tsx b/webapp/src/components/ui/interface/scene-manager/Scene.tsx
@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { injectIntl } from 'react-intl';
 import Button from '../../buttons/primary/Primary';
 import AnimatedText, { TextItem } from '../text-keyboard-animation/AnimatedText';
 import { BuggyLeft, BuggyBug, BuggyHappy,  BuggyHappyLeft } from '../../images/buggy/Buggy';
@@ -22,6 +23,7 @@ interface Props {
   showNextButton?: number,
   step?: number,
   showBuggy?: any,
+  intl: any,
 }
 
 const Scene = ({
@@ -35,7 +37,7 @@ const Scene = ({
   button,
   releaseButton,
   showNextButton: nextButton,
-  showBuggy
+  showBuggy,
 }: Props) => {
   const [showNextButton, setShowNextButton] = useState(false);
   const [disableNextButton, setDisableNextButton] = useState(false);
@@ -101,7 +103,7 @@ const Scene = ({
         <AnimatedText
           className="w-2/3"
           text={text}
-          onFinishedTyping={ onFinishedTyping }
+          onFinishedTyping={onFinishedTyping}
         />
 
         {! showBuggy.type && <BuggyLeft className={`absolute pin-r w-1/3 mt-10 hidden ${buggyClass}`} />}
@@ -161,6 +163,7 @@ Scene.defaultProps = {
   showBuggy: {},
   releaseButton: RELEASE_BUTTON,
   showNextButton: 900,
+  intl: {},
 };
 
-export default Scene;
+export default injectIntl(Scene);
diff --git a/webapp/src/components/ui/interface/scene-manager/SceneContentManager.tsx b/webapp/src/components/ui/interface/scene-manager/SceneContentManager.tsx
@@ -29,7 +29,7 @@ export interface InteractiveContent {
 const WrappedSceneContentManager = (
   identifier: string,
   content: InteractiveContent,
-  redirectTo: string
+  redirectTo: string,
 ) => {
   const SceneContentManager = ({ handleLastScene, history, className }) => {
     const lastScene = () => {

diff --git a/webapp/src/components/ui/interface/scene-manager/SceneManager.spec.tsx b/webapp/src/components/ui/interface/scene-manager/SceneManager.spec.tsx
@@ -3,8 +3,13 @@ import { act } from 'react-dom/test-utils';
 import SceneManager from './SceneManager';
 import Scene from './Scene';
 import { InteractiveContent } from './SceneContentManager';
+import IntlProvider from '../../../../third-party/wrappers/i18n/IntlProvider';
 
 describe('Scene manager component', () => {
+  const BuildComponent = (props: any) =>
+    <IntlProvider locale="en">
+      <SceneManager {...props} />
+    </IntlProvider>;
 
   const content = { 
     'version': 1,
@@ -34,7 +39,7 @@ describe('Scene manager component', () => {
 
   test('should initialize manager with scene 1', () => {
     const wrapper = mount(
-      <SceneManager
+      <BuildComponent
         content={content}
         handleLastScene={jest.fn()}
         identifier="jest"
@@ -47,7 +52,7 @@ describe('Scene manager component', () => {
 
   test('should go to step 2', () => {
     const wrapper = mount(
-      <SceneManager
+      <BuildComponent
         content={content}
       />
     );
@@ -64,7 +69,7 @@ describe('Scene manager component', () => {
 
   test('should go to step 1', () => {
     const wrapper = mount(
-      <SceneManager
+      <BuildComponent
         content={content}
       />
     );
@@ -87,7 +92,7 @@ describe('Scene manager component', () => {
 
   test('should not go to previous step when it is in the first step already', () => {
     const wrapper = mount(
-      <SceneManager
+      <BuildComponent
         content={content}
       />
     );
@@ -103,7 +108,7 @@ describe('Scene manager component', () => {
 
   test('should not go beyond last step', () => {
     const wrapper = mount(
-      <SceneManager
+      <BuildComponent
         content={content}
       />
     );
@@ -128,7 +133,7 @@ describe('Scene manager component', () => {
     contentWithLastStep.steps[0].lastScene = true;
 
     const wrapper = mount(
-      <SceneManager
+      <BuildComponent
         content={contentWithLastStep}
       />
     );
@@ -140,7 +145,7 @@ describe('Scene manager component', () => {
 
   test('should pass in lastStep as true when the last step is reached', () => {
     const wrapper = mount(
-      <SceneManager
+      <BuildComponent
         content={content}
       />
     );
@@ -157,7 +162,7 @@ describe('Scene manager component', () => {
   describe('debug button', () => {
     test('should not show up debug button by default', () => {
       const wrapper = mount(
-        <SceneManager
+        <BuildComponent
           content={content}
         />
       );
@@ -169,7 +174,7 @@ describe('Scene manager component', () => {
   describe('empty content provided', () => {
     test('should handle gracefully empty json object', () => {
       const wrapper = mount(
-        <SceneManager
+        <BuildComponent
           content={{}}
         />
       );
@@ -178,7 +183,7 @@ describe('Scene manager component', () => {
 
     test('should handle gracefully json object with empty steps', () => {
       const wrapper = mount(
-        <SceneManager
+        <BuildComponent
           content={{
             steps: []
           }}