diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml new file mode 100644 index 0000000..b62d4c8 --- /dev/null +++ b/.idea/codeStyles/Project.xml @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml new file mode 100644 index 0000000..79ee123 --- /dev/null +++ b/.idea/codeStyles/codeStyleConfig.xml @@ -0,0 +1,5 @@ + + + + \ No newline at end of file diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 0000000..03d9549 --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/.idea/jsLinters/eslint.xml b/.idea/jsLinters/eslint.xml new file mode 100644 index 0000000..541945b --- /dev/null +++ b/.idea/jsLinters/eslint.xml @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 45f1299..4957ebd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { - "name": "@curiosity26/react-style-engine", - "version": "1.0.0", + "name": "react-style-engine", + "version": "1.1.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -2670,6 +2670,17 @@ "integrity": "sha1-uveeYubvTCpMC4MSMtr/7CUfnYM=", "dev": true }, + "array-includes": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.1.tgz", + "integrity": "sha512-c2VXaCHl7zPsvpkFsw4nxvFie4fh1ur9bpcgsVkIjqn0H/Xwdg+7fv3n2r/isyS8EBj5b06M9kHyZuIr4El6WQ==", + "dev": true, + "requires": { + "define-properties": "^1.1.3", + "es-abstract": "^1.17.0", + "is-string": "^1.0.5" + } + }, "array-unique": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.3.2.tgz", @@ -4138,6 +4149,36 @@ } } }, + "eslint-plugin-react": { + "version": "7.20.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.20.0.tgz", + "integrity": "sha512-rqe1abd0vxMjmbPngo4NaYxTcR3Y4Hrmc/jg4T+sYz63yqlmJRknpEQfmWY+eDWPuMmix6iUIK+mv0zExjeLgA==", + "dev": true, + "requires": { + "array-includes": "^3.1.1", + "doctrine": "^2.1.0", + "has": "^1.0.3", + "jsx-ast-utils": "^2.2.3", + "object.entries": "^1.1.1", + "object.fromentries": "^2.0.2", + "object.values": "^1.1.1", + "prop-types": "^15.7.2", + "resolve": "^1.15.1", + "string.prototype.matchall": "^4.0.2", + "xregexp": "^4.3.0" + }, + "dependencies": { + "doctrine": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz", + "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==", + "dev": true, + "requires": { + "esutils": "^2.0.2" + } + } + } + }, "eslint-scope": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.0.0.tgz", @@ -4961,6 +5002,17 @@ } } }, + "internal-slot": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.2.tgz", + "integrity": "sha512-2cQNfwhAfJIkU4KZPkDI+Gj5yNNnbqi40W9Gge6dfnk4TocEVm00B3bdiL+JINrbGJil2TeHvM4rETGzk/f/0g==", + "dev": true, + "requires": { + "es-abstract": "^1.17.0-next.1", + "has": "^1.0.3", + "side-channel": "^1.0.2" + } + }, "invariant": { "version": "2.2.4", "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", @@ -5895,6 +5947,16 @@ "verror": "1.10.0" } }, + "jsx-ast-utils": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.3.0.tgz", + "integrity": "sha512-3HNoc7nZ1hpZIKB3hJ7BlFRkzCx2BynRtfSwbkqZdpRdvAPsGMnzclPwrvDBS7/lalHTj21NwIeaEpysHBOudg==", + "dev": true, + "requires": { + "array-includes": "^3.1.1", + "object.assign": "^4.1.0" + } + }, "kind-of": { "version": "6.0.3", "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz", @@ -7076,6 +7138,16 @@ "safe-regex": "^1.1.0" } }, + "regexp.prototype.flags": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz", + "integrity": "sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==", + "dev": true, + "requires": { + "define-properties": "^1.1.3", + "es-abstract": "^1.17.0-next.1" + } + }, "regexpp": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-2.0.1.tgz", @@ -7578,6 +7650,16 @@ "dev": true, "optional": true }, + "side-channel": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.2.tgz", + "integrity": "sha512-7rL9YlPHg7Ancea1S96Pa8/QWb4BtXL/TZvS6B8XFetGBeuhAsfmUspK6DokBeZ64+Kj9TCNRD/30pVz1BvQNA==", + "dev": true, + "requires": { + "es-abstract": "^1.17.0-next.1", + "object-inspect": "^1.7.0" + } + }, "signal-exit": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz", @@ -7981,6 +8063,20 @@ "strip-ansi": "^6.0.0" } }, + "string.prototype.matchall": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.2.tgz", + "integrity": "sha512-N/jp6O5fMf9os0JU3E72Qhf590RSRZU/ungsL/qJUYVTNv7hTG0P/dbPjxINVN9jpscu3nzYwKESU3P3RY5tOg==", + "dev": true, + "requires": { + "define-properties": "^1.1.3", + "es-abstract": "^1.17.0", + "has-symbols": "^1.0.1", + "internal-slot": "^1.0.2", + "regexp.prototype.flags": "^1.3.0", + "side-channel": "^1.0.2" + } + }, "string.prototype.trim": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.1.tgz", @@ -8660,6 +8756,15 @@ "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==", "dev": true }, + "xregexp": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/xregexp/-/xregexp-4.3.0.tgz", + "integrity": "sha512-7jXDIFXh5yJ/orPn4SXjuVrWWoi4Cr8jfV1eHv9CixKSbU+jY4mxfrBwAuDvupPNKpMUY+FeIqsVw/JLT9+B8g==", + "dev": true, + "requires": { + "@babel/runtime-corejs3": "^7.8.3" + } + }, "y18n": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz", diff --git a/package.json b/package.json index 2654e22..3876462 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-style-engine", - "version": "1.1.0", + "version": "1.1.1", "description": "An in script style engine to be used with state/redux and shadow dom", "main": "dist/index.js", "publishConfig": { @@ -8,7 +8,7 @@ }, "scripts": { "build": "NODE_ENV=production $(npm bin)/babel src --out-dir dist", - "test": "$(npm bin)/eslint && $(npm bin)/jest" + "test": "$(npm bin)/eslint src test && $(npm bin)/jest" }, "repository": { "type": "git", @@ -41,6 +41,7 @@ "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.15.2", "eslint": "^6.8.0", + "eslint-plugin-react": "^7.20.0", "jest": "^26.0.1", "prop-types": "^15.7.2", "react": "^16.13.1", @@ -50,9 +51,11 @@ "peerDependencies": { "react": "^16.8.0", "react-dom": "^16.8.0", - "construct-style-sheets-polyfill": "^2.3.5", "react-shadow": "^18.1.0" }, + "optionalDependencies": { + "construct-style-sheets-polyfill": "^2.3.5" + }, "files": [ "dist/**/*" ] diff --git a/src/engine/constructGlobalStyleSheets.js b/src/engine/constructGlobalStyleSheets.js index d8caff6..97b65fd 100644 --- a/src/engine/constructGlobalStyleSheets.js +++ b/src/engine/constructGlobalStyleSheets.js @@ -10,7 +10,7 @@ export default (global, scales = {}) => { if (!definition) continue; - styleSheets = [...styleSheets, ...constructStyleSheets(definition, scales, selector)] + styleSheets = [ ...styleSheets, ...constructStyleSheets(definition, scales, selector) ] } return styleSheets diff --git a/src/engine/constructStyleFromDefinition.js b/src/engine/constructStyleFromDefinition.js index 580f217..a25773b 100644 --- a/src/engine/constructStyleFromDefinition.js +++ b/src/engine/constructStyleFromDefinition.js @@ -9,7 +9,7 @@ const convertStyle = (field, value) => { .map(([ key, rule ]) => rule && `${ field }-${ hyphenateStyleName(key) }: ${ rule };`) .filter(rule => rule) - .join("\n") + '\n' + .join("\n") + "\n" } return `${ hyphenateStyleName(field) }: ${ value };\n` diff --git a/src/engine/constructStyleSheets.js b/src/engine/constructStyleSheets.js index 3aab860..8c480b5 100644 --- a/src/engine/constructStyleSheets.js +++ b/src/engine/constructStyleSheets.js @@ -11,9 +11,9 @@ const reduceStyles = scales => (def = { directives: [], hostRules: {}, childRule ...def, directives: [ ...directives, `${ key } ${ // In the case of key being @keyframes, the value should be an object "object" === typeof value - ? `{\n${ Object.entries(value) + ? `{\n${ Object.entries(value) .reduce((s, [ f, v ]) => `${ s } ${ f } {${ constructStyleFromDefinition(v) }}\n`, "") }}` - : value + : value };` ], } } diff --git a/src/index.jsx b/src/index.jsx index 39e54c2..13f549b 100644 --- a/src/index.jsx +++ b/src/index.jsx @@ -2,7 +2,7 @@ import React, { createContext, useContext, useEffect, forwardRef } from "react" import PropTypes from "prop-types" import createStyleEngine from "./engine/createStyleEngine" -export { default as GlobalStyles } from "./GlobalStyles" +export { default as GlobalStyles } from "./GlobalStyles" const StyleContext = createContext() @@ -14,7 +14,7 @@ export const StyleProvider = ({ globalStyles = {}, componentStyles = {}, scales: const styles = { global, components, - scales + scales, } const engine = createStyleEngine({ @@ -48,9 +48,7 @@ export const withStyle = ( Component, { attributeName = "style", styleEngineTag, style = {} } = {}, ) => { - if (styleEngineTag) { - Component.styleEngineTag = styleEngineTag - } + Component.styleEngineTag = Component.styleEngineTag || styleEngineTag || Component.displayName || Component.name const WrappedComponent = forwardRef(({ style: styleOverride = {}, ...props }, ref) => { const compProps = { ...(props || {}) } @@ -66,7 +64,7 @@ export const withStyle = ( }) WrappedComponent.defaultProps = Component.defaultProps - WrappedComponent.displayName = Component.displayName + WrappedComponent.displayName = `withStyles(${Component.styleEngineTag})` WrappedComponent.propTypes = { ...(Component.propTypes || {}), style: PropTypes.object, @@ -79,16 +77,14 @@ export const withStyleSheets = ( Component, { attributeName = "styleSheets", styleEngineTag, style = {} } = {}, ) => { - if (styleEngineTag) { - Component.styleEngineTag = styleEngineTag - } + Component.styleEngineTag = Component.styleEngineTag || styleEngineTag || Component.displayName || Component.name - const WrappedComponent = forwardRef(({ style: styleOverride = {}, styleEngine, ...props }, ref) => { + const WrappedComponent = forwardRef(({ style: styleOverride = {}, ...props }, ref) => { const compProps = { ...(props || {}) } const defaultStyle = processStyle(style, compProps); return { styleEngine => { - styleEngine.addComponentStyle(Component, defaultStyle).save() + styleEngine.addComponentStyle(Component.styleEngineTag, defaultStyle).save() // Since computed style sheets are memoized, compute the stylesheets for the component first // The component is likely to be reused many times so this will optimize component loading @@ -106,7 +102,7 @@ export const withStyleSheets = ( }) WrappedComponent.defaultProps = Component.defaultProps - WrappedComponent.displayName = Component.displayName + WrappedComponent.displayName = `withStyleSheets(${Component.styleEngineTag})` WrappedComponent.propTypes = { ...(Component.propTypes || {}), style: PropTypes.object, diff --git a/test/GlobalStyles.spec.jsx b/test/GlobalStyles.spec.jsx index 62182c7..c258592 100644 --- a/test/GlobalStyles.spec.jsx +++ b/test/GlobalStyles.spec.jsx @@ -15,8 +15,8 @@ describe("Global Styles", () => { ) expect(wrapper).toHaveLength(1); - expect(wrapper.find('div')).toHaveLength(1) - expect(wrapper.find('div').text()).toEqual("I'm mounted baby!") + expect(wrapper.find("div")).toHaveLength(1) + expect(wrapper.find("div").text()).toEqual("I'm mounted baby!") expect(document.adoptedStyleSheets).toHaveLength(1) diff --git a/test/engine/constructGlobalStyleSheets.spec.js b/test/engine/constructGlobalStyleSheets.spec.js index ce2260a..871b0ae 100644 --- a/test/engine/constructGlobalStyleSheets.spec.js +++ b/test/engine/constructGlobalStyleSheets.spec.js @@ -16,7 +16,7 @@ describe("constructGlobalStyleSheets", () => { body: { fontSize: "12px", color: "blue", - } + }, }) expect(stylesheets).toHaveLength(1) @@ -34,17 +34,17 @@ describe("constructGlobalStyleSheets", () => { it("should generate multiple stylesheets for all scales", () => { const stylesheets = constructGlobalStyleSheets({ - body: { - fontSize: "12px", - color: "blue", - "2x": { - fontSize: "14px", - }, + body: { + fontSize: "12px", + color: "blue", + "2x": { + fontSize: "14px", }, }, - { - "2x": "(min-resolution: 144dpi)" - }) + }, + { + "2x": "(min-resolution: 144dpi)", + }) expect(stylesheets).toHaveLength(2) diff --git a/test/engine/constructStyleFromDefinition.spec.js b/test/engine/constructStyleFromDefinition.spec.js index 6c04910..7e3e90e 100644 --- a/test/engine/constructStyleFromDefinition.spec.js +++ b/test/engine/constructStyleFromDefinition.spec.js @@ -14,7 +14,7 @@ describe("constructStyleFromDefinition", () => { it("generates styles with array value", () => { const style = constructStyleFromDefinition({ - border: [ "1px", "solid", "blue" ] + border: [ "1px", "solid", "blue" ], }) expect(style).toEqual("border: 1px solid blue;\n") @@ -23,10 +23,10 @@ describe("constructStyleFromDefinition", () => { it("generates styles with complex object", () => { const style = constructStyleFromDefinition({ border: { - width: '1px', - style: 'solid', - color: 'blue', - } + width: "1px", + style: "solid", + color: "blue", + }, }) expect(style).toEqual("border-width: 1px;\nborder-style: solid;\nborder-color: blue;\n") @@ -34,7 +34,7 @@ describe("constructStyleFromDefinition", () => { it("generates styles from function value", () => { const style = constructStyleFromDefinition({ - border: () => "1px solid blue" + border: () => "1px solid blue", }) expect(style).toEqual("border: 1px solid blue;\n"); diff --git a/test/engine/constructStyleSheets.spec.js b/test/engine/constructStyleSheets.spec.js index 5c6def4..ec98b26 100644 --- a/test/engine/constructStyleSheets.spec.js +++ b/test/engine/constructStyleSheets.spec.js @@ -18,7 +18,7 @@ describe("constructStyleSheets", () => { it("constructs a basic stylesheet", () => { const stylesheets = constructStyleSheets({ fontSize: "12px", - color: "blue" + color: "blue", }) expect(stylesheets).toHaveLength(1) @@ -32,17 +32,17 @@ describe("constructStyleSheets", () => { expect(rule).toBeInstanceOf(CSSRule) expect(rule.cssText).toEqual( - ":host {font-size: 12px; color: blue;}" + ":host {font-size: 12px; color: blue;}", ) }) it("constructs a basic stylesheet with selector", () => { const stylesheets = constructStyleSheets({ - fontSize: "12px", - color: "blue" - }, - [], - "div" + fontSize: "12px", + color: "blue", + }, + [], + "div", ) expect(stylesheets).toHaveLength(1) @@ -56,7 +56,7 @@ describe("constructStyleSheets", () => { expect(rule).toBeInstanceOf(CSSRule) expect(rule.cssText).toEqual( - "div {font-size: 12px; color: blue;}" + "div {font-size: 12px; color: blue;}", ) }) @@ -65,7 +65,7 @@ describe("constructStyleSheets", () => { "<.select-child>": { color: "red", lineHeight: 1.4, - } + }, }) expect(stylesheets).toHaveLength(1) @@ -133,7 +133,7 @@ describe("constructStyleSheets", () => { it("constructs stylesheet with import", () => { const stylesheets = constructStyleSheets({ - "@import": "url(../style.css)" + "@import": "url(../style.css)", }) expect(stylesheets).toHaveLength(1) @@ -156,12 +156,12 @@ describe("constructStyleSheets", () => { const stylesheets = constructStyleSheets({ "@keyframes testAnimation": { from: { - transform: "translateX(0)" + transform: "translateX(0)", }, to: { - transform: "translateX(100px)" - } - } + transform: "translateX(100px)", + }, + }, }) expect(stylesheets).toHaveLength(1) @@ -192,20 +192,20 @@ describe("constructStyleSheets", () => { transform: "rotateZ(0deg)", }, "100%": { - transform: "rotateZ(360deg)" - } - } + transform: "rotateZ(360deg)", + }, + }, }, "2x": { border: { width: "1px", style: "solid", color: "black", - } - } + }, + }, }, { "desktop": "(min-width: 1024px)", - "2x": "(min-resolution: 144dpi)" + "2x": "(min-resolution: 144dpi)", }) expect(stylesheets).toHaveLength(3) @@ -245,11 +245,11 @@ describe("constructStyleSheets", () => { it("should return empty array when scaled styles are empty", () => { expect(constructStyleSheets({ - "2x": {}, - }, - { - "2x": "(min-resolution: 144dpi)" - }) + "2x": {}, + }, + { + "2x": "(min-resolution: 144dpi)", + }), ).toHaveLength(0) }) }) \ No newline at end of file diff --git a/test/engine/createStyleEngine.spec.js b/test/engine/createStyleEngine.spec.js index deb4f2a..5efca9e 100644 --- a/test/engine/createStyleEngine.spec.js +++ b/test/engine/createStyleEngine.spec.js @@ -15,9 +15,9 @@ describe("Create Style Engine", () => { let setScales beforeEach(() => { - let global = {} - let components = {} - let scales = {} + const global = {} + const components = {} + const scales = {} getGlobalStyles = jest.fn(() => global) getComponentsStyles = jest.fn(() => components) @@ -62,8 +62,8 @@ describe("Create Style Engine", () => { expect(styleEngine.getGlobalStyles()).toEqual({ body: { - fontStyle: "sans-serif" - } + fontStyle: "sans-serif", + }, }) expect(getGlobalStyles).toHaveBeenCalled() @@ -94,7 +94,7 @@ describe("Create Style Engine", () => { styleEngine.save() expect(styleEngine.getComponentStyleDefinition(MyComponent)).toEqual({ - fontStyle: "sans-serif" + fontStyle: "sans-serif", }) expect(getGlobalStyles).toHaveBeenCalled() @@ -124,7 +124,7 @@ describe("Create Style Engine", () => { styleEngine.save() expect(styleEngine.getScales()).toEqual({ - "2x": "(min-resolution: 144dpi)" + "2x": "(min-resolution: 144dpi)", }) expect(styleEngine.getScale("2x")).toEqual("(min-resolution: 144dpi)") @@ -191,7 +191,7 @@ describe("Create Style Engine", () => { expect(styleEngine.getGlobalStyles()).toEqual({ body: { fontStyle: "sans-serif", - } + }, }) expect(styleEngine.getComponentStyleDefinition(MyComponent)).toBeUndefined() expect(styleEngine.getScales()).toEqual({ "2x": "(min-resolution: 144dpi)" }) @@ -223,7 +223,7 @@ describe("Create Style Engine", () => { expect(styleEngine.getGlobalStyles()).toEqual({ body: { fontStyle: "sans-serif", - } + }, }) expect(styleEngine.getComponentStyleDefinition(MyComponent)).toEqual({ color: "blue" }) expect(styleEngine.getScales()).toEqual({}) @@ -249,9 +249,9 @@ describe("Create Style Engine", () => { describe("computes style sheets", () => { it("for global styles", () => { styleEngine.addGlobalStyle("body", { - fontFamily: "sans-serif", - fontSize: "12px", - }) + fontFamily: "sans-serif", + fontSize: "12px", + }) .save() const styleSheets = styleEngine.computeGlobalStyleSheets() @@ -272,12 +272,12 @@ describe("Create Style Engine", () => { it("for global styles with multiple media", () => { styleEngine.addGlobalStyle("body", { - fontFamily: "sans-serif", - fontSize: "12px", - "2x": { - fontSize: "14px", - } - }) + fontFamily: "sans-serif", + fontSize: "12px", + "2x": { + fontSize: "14px", + }, + }) .addScale("2x", "(min-resolution: 144dpi)") .save() @@ -308,8 +308,8 @@ describe("Create Style Engine", () => { it("for component styles", () => { styleEngine.addComponentStyle(MyComponent, { - fontSize: "12px" - }) + fontSize: "12px", + }) .save() const styleSheets = styleEngine.computeStyleSheets(MyComponent) @@ -331,11 +331,11 @@ describe("Create Style Engine", () => { it("for component styles with multiple media", () => { styleEngine.addComponentStyle(MyComponent, { - fontSize: "12px", - "2x": { - fontSize: "14px", - } - }) + fontSize: "12px", + "2x": { + fontSize: "14px", + }, + }) .addScale("2x", "(min-resolution: 144dpi)") .save() diff --git a/test/engine/hashs.spec.js b/test/engine/hashs.spec.js index a097807..df7f210 100644 --- a/test/engine/hashs.spec.js +++ b/test/engine/hashs.spec.js @@ -1,38 +1,38 @@ -'use strict'; -import hash from '../../src/engine/hash' +"use strict"; +import hash from "../../src/engine/hash" -describe('Hash', () => { - it('hashes an integer value from a string', () => { - const h = hash('some value') +describe("Hash", () => { + it("hashes an integer value from a string", () => { + const h = hash("some value") expect(h).toEqual(expect.any(Number)) }) - it('similar strings should be uniquely separate in hashes', () => { - const h = hash('some value') - const h2 = hash(' some value') + it("similar strings should be uniquely separate in hashes", () => { + const h = hash("some value") + const h2 = hash(" some value") expect(h2).toEqual(expect.any(Number)) expect(h2).not.toEqual(h) }) - it('hashes an integer value from an object', () => { - const h = hash({ some: 'value' }) + it("hashes an integer value from an object", () => { + const h = hash({ some: "value" }) expect(h).toEqual(expect.any(Number)) }) - it('similar objects should be uniquely separate in hashes', () => { - const h = hash({ some: 'value' }) - const h2 = hash({ some: ' value' }) + it("similar objects should be uniquely separate in hashes", () => { + const h = hash({ some: "value" }) + const h2 = hash({ some: " value" }) expect(h2).toEqual(expect.any(Number)) expect(h2).not.toEqual(h) }) - it('objects with same defined values should equal hashes', () => { - const h = hash({ some: 'value' }) - const h2 = hash({ some: 'value', other: undefined }) + it("objects with same defined values should equal hashes", () => { + const h = hash({ some: "value" }) + const h2 = hash({ some: "value", other: undefined }) expect(h2).toEqual(h) }) - it('should return 0 for empty string', () => { - expect(hash('')).toEqual(0) + it("should return 0 for empty string", () => { + expect(hash("")).toEqual(0) }) }) \ No newline at end of file diff --git a/test/engine/hyphenateStyleName.spec.js b/test/engine/hyphenateStyleName.spec.js index d4e648e..f6b10c0 100644 --- a/test/engine/hyphenateStyleName.spec.js +++ b/test/engine/hyphenateStyleName.spec.js @@ -4,13 +4,13 @@ import hyphenateStyleName from "../../src/engine/hyphenateStyleName" describe("Hyphenate Style Name", () => { it("should hyphenate a style name", () => { expect( - hyphenateStyleName("someStyleName") + hyphenateStyleName("someStyleName"), ).toEqual("some-style-name") }) - it('should allow ms prefix', () => { + it("should allow ms prefix", () => { expect( - hyphenateStyleName("msSomeStyleName") + hyphenateStyleName("msSomeStyleName"), ).toEqual("-ms-some-style-name") }) }) \ No newline at end of file diff --git a/test/engine/memoize.spec.js b/test/engine/memoize.spec.js index db7ce34..7ed668a 100644 --- a/test/engine/memoize.spec.js +++ b/test/engine/memoize.spec.js @@ -1,22 +1,22 @@ -'use strict' +"use strict" import memoize from "../../src/engine/memoize" -describe('Memoize', () => { - it('should cache the results of a function', () => { +describe("Memoize", () => { + it("should cache the results of a function", () => { const fn = jest.fn((args) => args) const memFn = memoize(fn) - expect(memFn('value')).toEqual('value') - expect(memFn('value')).toEqual('value') + expect(memFn("value")).toEqual("value") + expect(memFn("value")).toEqual("value") expect(fn).toHaveBeenCalledTimes(1) }) - it('should cache the results based on keys', () => { + it("should cache the results based on keys", () => { const fn = jest.fn((args) => args) - const memFn = memoize(fn, ['cacheKey1']) + const memFn = memoize(fn, [ "cacheKey1" ]) - expect(memFn('value')).toEqual('value') - expect(memFn({ value: "value 2" })).toEqual('value') + expect(memFn("value")).toEqual("value") + expect(memFn({ value: "value 2" })).toEqual("value") expect(fn).toHaveBeenCalledTimes(1) }) }) \ No newline at end of file diff --git a/test/index.spec.jsx b/test/index.spec.jsx index 7ce6048..7ed146c 100644 --- a/test/index.spec.jsx +++ b/test/index.spec.jsx @@ -9,9 +9,8 @@ describe("Style Engine Component", () => { const Component = (props) => I am a div const StyledComponent = withStyleSheets(Component, { style: { - color: "blue" + color: "blue", }, - styleEngineTag: "Component", }); const wrapper = mount(); @@ -27,20 +26,23 @@ describe("Style Engine Component", () => { expect(node.shadowRoot.adoptedStyleSheets).toHaveLength(1); expect(node.shadowRoot.adoptedStyleSheets[ 0 ].cssRules[ 0 ].style).toEqual(expect.objectContaining({ - color: "blue" + color: "blue", })); }) it("should mount with default component style", () => { const ref = createRef() const Component = React.forwardRef((props, ref) => I am a div) - const StyledComponent = withStyleSheets(Component, { styleEngineTag: "Component" }) + Component.displayName = "Component" + + const StyledComponent = withStyleSheets(Component) const wrapper = mount(); + expect(StyledComponent.displayName).toEqual("withStyleSheets(Component)") const comp = wrapper.find(Component) expect(comp.prop("styleSheets")).toHaveLength(1) @@ -53,19 +55,20 @@ describe("Style Engine Component", () => { expect(node.shadowRoot.adoptedStyleSheets).toHaveLength(1) expect(node.shadowRoot.adoptedStyleSheets[ 0 ].cssRules[ 0 ].style).toEqual(expect.objectContaining({ - color: "blue" + color: "blue", })) }) it("should mount with default component style and override", () => { const ref = createRef() const Component = React.forwardRef((props, ref) => I am a div) - const StyledComponent = withStyleSheets(Component, { styleEngineTag: "Component" }) + Component.displayName = "Component" + const StyledComponent = withStyleSheets(Component) const wrapper = mount(); @@ -88,15 +91,14 @@ describe("Style Engine Component", () => { }) it("should mount with style component", () => { + // eslint-disable-next-line react/prop-types const Component = ({ style }) =>
Test
- const StyledComponent = withStyle(Component, { - styleEngineTag: "Component" - }) + const StyledComponent = withStyle(Component) const wrapper = mount( ) diff --git a/test/setup.js b/test/setup.js index 7a1fee7..732f55e 100644 --- a/test/setup.js +++ b/test/setup.js @@ -1,4 +1,4 @@ -import { configure } from 'enzyme'; -import Adapter from 'enzyme-adapter-react-16'; +import { configure } from "enzyme"; +import Adapter from "enzyme-adapter-react-16"; configure({ adapter: new Adapter() }); \ No newline at end of file