From 0be0e4acd8ea5dd7fa96ca154658619066282ec6 Mon Sep 17 00:00:00 2001 From: kheva Date: Mon, 14 Mar 2022 22:44:48 -0700 Subject: [PATCH 1/2] :bug: fixed issue where sometimes listener is not defined so remove() was crashing --- src/useResponsiveStyle.ts | 2 +- tests/OverwriteStyle.tsx | 31 ++++++++++++++++++++ tests/__snapshots__/additional.test.tsx.snap | 29 ++++++++++++++++++ tests/additional.test.tsx | 28 ++++++++++++++++++ 4 files changed, 89 insertions(+), 1 deletion(-) create mode 100644 tests/OverwriteStyle.tsx create mode 100644 tests/__snapshots__/additional.test.tsx.snap create mode 100644 tests/additional.test.tsx diff --git a/src/useResponsiveStyle.ts b/src/useResponsiveStyle.ts index 22cf8d7..d9cc7d6 100644 --- a/src/useResponsiveStyle.ts +++ b/src/useResponsiveStyle.ts @@ -18,7 +18,7 @@ const composeMultipleStyles = ( const getCustomStyles = (styles: StyleSheet.NamedStyles, size: DEVICE_SIZES, className: keyof Styles) => { // Will match any string that contains the size (in any order) followed by the style name - const regex = new RegExp(`(^|\\+)${size}[a-zA-Z0-9+-]*_${className}`) + const regex = new RegExp(`(^|\\+)${size}[a-zA-Z0-9+-]*_${className}$`) // Will get a list of all style keys that are matching either with a sie prefix or the base class const styleKeys = Object.keys(styles).filter((style) => style.match(regex) || style === className) diff --git a/tests/OverwriteStyle.tsx b/tests/OverwriteStyle.tsx new file mode 100644 index 0000000..23a6de1 --- /dev/null +++ b/tests/OverwriteStyle.tsx @@ -0,0 +1,31 @@ +import * as React from 'react' +import { CreateResponsiveStyle, DEVICE_SIZES } from '../src' +import { Text, View } from 'react-native' + +export default function OverwriteStyle() { + const { styles } = useStyles() + + return ( + + Open up App.tsx to start working on your app! + + ) +} + +const useStyles = CreateResponsiveStyle( + { + text: { + fontSize: 40, + }, + textBold: { + fontWeight: '700', + }, + }, + { + [DEVICE_SIZES.MEDIUM_DEVICE]: { + textBold: { + fontWeight: '700', + }, + }, + }, +) diff --git a/tests/__snapshots__/additional.test.tsx.snap b/tests/__snapshots__/additional.test.tsx.snap new file mode 100644 index 0000000..c7e3ae1 --- /dev/null +++ b/tests/__snapshots__/additional.test.tsx.snap @@ -0,0 +1,29 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`additional tests for specific cases tests that regex does not include extra classes: medium 1`] = ` + + + Open up App.tsx to start working on your app! + + +`; + +exports[`additional tests for specific cases tests that regex only picks up the exact class specified: small 1`] = ` + + + Open up App.tsx to start working on your app! + + +`; diff --git a/tests/additional.test.tsx b/tests/additional.test.tsx new file mode 100644 index 0000000..22e8654 --- /dev/null +++ b/tests/additional.test.tsx @@ -0,0 +1,28 @@ +import * as renderer from 'react-test-renderer' +import OverwriteStyle from './OverwriteStyle' +import * as React from 'react' +import { cleanup } from '@testing-library/react-native' +import { ScaledSize } from 'react-native' + +afterEach(cleanup) + +const mockDimensions = ({ width }: Pick) => { + jest.resetModules() + jest.doMock('react-native/Libraries/Utilities/Dimensions', () => ({ + get: jest.fn().mockReturnValue({ width }), + addEventListener: jest.fn(), + })) +} + +describe('additional tests for specific cases', () => { + test('tests that regex only picks up the exact class specified', () => { + mockDimensions({ width: 470 }) + const tree = renderer.create().toJSON() + expect(tree).toMatchSnapshot('small') + }) + test('tests that regex does not include extra classes', () => { + mockDimensions({ width: 770 }) + const tree = renderer.create().toJSON() + expect(tree).toMatchSnapshot('medium') + }) +}) From e480f7bff9bffe89e8f76731b51c29411dfe095d Mon Sep 17 00:00:00 2001 From: kheva Date: Mon, 14 Mar 2022 22:45:57 -0700 Subject: [PATCH 2/2] :bookmark: update version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e45aa7f..1285890 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "rn-responsive-styles", - "version": "1.1.1", + "version": "1.1.2", "description": "responsive styles for react-native and react-native-web", "main": "lib/index.js", "types": "lib/index.d.ts",