add new test to store

src/frontend/src/components/cardComponent/index.tsx

@@ -163,20 +163,26 @@ export default function CollectionCardComponent({
                     <ShadTooltip content="Components">
                       <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
                         <IconComponent name="ToyBrick" className="h-4 w-4" />
-                        {data?.metadata?.total ?? 0}
+                        <span data-testid={`total-${data.name}`}>
+                          {data?.metadata?.total ?? 0}
+                        </span>
                       </span>
                     </ShadTooltip>
                   )}
                   <ShadTooltip content="Likes">
                     <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
                       <IconComponent name="Heart" className={cn("h-4 w-4 ")} />
-                      {likes_count ?? 0}
+                      <span data-testid={`likes-${data.name}`}>
+                        {likes_count ?? 0}
+                      </span>
                     </span>
                   </ShadTooltip>
                   <ShadTooltip content="Downloads">
                     <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
                       <IconComponent name="DownloadCloud" className="h-4 w-4" />
-                      {downloads_count ?? 0}
+                      <span data-testid={`downloads-${data.name}`}>
+                        {downloads_count ?? 0}
+                      </span>
                     </span>
                   </ShadTooltip>
                 </div>
@@ -286,6 +292,7 @@ export default function CollectionCardComponent({
                         }
                         handleLike();
                       }}
+                      data-testid={`like-${data.name}`}
                     >
                       <IconComponent
                         name="Heart"
@@ -324,6 +331,7 @@ export default function CollectionCardComponent({
                       }
                       handleInstall();
                     }}
+                    data-testid={`install-${data.name}`}
                   >
                     <IconComponent
                       name={loading ? "Loader2" : isStore ? "Download" : "Plus"}

src/frontend/src/components/headerComponent/index.tsx

@@ -103,6 +103,7 @@ export default function Header(): JSX.Element {
               onClick={() => {
                 checkForChanges(nodes);
               }}
+              data-testid="button-store"
             >
               <IconComponent name="Store" className="h-4 w-4" />
               <div className="flex-1">Store</div>

src/frontend/src/components/sidebarComponent/index.tsx

@@ -28,6 +28,7 @@ export default function SidebarNav({
     >
       {items.map((item) => (
         <Link
+          data-testid={`sidebar-nav-${item.title}`}
           key={item.href}
           to={item.href}
           className={cn(

src/frontend/src/components/tagsSelectorComponent/index.tsx

@@ -88,6 +88,7 @@ export function TagsSelector({
                 updateTags(tag.name);
               }}
               key={idx}
+              data-testid={`tag-selector-${tag.name}`}
             >
               <Badge
                 key={idx}

src/frontend/src/modals/StoreApiKeyModal/index.tsx

@@ -129,6 +129,7 @@ export default function StoreApiKeyModal({
 
               <Form.Submit asChild>
                 <Button
+                  data-testid="api-key-save-button-store"
                   className="mt-8"
                   onClick={() => {
                     handleSaveKey();

src/frontend/src/pages/StorePage/index.tsx

@@ -181,6 +181,7 @@ export default function StorePage(): JSX.Element {
           {StoreApiKeyModal && (
             <StoreApiKeyModal disabled={loading}>
               <Button
+                data-testid="api-key-button-store"
                 disabled={loading}
                 className={cn(
                   `${!validApiKey ? "animate-pulse border-error" : ""}`,
@@ -201,6 +202,7 @@ export default function StorePage(): JSX.Element {
           <div className="flex items-end gap-4">
             <div className="relative h-12 w-[40%]">
               <Input
+                data-testid="search-store-input"
                 disabled={loading}
                 placeholder="Search Flows and Components"
                 className="absolute h-12 pl-5 pr-12"
@@ -220,6 +222,7 @@ export default function StorePage(): JSX.Element {
                 onClick={() => {
                   setSearchNow(uniqueId());
                 }}
+                data-testid="search-store-button"
               >
                 <IconComponent
                   name={loading ? "Loader2" : "Search"}
@@ -229,6 +232,7 @@ export default function StorePage(): JSX.Element {
             </div>
             <div className="ml-4 flex w-full gap-2 border-b border-border">
               <button
+                data-testid="all-button-store"
                 disabled={loading}
                 onClick={() => {
                   setTabActive("All");
@@ -243,6 +247,7 @@ export default function StorePage(): JSX.Element {
                 All
               </button>
               <button
+                data-testid="flows-button-store"
                 disabled={loading}
                 onClick={() => {
                   resetPagination();
@@ -258,6 +263,7 @@ export default function StorePage(): JSX.Element {
                 Flows
               </button>
               <button
+                data-testid="components-button-store"
                 disabled={loading}
                 onClick={() => {
                   resetPagination();
@@ -344,7 +350,7 @@ export default function StorePage(): JSX.Element {
                 setPageOrder(e);
               }}
             >
-              <SelectTrigger>
+              <SelectTrigger data-testid="select-order-store">
                 <SelectValue placeholder="Popular" />
               </SelectTrigger>
               <SelectContent>

src/frontend/tests/end-to-end/store.spec.ts

@@ -0,0 +1,218 @@
+import { expect, test } from "@playwright/test";
+
+test("should exists Store", async ({ page }) => {
+  await page.goto("http://localhost:3000/");
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("button-store").isVisible();
+  await page.getByTestId("button-store").isEnabled();
+});
+
+test("should not have an API key", async ({ page }) => {
+  await page.goto("http://localhost:3000/");
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("button-store").click();
+  await page.waitForTimeout(2000);
+
+  await page.getByText("API Key Error").isVisible();
+});
+
+test("should find a searched Component on Store", async ({ page }) => {
+  await page.goto("http://localhost:3000/");
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("button-store").click();
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("search-store-input").fill("File Loader");
+  await page.getByTestId("search-store-button").click();
+  await page.getByText("File Loader").isVisible();
+
+  await page.getByTestId("search-store-input").fill("Basic RAG");
+  await page.getByTestId("search-store-button").click();
+  await page.getByText("Basic RAG").isVisible();
+
+  await page.getByTestId("search-store-input").fill("YouTube QA");
+  await page.getByTestId("search-store-button").click();
+  await page.getByText("YouTube QA").isVisible();
+});
+
+test("should filter by tag", async ({ page }) => {
+  await page.goto("http://localhost:3000/");
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("button-store").click();
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("tag-selector-Agent").click();
+  await page.getByText("File Loader").isVisible();
+  await page.getByTestId("tag-selector-Agent").click();
+  await page.getByText("Album Cover Builder").isVisible();
+
+  await page.getByTestId("tag-selector-Memory").click();
+  await page.getByText("MP3 QA12").isVisible();
+
+  await page.getByTestId("tag-selector-Chain").click();
+  await page.getByText("There are no").isVisible();
+  await page.getByTestId("tag-selector-Chain").click();
+
+  await page.getByTestId("tag-selector-Vector Store").click();
+  await page.getByText("MP3 QA12").isVisible();
+  await page.getByTestId("tag-selector-Vector Store").click();
+  await page.getByTestId("tag-selector-Memory").click();
+
+  await page.getByText("Basic RAG").isVisible();
+});
+
+test("should order the visualization", async ({ page }) => {
+  await page.goto("http://localhost:3000/");
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("button-store").click();
+  await page.waitForTimeout(1000);
+
+  await page.getByText("Basic RAG").isVisible();
+
+  await page.getByTestId("select-order-store").click();
+  await page.getByText("Alphabetical").click();
+
+  await page.getByText("Album Cover Builder").isVisible();
+
+  await page.getByTestId("select-order-store").click();
+  await page.getByText("Popular").click();
+
+  await page.getByText("Basic RAG").isVisible();
+});
+
+test("should filter by type", async ({ page }) => {
+  await page.goto("http://localhost:3000/");
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("button-store").click();
+  await page.waitForTimeout(1000);
+
+  await page.getByText("Website Content QA").isVisible();
+
+  await page.getByTestId("flows-button-store").click();
+  await page.waitForTimeout(3000);
+
+  let iconGroup = await page.getByTestId("icon-Group").count();
+  expect(iconGroup).not.toBe(0);
+
+  await page.getByText("icon-ToyBrick").isHidden();
+
+  await page.getByTestId("components-button-store").click();
+  await page.waitForTimeout(3000);
+
+  await page.getByTestId("icon-Group").isHidden();
+  let toyBrick = await page.getByTestId("icon-ToyBrick").count();
+  expect(toyBrick).not.toBe(0);
+
+  await page.getByTestId("all-button-store").click();
+  await page.waitForTimeout(3000);
+
+  iconGroup = await page.getByTestId("icon-Group").count();
+  toyBrick = await page.getByTestId("icon-ToyBrick").count();
+
+  if (iconGroup === 0 || toyBrick === 0) {
+    expect(false).toBe(true);
+  }
+});
+
+test("should add API-KEY", async ({ page }) => {
+  await page.goto("http://localhost:3000/");
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("button-store").click();
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("api-key-button-store").click();
+  await page
+    .getByPlaceholder("Insert your API Key")
+    .fill("testtesttesttesttesttest");
+
+  await page.getByTestId("api-key-save-button-store").click();
+
+  await page.waitForTimeout(2000);
+  await page.getByText("Success! Your API Key has been saved.").isVisible();
+
+  await page.waitForTimeout(2000);
+  await page.getByText("API Key Error").isVisible();
+
+  await page.getByTestId("api-key-button-store").click();
+  await page
+    .getByPlaceholder("Insert your API Key")
+    .fill("x1fOKU0v2e5zL5d-BZW6CxZBZvoyuFgF");
+  await page.getByTestId("api-key-save-button-store").click();
+
+  await page.waitForTimeout(2000);
+  await page.getByText("Success! Your API Key has been saved.").isVisible();
+
+  await page.waitForTimeout(2000);
+  await page.getByText("API Key Error").isHidden();
+});
+
+test("should like and add components and flows", async ({ page }) => {
+  await page.goto("http://localhost:3000/");
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("button-store").click();
+  await page.waitForTimeout(1000);
+
+  await page.getByTestId("api-key-button-store").click();
+
+  await page
+    .getByPlaceholder("Insert your API Key")
+    .fill("x1fOKU0v2e5zL5d-BZW6CxZBZvoyuFgF");
+  await page.getByTestId("api-key-save-button-store").click();
+
+  await page.waitForTimeout(2000);
+  await page.getByText("Success! Your API Key has been saved.").isVisible();
+
+  await page.waitForTimeout(2000);
+  await page.getByText("API Key Error").isHidden();
+
+  const likedValue = await page
+    .getByTestId("likes-Website Content QA")
+    .innerText();
+
+  await page.getByTestId("like-Website Content QA").click();
+
+  await page.waitForTimeout(5000);
+  const likedValueAfter = await page
+    .getByTestId("likes-Website Content QA")
+    .innerText();
+
+  if (Number(likedValue) === Number(likedValueAfter)) {
+    expect(false).toBe(true);
+  }
+
+  const downloadValue = await page
+    .getByTestId("downloads-Website Content QA")
+    .innerText();
+
+  await page.getByTestId("install-Website Content QA").click();
+  await page.waitForTimeout(2000);
+  await page.getByText("Flow Installed Successfully").isVisible();
+  await page.waitForTimeout(5000);
+
+  const downloadValueAfter = await page
+    .getByTestId("downloads-Website Content QA")
+    .innerText();
+
+  if (Number(downloadValue) === Number(downloadValueAfter)) {
+    expect(false).toBe(true);
+  }
+
+  await page.getByTestId("install-Basic RAG").click();
+  await page.waitForTimeout(2000);
+  await page.getByText("Component Installed Successfully").isVisible();
+  await page.waitForTimeout(5000);
+
+  await page.getByText("My Collection").click();
+  await page.getByText("Website Content QA").first().isVisible();
+
+  await page.getByTestId("sidebar-nav-Components").click();
+  await page.getByText("Basic RAG").first().isVisible();
+});