diff --git a/__tests__/data/screens.js b/__tests__/data/screens.js new file mode 100644 index 000000000..3cf8d3856 --- /dev/null +++ b/__tests__/data/screens.js @@ -0,0 +1,32 @@ +// iPhones +export const iPhone5 = { width: 320, height: 568 }; +export const iPhone6 = { width: 375, height: 667 }; +export const iPhone6Plus = { width: 414, height: 736 }; +export const iPhone7 = { width: 375, height: 667 }; +export const iPhone7Plus = { width: 414, height: 736 }; + +// iPods +export const iPodTouch = { width: 320, height: 568 }; + +// iPads +export const iPadPro = { width: 1024, height: 1366 }; +export const iPadGen3 = { witdh: 768, height: 1024 }; +export const iPadAir = { witdh: 768, height: 1024 }; +export const iPadMini = { witdh: 768, height: 1024 }; + +// Android Phones +export const Nexus6P = { width: 411, height: 731 }; +export const Nexus5X = { width: 411, height: 731 }; +export const GooglePixel = { width: 411, height: 731 }; +export const GooglePixelXL = { width: 411, height: 731 }; +export const SamsungGalaxyNote5 = { width: 360, height: 640 }; +export const SamsungGalaxyS7 = { width: 360, height: 640 }; +export const SamsungGalaxyS7Edge = { width: 360, height: 640 }; +export const LGG5 = { width: 360, height: 640 }; +export const OnePlus3 = { width: 360, height: 640 }; + +// Android Tablets +export const Nexus7 = { width: 600, height: 960 }; +export const Nexus9 = { width: 768, height: 1024 }; +export const SamsungGalaxyTab10 = { width: 800, height: 1280 }; +export const ChromebookPixel = { width: 1280, height: 850 }; diff --git a/__tests__/tests/others/normalize-text.js b/__tests__/tests/others/normalize-text.js new file mode 100644 index 000000000..68df11c9f --- /dev/null +++ b/__tests__/tests/others/normalize-text.js @@ -0,0 +1,170 @@ +import * as screens from 'testData/screens'; + +const mockClassWithGetter = value => ({ + get: jest.fn().mockReturnValue(value), +}); + +const mockRequiredClasses = mockValues => { + jest.mock('Dimensions', () => mockClassWithGetter(mockValues.dimensions)); + jest.mock('PixelRatio', () => mockClassWithGetter(mockValues.pixelRatio)); +}; + +const expectSize = size => { + jest.isolateModules(() => { + const { normalize } = require('config'); + expect(normalize(1)).toEqual(size); + }); +}; + +describe('Normalize Text', () => { + // iOS Devices + + it('should normalize correctly on iPhone 5', () => { + mockRequiredClasses({ dimensions: screens.iPhone5, pixelRatio: 2 }); + + expectSize(0.95); + }); + + it('should normalize correctly on iPhone 6', () => { + mockRequiredClasses({ dimensions: screens.iPhone6, pixelRatio: 2 }); + + expectSize(1.15); + }); + + it('should normalize correctly on iPhone 6 Plus', () => { + mockRequiredClasses({ dimensions: screens.iPhone6Plus, pixelRatio: 3 }); + + expectSize(1.27); + }); + + it('should normalize correctly on iPhone 7', () => { + mockRequiredClasses({ dimensions: screens.iPhone7, pixelRatio: 2 }); + + expectSize(1.15); + }); + + it('should normalize correctly on iPhone 7 Plus', () => { + mockRequiredClasses({ dimensions: screens.iPhone7Plus, pixelRatio: 3 }); + + expectSize(1.27); + }); + + it('should normalize correctly on iPod Touch', () => { + mockRequiredClasses({ dimensions: screens.iPodTouch, pixelRatio: 2 }); + + expectSize(0.95); + }); + + it('should normalize correctly on iPad Pro', () => { + mockRequiredClasses({ dimensions: screens.iPadPro, pixelRatio: 2 }); + + expectSize(1.25); + }); + + it('should normalize correctly on iPad Gen 3/4', () => { + mockRequiredClasses({ dimensions: screens.iPadGen3, pixelRatio: 2 }); + + expectSize(1.25); + }); + + it('should normalize correctly on iPad Air', () => { + mockRequiredClasses({ dimensions: screens.iPadAir, pixelRatio: 2 }); + + expectSize(1.25); + }); + + it('should normalize correctly on iPad Mini', () => { + mockRequiredClasses({ dimensions: screens.iPadMini, pixelRatio: 1 }); + + expectSize(1); + }); + + // Android Devices + + it('should normalize correctly on Nexus 6P', () => { + mockRequiredClasses({ dimensions: screens.Nexus6P, pixelRatio: 3.5 }); + + expectSize(1.25); + }); + + it('should normalize correctly on Nexus 5X', () => { + mockRequiredClasses({ dimensions: screens.Nexus5X, pixelRatio: 2.6 }); + + expectSize(1.15); + }); + + it('should normalize correctly on Google Pixel', () => { + mockRequiredClasses({ dimensions: screens.GooglePixel, pixelRatio: 2.6 }); + + expectSize(1.15); + }); + + it('should normalize correctly on Google Pixel XL', () => { + mockRequiredClasses({ dimensions: screens.GooglePixelXL, pixelRatio: 3.5 }); + + expectSize(1.25); + }); + + it('should normalize correctly on Samsung Galaxy Note 5', () => { + mockRequiredClasses({ + dimensions: screens.SamsungGalaxyNote5, + pixelRatio: 4, + }); + + expectSize(1); + }); + + it('should normalize correctly on Samsung Galaxy S7', () => { + mockRequiredClasses({ dimensions: screens.SamsungGalaxyS7, pixelRatio: 4 }); + + expectSize(1); + }); + + it('should normalize correctly on Samsung Galaxy S7 Edge', () => { + mockRequiredClasses({ + dimensions: screens.SamsungGalaxyS7Edge, + pixelRatio: 4, + }); + + expectSize(1); + }); + + it('should normalize correctly on LG G5', () => { + mockRequiredClasses({ dimensions: screens.LGG5, pixelRatio: 4 }); + + expectSize(1); + }); + + it('should normalize correctly on OnePlus 3', () => { + mockRequiredClasses({ dimensions: screens.OnePlus3, pixelRatio: 3 }); + + expectSize(1); + }); + + it('should normalize correctly on Nexus 7', () => { + mockRequiredClasses({ dimensions: screens.Nexus7, pixelRatio: 2 }); + + expectSize(1.25); + }); + + it('should normalize correctly on Nexus 9', () => { + mockRequiredClasses({ dimensions: screens.Nexus9, pixelRatio: 2 }); + + expectSize(1.25); + }); + + it('should normalize correctly on Samsung Galaxy Tab 10', () => { + mockRequiredClasses({ + dimensions: screens.SamsungGalaxyTab10, + pixelRatio: 1, + }); + + expectSize(1); + }); + + it('should normalize correctly on ChromebookPixel', () => { + mockRequiredClasses({ dimensions: screens.ChromebookPixel, pixelRatio: 2 }); + + expectSize(1.25); + }); +}); diff --git a/src/config/normalize-text.js b/src/config/normalize-text.js index b343b012a..49213549e 100644 --- a/src/config/normalize-text.js +++ b/src/config/normalize-text.js @@ -27,7 +27,7 @@ const deviceWidth = Dimensions.get('window').width; // console.log('normalizeText getPSFLS ->', layoutSize); export const normalize = size => { - if (pixelRatio === 2) { + if (pixelRatio >= 2 && pixelRatio < 3) { // iphone 5s and older Androids if (deviceWidth < 360) { return size * 0.95; @@ -45,7 +45,7 @@ export const normalize = size => { return size * 1.25; } - if (pixelRatio === 3) { + if (pixelRatio >= 3 && pixelRatio < 3.5) { // catch Android font scaling on small machines // where pixel ratio / font scale ratio => 3:3 if (deviceWidth <= 360) { @@ -68,7 +68,7 @@ export const normalize = size => { return size * 1.27; } - if (pixelRatio === 3.5) { + if (pixelRatio >= 3.5) { // catch Android font scaling on small machines // where pixel ratio / font scale ratio => 3:3 if (deviceWidth <= 360) { @@ -86,6 +86,5 @@ export const normalize = size => { return size * 1.4; } - // if older device ie pixelRatio !== 2 || 3 || 3.5 return size; };