Merge pull request #8 from khevamann/invalid_regex

Invalid Regex

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",

src/useResponsiveStyle.ts

@@ -18,7 +18,7 @@ const composeMultipleStyles = <Styles>(
 
 const getCustomStyles = <Styles>(styles: StyleSheet.NamedStyles<any>, 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)

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 (
+    <View>
+      <Text style={styles('text')}>Open up App.tsx to start working on your app!</Text>
+    </View>
+  )
+}
+
+const useStyles = CreateResponsiveStyle(
+  {
+    text: {
+      fontSize: 40,
+    },
+    textBold: {
+      fontWeight: '700',
+    },
+  },
+  {
+    [DEVICE_SIZES.MEDIUM_DEVICE]: {
+      textBold: {
+        fontWeight: '700',
+      },
+    },
+  },
+)

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`] = `
+<View>
+  <Text
+    style={
+      Object {
+        "fontSize": 40,
+      }
+    }
+  >
+    Open up App.tsx to start working on your app!
+  </Text>
+</View>
+`;
+
+exports[`additional tests for specific cases tests that regex only picks up the exact class specified: small 1`] = `
+<View>
+  <Text
+    style={
+      Object {
+        "fontSize": 40,
+      }
+    }
+  >
+    Open up App.tsx to start working on your app!
+  </Text>
+</View>
+`;

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<ScaledSize, 'width'>) => {
+  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(<OverwriteStyle />).toJSON()
+    expect(tree).toMatchSnapshot('small')
+  })
+  test('tests that regex does not include extra classes', () => {
+    mockDimensions({ width: 770 })
+    const tree = renderer.create(<OverwriteStyle />).toJSON()
+    expect(tree).toMatchSnapshot('medium')
+  })
+})