diff --git a/site/src/components/Resources/ResourceCard.test.tsx b/site/src/components/Resources/ResourceCard.test.tsx new file mode 100644 index 0000000000000..0e1a2cfb5ac67 --- /dev/null +++ b/site/src/components/Resources/ResourceCard.test.tsx @@ -0,0 +1,112 @@ +import { renderComponent } from "testHelpers/renderHelpers"; +import { ResourceCard } from "components/Resources/ResourceCard"; +import { MockWorkspaceResource } from "testHelpers/entities"; +import { screen } from "@testing-library/react"; +import { WorkspaceResourceMetadata } from "api/typesGenerated"; + +describe("Resource Card", () => { + it("renders daily cost and metadata tiles", async () => { + renderComponent( + <>} />, + ); + expect( + screen.getByText(MockWorkspaceResource.daily_cost), + ).toBeInTheDocument(); + + expect( + screen.getByText(MockWorkspaceResource.metadata?.[0].value as string), + ).toBeInTheDocument(); + }); + + it("renders daily cost and 3 metadata tiles", async () => { + const mockResource = { + ...MockWorkspaceResource, + metadata: [ + { + ...(MockWorkspaceResource.metadata?.[0] as WorkspaceResourceMetadata), + value: "18GB", + }, + { + ...(MockWorkspaceResource.metadata?.[0] as WorkspaceResourceMetadata), + value: "24GB", + }, + { + ...(MockWorkspaceResource.metadata?.[0] as WorkspaceResourceMetadata), + value: "32GB", + }, + { + ...(MockWorkspaceResource.metadata?.[0] as WorkspaceResourceMetadata), + value: "48GB", + }, + { + ...(MockWorkspaceResource.metadata?.[0] as WorkspaceResourceMetadata), + value: "60GB", + }, + ], + }; + + renderComponent( + <>} />, + ); + expect(screen.getByText(mockResource.daily_cost)).toBeInTheDocument(); + expect( + screen.getByText(mockResource.metadata?.[0].value), + ).toBeInTheDocument(); + expect( + screen.getByText(mockResource.metadata?.[1].value), + ).toBeInTheDocument(); + expect( + screen.getByText(mockResource.metadata?.[2].value), + ).toBeInTheDocument(); + // last element is hidden + expect( + screen.queryByText(mockResource.metadata?.[3].value), + ).not.toBeInTheDocument(); + }); + + it("renders 4 metadata tiles if no daily cost", async () => { + const mockResource = { + ...MockWorkspaceResource, + daily_cost: 0, + metadata: [ + { + ...(MockWorkspaceResource.metadata?.[0] as WorkspaceResourceMetadata), + value: "18GB", + }, + { + ...(MockWorkspaceResource.metadata?.[0] as WorkspaceResourceMetadata), + value: "24GB", + }, + { + ...(MockWorkspaceResource.metadata?.[0] as WorkspaceResourceMetadata), + value: "32GB", + }, + { + ...(MockWorkspaceResource.metadata?.[0] as WorkspaceResourceMetadata), + value: "48GB", + }, + { + ...(MockWorkspaceResource.metadata?.[0] as WorkspaceResourceMetadata), + value: "60GB", + }, + ], + }; + + renderComponent( + <>} />, + ); + expect(screen.queryByText(mockResource.daily_cost)).not.toBeInTheDocument(); + expect( + screen.getByText(mockResource.metadata?.[0].value), + ).toBeInTheDocument(); + expect( + screen.getByText(mockResource.metadata?.[1].value), + ).toBeInTheDocument(); + expect( + screen.getByText(mockResource.metadata?.[2].value), + ).toBeInTheDocument(); + expect( + screen.getByText(mockResource.metadata?.[3].value), + ).toBeInTheDocument(); + }); +}); diff --git a/site/src/components/Resources/ResourceCard.tsx b/site/src/components/Resources/ResourceCard.tsx index f5c0779d68a29..be4cecb78a37d 100644 --- a/site/src/components/Resources/ResourceCard.tsx +++ b/site/src/components/Resources/ResourceCard.tsx @@ -76,18 +76,17 @@ export const ResourceCard: FC = ({ resource, agentRow }) => { const [shouldDisplayAllMetadata, setShouldDisplayAllMetadata] = useState(false); const metadataToDisplay = resource.metadata ?? []; + const visibleMetadata = shouldDisplayAllMetadata ? metadataToDisplay - : metadataToDisplay.slice(0, 4); + : metadataToDisplay.slice(0, resource.daily_cost > 0 ? 3 : 4); + + const mLength = + resource.daily_cost > 0 + ? (resource.metadata?.length ?? 0) + 1 + : resource.metadata?.length ?? 0; - // Add one to `metadataLength` if the resource has a cost, and hide one - // additional metadata item, because cost is displayed in the same grid. - let metadataLength = resource.metadata?.length ?? 0; - if (resource.daily_cost > 0) { - metadataLength += 1; - visibleMetadata.pop(); - } - const gridWidth = metadataLength === 1 ? 1 : 4; + const gridWidth = mLength === 1 ? 1 : 4; return (
@@ -123,7 +122,7 @@ export const ResourceCard: FC = ({ resource, agentRow }) => { {resource.daily_cost > 0 && (
- cost + Daily cost
{resource.daily_cost}
@@ -145,7 +144,7 @@ export const ResourceCard: FC = ({ resource, agentRow }) => { ); })}
- {metadataLength > 4 && ( + {mLength > 4 && (