fix tests

autogpt_platform/frontend/src/components/agptui/Button.stories.tsx

@@ -124,11 +124,11 @@ export const Sizes: Story = {
     const buttons = canvas.getAllByRole("button");
     expect(buttons).toHaveLength(5);
     const sizeClasses = [
-      "h-[50px] px-[20px] py-[5px] text-sm",
-      "h-[70px] px-[26px] py-[7px]",
-      "h-[90px] px-[32px] py-[9px] text-2xl",
-      "md:h-[70px] md:w-[176px] h-[50px] w-[112px]",
-      "h-[70px] w-[70px]",
+      "h-8 px-3 py-1.5 text-xs",
+      "h-10 px-4 py-2 text-sm",
+      "h-12 px-5 py-2.5 text-lg",
+      "h-10 w-28",
+      "h-10 w-10",
     ];
     buttons.forEach((button, index) => {
       expect(button).toHaveAttribute(
@@ -148,7 +148,10 @@ export const Disabled: Story = {
     const canvas = within(canvasElement);
     const button = canvas.getByRole("button", { name: /Disabled Button/i });
     await expect(button).toBeDisabled();
-    await expect(button).toHaveStyle("pointer-events: none");
+    await expect(button).toHaveAttribute(
+      "class",
+      expect.stringContaining("disabled:opacity-50"),
+    );
     await expect(button).not.toHaveFocus();
   },
 };

autogpt_platform/frontend/src/components/agptui/Button.tsx

@@ -9,7 +9,8 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-white border border-black/50 text-[#272727]",
+        default:
+          "bg-white border border-black/50 text-[#272727] hover:bg-neutral-100",
         destructive:
           "bg-red-500 text-neutral-50 border border-red-500/50 hover:bg-red-500/90",
         outline:

autogpt_platform/frontend/src/components/agptui/CreatorCard.tsx

@@ -23,6 +23,7 @@ export const CreatorCard: React.FC<CreatorCardProps> = ({
     <div
       className="flex h-96 w-[13.125rem] flex-col rounded-xl transition-shadow duration-300 hover:shadow-lg"
       onClick={onClick}
+      role="creator-card"
     >
       <div className="relative aspect-[210/238] w-full">
         <Image

autogpt_platform/frontend/src/components/agptui/FeaturedStoreCard.tsx

@@ -43,6 +43,7 @@ export const FeaturedStoreCard: React.FC<FeaturedStoreCardProps> = ({
     <div
       className={`inline-flex w-screen cursor-pointer flex-col items-start justify-between gap-3 rounded-xl border border-black/10 bg-[#f9f9f9] px-2 pb-2 pt-4 font-neue text-sm tracking-tight text-[#272727] transition-shadow duration-300 hover:shadow-lg md:h-[37.188rem] md:w-[41.875rem] md:gap-5 md:px-[1.5625rem] md:pb-[0.9375rem] md:pt-[2.1875rem] md:text-xl`}
       onClick={onClick}
+      role="featured-store-card"
     >
       <div className="flex flex-col items-start justify-start self-stretch">
         <div className="self-stretch text-2xl font-medium md:text-4xl">

autogpt_platform/frontend/src/components/agptui/SearchBar.tsx

@@ -32,7 +32,11 @@ export const SearchBar: React.FC<SearchBarProps> = ({
   };
 
   return (
-    <form onSubmit={handleSubmit} className="w-9/10 lg:w-[56.25rem]">
+    <form
+      onSubmit={handleSubmit}
+      className="w-9/10 lg:w-[56.25rem]"
+      role="store-search-bar"
+    >
       <div
         className={`h-12 px-4 py-2 md:h-[4.5rem] md:px-6 md:py-[0.625rem] ${backgroundColor} flex items-center gap-2 rounded-full md:gap-5`}
       >
@@ -43,6 +47,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({
           onChange={handleInputChange}
           placeholder={placeholder}
           className={`flex-grow border-none bg-transparent ${textColor} font-neue text-lg font-normal leading-[2.25rem] tracking-tight md:text-xl placeholder:${placeholderColor} focus:outline-none`}
+          role="store-search-input"
         />
       </div>
     </form>

autogpt_platform/frontend/src/components/agptui/StoreCard.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { StoreCard } from "./StoreCard";
-import { userEvent, within } from "@storybook/test";
+import { userEvent, within, expect } from "@storybook/test";
 
 const meta = {
   title: "AGPTUI/StoreCard",

autogpt_platform/frontend/src/components/agptui/StoreCard.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { StarIcon, StarFilledIcon } from "@radix-ui/react-icons";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import Image from "next/image";
+
 interface StoreCardProps {
   agentName: string;
   agentImage: string;
@@ -21,6 +22,13 @@ export const StoreCard: React.FC<StoreCardProps> = ({
   onClick,
   avatarSrc,
 }) => {
+  const [isPressed, setIsPressed] = React.useState(false);
+
+  const handleClick = () => {
+    setIsPressed(!isPressed);
+    onClick();
+  };
+
   const renderStars = () => {
     const fullStars = Math.floor(rating);
     const hasHalfStar = rating % 1 !== 0;
@@ -42,7 +50,9 @@ export const StoreCard: React.FC<StoreCardProps> = ({
   return (
     <div
       className="flex h-96 w-64 flex-col rounded-xl pb-2 transition-shadow duration-300 hover:shadow-lg sm:w-64 md:w-80 xl:w-110"
-      onClick={onClick}
+      onClick={handleClick}
+      role="store-card"
+      aria-pressed={isPressed}
     >
       <div className="relative h-48 w-full">
         <Image

autogpt_platform/frontend/src/components/agptui/marketplace/home/FeaturedCreators.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { FeaturedCreators } from "./FeaturedCreators";
-import { userEvent, within } from "@storybook/test";
+import { userEvent, within, expect } from "@storybook/test";
 
 const meta = {
   title: "AGPTUI/Marketplace/Home/FeaturedCreators",
@@ -95,9 +95,13 @@ export const WithInteraction: Story = {
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const firstCreatorCard = canvas.getByText("AI Innovator");
+    const creatorCards = canvas.getAllByRole("creator-card");
+    const firstCreatorCard = creatorCards[0];
 
     await userEvent.hover(firstCreatorCard);
     await userEvent.click(firstCreatorCard);
+
+    // Check if the card has the expected hover and click effects
+    await expect(firstCreatorCard).toHaveClass("hover:shadow-lg");
   },
 };

autogpt_platform/frontend/src/components/agptui/marketplace/home/FeaturedSection.stories.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { FeaturedSection } from "./FeaturedSection";
+import { userEvent, within, expect } from "@storybook/test";
 
 const meta = {
   title: "AGPTUI/Marketplace/Home/FeaturedSection",
@@ -73,3 +74,17 @@ export const NoAgents: Story = {
     onCardClick: (agentName: string) => console.log(`Clicked on ${agentName}`),
   },
 };
+
+export const WithInteraction: Story = {
+  args: {
+    featuredAgents: mockFeaturedAgents,
+    onCardClick: (agentName: string) => console.log(`Clicked on ${agentName}`),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const firstCard = canvas.getAllByRole("featured-store-card")[0];
+    await userEvent.click(firstCard);
+    await userEvent.hover(firstCard);
+    await expect(firstCard).toHaveClass("hover:shadow-lg");
+  },
+};

autogpt_platform/frontend/src/components/agptui/marketplace/home/HeroSection.stories.tsx

@@ -38,7 +38,7 @@ export const WithInteraction: Story = {
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const searchInput = canvas.getByPlaceholderText(/Search for tasks/i);
+    const searchInput = canvas.getByRole("store-search-input");
 
     await userEvent.type(searchInput, "test query");
     await userEvent.keyboard("{Enter}");
@@ -48,7 +48,7 @@ export const WithInteraction: Story = {
     const filterChip = canvas.getByText("Marketing");
     await userEvent.click(filterChip);
 
-    await expect(filterChip).toHaveClass("bg-[#F1F1F1]");
+    await expect(filterChip).toHaveClass("text-[#474747]");
   },
 };
 
@@ -60,8 +60,9 @@ export const EmptySearch: Story = {
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const searchInput = canvas.getByPlaceholderText(/Search for tasks/i);
+    const searchInput = canvas.getByRole("store-search-input");
 
+    await userEvent.click(searchInput);
     await userEvent.keyboard("{Enter}");
 
     await expect(searchInput).toHaveValue("");

autogpt_platform/frontend/src/components/agptui/marketplace/home/TopAgentsSection.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { TopAgentsSection } from "./TopAgentsSection";
-import { userEvent, within } from "@storybook/test";
+import { userEvent, within, expect } from "@storybook/test";
 
 const meta = {
   title: "AGPTUI/Marketplace/Home/TopAgentsSection",
@@ -82,8 +82,9 @@ export const WithInteraction: Story = {
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    const firstCard = canvas.getAllByRole("button")[0];
+    const firstCard = canvas.getAllByRole("store-card")[0];
     await userEvent.click(firstCard);
+    await expect(firstCard).toHaveAttribute("aria-pressed", "true");
   },
 };
 

autogpt_platform/frontend/src/components/ui/BoringAvatarWrapper.tsx

@@ -1,11 +1,11 @@
 import Avatar from "boring-avatars";
 
-import React from 'react';
+import React from "react";
 
 interface BoringAvatarWrapperProps {
   size?: number;
   name: string;
-  variant?: 'marble' | 'beam' | 'pixel' | 'sunset' | 'ring' | 'bauhaus';
+  variant?: "marble" | "beam" | "pixel" | "sunset" | "ring" | "bauhaus";
   colors?: string[];
   square?: boolean;
 }
@@ -13,8 +13,8 @@ interface BoringAvatarWrapperProps {
 export const BoringAvatarWrapper: React.FC<BoringAvatarWrapperProps> = ({
   size = 40,
   name,
-  variant = 'beam',
-  colors = ['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90'],
+  variant = "beam",
+  colors = ["#92A1C6", "#146A7C", "#F0AB3D", "#C271B4", "#C20D90"],
   square = false,
 }) => {
   return (
@@ -29,4 +29,3 @@ export const BoringAvatarWrapper: React.FC<BoringAvatarWrapperProps> = ({
 };
 
 export default BoringAvatarWrapper;
-

autogpt_platform/frontend/src/components/ui/avatar.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import BoringAvatar from "./BoringAvatarWrapper"
+import BoringAvatar from "./BoringAvatarWrapper";
 
 import { cn } from "@/lib/utils";
 
@@ -36,7 +36,7 @@ AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 const AvatarFallback = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Fallback>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (  
+>(({ className, ...props }, ref) => (
   <AvatarPrimitive.Fallback
     ref={ref}
     className={cn(