diff --git a/agnosticui-react/__mocks__/fileMock.js b/agnosticui-react/__mocks__/fileMock.js new file mode 100644 index 000000000..d70658a8a --- /dev/null +++ b/agnosticui-react/__mocks__/fileMock.js @@ -0,0 +1,2 @@ +module.exports = 'file-stub'; + diff --git a/agnosticui-react/__mocks__/styleMock.js b/agnosticui-react/__mocks__/styleMock.js new file mode 100644 index 000000000..85dfb349b --- /dev/null +++ b/agnosticui-react/__mocks__/styleMock.js @@ -0,0 +1,2 @@ +module.exports = {}; + diff --git a/agnosticui-react/package.json b/agnosticui-react/package.json index 3c3a690bd..77f9d94a7 100644 --- a/agnosticui-react/package.json +++ b/agnosticui-react/package.json @@ -39,6 +39,7 @@ "babel-jest": "^26.3.0", "babel-loader": "^8.0.5", "clean-webpack-plugin": "^3.0.0", + "core-js": "^3.6.5", "css-loader": "^4.2.2", "identity-obj-proxy": "^3.0.0", "jest": "^26.4.2", @@ -50,6 +51,9 @@ "webpack-dev-server": "^3.2.1" }, "jest": { + "setupFilesAfterEnv": [ + "./setupTests.js" + ], "moduleNameMapper": { "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "/__mocks__/fileMock.js", "\\.(css|less)$": "identity-obj-proxy" @@ -58,4 +62,4 @@ "^.+\\.js$": "babel-jest" } } -} +} \ No newline at end of file diff --git a/agnosticui-react/setupTests.js b/agnosticui-react/setupTests.js new file mode 100644 index 000000000..34bd72ce1 --- /dev/null +++ b/agnosticui-react/setupTests.js @@ -0,0 +1,2 @@ +import 'core-js/stable'; +import 'regenerator-runtime/runtime'; diff --git a/agnosticui-react/src/stories/FlexGrid/FlexGrid.js b/agnosticui-react/src/stories/FlexGrid/FlexGrid.js index 77cb64c17..37cfedf30 100644 --- a/agnosticui-react/src/stories/FlexGrid/FlexGrid.js +++ b/agnosticui-react/src/stories/FlexGrid/FlexGrid.js @@ -25,10 +25,15 @@ const propTypes = { const FlexGrid = (props) => { const containerClass = getClass('flexgrid-container') const classNames = [props.className, containerClass] + const gridPropsCreated = createProps(propTypes, props, classNames) + // We're essentially taking the props passed in and: + // - rejecting any props passed in that are not in propTypes + // - adding classNames to our new react element below + // - allowing for a custom tagName or falling back to 'div' return React.createElement( props.tagName || 'div', - createProps(propTypes, props, classNames) + gridPropsCreated ) } diff --git a/agnosticui-react/src/stories/FlexGrid/FlexRow.js b/agnosticui-react/src/stories/FlexGrid/FlexRow.js index 75ad50755..016977aa4 100644 --- a/agnosticui-react/src/stories/FlexGrid/FlexRow.js +++ b/agnosticui-react/src/stories/FlexGrid/FlexRow.js @@ -49,7 +49,8 @@ function getRowClassNames(props) { } export function getRowProps(props) { - return createProps(propTypes, props, getRowClassNames(props)) + const rowPropsCreated = createProps(propTypes, props, getRowClassNames(props)) + return rowPropsCreated; } const FlexRow = (props) => { diff --git a/agnosticui-react/src/stories/FlexGrid/createProps.test.js b/agnosticui-react/src/stories/FlexGrid/createProps.test.js new file mode 100644 index 000000000..99b474b36 --- /dev/null +++ b/agnosticui-react/src/stories/FlexGrid/createProps.test.js @@ -0,0 +1,27 @@ +import PropTypes from 'prop-types'; +import createProps from './createProps'; + +const propTypes = { + b: PropTypes.bool, + s: PropTypes.string, + children: PropTypes.node, +} +test('removes prop types besides children', async () => { + const classNames = ['class_a', 'class_b'] + const props = { + s: 'string', // expected: gets removed + b: true, // expected: gets removed + style: 'color: hotpink;', // expected: preserved + children: 'le children', + } + + const result = createProps(propTypes, props, classNames) + expect(result.children).toEqual('le children') + expect(result.className).toEqual('class_a class_b') + // keys that are not in propTypes are preserved + expect(result.style).toBeDefined(); + + // only the children component prop (and props not in propTypes) are preserved + expect(result.b).toBeUndefined() + expect(result.s).toBeUndefined() +}) \ No newline at end of file