mirror_html/tabler-icons
1
0
Fork 0
mirror of https://github.com/tabler/tabler-icons.git synced 2025-09-09 22:00:57 +02:00
Code Issues Releases Wiki Activity

Unit tests update (#1036)

Browse Source
This commit is contained in:
Paweł Kuna
2024-03-11 20:34:58 +01:00
committed by GitHub
parent acd82d64f6
commit d7467343a2
14 changed files with 199 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/icons-react/src/createReactComponent.ts
View File

@@ -17,9 +17,15 @@ const createReactComponent = (
...defaultAttributes[type],
width: size,
height: size,
stroke: color,
strokeWidth: stroke,
className: [`tabler-icon`, `tabler-icon-${iconName}`, className].join(' '),
...(type === 'filled'
? {
fill: color,
}
: {
strokeWidth: stroke,
stroke: color,
}),
...rest,
},
[

44
packages/icons-react/test.spec.jsx
View File

@@ -1,6 +1,6 @@
import { describe, it, expect } from 'vitest';
import { render, cleanup } from '@testing-library/react'
import { Icon2fa } from "./src/tabler-icons-react"
import { IconAccessible, IconAccessibleFilled } from "./src/tabler-icons-react"
describe("React Icon component", () => {
afterEach(() => {
@@ -8,33 +8,43 @@ describe("React Icon component", () => {
});
it("should render icon component", () => {
const { container } = render(<Icon2fa/>)
const { container } = render(<IconAccessible/>)
expect(container.getElementsByTagName("svg").length).toBeGreaterThan(0)
})
it("should update svg attributes when there are props passed to the component", () => {
const { container } = render(<Icon2fa size={48} color={"red"} strokeWidth={4}/>)
const { container } = render(<IconAccessible size={48} color={"red"} stroke={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")
expect(svg.getAttribute("fill")).toBe("none")
})
it("should update svg attributes when there are props passed to the filled version of component", () => {
const { container } = render(<IconAccessibleFilled size={48} color={"red"}/>)
const svg = container.getElementsByTagName("svg")[0]
expect(svg.getAttribute("width")).toBe("48")
expect(svg.getAttribute("fill")).toBe("red")
expect(svg.getAttribute("stroke")).toBe("none")
expect(svg.getAttribute("stroke-width")).toBe(null)
})
it('should apply all classNames to the element', () => {
const testClass = 'test-class';
const { container } = render(
<Icon2fa className={testClass} />,
<IconAccessible className={testClass} />,
);
expect(container.firstChild).toHaveClass(testClass);
expect(container.firstChild).toHaveClass('tabler-icon');
expect(container.firstChild).toHaveClass('tabler-icon-2fa');
expect(container.firstChild).toHaveClass('tabler-icon-accessible');
});
it('should add a style attribute to the element', () => {
const { container } = render(<Icon2fa style={{ color: "red" }}/>)
const { container } = render(<IconAccessible style={{ color: "red" }}/>)
const svg = container.getElementsByTagName("svg")[0]
@@ -42,7 +52,7 @@ describe("React Icon component", () => {
})
it("should match snapshot", () => {
const { container } = render(<Icon2fa/>)
const { container } = render(<IconAccessible/>)
expect(container.innerHTML).toMatchInlineSnapshot(`
<svg xmlns="http://www.w3.org/2000/svg"
width="24"
@@ -53,18 +63,18 @@ describe("React Icon component", () => {
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="tabler-icon tabler-icon-2fa "
class="tabler-icon tabler-icon-accessible "
>
<path d="M7 16h-4l3.47 -4.66a2 2 0 1 0 -3.47 -1.54">
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0">
</path>
<path d="M10 16v-8h4">
</path>
<path d="M10 12l3 0">
</path>
<path d="M17 16v-6a2 2 0 0 1 4 0v6">
</path>
<path d="M17 13l4 0">
<path d="M10 16.5l2 -3l2 3m-2 -3v-2l3 -1m-6 0l3 1">
</path>
<circle cx="12"
cy="7.5"
r=".5"
fill="currentColor"
>
</circle>
</svg>
`)
})