mirror of
https://github.com/tabler/tabler-icons.git
synced 2025-01-16 20:28:28 +01:00
Add unit tests for icons (#503)
This commit is contained in:
SyntaxJoker
GitHub
parent
10546c49dd
commit
1978ac750d
@ -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",
|
||||
@ -74,12 +75,12 @@
|
||||
"prettier": "^2.8.1",
|
||||
"release-it": "15.6.0",
|
||||
"rollup": "2.78.1",
|
||||
"rollup-plugin-esbuild": "^4.10.2",
|
||||
"rollup-plugin-filesize": "9.1.2",
|
||||
"rollup-plugin-license": "^3.0.1",
|
||||
"rollup-plugin-peer-deps-external": "2.2.4",
|
||||
"rollup-plugin-rename": "^1.0.1",
|
||||
"rollup-plugin-terser": "7.0.2",
|
||||
"rollup-plugin-esbuild": "^4.10.2",
|
||||
"rollup-plugin-license": "^3.0.1",
|
||||
"rollup-plugin-visualizer": "^5.8.3",
|
||||
"svg-outline-stroke": "1.3.1",
|
||||
"svgo": "^2.8.0",
|
||||
|
||||
3
packages/icons-preact/.babelrc
Normal file
3
packages/icons-preact/.babelrc
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"presets": ["@babel/preset-env", "preact"]
|
||||
}
|
||||
@ -24,7 +24,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.0.0"
|
||||
@ -33,12 +33,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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
29
packages/icons-preact/test.spec.js
Normal file
29
packages/icons-preact/test.spec.js
Normal file
@ -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(<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(
|
||||
`"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"tabler-icon tabler-icon-2fa\\"><path d=\\"M7 16h-4l3.47 -4.66a2 2 0 1 0 -3.47 -1.54m7 6.2v-8h4m-4 4l3 0m4 4v-6a2 2 0 0 1 4 0v6m-4 -3l4 0\\"></path></svg>"`
|
||||
);
|
||||
});
|
||||
});
|
||||
@ -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(<IconActivity />);
|
||||
|
||||
expect(container.innerHTML).toMatchInlineSnapshot(
|
||||
`"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"tabler-icon tabler-icon-IconActivity\\"><path d=\\"M3 12h4l3 8l4 -16l3 8h4\\"></path></svg>"`
|
||||
);
|
||||
});
|
||||
|
||||
it("should adjust the size, stroke color and stroke width", () => {
|
||||
const testId = "icon";
|
||||
const { container, getByTestId } = render(
|
||||
<IconActivity
|
||||
data-testid={testId}
|
||||
size={48}
|
||||
stroke="red"
|
||||
strokeWidth={4}
|
||||
className={"icon-class"}
|
||||
/>
|
||||
);
|
||||
|
||||
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(
|
||||
`"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"icon-class\\" data-testid=\\"icon\\"><path d=\\"M3 12h4l3 8l4 -16l3 8h4\\"></path></svg>"`
|
||||
);
|
||||
});
|
||||
});
|
||||
3
packages/icons-react/.babelrc
Normal file
3
packages/icons-react/.babelrc
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"presets": ["@babel/preset-env", "@babel/preset-react"]
|
||||
}
|
||||
20
packages/icons-react/__snapshots__/test.spec.js.snap
Normal file
20
packages/icons-react/__snapshots__/test.spec.js.snap
Normal file
@ -0,0 +1,20 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`React Icon component should match snapshot 1`] = `
|
||||
<svg
|
||||
className="tabler-icon tabler-icon-2fa"
|
||||
fill="none"
|
||||
height={24}
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
viewBox="0 0 24 24"
|
||||
width={24}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M7 16h-4l3.47 -4.66a2 2 0 1 0 -3.47 -1.54m7 6.2v-8h4m-4 4l3 0m4 4v-6a2 2 0 0 1 4 0v6m-4 -3l4 0"
|
||||
/>
|
||||
</svg>
|
||||
`;
|
||||
@ -24,21 +24,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.0.0"
|
||||
},
|
||||
"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": {
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.5.1 || ^17.0.0 || ^18.0.0"
|
||||
},
|
||||
"jest": {
|
||||
"transform": {
|
||||
"^.+\\.js$": "babel-jest"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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(<IconActivity />);
|
||||
test("should render icon component", () => {
|
||||
const { container } = render(<Icon2fa/>)
|
||||
expect(container.getElementsByTagName("svg").length).toBeGreaterThan(0)
|
||||
})
|
||||
|
||||
expect(container.innerHTML).toMatchInlineSnapshot(
|
||||
`"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"tabler-icon tabler-icon-IconActivity\\"><path d=\\"M3 12h4l3 8l4 -16l3 8h4\\"></path></svg>"`
|
||||
);
|
||||
});
|
||||
test("should update svg attributes when there are props passed to the component", () => {
|
||||
const { container } = render(<Icon2fa size={48} color={"red"} strokeWidth={4}/>)
|
||||
|
||||
it("should adjust the size, stroke color and stroke width", () => {
|
||||
const testId = "icon";
|
||||
const { container, getByTestId } = render(
|
||||
<IconActivity
|
||||
data-testid={testId}
|
||||
size={48}
|
||||
stroke="red"
|
||||
strokeWidth={4}
|
||||
className={"icon-class"}
|
||||
/>
|
||||
);
|
||||
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(
|
||||
`"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"icon-class\\" data-testid=\\"icon\\"><path d=\\"M3 12h4l3 8l4 -16l3 8h4\\"></path></svg>"`
|
||||
);
|
||||
});
|
||||
});
|
||||
// Jest creates separate file to store snapshots
|
||||
test("should match snapshot", () => {
|
||||
const icon = renderer.create(<Icon2fa/>).toJSON()
|
||||
expect(icon).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
|
||||
3
packages/icons-solidjs/.babelrc
Normal file
3
packages/icons-solidjs/.babelrc
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"presets": ["@babel/preset-env", "solid"]
|
||||
}
|
||||
@ -24,16 +24,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.0.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"
|
||||
}
|
||||
}
|
||||
|
||||
30
packages/icons-solidjs/test.spec.js
Normal file
30
packages/icons-solidjs/test.spec.js
Normal file
@ -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(<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, {
|
||||
// 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(<Icon2fa />)
|
||||
// expect(container.innerHTML).toMatchInlineSnapshot()
|
||||
// })
|
||||
// })
|
||||
3
packages/icons-svelte/.babelrc
Normal file
3
packages/icons-svelte/.babelrc
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"presets": ["@babel/preset-env"]
|
||||
}
|
||||
@ -25,25 +25,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.0.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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
30
packages/icons-svelte/test.spec.js
Normal file
30
packages/icons-svelte/test.spec.js
Normal file
@ -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(
|
||||
`"<div><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-2fa "><path d="M7 16h-4l3.47 -4.66a2 2 0 1 0 -3.47 -1.54m7 6.2v-8h4m-4 4l3 0m4 4v-6a2 2 0 0 1 4 0v6m-4 -3l4 0"></path></svg></div>"`
|
||||
);
|
||||
});
|
||||
});
|
||||
3
packages/icons-vue/.babelrc
Normal file
3
packages/icons-vue/.babelrc
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"presets": ["@babel/preset-env"]
|
||||
}
|
||||
@ -24,7 +24,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.0.0"
|
||||
@ -33,10 +33,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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
export * from './icons';
|
||||
export { default as createReactComponent } from './createVueComponent';
|
||||
export { default as createVueComponent } from './createVueComponent';
|
||||
|
||||
@ -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(
|
||||
`"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"tabler-icon tabler-icon-activity\\"><path stroke=\\"none\\" d=\\"M0 0h24v24H0z\\" fill=\\"none\\"></path><path d=\\"M3 12h4l3 8l4 -16l3 8h4\\"></path></svg>"`
|
||||
);
|
||||
});
|
||||
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(
|
||||
`"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" size=\\"48\\" color=\\"red\\" class=\\"tabler-icon tabler-icon-activity\\"><path stroke=\\"none\\" d=\\"M0 0h24v24H0z\\" fill=\\"none\\"></path><path d=\\"M3 12h4l3 8l4 -16l3 8h4\\"></path></svg>"`
|
||||
);
|
||||
});
|
||||
|
||||
it("should add a class to the element", () => {
|
||||
const { container } = render(IconActivity, {
|
||||
attrs: {
|
||||
class: "my-icon",
|
||||
},
|
||||
});
|
||||
|
||||
expect(container.innerHTML).toMatchInlineSnapshot(
|
||||
`"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"currentColor\\" stroke-width=\\"2\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" class=\\"my-icon\\"><path stroke=\\"none\\" d=\\"M0 0h24v24H0z\\" fill=\\"none\\"></path><path d=\\"M3 12h4l3 8l4 -16l3 8h4\\"></path></svg>"`
|
||||
);
|
||||
|
||||
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(`
|
||||
<div>
|
||||
<svg
|
||||
class="tabler-icon tabler-icon-activity"
|
||||
fill="none"
|
||||
height="24"
|
||||
stroke="currentColor"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
style="position: absolute;"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M0 0h24v24H0z"
|
||||
fill="none"
|
||||
stroke="none"
|
||||
/>
|
||||
<path
|
||||
d="M3 12h4l3 8l4 -16l3 8h4"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
`);
|
||||
|
||||
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(`
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="tabler-icon tabler-icon-2fa">
|
||||
<path d="M7 16h-4l3.47 -4.66a2 2 0 1 0 -3.47 -1.54m7 6.2v-8h4m-4 4l3 0m4 4v-6a2 2 0 0 1 4 0v6m-4 -3l4 0"></path>
|
||||
</svg>
|
||||
`)
|
||||
})
|
||||
})
|
||||
|
||||
3
packages/icons/.babelrc
Normal file
3
packages/icons/.babelrc
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"presets": ["@babel/preset-env"]
|
||||
}
|
||||
@ -43,7 +43,7 @@
|
||||
"copy:tags": "cp ../../tags.json tags.json",
|
||||
"copy:license": "cp ../../LICENSE ./LICENSE",
|
||||
"clean": "rm -rf dist && rm -rf icons",
|
||||
"test": "echo 'ok'"
|
||||
"test": "jest --env=jsdom"
|
||||
},
|
||||
"keywords": [
|
||||
"icons",
|
||||
@ -53,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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
25
packages/icons/test.spec.js
Normal file
25
packages/icons/test.spec.js
Normal file
@ -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)
|
||||
})
|
||||
})
|
||||
4263
pnpm-lock.yaml
generated
4263
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user