mirror of
https://github.com/tabler/tabler-icons.git
synced 2025-01-16 20:28:28 +01:00
c898ade0f0
* Add title as child tag of <svg> in icons-react * Add title as child tag of <svg> in icons-vue package * Add title as child tag of <svg> in icons-react-native package * Test <title> element in React * Prevent adding <!----> to <svg> if no title prop passed + Test <title> child element. * Fix tests for Vue Stroke attribute added to expected SVG code. --------- Co-authored-by: Bartłomiej Gawęda <bgaweda@abis.krakow.pl>
95 lines
3.3 KiB
TypeScript
95 lines
3.3 KiB
TypeScript
import { describe, it, expect, afterEach, expectTypeOf } from 'vitest';
|
|
import { render, cleanup } from '@testing-library/react'
|
|
import { IconAccessible, IconAccessibleFilled, createReactComponent } from "./src/tabler-icons-react"
|
|
|
|
describe("React Icon component", () => {
|
|
afterEach(() => {
|
|
cleanup();
|
|
});
|
|
|
|
it("should render icon component", () => {
|
|
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(<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(
|
|
<IconAccessible className={testClass} />,
|
|
);
|
|
|
|
expect(container.firstChild).toHaveClass(testClass);
|
|
expect(container.firstChild).toHaveClass('tabler-icon');
|
|
expect(container.firstChild).toHaveClass('tabler-icon-accessible');
|
|
});
|
|
|
|
it('should add a style attribute to the element', () => {
|
|
const { container } = render(<IconAccessible style={{ color: "red" }}/>)
|
|
|
|
const svg = container.getElementsByTagName("svg")[0]
|
|
|
|
expect(svg).toHaveStyle('color: rgb(255, 0, 0)')
|
|
})
|
|
|
|
it('should have proper type', () => {
|
|
expectTypeOf(IconAccessible).toBeFunction();
|
|
expectTypeOf(IconAccessible).toEqualTypeOf(createReactComponent('outline', 'accessible', 'Accessible', []));
|
|
});
|
|
|
|
it('should add title child element to svg when title prop is passed', () => {
|
|
const { container } = render(<IconAccessible title="Accessible Icon"/>);
|
|
const svg = container.getElementsByTagName("svg")[0];
|
|
const title = svg.getElementsByTagName("title")[0];
|
|
|
|
expect(title).toHaveTextContent("Accessible Icon");
|
|
})
|
|
|
|
it("should match snapshot", () => {
|
|
const { container } = render(<IconAccessible/>)
|
|
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-accessible "
|
|
>
|
|
<path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0">
|
|
</path>
|
|
<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>
|
|
`)
|
|
})
|
|
})
|