test: fix snapshots

Author: adarshpastakia

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

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

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

@@ -56,8 +56,3 @@ export const _Skeleton: SkeletonStory = {
   },
   args: {},
 };
-
-export const Tester: SkeletonStory = {
-  render: (args) => <Skeleton {...args} />,
-  args: {},
-};

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

@@ -52,8 +52,3 @@ export const _Spinner: SpinnerStory = {
   },
   args: {},
 };
-
-export const Tester: SpinnerStory = {
-  render: (args) => <AnimationSpinner {...args} />,
-  args: {},
-};

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

@@ -23,16 +23,10 @@
 
 import { composeStories } from "@storybook/react";
 import { render } from "@testing-library/react";
-import { Loading } from "../../src";
+import { AnimationBars, AnimationSpinner, Loading, Skeleton } 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", () => {
@@ -52,8 +46,8 @@ describe("Animations", () => {
 
   it("should render bars", () => {
     const fragment = render(
-      <div>
-        <BarTester />
+      <div className="relative">
+        <AnimationBars />
       </div>,
     );
     expect(document.body.innerHTML).toMatchSnapshot();
@@ -62,8 +56,8 @@ describe("Animations", () => {
 
   it("should render skeleton", () => {
     const fragment = render(
-      <div>
-        <SkeletonTester />
+      <div className="relative">
+        <Skeleton />
       </div>,
     );
     expect(document.body.innerHTML).toMatchSnapshot();
@@ -72,8 +66,8 @@ describe("Animations", () => {
 
   it("should render spinner", () => {
     const fragment = render(
-      <div>
-        <SpinnerTester />
+      <div className="relative">
+        <AnimationSpinner />
       </div>,
     );
     expect(document.body.innerHTML).toMatchSnapshot();

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

@@ -1,33 +1,11 @@
 // 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 bars 1`] = `"<div></div><div><div class="relative"><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>"`;
 
 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 skeleton 1`] = `"<div></div><div></div><div><div class="relative"><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>"`;
 
-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>"
-`;
+exports[`Animations should render spinner 1`] = `"<div></div><div></div><div></div><div><div class="relative"><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>"`;