diff --git a/package.json b/package.json index 40721b4cf..aae94d226 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "zip": "node ./.build/zip-files.mjs" }, "devDependencies": { + "@atomico/rollup-plugin-sizes": "^1.1.4", "@babel/cli": "^7.20.7", "@babel/core": "7.11.6", "@babel/parser": "7.11.5", diff --git a/packages/icons-preact/.babelrc b/packages/icons-preact/.babelrc new file mode 100644 index 000000000..cf1fb8419 --- /dev/null +++ b/packages/icons-preact/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["@babel/preset-env", "preact"] + } \ No newline at end of file diff --git a/packages/icons-preact/package.json b/packages/icons-preact/package.json index 1ccfff530..2fa25df0c 100644 --- a/packages/icons-preact/package.json +++ b/packages/icons-preact/package.json @@ -32,7 +32,7 @@ "build:bundles": "rollup -c ./rollup.config.mjs", "copy:license": "cp ../../LICENSE ./LICENSE", "clean": "rm -rf dist && rm -rf ./src/icons/*.js", - "test": "echo 'ok'" + "test": "pnpm run clean && pnpm run build:icons && jest --env=jsdom" }, "dependencies": { "@tabler/icons": "2.2.0" @@ -41,12 +41,25 @@ "preact": "^10.5.13" }, "devDependencies": { + "@babel/preset-env": "7.11.5", "@preact/preset-vite": "^2.5.0", "@testing-library/jest-dom": "^5.16.5", "@testing-library/preact": "^3.2.2", "babel-preset-preact": "^2.0.0", + "babel-jest": "^29.4.1", "jest": "^29.3.1", - "preact": "^10.11.3", - "vitest": "^0.26.3" - } + "jest-environment-jsdom": "^29.4.1", + "preact": "^10.11.3" + }, + "jest": { + "testEnvironmentOptions": { + "customExportConditions": [ + "node", + "node-addons" + ] + }, + "transform": { + "^.+\\.js$": "babel-jest" + } + } } diff --git a/packages/icons-preact/test.spec.js b/packages/icons-preact/test.spec.js new file mode 100644 index 000000000..1adaab712 --- /dev/null +++ b/packages/icons-preact/test.spec.js @@ -0,0 +1,29 @@ +import { h } from "preact"; +import { render } from "@testing-library/preact"; +import { Icon2fa } from "./src/icons.js"; + +describe("Preact Icon component", () => { + test("should render icon component", () => { + const { container } = render(); + expect(container.getElementsByTagName("svg").length).toBeGreaterThan(0); + }); + + test("should update svg attributes when there are props passed to the component", () => { + const { container } = render( + + ); + + const svg = container.getElementsByTagName("svg")[0]; + + expect(svg.getAttribute("width")).toBe("48"); + expect(svg.getAttribute("stroke")).toBe("red"); + expect(svg.getAttribute("stroke-width")).toBe("4"); + }); + + test("should match snapshot", () => { + const { container } = render(); + expect(container.innerHTML).toMatchInlineSnapshot( + `""` + ); + }); +}); \ No newline at end of file diff --git a/packages/icons-preact/test.spec.jsx b/packages/icons-preact/test.spec.jsx deleted file mode 100644 index f262cd1f7..000000000 --- a/packages/icons-preact/test.spec.jsx +++ /dev/null @@ -1,37 +0,0 @@ -import { describe, it, expect } from 'vitest' -import Preact from 'preact' -import { render } from "@testing-library/preact" -import { IconActivity } from "@tabler/icons-preact" - -describe("Preact Icon component", () => { - it("should render an component", () => { - const { container } = render(); - - expect(container.innerHTML).toMatchInlineSnapshot( - `""` - ); - }); - - it("should adjust the size, stroke color and stroke width", () => { - const testId = "icon"; - const { container, getByTestId } = render( - - ); - - const { attributes } = getByTestId(testId); - expect(attributes.stroke.value).toBe("red"); - expect(attributes.width.value).toBe("48"); - expect(attributes.height.value).toBe("48"); - expect(attributes["stroke-width"].value).toBe("4"); - - expect(container.innerHTML).toMatchInlineSnapshot( - `""` - ); - }); -}); diff --git a/packages/icons-react/.babelrc b/packages/icons-react/.babelrc new file mode 100644 index 000000000..76957d6a9 --- /dev/null +++ b/packages/icons-react/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["@babel/preset-env", "@babel/preset-react"] + } \ No newline at end of file diff --git a/packages/icons-react/__snapshots__/test.spec.js.snap b/packages/icons-react/__snapshots__/test.spec.js.snap new file mode 100644 index 000000000..092b43b49 --- /dev/null +++ b/packages/icons-react/__snapshots__/test.spec.js.snap @@ -0,0 +1,20 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`React Icon component should match snapshot 1`] = ` + + + +`; diff --git a/packages/icons-react/package.json b/packages/icons-react/package.json index 423f3a3f8..0eaa32fe8 100644 --- a/packages/icons-react/package.json +++ b/packages/icons-react/package.json @@ -32,21 +32,30 @@ "build:bundles": "rollup -c ./rollup.config.mjs", "copy:license": "cp ../../LICENSE ./LICENSE", "clean": "rm -rf dist && rm -rf ./src/icons/*.js", - "test": "echo 'ok'" + "test": "pnpm run clean && pnpm run build:icons && jest --env=jsdom" }, "dependencies": { "@tabler/icons": "2.2.0", "prop-types": "^15.7.2" }, "devDependencies": { + "@babel/preset-env": "7.11.5", + "@babel/preset-react": "7.10.4", "@testing-library/react": "^11.2.6", - "babel-preset-react-app": "^10.0.0", - "jest": "^26.6.3", + "babel-jest": "^29.4.1", + "jest": "^29.4.1", + "jest-environment-jsdom": "^29.4.1", "prop-types": "^15.8.1", "react": "^17.0.2", - "react-dom": "^17.0.2" + "react-dom": "^17.0.2", + "react-test-renderer": "^17.0.2" }, "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0" + }, + "jest": { + "transform": { + "^.+\\.js$": "babel-jest" + } } } diff --git a/packages/icons-react/test.spec.js b/packages/icons-react/test.spec.js index 8caaa2abc..3ea99accc 100644 --- a/packages/icons-react/test.spec.js +++ b/packages/icons-react/test.spec.js @@ -1,36 +1,27 @@ -import React from "react"; -import { render } from "@testing-library/react"; -import { IconActivity } from "@tabler/icons-react"; +import { render } from "@testing-library/react" +import { Icon2fa } from "./src/icons.js" +import React from "react" +import renderer from 'react-test-renderer' describe("React Icon component", () => { - it("should render an component", () => { - const { container } = render(); + test("should render icon component", () => { + const { container } = render() + expect(container.getElementsByTagName("svg").length).toBeGreaterThan(0) + }) - expect(container.innerHTML).toMatchInlineSnapshot( - `""` - ); - }); + test("should update svg attributes when there are props passed to the component", () => { + const { container } = render() - it("should adjust the size, stroke color and stroke width", () => { - const testId = "icon"; - const { container, getByTestId } = render( - - ); + const svg = container.getElementsByTagName("svg")[0] - const { attributes } = getByTestId(testId); - expect(attributes.stroke.value).toBe("red"); - expect(attributes.width.value).toBe("48"); - expect(attributes.height.value).toBe("48"); - expect(attributes["stroke-width"].value).toBe("4"); + expect(svg.getAttribute("width")).toBe("48") + expect(svg.getAttribute("stroke")).toBe("red") + expect(svg.getAttribute("stroke-width")).toBe("4") + }) - expect(container.innerHTML).toMatchInlineSnapshot( - `""` - ); - }); -}); + // Jest creates separate file to store snapshots + test("should match snapshot", () => { + const icon = renderer.create().toJSON() + expect(icon).toMatchSnapshot() + }) +}) diff --git a/packages/icons-solidjs/.babelrc b/packages/icons-solidjs/.babelrc new file mode 100644 index 000000000..c440fd6fb --- /dev/null +++ b/packages/icons-solidjs/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["@babel/preset-env", "solid"] + } \ No newline at end of file diff --git a/packages/icons-solidjs/package.json b/packages/icons-solidjs/package.json index ebae1e67f..67f8d3ba7 100644 --- a/packages/icons-solidjs/package.json +++ b/packages/icons-solidjs/package.json @@ -32,16 +32,23 @@ "build:bundles": "rollup -c ./rollup.config.mjs", "copy:license": "cp ../../LICENSE ./LICENSE", "clean": "rm -rf dist && rm -rf ./src/icons/*.js", - "test": "echo 'ok'" + "test": "echo 'TODO'" }, "dependencies": { "@tabler/icons": "2.2.0" }, "devDependencies": { + "@solidjs/testing-library": "^0.6.1", + "babel-jest": "^29.4.1", "babel-preset-solid": "^1.5.4", + "jest": "^29.4.1", + "jest-environment-jsdom": "^29.4.1", "solid-js": "^1.4.7" }, "peerDependencies": { "solid-js": "^1.4.7" + }, + "transform": { + "^.+\\.js$": "babel-jest" } } diff --git a/packages/icons-solidjs/test.spec.js b/packages/icons-solidjs/test.spec.js new file mode 100644 index 000000000..bd0f70316 --- /dev/null +++ b/packages/icons-solidjs/test.spec.js @@ -0,0 +1,30 @@ +// import { render } from "@solidjs/testing-library" +// import { Icon2fa } from "./src/icons.js" + +// describe("Solidjs Icon component", () => { +// test("should render icon component", () => { +// const { container } = render() +// expect(container.getElementsByTagName("svg").length).toBeGreaterThan(0); +// }) + +// test("should update svg attributes when there are props passed to the component", () => { +// const { container } = render(Icon2fa, { +// props: { +// size: 48, +// color: "red", +// "stroke-width": 4, +// }, +// }) + +// const svg = container.getElementsByTagName("svg")[0] + +// expect(svg.getAttribute("width")).toBe("48") +// expect(svg.getAttribute("stroke")).toBe("red") +// expect(svg.getAttribute("stroke-width")).toBe("4") +// }) + +// test("should match snapshot", () => { +// const { container } = render() +// expect(container.innerHTML).toMatchInlineSnapshot() +// }) +// }) diff --git a/packages/icons-svelte/.babelrc b/packages/icons-svelte/.babelrc new file mode 100644 index 000000000..8aa924d7c --- /dev/null +++ b/packages/icons-svelte/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["@babel/preset-env"] +} \ No newline at end of file diff --git a/packages/icons-svelte/package.json b/packages/icons-svelte/package.json index 478703e80..a99cff087 100644 --- a/packages/icons-svelte/package.json +++ b/packages/icons-svelte/package.json @@ -33,25 +33,32 @@ "build:strip": "svelte-strip strip src/ dist/svelte", "copy:license": "cp ../../LICENSE ./LICENSE", "clean": "rm -rf dist && rm -rf ./src/icons/*.svelte", - "test": "echo 'ok'" + "test": "pnpm run clean && pnpm run build:icons && jest --env=jsdom" }, "dependencies": { "@tabler/icons": "2.2.0" }, "devDependencies": { - "jest": "^28.1.3", - "rollup-plugin-svelte": "^7.1.0", - "@tsconfig/svelte": "^3.0.0", - "@testing-library/jest-dom": "^5.16.2", "@testing-library/svelte": "^3.0.3", - "jsdom": "^20.0.3", + "@tsconfig/svelte": "^3.0.0", + "babel-jest": "^29.4.1", + "jest": "^29.4.1", + "jest-environment-jsdom": "^29.4.1", + "rollup-plugin-svelte": "^7.1.0", "svelte": "^3.53.1", "svelte-check": "^2.9.2", + "svelte-jester": "^2.3.2", "svelte-preprocess": "^4.10.7", "svelte-strip": "^1.0.3", "typescript": "^4.9.3" }, "peerDependencies": { "svelte": "^3.49.0" + }, + "jest": { + "transform": { + "^.+\\.js$": "babel-jest", + "^.+\\.svelte$": "svelte-jester" + } } } diff --git a/packages/icons-svelte/test.spec.js b/packages/icons-svelte/test.spec.js new file mode 100644 index 000000000..fcb2ffa90 --- /dev/null +++ b/packages/icons-svelte/test.spec.js @@ -0,0 +1,30 @@ +import { render } from "@testing-library/svelte"; +import { Icon2fa } from "./src/icons.js"; + +describe("Svelte Icon component", () => { + test("should render icon component", () => { + const { container } = render(Icon2fa); + expect(container.getElementsByTagName("svg").length).toBeGreaterThan(0); + }); + + test("should update svg attributes when there are props passed to the component", () => { + const { container } = render(Icon2fa, { + size: 48, + color: "red", + strokeWidth: 4, + }); + + const svg = container.getElementsByTagName("svg")[0]; + + expect(svg.getAttribute("width")).toBe("48"); + expect(svg.getAttribute("stroke")).toBe("red"); + expect(svg.getAttribute("stroke-width")).toBe("4"); + }); + + test("should match snapshot", () => { + const { container } = render(Icon2fa); + expect(container.innerHTML).toMatchInlineSnapshot( + `"
"` + ); + }); +}); diff --git a/packages/icons-vue/.babelrc b/packages/icons-vue/.babelrc new file mode 100644 index 000000000..fc8201a66 --- /dev/null +++ b/packages/icons-vue/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["@babel/preset-env"] + } \ No newline at end of file diff --git a/packages/icons-vue/package.json b/packages/icons-vue/package.json index ebb961d86..ad694e03f 100644 --- a/packages/icons-vue/package.json +++ b/packages/icons-vue/package.json @@ -32,7 +32,7 @@ "build:bundles": "rollup -c ./rollup.config.mjs", "copy:license": "cp ../../LICENSE ./LICENSE", "clean": "rm -rf dist && rm -rf ./src/icons/*.js", - "test": "echo 'ok'" + "test": "pnpm run clean && pnpm run build:icons && jest --env=jsdom" }, "dependencies": { "@tabler/icons": "2.2.0" @@ -41,10 +41,28 @@ "vue": ">=3.0.1" }, "devDependencies": { + "@babel/preset-env": "7.11.5", "@testing-library/vue": "^6.6.1", "@vue/compiler-sfc": "^3.2.45", "@vue/test-utils": "^2.2.4", + "babel-jest": "^29.4.1", + "jest": "^29.4.1", + "jest-environment-jsdom": "^29.4.1", + "jest-serializer-vue": "^3.1.0", "vue": "^3.2.45", "vue-jest": "^5.0.0-alpha.10" + }, + "jest": { + "testEnvironmentOptions": { + "customExportConditions": [ + "node", + "node-addons" + ] + }, + "snapshotSerializers": ["jest-serializer-vue"], + "transform": { + "^.+\\.js$": "babel-jest", + "^.+\\.vue$": "vue-jest" + } } } diff --git a/packages/icons-vue/src/tabler-icons-vue.js b/packages/icons-vue/src/tabler-icons-vue.js index 72b0d0f86..9761fe828 100644 --- a/packages/icons-vue/src/tabler-icons-vue.js +++ b/packages/icons-vue/src/tabler-icons-vue.js @@ -1,2 +1,2 @@ export * from './icons'; -export { default as createReactComponent } from './createVueComponent'; +export { default as createVueComponent } from './createVueComponent'; diff --git a/packages/icons-vue/test.spec.js b/packages/icons-vue/test.spec.js index 09a06e753..a7d5035f9 100644 --- a/packages/icons-vue/test.spec.js +++ b/packages/icons-vue/test.spec.js @@ -1,101 +1,34 @@ -import { render, fireEvent } from "@testing-library/vue"; -import { IconActivity } from "./"; +import { render } from "@testing-library/vue" +import { Icon2fa } from "./src/icons.js" describe("Vue Icon component", () => { - it("should render an component", () => { - const { container } = render(IconActivity); - expect(container.innerHTML).toMatchInlineSnapshot( - `""` - ); - }); + test("should render icon component", () => { + const { container } = render(Icon2fa) + expect(container.getElementsByTagName("svg").length).toBeGreaterThan(0); + }) - it("should adjust the size, stroke color and stroke width", () => { - const { container } = render(IconActivity, { + test("should update svg attributes when there are props passed to the component", () => { + const { container } = render(Icon2fa, { props: { size: 48, color: "red", "stroke-width": 4, }, - }); + }) - const [icon] = container.getElementsByTagName('svg') + const svg = container.getElementsByTagName("svg")[0] - expect(icon.getAttribute("width")).toBe("48"); - expect(icon.getAttribute("stroke")).toBe("red"); - expect(icon.getAttribute("stroke-width")).toBe("4"); + expect(svg.getAttribute("width")).toBe("48") + expect(svg.getAttribute("stroke")).toBe("red") + expect(svg.getAttribute("stroke-width")).toBe("4") + }) - expect(container.innerHTML).toMatchInlineSnapshot( - `""` - ); - }); - - it("should add a class to the element", () => { - const { container } = render(IconActivity, { - attrs: { - class: "my-icon", - }, - }); - - expect(container.innerHTML).toMatchInlineSnapshot( - `""` - ); - - const [icon] = container.getElementsByTagName('svg') - - expect(icon.getAttribute("class")).toBe("my-icon"); - }); - - it("should add a style attribute to the element", () => { - const { container } = render(IconActivity, { - attrs: { - style: "position: absolute", - }, - }); - - expect(container).toMatchInlineSnapshot(` -
- - - - -
- `); - - const [icon] = container.getElementsByTagName('svg') - - expect(icon.getAttribute("style")).toBe("position: absolute;"); - }); - - it("should call the onClick event", async () => { - const onClick = jest.fn(); - const { container } = render(IconActivity, { - attrs: { - onClick, - }, - }); - - const [icon] = container.getElementsByClassName("tabler-icon"); - - await fireEvent.click(icon); - - expect(onClick).toHaveBeenCalled(); - }); -}); + test("should match snapshot", () => { + const { container } = render(Icon2fa); + expect(container.innerHTML).toMatchInlineSnapshot(` + + + + `) + }) +}) diff --git a/packages/icons/.babelrc b/packages/icons/.babelrc new file mode 100644 index 000000000..fc8201a66 --- /dev/null +++ b/packages/icons/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["@babel/preset-env"] + } \ No newline at end of file diff --git a/packages/icons/package.json b/packages/icons/package.json index af656b5d9..dbcb17d37 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -10,6 +10,9 @@ }, "main": "dist/cjs/tabler-icons.js", "main:umd": "dist/umd/tabler-icons.js", + "exports": { + "./*": ["./icons/*"] + }, "module": "dist/esm/tabler-icons.js", "unpkg": "dist/umd/tabler-icons.min.js", "typings": "dist/tabler-icons.d.ts", @@ -40,7 +43,7 @@ "copy:tags": "cp ../../tags.json tags.json", "copy:license": "cp ../../LICENSE ./LICENSE", "clean": "rm -rf dist && rm -rf src/icons/*.js && rm -rf icons", - "test": "echo 'ok'" + "test": "jest --env=jsdom" }, "keywords": [ "icons", @@ -50,5 +53,21 @@ "react", "front-end", "web" - ] + ], + "devDependencies": { + "babel-jest": "^29.4.1", + "jest": "^29.4.1", + "jest-environment-jsdom": "^29.4.1" + }, + "jest": { + "testEnvironmentOptions": { + "customExportConditions": [ + "node", + "node-addons" + ] + }, + "transform": { + "^.+\\.js$": "babel-jest" + } + } } diff --git a/packages/icons/test.spec.js b/packages/icons/test.spec.js new file mode 100644 index 000000000..84122935b --- /dev/null +++ b/packages/icons/test.spec.js @@ -0,0 +1,25 @@ +import fs from 'fs' +import path from 'path' + +describe('SVGIcon', () => { + let container + + beforeEach(() => { + container = document.createElement('div') + document.body.appendChild(container) + }) + + afterEach(() => { + container.innerHTML = '' + document.body.removeChild(container) + }) + + test('renders the correct class and XML namespace', () => { + container.innerHTML = fs.readFileSync(path.join('./icons', '2fa.svg'), 'utf-8') + const svg = container.querySelector('svg') + + expect(svg.getAttribute('xmlns')).toBe('http://www.w3.org/2000/svg') + expect(svg.classList.contains('icon')).toBe(true) + expect(svg.classList.contains('icon-tabler')).toBe(true) + }) +}) \ No newline at end of file