Rewrite I18nManager and i18nStyle unit tests

packages/react-native-web/src/exports/I18nManager/__tests__/index-test.js

@@ -2,44 +2,100 @@
 
 import I18nManager from '..';
 
+const getDocumentDir = () => document.documentElement.getAttribute('dir');
+
 describe('apis/I18nManager', () => {
-  describe('when RTL not enabled', () => {
+  describe('preferred language is LTR', () => {
     beforeEach(() => {
       I18nManager.setPreferredLanguageRTL(false);
     });
 
-    test('is "false" by default', () => {
+    describe('isRTL', () => {
-      expect(I18nManager.isRTL).toEqual(false);
+      test('is false', () => {
-      expect(document.documentElement.getAttribute('dir')).toEqual('ltr');
+        expect(I18nManager.isRTL).toBe(false);
+        expect(getDocumentDir()).toEqual('ltr');
+      });
     });
 
-    test('is "true" when forced', () => {
+    describe('forceRTL', () => {
-      I18nManager.forceRTL(true);
+      test('when set to false, "isRTL" is false', () => {
-      expect(I18nManager.isRTL).toEqual(true);
+        I18nManager.forceRTL(false);
-      expect(document.documentElement.getAttribute('dir')).toEqual('rtl');
+        expect(I18nManager.isRTL).toBe(false);
-      I18nManager.forceRTL(false);
+        expect(getDocumentDir()).toEqual('ltr');
+      });
+      test('when set to true, "isRTL" is true', () => {
+        I18nManager.forceRTL(true);
+        expect(I18nManager.isRTL).toBe(true);
+        expect(getDocumentDir()).toEqual('rtl');
+        I18nManager.forceRTL(false);
+      });
+    });
+
+    describe('swapLeftAndRightInRTL', () => {
+      test('when set to false, "doLeftAndRightSwapInRTL" is false', () => {
+        I18nManager.swapLeftAndRightInRTL(false);
+        expect(I18nManager.doLeftAndRightSwapInRTL).toBe(false);
+      });
+      test('when set to true, "doLeftAndRightSwapInRTL" is true', () => {
+        I18nManager.swapLeftAndRightInRTL(true);
+        expect(I18nManager.doLeftAndRightSwapInRTL).toBe(true);
+      });
     });
   });
 
-  describe('when RTL is enabled', () => {
+  describe('preferred language is RTL', () => {
     beforeEach(() => {
       I18nManager.setPreferredLanguageRTL(true);
     });
 
-    afterEach(() => {
+    afterAll(() => {
       I18nManager.setPreferredLanguageRTL(false);
     });
 
-    test('is "true" by default', () => {
+    describe('isRTL', () => {
-      expect(I18nManager.isRTL).toEqual(true);
+      test('is true', () => {
-      expect(document.documentElement.getAttribute('dir')).toEqual('rtl');
+        expect(I18nManager.isRTL).toBe(true);
+        expect(getDocumentDir()).toEqual('rtl');
+      });
     });
 
-    test('is "false" when not allowed', () => {
+    describe('allowRTL', () => {
-      I18nManager.allowRTL(false);
+      test('when set to false, "isRTL" is false', () => {
-      expect(I18nManager.isRTL).toEqual(false);
+        I18nManager.allowRTL(false);
-      expect(document.documentElement.getAttribute('dir')).toEqual('ltr');
+        expect(I18nManager.isRTL).toBe(false);
-      I18nManager.allowRTL(true);
+        expect(getDocumentDir()).toEqual('ltr');
+        I18nManager.allowRTL(true);
+      });
+      test('when set to true, "isRTL" is true', () => {
+        I18nManager.allowRTL(true);
+        expect(I18nManager.isRTL).toBe(true);
+        expect(getDocumentDir()).toEqual('rtl');
+      });
+    });
+
+    describe('forceRTL', () => {
+      test('when set to false, "isRTL" is true', () => {
+        I18nManager.forceRTL(false);
+        expect(I18nManager.isRTL).toBe(true);
+        expect(getDocumentDir()).toEqual('rtl');
+      });
+      test('when set to true, "isRTL" is true', () => {
+        I18nManager.forceRTL(true);
+        expect(I18nManager.isRTL).toBe(true);
+        expect(getDocumentDir()).toEqual('rtl');
+        I18nManager.forceRTL(false);
+      });
+    });
+
+    describe('swapLeftAndRightInRTL', () => {
+      test('when set to false, "doLeftAndRightSwapInRTL" is false', () => {
+        I18nManager.swapLeftAndRightInRTL(false);
+        expect(I18nManager.doLeftAndRightSwapInRTL).toBe(false);
+      });
+      test('when set to true, "doLeftAndRightSwapInRTL" is true', () => {
+        I18nManager.swapLeftAndRightInRTL(true);
+        expect(I18nManager.doLeftAndRightSwapInRTL).toBe(true);
+      });
     });
   });
 });

packages/react-native-web/src/exports/StyleSheet/__tests__/i18nStyle-test.js

@@ -4,7 +4,7 @@ import I18nManager from '../../I18nManager';
 import i18nStyle from '../i18nStyle';
 
 describe('StyleSheet/i18nStyle', () => {
-  describe('isRTL = false', () => {
+  describe('isRTL is false', () => {
     beforeEach(() => {
       I18nManager.allowRTL(false);
     });
@@ -13,42 +13,55 @@ describe('StyleSheet/i18nStyle', () => {
       I18nManager.allowRTL(true);
     });
 
-    test("doesn't flip left/right", () => {
+    test('converts end/start properties', () => {
-      const initial = {
-        borderLeftColor: 'red',
-        left: 1,
-        marginLeft: 5,
-        paddingRight: 10,
-        textAlign: 'right',
-        textShadowOffset: { width: '1rem', height: 10 }
-      };
-
-      expect(i18nStyle(initial)).toEqual(initial);
-    });
-
-    test("converts and doesn't flip start/end", () => {
       const initial = {
         borderStartColor: 'red',
         start: 1,
         marginStart: 5,
-        paddingEnd: 10,
+        paddingEnd: 10
-        textAlign: 'end',
-        textShadowOffset: { width: '1rem', height: 10 }
       };
-
       const expected = {
         borderLeftColor: 'red',
         left: 1,
         marginLeft: 5,
-        paddingRight: 10,
+        paddingRight: 10
-        textAlign: 'right',
-        textShadowOffset: { width: '1rem', height: 10 }
       };
-
       expect(i18nStyle(initial)).toEqual(expected);
     });
 
-    test('start/end takes precedence over left/right', () => {
+    test('converts end/start values', () => {
+      const initial = {
+        float: 'start',
+        textAlign: 'end'
+      };
+      const expected = {
+        float: 'left',
+        textAlign: 'right'
+      };
+      expect(i18nStyle(initial)).toEqual(expected);
+    });
+
+    test('noop on left/right properties', () => {
+      const initial = {
+        paddingLeft: 0,
+        left: 0,
+        marginRight: 0,
+        paddingRight: 10
+      };
+      expect(i18nStyle(initial)).toEqual(initial);
+    });
+
+    test('noop on left/right values', () => {
+      const initial = {
+        clear: 'left',
+        float: 'left',
+        textAlign: 'right',
+        textShadowOffset: { width: '1rem', height: 10 }
+      };
+      expect(i18nStyle(initial)).toEqual(initial);
+    });
+
+    test('end/start properties take precedence', () => {
       const initial = {
         borderStartWidth: 10,
         borderLeftWidth: 0,
@@ -66,7 +79,7 @@ describe('StyleSheet/i18nStyle', () => {
     });
   });
 
-  describe('isRTL = true', () => {
+  describe('isRTL is true', () => {
     beforeEach(() => {
       I18nManager.forceRTL(true);
     });
@@ -75,68 +88,7 @@ describe('StyleSheet/i18nStyle', () => {
       I18nManager.forceRTL(false);
     });
 
-    describe('doLeftAndRightSwapInRTL = true', () => {
+    describe('doLeftAndRightSwapInRTL is false', () => {
-      test('flips left/right', () => {
-        const initial = {
-          borderLeftColor: 'red',
-          left: 1,
-          marginLeft: 5,
-          paddingRight: 10,
-          textAlign: 'right',
-          textShadowOffset: { width: '1rem', height: 10 }
-        };
-
-        const expected = {
-          borderRightColor: 'red',
-          right: 1,
-          marginRight: 5,
-          paddingLeft: 10,
-          textAlign: 'left',
-          textShadowOffset: { width: '-1rem', height: 10 }
-        };
-
-        expect(i18nStyle(initial)).toEqual(expected);
-      });
-
-      test('converts and flips start/end', () => {
-        const initial = {
-          borderStartColor: 'red',
-          start: 1,
-          marginStart: 5,
-          paddingEnd: 10,
-          textAlign: 'end'
-        };
-
-        const expected = {
-          borderRightColor: 'red',
-          right: 1,
-          marginRight: 5,
-          paddingLeft: 10,
-          textAlign: 'left'
-        };
-
-        expect(i18nStyle(initial)).toEqual(expected);
-      });
-
-      test('start/end takes precedence over left/right', () => {
-        const style = {
-          borderStartWidth: 10,
-          borderLeftWidth: 0,
-          end: 10,
-          right: 0,
-          marginStart: 10,
-          marginLeft: 0
-        };
-        const expected = {
-          borderRightWidth: 10,
-          marginRight: 10,
-          left: 10
-        };
-        expect(i18nStyle(style)).toEqual(expected);
-      });
-    });
-
-    describe('doLeftAndRightSwapInRTL = false', () => {
       beforeEach(() => {
         I18nManager.swapLeftAndRightInRTL(false);
       });
@@ -145,40 +97,55 @@ describe('StyleSheet/i18nStyle', () => {
         I18nManager.swapLeftAndRightInRTL(true);
       });
 
-      test("doesn't flip left/right", () => {
+      test('converts end/start properties', () => {
-        const initial = {
-          borderLeftColor: 'red',
-          left: 1,
-          marginLeft: 5,
-          paddingRight: 10,
-          textAlign: 'right',
-          textShadowOffset: { width: '1rem', height: 10 }
-        };
-
-        expect(i18nStyle(initial)).toEqual(initial);
-      });
-
-      test('converts start/end', () => {
         const initial = {
           borderStartColor: 'red',
           start: 1,
           marginStart: 5,
-          paddingEnd: 10,
+          paddingEnd: 10
-          textAlign: 'end'
         };
-
         const expected = {
           borderRightColor: 'red',
           right: 1,
           marginRight: 5,
-          paddingLeft: 10,
+          paddingLeft: 10
-          textAlign: 'left'
         };
-
         expect(i18nStyle(initial)).toEqual(expected);
       });
 
-      test('start/end takes precedence over left/right', () => {
+      test('converts end/start values', () => {
+        const initial = {
+          float: 'start',
+          textAlign: 'end'
+        };
+        const expected = {
+          float: 'right',
+          textAlign: 'left'
+        };
+        expect(i18nStyle(initial)).toEqual(expected);
+      });
+
+      test('noop on left/right properties', () => {
+        const initial = {
+          paddingLeft: 0,
+          left: 0,
+          marginRight: 0,
+          paddingRight: 10
+        };
+        expect(i18nStyle(initial)).toEqual(initial);
+      });
+
+      test('noop on left/right values', () => {
+        const initial = {
+          clear: 'left',
+          float: 'left',
+          textAlign: 'right',
+          textShadowOffset: { width: '1rem', height: 10 }
+        };
+        expect(i18nStyle(initial)).toEqual(initial);
+      });
+
+      test('end/start properties take precedence', () => {
         const style = {
           borderStartWidth: 10,
           borderRightWidth: 0,
@@ -195,5 +162,82 @@ describe('StyleSheet/i18nStyle', () => {
         expect(i18nStyle(style)).toEqual(expected);
       });
     });
+
+    describe('doLeftAndRightSwapInRTL is true', () => {
+      test('converts end/start properties', () => {
+        const initial = {
+          borderStartColor: 'red',
+          start: 1,
+          marginStart: 5,
+          paddingEnd: 10
+        };
+        const expected = {
+          borderRightColor: 'red',
+          right: 1,
+          marginRight: 5,
+          paddingLeft: 10
+        };
+        expect(i18nStyle(initial)).toEqual(expected);
+      });
+
+      test('converts end/start values', () => {
+        const initial = {
+          float: 'start',
+          textAlign: 'end'
+        };
+        const expected = {
+          float: 'right',
+          textAlign: 'left'
+        };
+        expect(i18nStyle(initial)).toEqual(expected);
+      });
+
+      test('converts left/right properties', () => {
+        const initial = {
+          borderLeftColor: 'red',
+          left: 1,
+          marginLeft: 5,
+          paddingRight: 10
+        };
+        const expected = {
+          borderRightColor: 'red',
+          right: 1,
+          marginRight: 5,
+          paddingLeft: 10
+        };
+        expect(i18nStyle(initial)).toEqual(expected);
+      });
+
+      test('converts left/right values', () => {
+        const initial = {
+          float: 'left',
+          textAlign: 'right',
+          textShadowOffset: { width: '1rem', height: 10 }
+        };
+        const expected = {
+          float: 'right',
+          textAlign: 'left',
+          textShadowOffset: { width: '-1rem', height: 10 }
+        };
+        expect(i18nStyle(initial)).toEqual(expected);
+      });
+
+      test('end/start properties take precedence', () => {
+        const style = {
+          borderStartWidth: 10,
+          borderLeftWidth: 0,
+          end: 10,
+          right: 0,
+          marginStart: 10,
+          marginLeft: 0
+        };
+        const expected = {
+          borderRightWidth: 10,
+          marginRight: 10,
+          left: 10
+        };
+        expect(i18nStyle(style)).toEqual(expected);
+      });
+    });
   });
 });