test: added tests for core/components

Author: adarshpastakia

packages/core/src/components/avatar/Avatar.tsx

@@ -160,8 +160,9 @@ export const Avatar = ({
       );
     }
     if (variant === "text") {
-      const [, first, second, group] =
-        name.match(/(?=(\w).* (\w).*)|(?=(\w\w).*)/) ?? [];
+      const [, first, second, group] = name.match(
+        /(?=(\w).* (\w).*)|(?=(\w\w).*)/,
+      ) as string[];
       return (
         <svg role="img">
           <text

packages/core/src/components/avatar/AvatarGroup.tsx

@@ -115,6 +115,7 @@ export const AvatarGroup = ({
       {avatars}
       {!!diff && (
         <dfn
+          data-ref="avatarCount"
           className={classNames(
             classes.avatar,
             "select-none relative overflow-hidden inline-block box-content leading-none not-italic text-center",

packages/core/src/components/badge/Badge.tsx

@@ -134,7 +134,7 @@ export const Badge = ({
           ...rest,
           ref: innerRef,
         })}
-      {(!!ping || label) && (
+      {(!!ping || (label ?? icon)) && (
         <div
           data-ref="badge"
           data-ping={ping}

packages/core/src/components/icon/Icon.tsx

@@ -154,6 +154,7 @@ export const Icon = ({
     <dfn
       {...rest}
       ref={ref}
+      data-ref="icon"
       role="presentation"
       className={classNames(
         classes.icon,

packages/core/stories/components/actionLabel/ActionLabel.stories.tsx

@@ -22,10 +22,7 @@
  */
 
 import type { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
-import { Fragment } from "react/jsx-runtime";
 import { ActionLabel, Button, CoreIcons, Icon, Tooltip } from "../../../src";
-import { FloatingTree } from "@floating-ui/react";
 
 const meta: Meta = {
   component: ActionLabel,
@@ -148,3 +145,8 @@ export const _ActionLabel: ActionLabelStory = {
   },
   args: {},
 };
+
+export const Tester: ActionLabelStory = {
+  render: (args) => <ActionLabel {...args} />,
+  args: {},
+};

packages/core/stories/components/animations/Animations.stories.tsx

@@ -33,7 +33,7 @@ import {
 
 const meta: Meta = {
   component: AnimationIndicator,
-  subcomponents: { AnimationBars, AnimationSpinner } as AnyObject,
+  subcomponents: { AnimationBars, AnimationSpinner, Skeleton } as AnyObject,
   title: "@core/components/Animations",
   parameters: {
     layout: "centered",
@@ -77,3 +77,8 @@ export const _Animations: AnimationsStory = {
   },
   args: {},
 };
+
+export const Tester: AnimationsStory = {
+  render: (args) => <AnimationIndicator {...args} />,
+  args: {},
+};

packages/core/stories/components/animations/Bars.stories.tsx

@@ -52,3 +52,8 @@ export const _Bars: BarStory = {
   },
   args: {},
 };
+
+export const Tester: BarStory = {
+  render: (args) => <AnimationBars {...args} />,
+  args: {},
+};

packages/core/stories/components/animations/Skeleton.stories.tsx

@@ -22,8 +22,8 @@
  */
 
 import type { Meta, StoryObj } from "@storybook/react";
-import { Skeleton } from "../../../src";
 import { Fragment } from "react/jsx-runtime";
+import { Skeleton } from "../../../src";
 
 const meta: Meta = {
   component: Skeleton,
@@ -43,9 +43,9 @@ const meta: Meta = {
 };
 
 export default meta;
-type BarStory = StoryObj<typeof Skeleton>;
+type SkeletonStory = StoryObj<typeof Skeleton>;
 
-export const _Skeleton: BarStory = {
+export const _Skeleton: SkeletonStory = {
   render: () => {
     return (
       <Fragment>
@@ -56,3 +56,8 @@ export const _Skeleton: BarStory = {
   },
   args: {},
 };
+
+export const Tester: SkeletonStory = {
+  render: (args) => <Skeleton {...args} />,
+  args: {},
+};

packages/core/stories/components/animations/Spinner.stories.tsx

@@ -44,11 +44,16 @@ const meta: Meta = {
 };
 
 export default meta;
-type BarStory = StoryObj<typeof AnimationSpinner>;
+type SpinnerStory = StoryObj<typeof AnimationSpinner>;
 
-export const _Spinner: BarStory = {
+export const _Spinner: SpinnerStory = {
   render: (args) => {
     return <AnimationSpinner {...args} />;
   },
   args: {},
 };
+
+export const Tester: SpinnerStory = {
+  render: (args) => <AnimationSpinner {...args} />,
+  args: {},
+};

packages/core/stories/components/avatar/Avatar.stories.tsx

@@ -72,3 +72,8 @@ export const _Avatar: AvatarStory = {
     onClick: fn(),
   },
 };
+
+export const Tester: AvatarStory = {
+  render: (args) => <Avatar {...args} />,
+  args: {},
+};

packages/core/stories/components/avatar/AvatarGroup.stories.tsx

@@ -51,38 +51,19 @@ export const _AvatarGroup: AvatarGroupStory = {
   render: (args) => {
     return (
       <AvatarGroup {...args}>
-        <Avatar
-          name="Hyacinth Bucket"
-          tooltip="Hyacinth Bucket"
-          variant="text"
-        />
-        <Avatar
-          name="Hyacinth Bucket"
-          tooltip="Hyacinth Bucket"
-          fallbackIcon="mdi mdi-react"
-        />
-        <Avatar
-          name="Hyacinth Bucket"
-          tooltip="Hyacinth Bucket"
-          avatar={iconImg}
-        />
-        <Avatar
-          name="Hyacinth Bucket"
-          tooltip="Hyacinth Bucket"
-          variant="bauhaus"
-        />
-        <Avatar
-          name="Hyacinth Bucket"
-          tooltip="Hyacinth Bucket"
-          variant="beam"
-        />
-        <Avatar
-          name="Hyacinth Bucket"
-          tooltip="Hyacinth Bucket"
-          variant="pixel"
-        />
+        <Avatar name="Hyacinth Bucket" variant="text" />
+        <Avatar name="Hyacinth Bucket" fallbackIcon="mdi mdi-react" />
+        <Avatar name="Hyacinth Bucket" avatar={iconImg} />
+        <Avatar name="Hyacinth Bucket" variant="bauhaus" />
+        <Avatar name="Hyacinth Bucket" variant="beam" />
+        <Avatar name="Hyacinth Bucket" variant="pixel" />
       </AvatarGroup>
     );
   },
   args: { rounded: true, totalCount: 99, size: "2.5rem" },
 };
+
+export const Tester: AvatarGroupStory = {
+  render: (args) => <AvatarGroup {...args} />,
+  args: {},
+};

packages/core/stories/components/badge/Badge.stories.tsx

@@ -22,9 +22,8 @@
  */
 
 import type { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
 import { Fragment } from "react/jsx-runtime";
-import { Avatar, Button, Card, Icon, Badge } from "../../../src";
+import { Avatar, Badge, Button, Card, Icon } from "../../../src";
 
 const meta: Meta = {
   component: Badge,
@@ -112,3 +111,8 @@ export const Ping: BadgeStory = {
     ping: true,
   },
 };
+
+export const Tester: BadgeStory = {
+  render: (args) => <Badge {...args} />,
+  args: {},
+};

packages/core/tests/actionLabel/ActionLabel.test.tsx

@@ -0,0 +1,46 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { composeStories } from "@storybook/react";
+import { render } from "@testing-library/react";
+import * as stories from "../../stories/components/actionLabel/ActionLabel.stories";
+
+const { Tester } = composeStories(stories);
+
+describe("ActionLabel", () => {
+  it("should render action label", () => {
+    const fragment = render(<Tester>Click Me</Tester>);
+    expect(
+      fragment.container.querySelector("[data-ref='buttonGroup'] ~ div")
+        ?.innerHTML,
+    ).toBe("Click Me");
+    expect(document.body.innerHTML).toMatchSnapshot();
+    fragment.unmount();
+  });
+
+  it("should render action label align end", () => {
+    const fragment = render(<Tester align="end">Click Me</Tester>);
+    expect(document.body.innerHTML).toMatchSnapshot();
+    fragment.unmount();
+  });
+});

packages/core/tests/actionLabel/__snapshots__/ActionLabel.test.tsx.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ActionLabel should render action label 1`] = `"<div><div class="p-4"><div class="actionLabel flex overflow-hidden gap-1 items-center cursor-default select-none"><div data-ref="buttonGroup" class="buttonGroup actions overflow-hidden flex-content inline-flex flex-nowrap align-middle rounded" data-inner-clickable="true" style="--width: 0px;"></div><div class="flex-initial truncate">Click Me</div></div></div></div>"`;
+
+exports[`ActionLabel should render action label align end 1`] = `"<div></div><div><div class="p-4"><div class="actionLabel flex overflow-hidden gap-1 items-center cursor-default select-none"><div data-ref="buttonGroup" class="buttonGroup actions overflow-hidden flex-content order-2 inline-flex flex-nowrap align-middle rounded" data-inner-clickable="true" style="--width: 0px;"></div><div class="flex-initial truncate">Click Me</div></div></div></div>"`;

packages/core/tests/animations/Animations.test.tsx

@@ -0,0 +1,92 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+import { composeStories } from "@storybook/react";
+import { render } from "@testing-library/react";
+import { Loading } from "../../src";
+import * as stories from "../../stories/components/animations/Animations.stories";
+import * as barStories from "../../stories/components/animations/Bars.stories";
+import * as skeletonStories from "../../stories/components/animations/Skeleton.stories";
+import * as spinnerStories from "../../stories/components/animations/Spinner.stories";
+
+const { Tester } = composeStories(stories);
+const { Tester: BarTester } = composeStories(barStories);
+const { Tester: SkeletonTester } = composeStories(skeletonStories);
+const { Tester: SpinnerTester } = composeStories(spinnerStories);
+
+describe("Animations", () => {
+  it("should render indicator", () => {
+    const fragment = render(
+      <div>
+        <Tester />
+        <Tester type="info" />
+        <Tester type="check" />
+        <Tester type="question" />
+        <Tester type="cross" color="lilac" />
+        <Tester type="exclaim" strokeColor="lilac" />
+      </div>,
+    );
+    expect(document.body.innerHTML).toMatchSnapshot();
+    fragment.unmount();
+  });
+
+  it("should render bars", () => {
+    const fragment = render(
+      <div>
+        <BarTester />
+      </div>,
+    );
+    expect(document.body.innerHTML).toMatchSnapshot();
+    fragment.unmount();
+  });
+
+  it("should render skeleton", () => {
+    const fragment = render(
+      <div>
+        <SkeletonTester />
+      </div>,
+    );
+    expect(document.body.innerHTML).toMatchSnapshot();
+    fragment.unmount();
+  });
+
+  it("should render spinner", () => {
+    const fragment = render(
+      <div>
+        <SpinnerTester />
+      </div>,
+    );
+    expect(document.body.innerHTML).toMatchSnapshot();
+    fragment.unmount();
+  });
+
+  it("should render loader", () => {
+    const fragment = render(
+      <div className="relative">
+        <Loading />
+      </div>,
+    );
+    expect(document.body.innerHTML).toMatchSnapshot();
+    fragment.unmount();
+  });
+});

packages/core/tests/animations/__snapshots__/Animations.test.tsx.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Animations should render bars 1`] = `
+"<div></div><div><div><div class="h-48 w-96 relative p-4 overflow-hidden outline rounded"><p>Eligendi blanditiis tot infit tristis conspergo odit creta statua odio. Caterva aureus cibus absconditus tenuis argentum maiores argentum suffoco. Cognomen certus dolores chirographum vita una dolorum.
+Modi civis temptatio asporto depromo celer. Tum abstergo clamo ambitus vestigium suspendo. Patria tamisium crinis terror qui temeritas viscus.
+Amita strenuus advenio cras ipsa umquam terreo. Crustulum desidero debilito aperiam textus degero causa addo considero. Pectus texo nemo denego beneficium cupressus caelestis tracto minima aptus.
+Arbitro eius conculco brevis creator et impedit cupiditate coaegresco. Terror aer solutio adduco. Decretum caelestis aegre deserunt esse.
+Cura corroboro crepusculum. Ait deprecator territo. Volutabrum traho timidus tredecim utrimque antea.
+Tenuis vomito terminatio cupiditas adiuvo astrum. Consequuntur crustulum ea atrocitas laboriosam ipsum. Minima harum sufficio architecto cui correptius adipiscor speciosus.
+Adimpleo atavus vix atrox id vulpes suggero quas textilis brevis. Templum patria vociferor teres supra quo suscipio calculus amaritudo taceo. Somniculosus compello animus tabernus comptus verbum architecto demonstro.
+Vestrum cui tabernus volva consuasor demoror vinitor patria tres. Turba cras sortitus thesis concido tabesco. Cultellus audentia defleo adsidue tenuis comedo custodia dedecor.
+Vergo totus arguo. Conculco varius aegre. Cupiditas assentator doloribus necessitatibus similique corrupti teneo aestivus contra teres.
+Tergo curis demum cunctatio tergeo distinctio perspiciatis cohors dolor. Dedecor patruus stella unde. Occaecati pax bibo antiquus umquam architecto.</p><div class="absolute inset-0 z-10 flex justify-center items-center cursor-wait"><div class="outline outline-tint-500/20 p-4 bg-base/50 backdrop-blur-sm rounded"><div class="bars text-tint-500/50" style="width: 2rem;"></div></div></div></div></div></div>"
+`;
+
+exports[`Animations should render indicator 1`] = `"<div><div><div class="flex gap-2 items-center p-4 h-12"><svg data-ref="animated-indicator" class="checkAnimation inline-block rounded-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" aria-hidden="true"><circle class="circlePart" cx="26" cy="26" r="25"></circle><path class="iconPart text-invert" d="M26 22L26 41M27 22L27 41M25 22L25 41M26 11L26 16M27 11L27 16M25 11L25 16Z"></path></svg></div><div class="flex gap-2 items-center p-4 h-12"><svg data-ref="animated-indicator" class="checkAnimation inline-block rounded-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" aria-hidden="true"><circle class="circlePart" cx="26" cy="26" r="25"></circle><path class="iconPart text-invert" d="M26 22L26 41M27 22L27 41M25 22L25 41M26 11L26 16M27 11L27 16M25 11L25 16Z"></path></svg></div><div class="flex gap-2 items-center p-4 h-12"><svg data-ref="animated-indicator" class="checkAnimation inline-block rounded-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" aria-hidden="true"><circle class="circlePart" cx="26" cy="26" r="25"></circle><path class="iconPart text-invert" d="M14.1 27.2l7.1 7.2 16.7-16.8"></path></svg></div><div class="flex gap-2 items-center p-4 h-12"><svg data-ref="animated-indicator" class="checkAnimation inline-block rounded-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" aria-hidden="true"><circle class="circlePart" cx="26" cy="26" r="25"></circle><path class="iconPart text-invert" d="M18.949 17.621c0.426-0.787 1.354-1.6 2.108-2.223 1.279-0.984 3.87-1.778 5.805-1.778 3.837 0 6.189 2.689 6.189 6.034 0 2.23-1.193 4.214-3.751 6.346-2.886 2.361-3.497 3.362-3.497 5.788v0c0-2.263 0.689-3.509 3.476-5.772 2.689-2.23 3.772-3.968 3.772-6.362 0-3.772-2.492-6.034-6.789-6.034-2.132 0-3.903 0.722-5.28 1.804-0.82 0.623-1.476 1.377-2.033 2.197zM26 41.329v0-2.948z"></path></svg></div><div class="flex gap-2 items-center p-4 h-12"><svg data-ref="animated-indicator" class="checkAnimation inline-block rounded-full text-lilac" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" aria-hidden="true"><circle class="circlePart" cx="26" cy="26" r="25"></circle><path class="iconPart text-invert" d="M14.1 14.1l23.8 23.8 m0,-23.8 l-23.8,23.8"></path></svg></div><div class="flex gap-2 items-center p-4 h-12"><svg data-ref="animated-indicator" class="checkAnimation inline-block rounded-full" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52" aria-hidden="true"><circle class="circlePart" cx="26" cy="26" r="25"></circle><path class="iconPart text-lilac" d="M26.611 10.873c-0.002 1.015-0.002 2.071-0.002 3.086v11.777c0 3.086 0.002 2.232 0 3.288h-0.018c-0.001-1.056 0-0.202 0-3.288v-11.777c0-1.015 0-2.071-0.002-3.086zM26.59 37.472h0.018v3.655h-0.018z"></path></svg></div></div></div>"`;
+
+exports[`Animations should render loader 1`] = `"<div></div><div></div><div></div><div></div><div><div class="relative"><div class="loader area-[loader] relative overflow-x-clip" data-testid="loading"><div class="absolute z-10 py-px inset-x-0 top-0 after:h-0.5 after:block after:bg-primary-500"></div></div></div></div>"`;
+
+exports[`Animations should render skeleton 1`] = `"<div></div><div></div><div><div><div class="h-48 w-96 relative p-4 overflow-hidden outline rounded"><div class="p-2 animate-pulse flex gap-2 max-w-lg" data-testid="skeleton"><div class="bg-tint-100 rounded aspect-square h-12"></div><div class="flex-1 flex flex-col gap-2"><div class="bg-tint-100 h-3 rounded-full"></div><div class="flex gap-2"><div class="bg-tint-100 h-2 rounded-full basis-[30%]"></div><div class="bg-tint-100 h-2 rounded-full basis-[60%]"></div></div><div class="flex gap-2"><div class="bg-tint-100 h-2 rounded-full basis-[30%]"></div><div class="bg-tint-100 h-2 rounded-full basis-[60%]"></div></div></div></div></div></div></div>"`;
+
+exports[`Animations should render spinner 1`] = `
+"<div></div><div></div><div></div><div><div><div class="h-48 w-96 relative p-4 overflow-hidden outline rounded"><p>Atque repellendus defero assumenda comminor. Atavus desolo caecus aliqua coerceo delectus valeo eveniet. Solutio pauci vos deprimo.
+Capitulus adicio sequi contra. Vero solio contego doloribus volup aegrotatio ascit crudelis vicinus damno. Centum deputo argentum arx.
+Subvenio defessus civis sunt tantum beatus. Adeo ager ventus utpote ocer dens tamen tactus bellicus causa. Vita spiculum vitium theca.
+Demum uter turpis caste corrupti amiculum solio supplanto ab curatio. Recusandae demulceo damno absum curia sortitus abscido. Carcer tenetur ventito suggero cohors vinco universe.
+Collum vitiosus termes patrocinor. Adipiscor officia canonicus. Subseco concedo adsidue suscipio deprimo culpa spargo appono.
+Tego socius talio versus cruciamentum atqui corrumpo confero. Deludo tardus vergo. Sumo tabernus conservo.
+Vomica repellat ducimus universe. Arbustum agnosco tumultus. Coma clarus est spectaculum adicio.
+Antiquus cognomen incidunt arceo. Thesis audacia suffoco aptus sumptus ratione admoveo. Deleniti cedo amor tolero amo cubitum acies caries.
+Consequuntur debilito textilis vulgo vado vester. Usus veritatis conspergo. Decumbo comptus spes non arto utique.
+Curo tergiversatio tergiversatio sumo cattus. Cum aeternus solus cavus collum. Conduco aveho coniuratio.</p><div class="absolute inset-0 z-10 flex justify-center items-center cursor-wait" data-testid="spinner"><div class="outline outline-tint-500/20 p-4 bg-base/50 backdrop-blur-sm rounded"><div class="spinner text-tint-700" style="width: 2rem;"></div></div></div></div></div></div>"
+`;