Merge pull request #3641 from Paulie-Aditya/develop

feat: fixed word wrap preference issue

Author: raclim

client/modules/IDE/components/Preferences/Preferences.unit.test.jsx

@@ -442,43 +442,44 @@ describe('<Preferences />', () => {
         );
       });
     });
-    describe('start wordwrap at false', () => {
-      it('wordwrap toggle, starting at false', () => {
-        // render the component with wordwrap prop set to false
-        subject({ wordwrap: false });
-
-        // get ahold of the radio buttons for toggling wordwrap
-        const wordwrapRadioFalse = screen.getByRole('radio', {
+    // TODO: Consolidate "linewrap" (reference from backend/User model) and "word wrap" (currently used in UI) into consistent naming.
+    describe('start linewrap at false', () => {
+      it('linewrap toggle, starting at false', () => {
+        // render the component with linewrap prop set to false
+        subject({ linewrap: false });
+
+        // get ahold of the radio buttons for toggling linewrap
+        const linewrapRadioFalse = screen.getByRole('radio', {
           name: /wordwrap off/i
         });
-        const wordwrapRadioTrue = screen.getByRole('radio', {
+        const linewrapRadioTrue = screen.getByRole('radio', {
           name: /wordwrap on/i
         });
 
         testToggle(
-          wordwrapRadioFalse,
-          wordwrapRadioTrue,
+          linewrapRadioFalse,
+          linewrapRadioTrue,
           props.setLinewrap,
           true
         );
       });
     });
-    describe('start wordwrap at true', () => {
-      it('wordwrap toggle, starting at true', () => {
-        // render the component with wordwrap prop set to true
-        subject({ wordwrap: true });
+    describe('start linewrap at true', () => {
+      it('linewrap toggle, starting at true', () => {
+        // render the component with linewrap prop set to true
+        subject({ linewrap: true });
 
-        // get ahold of the radio buttons for toggling wordwrap
-        const wordwrapRadioFalse = screen.getByRole('radio', {
+        // get ahold of the radio buttons for toggling linewrap
+        const linewrapRadioFalse = screen.getByRole('radio', {
           name: /wordwrap off/i
         });
-        const wordwrapRadioTrue = screen.getByRole('radio', {
+        const linewrapRadioTrue = screen.getByRole('radio', {
           name: /wordwrap on/i
         });
 
         testToggle(
-          wordwrapRadioTrue,
-          wordwrapRadioFalse,
+          linewrapRadioTrue,
+          linewrapRadioFalse,
           props.setLinewrap,
           false
         );

client/modules/IDE/components/Preferences/index.jsx

@@ -43,7 +43,7 @@ export default function Preferences() {
     tabIndex,
     fontSize,
     autosave,
-    wordwrap,
+    linewrap,
     lineNumbers,
     lintWarning,
     textOutput,
@@ -398,7 +398,7 @@ export default function Preferences() {
                 id="wordwrap-on"
                 className="preference__radio-button"
                 value="On"
-                checked={wordwrap}
+                checked={linewrap}
               />
               <label htmlFor="wordwrap-on" className="preference__option">
                 {t('Preferences.On')}
@@ -411,7 +411,7 @@ export default function Preferences() {
                 id="wordwrap-off"
                 className="preference__radio-button"
                 value="Off"
-                checked={!wordwrap}
+                checked={!linewrap}
               />
               <label htmlFor="wordwrap-off" className="preference__option">
                 {t('Preferences.Off')}