add new test to store

This commit is contained in:
cristhianzl 2024-04-01 20:28:05 -03:00
commit c6b04d20b3
8 changed files with 1993 additions and 1757 deletions

View file

@ -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"}

View file

@ -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>

View file

@ -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(

View file

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

View file

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

View file

@ -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>

View file

@ -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();
});