diff --git a/package-lock.json b/package-lock.json index c582a1ab..1d03afe8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0", "license": "MIT", "dependencies": { + "@ant-design/icons": "^6.0.0", "@storybook/cli": "^8.1.10", "@types/lodash": "^4.14.202", "@xmldom/xmldom": "^0.8.10", @@ -23,7 +24,6 @@ }, "devDependencies": { "@chromatic-com/storybook": "^1.5.0", - "@semantic-release/changelog": "^6.0.3", "@storybook/addon-essentials": "^8.1.10", "@storybook/addon-interactions": "^8.1.10", "@storybook/addon-links": "^8.1.10", @@ -131,18 +131,25 @@ "react-dom": ">=16.0.0" } }, + "node_modules/@ant-design/fast-color": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@ant-design/fast-color/-/fast-color-3.0.0.tgz", + "integrity": "sha512-eqvpP7xEDm2S7dUzl5srEQCBTXZMmY3ekf97zI+M2DHOYyKdJGH0qua0JACHTqbkRnD/KHFQP9J1uMJ/XWVzzA==", + "license": "MIT", + "engines": { + "node": ">=8.x" + } + }, "node_modules/@ant-design/icons": { - "version": "5.5.2", - "resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-5.5.2.tgz", - "integrity": "sha512-xc53rjVBl9v2BqFxUjZGti/RfdDeA8/6KYglmInM2PNqSXc/WfuGDTifJI/ZsokJK0aeKvOIbXc9y2g8ILAhEA==", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-6.0.0.tgz", + "integrity": "sha512-o0aCCAlHc1o4CQcapAwWzHeaW2x9F49g7P3IDtvtNXgHowtRWYb7kiubt8sQPFvfVIVU/jLw2hzeSlNt0FU+Uw==", "license": "MIT", - "peer": true, "dependencies": { - "@ant-design/colors": "^7.0.0", + "@ant-design/colors": "^8.0.0", "@ant-design/icons-svg": "^4.4.0", - "@babel/runtime": "^7.24.8", - "classnames": "^2.2.6", - "rc-util": "^5.31.1" + "@rc-component/util": "^1.2.1", + "classnames": "^2.2.6" }, "engines": { "node": ">=8" @@ -156,8 +163,16 @@ "version": "4.4.2", "resolved": "https://registry.npmjs.org/@ant-design/icons-svg/-/icons-svg-4.4.2.tgz", "integrity": "sha512-vHbT+zJEVzllwP+CM+ul7reTEfBR0vgxFe7+lREAsAA7YGsYpboiq2sQNeQeRvh09GfQgs/GyFEvZpJ9cLXpXA==", + "license": "MIT" + }, + "node_modules/@ant-design/icons/node_modules/@ant-design/colors": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@ant-design/colors/-/colors-8.0.0.tgz", + "integrity": "sha512-6YzkKCw30EI/E9kHOIXsQDHmMvTllT8STzjMb4K2qzit33RW2pqCJP0sk+hidBntXxE+Vz4n1+RvCTfBw6OErw==", "license": "MIT", - "peer": true + "dependencies": { + "@ant-design/fast-color": "^3.0.0" + } }, "node_modules/@ant-design/react-slick": { "version": "1.0.2", @@ -177,14 +192,14 @@ } }, "node_modules/@babel/code-frame": { - "version": "7.26.2", - "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz", - "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==", + "version": "7.27.1", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz", + "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==", "license": "MIT", "dependencies": { - "@babel/helper-validator-identifier": "^7.25.9", + "@babel/helper-validator-identifier": "^7.27.1", "js-tokens": "^4.0.0", - "picocolors": "^1.0.0" + "picocolors": "^1.1.1" }, "engines": { "node": ">=6.9.0" @@ -475,18 +490,18 @@ } }, "node_modules/@babel/helper-string-parser": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz", - "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==", + "version": "7.27.1", + "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz", + "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==", "license": "MIT", "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/helper-validator-identifier": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz", - "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==", + "version": "7.27.1", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz", + "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==", "license": "MIT", "engines": { "node": ">=6.9.0" @@ -516,25 +531,25 @@ } }, "node_modules/@babel/helpers": { - "version": "7.26.0", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.0.tgz", - "integrity": "sha512-tbhNuIxNcVb21pInl3ZSjksLCvgdZy9KwJ8brv993QtIVKJBBkYXz4q4ZbAv31GdnC+R90np23L5FbEBlthAEw==", + "version": "7.27.6", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.27.6.tgz", + "integrity": "sha512-muE8Tt8M22638HU31A3CgfSUciwz1fhATfoVai05aPXGor//CdWDCbnlY1yvBPo07njuVOCNGCSp/GTt12lIug==", "license": "MIT", "dependencies": { - "@babel/template": "^7.25.9", - "@babel/types": "^7.26.0" + "@babel/template": "^7.27.2", + "@babel/types": "^7.27.6" }, "engines": { "node": ">=6.9.0" } }, "node_modules/@babel/parser": { - "version": "7.26.3", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.3.tgz", - "integrity": "sha512-WJ/CvmY8Mea8iDXo6a7RK2wbmJITT5fN3BEkRuFlxVyNx8jOKIIhmC4fSkTcPcf8JyavbBwIe6OpiCOBXt/IcA==", + "version": "7.27.5", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.5.tgz", + "integrity": "sha512-OsQd175SxWkGlzbny8J3K8TnnDD0N3lrIUtB92xwyRpzaenGZhxDvxN/JgU00U3CDZNj9tPuDJ5H0WS4Nt3vKg==", "license": "MIT", "dependencies": { - "@babel/types": "^7.26.3" + "@babel/types": "^7.27.3" }, "bin": { "parser": "bin/babel-parser.js" @@ -1784,14 +1799,14 @@ } }, "node_modules/@babel/template": { - "version": "7.25.9", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.9.tgz", - "integrity": "sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==", + "version": "7.27.2", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz", + "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==", "license": "MIT", "dependencies": { - "@babel/code-frame": "^7.25.9", - "@babel/parser": "^7.25.9", - "@babel/types": "^7.25.9" + "@babel/code-frame": "^7.27.1", + "@babel/parser": "^7.27.2", + "@babel/types": "^7.27.1" }, "engines": { "node": ">=6.9.0" @@ -1816,13 +1831,13 @@ } }, "node_modules/@babel/types": { - "version": "7.26.3", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.3.tgz", - "integrity": "sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==", + "version": "7.27.6", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.6.tgz", + "integrity": "sha512-ETyHEk2VHHvl9b9jZP5IHPavHYk57EhanlRRuae9XCpb/j5bDCbPPMOBfCWhnl/7EDJz0jEMCi/RhccCE8r1+Q==", "license": "MIT", "dependencies": { - "@babel/helper-string-parser": "^7.25.9", - "@babel/helper-validator-identifier": "^7.25.9" + "@babel/helper-string-parser": "^7.27.1", + "@babel/helper-validator-identifier": "^7.27.1" }, "engines": { "node": ">=6.9.0" @@ -3165,6 +3180,25 @@ "react-dom": ">=16.9.0" } }, + "node_modules/@rc-component/util": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@rc-component/util/-/util-1.2.1.tgz", + "integrity": "sha512-AUVu6jO+lWjQnUOOECwu8iR0EdElQgWW5NBv5vP/Uf9dWbAX3udhMutRlkVXjuac2E40ghkFy+ve00mc/3Fymg==", + "license": "MIT", + "dependencies": { + "react-is": "^18.2.0" + }, + "peerDependencies": { + "react": ">=18.0.0", + "react-dom": ">=18.0.0" + } + }, + "node_modules/@rc-component/util/node_modules/react-is": { + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz", + "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==", + "license": "MIT" + }, "node_modules/@rollup/pluginutils": { "version": "5.1.4", "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.4.tgz", @@ -3665,25 +3699,6 @@ "dev": true, "license": "MIT" }, - "node_modules/@semantic-release/changelog": { - "version": "6.0.3", - "resolved": "https://registry.npmjs.org/@semantic-release/changelog/-/changelog-6.0.3.tgz", - "integrity": "sha512-dZuR5qByyfe3Y03TpmCvAxCyTnp7r5XwtHRf/8vD9EAn4ZWbavUX8adMtXYzE86EVh0gyLA7lm5yW4IV30XUag==", - "dev": true, - "license": "MIT", - "dependencies": { - "@semantic-release/error": "^3.0.0", - "aggregate-error": "^3.0.0", - "fs-extra": "^11.0.0", - "lodash": "^4.17.4" - }, - "engines": { - "node": ">=14.17" - }, - "peerDependencies": { - "semantic-release": ">=18.0.0" - } - }, "node_modules/@semantic-release/commit-analyzer": { "version": "13.0.1", "resolved": "https://registry.npmjs.org/@semantic-release/commit-analyzer/-/commit-analyzer-13.0.1.tgz", @@ -3707,16 +3722,6 @@ "semantic-release": ">=20.1.0" } }, - "node_modules/@semantic-release/error": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@semantic-release/error/-/error-3.0.0.tgz", - "integrity": "sha512-5hiM4Un+tpl4cKw3lV4UgzJj+SmfNIDCLLw0TepzQxz9ZGV5ixnqkzIVF+3tp0ZHgcMKE+VNGHJjEeyFG2dcSw==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=14.17" - } - }, "node_modules/@semantic-release/github": { "version": "11.0.2", "resolved": "https://registry.npmjs.org/@semantic-release/github/-/github-11.0.2.tgz", @@ -5936,20 +5941,6 @@ "node": ">= 14" } }, - "node_modules/aggregate-error": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/aggregate-error/-/aggregate-error-3.1.0.tgz", - "integrity": "sha512-4I7Td01quW/RpocfNayFdFVk1qSuoh0E7JrbRJ16nH01HhKFQ88INq9Sd+nd72zqRySlr9BmDA8xlEJ6vJMrYA==", - "dev": true, - "license": "MIT", - "dependencies": { - "clean-stack": "^2.0.0", - "indent-string": "^4.0.0" - }, - "engines": { - "node": ">=8" - } - }, "node_modules/ajv": { "version": "6.12.6", "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", @@ -6121,6 +6112,27 @@ "react-dom": ">=16.9.0" } }, + "node_modules/antd/node_modules/@ant-design/icons": { + "version": "5.6.1", + "resolved": "https://registry.npmjs.org/@ant-design/icons/-/icons-5.6.1.tgz", + "integrity": "sha512-0/xS39c91WjPAZOWsvi1//zjx6kAp4kxWwctR6kuU6p133w8RU0D2dSCvZC19uQyharg/sAvYxGYWl01BbZZfg==", + "license": "MIT", + "peer": true, + "dependencies": { + "@ant-design/colors": "^7.0.0", + "@ant-design/icons-svg": "^4.4.0", + "@babel/runtime": "^7.24.8", + "classnames": "^2.2.6", + "rc-util": "^5.31.1" + }, + "engines": { + "node": ">=8" + }, + "peerDependencies": { + "react": ">=16.0.0", + "react-dom": ">=16.0.0" + } + }, "node_modules/any-promise": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz", @@ -6817,16 +6829,6 @@ "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==", "license": "MIT" }, - "node_modules/clean-stack": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz", - "integrity": "sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==", - "dev": true, - "license": "MIT", - "engines": { - "node": ">=6" - } - }, "node_modules/cli-cursor": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-5.0.0.tgz", diff --git a/package.json b/package.json index 4a55cd5b..2af92b04 100644 --- a/package.json +++ b/package.json @@ -65,6 +65,7 @@ ] }, "dependencies": { + "@ant-design/icons": "^6.0.0", "@storybook/cli": "^8.1.10", "@types/lodash": "^4.14.202", "@xmldom/xmldom": "^0.8.10", diff --git a/src/lib/components/Breadcrumb/Breadcrumb.tsx b/src/lib/components/Breadcrumb/Breadcrumb.tsx new file mode 100644 index 00000000..0fffb40e --- /dev/null +++ b/src/lib/components/Breadcrumb/Breadcrumb.tsx @@ -0,0 +1,24 @@ +import { Breadcrumb as BreadCrumbAntD, BreadcrumbProps, ConfigProvider } from "antd"; +import { useContext } from "react"; +import { ThemeContext } from "styled-components"; +import defaultTheme, { color } from '@utils/theme'; + +export const Breadcrumb = ({ ...props }: BreadcrumbProps) => { + const th = useContext(ThemeContext) || defaultTheme; + return ( + + + + ) +}; + +export default Breadcrumb; \ No newline at end of file diff --git a/src/lib/components/Breadcrumb/index.ts b/src/lib/components/Breadcrumb/index.ts new file mode 100644 index 00000000..dddd5f3e --- /dev/null +++ b/src/lib/components/Breadcrumb/index.ts @@ -0,0 +1 @@ +export * from './Breadcrumb'; \ No newline at end of file diff --git a/src/lib/components/DatePicker/datePickerUtils.ts b/src/lib/components/DatePicker/datePickerUtils.ts index b9087ed0..ce716bad 100644 --- a/src/lib/components/DatePicker/datePickerUtils.ts +++ b/src/lib/components/DatePicker/datePickerUtils.ts @@ -1,48 +1,46 @@ -import { type Locale } from 'antd/lib/locale'; -import 'moment/locale/ca'; import ca_ES from 'antd/locale/ca_ES'; -import 'moment/locale/de'; +import 'dayjs/locale/ca'; import de_DE from 'antd/locale/de_DE'; -import en_US from 'antd/locale/en_US'; -import 'moment/locale/es'; +import 'dayjs/locale/de'; +import en_US from 'antd/es/locale/en_US'; +import 'dayjs/locale/en'; import es_ES from 'antd/locale/es_ES'; -// import eu_ES from 'antd/lib/locale/eu_ES'; There's no such translation on antd -import 'moment/locale/fr'; +import 'dayjs/locale/es'; import fr_FR from 'antd/locale/fr_FR'; -import 'moment/locale/it'; +import 'dayjs/locale/fr'; import it_IT from 'antd/locale/it_IT'; -import 'moment/locale/pt'; +import 'dayjs/locale/it'; import pt_PT from 'antd/locale/pt_PT'; -import 'moment/locale/tr'; +import 'dayjs/locale/pt'; import tr_TR from 'antd/locale/tr_TR'; -import 'moment/locale/pt-br'; +import 'dayjs/locale/tr'; import pt_BR from 'antd/locale/pt_BR'; -import 'moment/locale/el'; +import 'dayjs/locale/pt-br'; import el_GR from 'antd/locale/el_GR'; -import 'moment/locale/nl'; +import 'dayjs/locale/el'; import nl_NL from 'antd/locale/nl_NL'; -import 'moment/locale/nl-be'; +import 'dayjs/locale/nl'; import nl_BE from 'antd/locale/nl_BE'; -import 'moment/locale/pl'; +import 'dayjs/locale/nl-be'; import pl_PL from 'antd/locale/pl_PL'; -import 'moment/locale/bg'; +import 'dayjs/locale/pl'; import bg_BG from 'antd/locale/bg_BG'; -import 'moment/locale/da'; +import 'dayjs/locale/bg'; import da_DK from 'antd/locale/da_DK'; -import 'moment/locale/fi'; +import 'dayjs/locale/da'; import fi_FI from 'antd/locale/fi_FI'; -// import no_NO from 'antd/lib/locale/no_NO'; There's no such translation on antd -import 'moment/locale/sl'; +import 'dayjs/locale/fi'; import sl_SI from 'antd/locale/sl_SI'; -import 'moment/locale/sv'; +import 'dayjs/locale/sl'; import sv_SE from 'antd/locale/sv_SE'; -import 'moment/locale/zh-cn'; +import 'dayjs/locale/sv'; import zh_CN from 'antd/locale/zh_CN'; -import 'moment/locale/en-gb'; +import 'dayjs/locale/zh-cn'; import en_GB from 'antd/locale/en_GB'; +import 'dayjs/locale/en-gb'; // i18n -export const getLocale = (language: string): Locale => { +export const getLocale = (language: string) => { switch (language) { case 'bg': return bg_BG; diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts index 2aeee3fe..b9287b6f 100644 --- a/src/lib/components/index.ts +++ b/src/lib/components/index.ts @@ -39,6 +39,7 @@ export * from './Select'; export * from './DatePicker'; export * from './Tree'; export * from './TreeSelect'; +export * from './Breadcrumb'; export { ConfigProvider } from 'antd'; export { DataIdProvider } from '@components/DataId/DataIdProvider'; export { withDataId } from '@components/DataId/withDataId'; diff --git a/src/stories/Breadcrumb.stories.tsx b/src/stories/Breadcrumb.stories.tsx new file mode 100644 index 00000000..3806aa7a --- /dev/null +++ b/src/stories/Breadcrumb.stories.tsx @@ -0,0 +1,114 @@ +import { Breadcrumb, Cell, Grid, Paragraph, Row } from 'lib'; +import { HomeOutlined } from '@ant-design/icons'; + +export default { + title: 'Breadcrumb', + component: Breadcrumb, + tags: ['autodocs'], +}; + +const onClick = (e: any, label: string) => { + e.preventDefault(); + console.log(`Click in ${label}`); +} + +const items = [ + { + title: ( + <> + + Home + + ), + }, + { title: onClick(e, 'Application Center')}>Application Center }, + { title: onClick(e, 'Application List')}>Application List }, + { title: 'An Application' }, +]; + +export const Basic = () => ( + + + + + A simple breadcrumb display the current location within a hierarchy. And allow going back to states higher up in the hierarchy. + + + + + + + +); + +export const WithParams = () => ( + + + + + A breadcrumb with param to allow manage parameters about main location. + + + + {console.log('Click in Group #1')} + }, + ]} + params={{ id: 1 }} + /> + + + +); + +const menuItems = [ + { + key: '1', + label: 'General' + }, + { + key: '2', + label: 'Edit', + }, + { + key: '3', + label: 'Duplicate', + }, +]; + +export const WithDropdownMenu = () => ( + + + + + A breadcrumb with menu display current location within hierarchy and allow choose menu option. + + + + onClick(e, 'Application Profile')}>Profile, + }, + { + title: onClick(e, 'General')}>General, + menu: { items: menuItems }, + }, + { + title: 'Permissions', + } + ]} + /> + + + +); diff --git a/src/stories/DatePicker.stories.tsx b/src/stories/DatePicker.stories.tsx index f73d8c37..60e07b6b 100644 --- a/src/stories/DatePicker.stories.tsx +++ b/src/stories/DatePicker.stories.tsx @@ -99,7 +99,7 @@ export const LanguageDatePicker = () => ( - In this section we include the string values for the languages available for Date Picker component through property language and the value that + In this section we include the string values for the languages available for Date Picker component through property lang and the value that expects regarding the location of that language. When there's no value specified, it will have by default : `en` for English from{' '} Great Britain (en_GB) @@ -167,7 +167,7 @@ export const LanguageDatePicker = () => (

- import fr_BE from 'antd/lib/locale/fr_BE'; + import fr_BE from 'antd/es/date-picker/locale/fr_BE';
<DatePicker locale={fr_BE}/> diff --git a/tests/Breadcrumb.test.tsx b/tests/Breadcrumb.test.tsx new file mode 100644 index 00000000..b61098a0 --- /dev/null +++ b/tests/Breadcrumb.test.tsx @@ -0,0 +1,19 @@ +import { render } from "@testing-library/react"; +import { Breadcrumb } from "index"; +import { describe, expect, it } from "vitest"; + +describe('', () => { + const items = [ + { + title: 'Home', + }, + { title: 'Application Center' }, + { title: 'Application List' }, + { title: 'An Application' }, + ]; + it('Should render the tree component', () => { + const { container } = render(); + expect(container.querySelectorAll('.ant-breadcrumb-link').length).toEqual(4); + expect(container.querySelectorAll('.ant-breadcrumb-separator').length).toEqual(3); + }); +}); \ No newline at end of file