Rename linewrap to wordwrap in Preferences component and update related tests

Author: Salman-in

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

@@ -442,45 +442,43 @@ 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 });
 
-    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: /linewrap off/i
+        // get ahold of the radio buttons for toggling wordwrap
+        const wordwrapRadioFalse = screen.getByRole('radio', {
+          name: /wordwrap off/i
         });
-        const linewrapRadioTrue = screen.getByRole('radio', {
-          name: /linewrap on/i
+        const wordwrapRadioTrue = screen.getByRole('radio', {
+          name: /wordwrap on/i
         });
 
         testToggle(
-          linewrapRadioFalse,
-          linewrapRadioTrue,
+          wordwrapRadioFalse,
+          wordwrapRadioTrue,
           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 false
-        subject({ linewrap: true });
-
-        // get ahold of the radio buttons for toggling linewrap
-        const linewrapRadioFalse = screen.getByRole('radio', {
-          name: /linewrap off/i
+        // get ahold of the radio buttons for toggling wordwrap
+        const wordwrapRadioFalse = screen.getByRole('radio', {
+          name: /wordwrap off/i
         });
-        const linewrapRadioTrue = screen.getByRole('radio', {
-          name: /linewrap on/i
+        const wordwrapRadioTrue = screen.getByRole('radio', {
+          name: /wordwrap on/i
         });
 
         testToggle(
-          linewrapRadioTrue,
-          linewrapRadioFalse,
+          wordwrapRadioTrue,
+          wordwrapRadioFalse,
           props.setLinewrap,
           false
         );
@@ -513,7 +511,7 @@ describe('<Preferences />', () => {
       });
 
       const generalElement1 = screen.getByRole('radio', {
-        name: /linewrap on/i
+        name: /wordwrap on/i
       });
       expect(generalElement1).toBeInTheDocument();
     });

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

@@ -38,7 +38,7 @@ export default function Preferences() {
     tabIndex,
     fontSize,
     autosave,
-    linewrap,
+    wordwrap,
     lineNumbers,
     lintWarning,
     textOutput,
@@ -387,26 +387,26 @@ export default function Preferences() {
                 type="radio"
                 onChange={() => dispatch(setLinewrap(true))}
                 aria-label={t('Preferences.WordWrapOnARIA')}
-                name="linewrap"
-                id="linewrap-on"
+                name="wordwrap"
+                id="wordwrap-on"
                 className="preference__radio-button"
                 value="On"
-                checked={linewrap}
+                checked={wordwrap}
               />
-              <label htmlFor="linewrap-on" className="preference__option">
+              <label htmlFor="wordwrap-on" className="preference__option">
                 {t('Preferences.On')}
               </label>
               <input
                 type="radio"
                 onChange={() => dispatch(setLinewrap(false))}
                 aria-label={t('Preferences.WordWrapOffARIA')}
-                name="linewrap"
-                id="linewrap-off"
+                name="wordwrap"
+                id="wordwrap-off"
                 className="preference__radio-button"
                 value="Off"
-                checked={!linewrap}
+                checked={!wordwrap}
               />
-              <label htmlFor="linewrap-off" className="preference__option">
+              <label htmlFor="wordwrap-off" className="preference__option">
                 {t('Preferences.Off')}
               </label>
             </fieldset>