From d7467343a24e50d6e46f1dcde661d23deb4c3fe7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Kuna?= <1282324+codecalm@users.noreply.github.com> Date: Mon, 11 Mar 2024 20:34:58 +0100 Subject: [PATCH] Unit tests update (#1036) --- .../icons-preact/src/createPreactComponent.ts | 14 ++++-- packages/icons-preact/test.spec.jsx | 48 +++++++++++------- packages/icons-react-native/package.json | 1 - .../icons-react/src/createReactComponent.ts | 10 +++- packages/icons-react/test.spec.jsx | 44 ++++++++++------- .../icons-solidjs/src/createSolidComponent.ts | 12 +++-- packages/icons-solidjs/test.spec.jsx | 42 ++++++++++------ packages/icons-svelte/src/Icon.svelte | 22 ++++++--- .../icons-svelte/src/defaultAttributes.ts | 3 +- packages/icons-svelte/src/types.ts | 2 +- packages/icons-svelte/test.spec.js | 49 ++++++++++++------- packages/icons-vue/src/createVueComponent.ts | 24 +++++---- packages/icons-vue/src/defaultAttributes.ts | 1 - packages/icons-vue/test.spec.js | 39 ++++++++++----- 14 files changed, 199 insertions(+), 112 deletions(-) diff --git a/packages/icons-preact/src/createPreactComponent.ts b/packages/icons-preact/src/createPreactComponent.ts index f0831148d..22bc1e09c 100644 --- a/packages/icons-preact/src/createPreactComponent.ts +++ b/packages/icons-preact/src/createPreactComponent.ts @@ -6,7 +6,7 @@ const createPreactComponent = ( type: 'outline' | 'filled', iconName: string, iconNamePascal: string, - iconNode: IconNode + iconNode: IconNode, ): Icon => { const Component = ({ color = 'currentColor', @@ -23,13 +23,19 @@ const createPreactComponent = ( ...defaultAttributes[type], width: String(size), height: size, - stroke: color, - 'stroke-width': stroke, class: [`tabler-icon`, `tabler-icon-${iconName}`, className].join(' '), + ...(type === 'filled' + ? { + fill: color, + } + : { + 'stroke-width': stroke, + stroke: color, + }), style, }, [...iconNode.map(([tag, attrs]) => h(tag, attrs)), ...toChildArray(children)], - ...[rest] + ...[rest], ); Component.displayName = `${iconNamePascal}`; diff --git a/packages/icons-preact/test.spec.jsx b/packages/icons-preact/test.spec.jsx index 4151f0385..b7881559f 100644 --- a/packages/icons-preact/test.spec.jsx +++ b/packages/icons-preact/test.spec.jsx @@ -1,6 +1,6 @@ import { describe, it, expect } from 'vitest'; import { render, cleanup } from '@testing-library/preact' -import { Icon2fa } from "./src/tabler-icons-preact" +import { IconAccessible, IconAccessibleFilled } from "./src/tabler-icons-preact" describe("Preact Icon component", () => { afterEach(() => { @@ -8,33 +8,45 @@ describe("Preact Icon component", () => { }); it("should render icon component", () => { - const { container } = render() + const { container } = render() expect(container.getElementsByTagName("svg").length).toBeGreaterThan(0) }) it("should update svg attributes when there are props passed to the component", () => { - const { container } = render() + const { container } = render() + const svg = container.getElementsByTagName("svg")[0] + console.log(svg.outerHTML) + + expect(svg.getAttribute("width")).toBe("48") + expect(svg.getAttribute("fill")).toBe("none") + expect(svg.getAttribute("stroke")).toBe("red") + expect(svg.getAttribute("stroke-width")).toBe("4") + }) + + it("should update svg attributes when there are props passed to the filled version of 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") + 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( - , + , ); 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() + const { container } = render() const svg = container.getElementsByTagName("svg")[0] @@ -42,7 +54,7 @@ describe("Preact Icon component", () => { }) it("should match snapshot", () => { - const { container } = render() + const { container } = render() expect(container.innerHTML).toMatchInlineSnapshot(` { stroke-width="2" stroke-linecap="round" stroke-linejoin="round" - class="tabler-icon tabler-icon-2fa " + class="tabler-icon tabler-icon-accessible " > - + - - - - - - - + + + `) }) diff --git a/packages/icons-react-native/package.json b/packages/icons-react-native/package.json index 40e19ce9f..9311cf6a4 100644 --- a/packages/icons-react-native/package.json +++ b/packages/icons-react-native/package.json @@ -35,7 +35,6 @@ "build:bundles": "rollup -c ./rollup.config.mjs", "copy:license": "cp ../../LICENSE ./LICENSE", "clean": "rm -rf dist && find . ! -name '.gitkeep' -path '*/src/icons/*' -exec rm -rf {} +", - "test": "vitest run", "typecheck": "tsc" }, "dependencies": { diff --git a/packages/icons-react/src/createReactComponent.ts b/packages/icons-react/src/createReactComponent.ts index 9d73c674b..4a3947aad 100644 --- a/packages/icons-react/src/createReactComponent.ts +++ b/packages/icons-react/src/createReactComponent.ts @@ -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, }, [ diff --git a/packages/icons-react/test.spec.jsx b/packages/icons-react/test.spec.jsx index 7bf706b66..4c206efd2 100644 --- a/packages/icons-react/test.spec.jsx +++ b/packages/icons-react/test.spec.jsx @@ -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() + const { container } = render() expect(container.getElementsByTagName("svg").length).toBeGreaterThan(0) }) it("should update svg attributes when there are props passed to the component", () => { - const { container } = render() - + 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") + 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() + 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( - , + , ); 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() + const { container } = render() const svg = container.getElementsByTagName("svg")[0] @@ -42,7 +52,7 @@ describe("React Icon component", () => { }) it("should match snapshot", () => { - const { container } = render() + const { container } = render() expect(container.innerHTML).toMatchInlineSnapshot(` { stroke-width="2" stroke-linecap="round" stroke-linejoin="round" - class="tabler-icon tabler-icon-2fa " + class="tabler-icon tabler-icon-accessible " > - + - - - - - - - + + + `) }) diff --git a/packages/icons-solidjs/src/createSolidComponent.ts b/packages/icons-solidjs/src/createSolidComponent.ts index e117d4c7a..08bd77ce8 100644 --- a/packages/icons-solidjs/src/createSolidComponent.ts +++ b/packages/icons-solidjs/src/createSolidComponent.ts @@ -12,9 +12,15 @@ const createSolidComponent = (type: 'outline' | 'filled',iconName: string, iconN ...attributes, width: () => (localProps.size != null ? localProps.size : attributes.width), height: () => (localProps.size != null ? localProps.size : attributes.height), - stroke: () => (localProps.color != null ? localProps.color : attributes.stroke), - 'stroke-width': () => - localProps.stroke != null ? localProps.stroke : attributes['stroke-width'], + ...(type === 'filled' + ? { + fill: () => (localProps.color != null ? localProps.color : attributes.stroke), + } + : { + stroke: () => (localProps.color != null ? localProps.color : attributes.stroke), + 'stroke-width': () => + localProps.stroke != null ? localProps.stroke : attributes['stroke-width'], + }), class: () => `tabler-icon tabler-icon-${iconName} ${localProps.class != null ? localProps.class : ''}`, }; diff --git a/packages/icons-solidjs/test.spec.jsx b/packages/icons-solidjs/test.spec.jsx index b31c7104b..e9643fdb5 100644 --- a/packages/icons-solidjs/test.spec.jsx +++ b/packages/icons-solidjs/test.spec.jsx @@ -1,17 +1,17 @@ import { describe, it, expect } from 'vitest'; import { render, cleanup } from '@solidjs/testing-library' -import { Icon2fa } from "./src/tabler-icons-solidjs" +import { IconAccessible, IconAccessibleFilled } from "./src/tabler-icons-solidjs" describe("Solidjs Icon component", () => { afterEach(() => cleanup()) test("should render icon component", () => { - const { container } = render(() => ) + 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 { container } = render(() => ) const svg = container.getElementsByTagName("svg")[0] @@ -20,18 +20,28 @@ describe("Solidjs Icon component", () => { expect(svg.getAttribute("stroke-width")).toBe("4") }) + it("should update svg attributes when there are props passed to the filled version of component", () => { + const { container } = render(() => ) + 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 add a class to the element', () => { - const { container } = render(() => ) + const { container } = render(() => ) const svg = container.getElementsByTagName("svg")[0] expect(svg).toHaveClass('test-class') expect(svg).toHaveClass('tabler-icon') - expect(svg).toHaveClass('tabler-icon-2fa') + expect(svg).toHaveClass('tabler-icon-accessible') }) it('should add a style attribute to the element', () => { - const { container } = render(() => ) + const { container } = render(() => ) const svg = container.getElementsByTagName("svg")[0] @@ -39,7 +49,7 @@ describe("Solidjs Icon component", () => { }) test("should match snapshot", () => { - const { container } = render(() => ) + const { container } = render(() => ) expect(container.innerHTML).toMatchInlineSnapshot(` { stroke-width="2" stroke-linecap="round" stroke-linejoin="round" - class="tabler-icon tabler-icon-2fa " + class="tabler-icon tabler-icon-accessible " > - + - - - - - - - + + + `) }) diff --git a/packages/icons-svelte/src/Icon.svelte b/packages/icons-svelte/src/Icon.svelte index 2a52f3b35..8f0a9effb 100644 --- a/packages/icons-svelte/src/Icon.svelte +++ b/packages/icons-svelte/src/Icon.svelte @@ -1,12 +1,12 @@ @@ -15,9 +15,15 @@ {...$$restProps} width={size} height={size} - stroke={color} - stroke-width={strokeWidth} - class={`tabler-icon tabler-icon-${name} ${$$props.class ?? ""}`} + class={`tabler-icon tabler-icon-${name} ${$$props.class ?? ''}`} + {...type === 'filled' + ? { + fill: color, + } + : { + 'stroke-width': stroke, + stroke: color, + }} > {#each iconNode as [tag, attrs]} diff --git a/packages/icons-svelte/src/defaultAttributes.ts b/packages/icons-svelte/src/defaultAttributes.ts index 9128e0040..70bf935db 100644 --- a/packages/icons-svelte/src/defaultAttributes.ts +++ b/packages/icons-svelte/src/defaultAttributes.ts @@ -18,8 +18,7 @@ const defaultAttributes: Record<"outline" | "filled", Attrs> = { height: 24, viewBox: '0 0 24 24', fill: 'currentColor', - stroke: 'none', - 'stroke-width': 0, + stroke: 'none' }, }; diff --git a/packages/icons-svelte/src/types.ts b/packages/icons-svelte/src/types.ts index 2c9bb17fe..623e920c4 100644 --- a/packages/icons-svelte/src/types.ts +++ b/packages/icons-svelte/src/types.ts @@ -8,7 +8,7 @@ export type IconNode = [elementName: keyof SvelteHTMLElements, attrs: Attrs][]; export interface IconProps extends Attrs { color?: string; size?: number | string; - strokeWidth?: number | string; + stroke?: number | string; class?: string; } diff --git a/packages/icons-svelte/test.spec.js b/packages/icons-svelte/test.spec.js index db5146064..d5f2eeaae 100644 --- a/packages/icons-svelte/test.spec.js +++ b/packages/icons-svelte/test.spec.js @@ -1,17 +1,17 @@ import { describe, it, expect, afterEach } from 'vitest'; import { render, cleanup } from "@testing-library/svelte"; -import { Icon2fa } from "./src/tabler-icons-svelte"; +import { IconAccessible, IconAccessibleFilled } from "./src/tabler-icons-svelte"; describe("Svelte Icon component", () => { afterEach(() => cleanup()) it("should render icon component", () => { - const { container } = render(Icon2fa); + const { container } = render(IconAccessible); expect(container.getElementsByTagName("svg").length).toBeGreaterThan(0); }); it('should add a class to the element', () => { - const { container } = render(Icon2fa, { + const { container } = render(IconAccessible, { props: { class: 'test-class', }, @@ -21,11 +21,11 @@ describe("Svelte Icon component", () => { expect(svg).toHaveClass('test-class') expect(svg).toHaveClass('tabler-icon') - expect(svg).toHaveClass('tabler-icon-2fa') + expect(svg).toHaveClass('tabler-icon-accessible') }) it('should add a style attribute to the element', () => { - const { container } = render(Icon2fa, { + const { container } = render(IconAccessible, { props: { style: 'color: red', }, @@ -37,10 +37,10 @@ describe("Svelte Icon component", () => { }) it("should update svg attributes when there are props passed to the component", () => { - const { container } = render(Icon2fa, { + const { container } = render(IconAccessible, { size: 48, color: "red", - strokeWidth: 4, + stroke: 4, }); const svg = container.getElementsByTagName("svg")[0]; @@ -50,8 +50,23 @@ describe("Svelte Icon component", () => { expect(svg.getAttribute("stroke-width")).toBe("4"); }); + it("should update svg attributes when there are props passed to the filled version of component", () => { + const { container } = render(IconAccessibleFilled, { + props: { + 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 match snapshot", () => { - const { container } = render(Icon2fa); + const { container } = render(IconAccessible); expect(container.innerHTML).toMatchInlineSnapshot(`
{ stroke-width="2" stroke-linecap="round" stroke-linejoin="round" - class="tabler-icon tabler-icon-2fa " + class="tabler-icon tabler-icon-accessible " > - + - - - - - - - + + +
`); diff --git a/packages/icons-vue/src/createVueComponent.ts b/packages/icons-vue/src/createVueComponent.ts index 6c7604c77..e2b66ba3e 100644 --- a/packages/icons-vue/src/createVueComponent.ts +++ b/packages/icons-vue/src/createVueComponent.ts @@ -1,6 +1,6 @@ import { h } from 'vue'; import defaultAttributes from './defaultAttributes'; -import { Icon, IconNode } from './types'; +import type { Icon, IconNode } from './types'; const createVueComponent = ( @@ -9,20 +9,24 @@ const createVueComponent = iconNamePascal: string, iconNode: IconNode, ): Icon => - ({ size, color, class: classes, strokeWidth, ...props }, { attrs, slots }) => { - const attributes = defaultAttributes[type]; - + ({ size, color, class: classes, stroke, ...rest }, { attrs, slots }) => { return h( 'svg', { - ...attributes, - width: size || attributes.width, - height: size || attributes.height, - stroke: color || attributes.stroke, - 'stroke-width': strokeWidth || attributes['stroke-width'], + ...defaultAttributes[type], + width: size, + height: size, ...attrs, class: ['tabler-icon', `tabler-icon-${iconName}`], - ...props, + ...(type === 'filled' + ? { + fill: color, + } + : { + 'stroke-width': stroke, + stroke: color, + }), + ...rest, }, [...iconNode.map((child) => h(...child)), ...(slots.default ? [slots.default()] : [])], ); diff --git a/packages/icons-vue/src/defaultAttributes.ts b/packages/icons-vue/src/defaultAttributes.ts index 1668c44c0..dcfe3bd8b 100644 --- a/packages/icons-vue/src/defaultAttributes.ts +++ b/packages/icons-vue/src/defaultAttributes.ts @@ -17,6 +17,5 @@ export default { viewBox: '0 0 24 24', fill: 'currentColor', stroke: 'none', - 'stroke-width': 0, }, }; diff --git a/packages/icons-vue/test.spec.js b/packages/icons-vue/test.spec.js index 2bcf66568..c39a4671d 100644 --- a/packages/icons-vue/test.spec.js +++ b/packages/icons-vue/test.spec.js @@ -1,17 +1,17 @@ import { describe, it, expect, vi, afterEach } from 'vitest'; import { render, fireEvent, cleanup } from "@testing-library/vue" -import { Icon2fa } from "./src/tabler-icons-vue.ts" +import { IconAccessible, IconAccessibleFilled } from "./src/tabler-icons-vue.ts" describe("Vue Icon component", () => { afterEach(() => cleanup()) it("should render icon component", () => { - const { container } = render(Icon2fa) + const { container } = render(IconAccessible) expect(container.getElementsByTagName("svg").length).toBeGreaterThan(0); }) it('should add a class to the element', () => { - const { container } = render(Icon2fa, { + const { container } = render(IconAccessible, { props: { class: 'test-class', }, @@ -21,11 +21,11 @@ describe("Vue Icon component", () => { expect(svg).toHaveClass('test-class') expect(svg).toHaveClass('tabler-icon') - expect(svg).toHaveClass('tabler-icon-2fa') + expect(svg).toHaveClass('tabler-icon-accessible') }) it('should add a style attribute to the element', () => { - const { container } = render(Icon2fa, { + const { container } = render(IconAccessible, { props: { style: 'color: red', }, @@ -37,11 +37,11 @@ describe("Vue Icon component", () => { }) it("should update svg attributes when there are props passed to the component", () => { - const { container } = render(Icon2fa, { + const { container } = render(IconAccessible, { props: { size: 48, color: "red", - "stroke-width": 4, + "stroke": 4, }, }) @@ -52,9 +52,24 @@ describe("Vue Icon component", () => { expect(svg.getAttribute("stroke-width")).toBe("4") }) + it("should update svg attributes when there are props passed to the filled version of component", () => { + const { container } = render(IconAccessibleFilled, { + props: { + 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 call the onClick event', async () => { const onClick = vi.fn() - const { container } = render(Icon2fa, { + const { container } = render(IconAccessible, { attrs: { onClick, } @@ -73,7 +88,7 @@ describe("Vue Icon component", () => { name: 'Stub', template: `${testText}` } - const { getByText, container } = render(Icon2fa, { + const { getByText, container } = render(IconAccessible, { slots: { default: template } @@ -82,11 +97,11 @@ describe("Vue Icon component", () => { const textElement = getByText(testText) expect(textElement).toBeInTheDocument() - expect(container.innerHTML).toMatchInlineSnapshot(`"Hello World"`); + expect(container.innerHTML).toMatchInlineSnapshot(`"Hello World"`); }); it("should match snapshot", () => { - const { container } = render(Icon2fa); - expect(container.innerHTML).toMatchInlineSnapshot(`""`) + const { container } = render(IconAccessible); + expect(container.innerHTML).toMatchInlineSnapshot(`""`) }) })