From d19365ad38f5819437901f3a417bbd67be95c474 Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Wed, 16 Oct 2024 12:29:11 -0400 Subject: [PATCH 1/3] changing aria attribute and fixing tests --- .../ResourceCard/ResourceCard.test.tsx | 21 ++++++++----------- .../LearningResourceCard.test.tsx | 10 +++++++-- .../LearningResourceCard.tsx | 2 +- .../LearningResourceListCard.test.tsx | 10 +++++++-- .../LearningResourceListCard.tsx | 3 +-- .../LearningResourceListCardCondensed.tsx | 3 ++- .../LearningResourceExpanded/InfoSection.tsx | 3 ++- 7 files changed, 31 insertions(+), 21 deletions(-) diff --git a/frontends/mit-learn/src/page-components/ResourceCard/ResourceCard.test.tsx b/frontends/mit-learn/src/page-components/ResourceCard/ResourceCard.test.tsx index cbfc3672a3..7deb96891c 100644 --- a/frontends/mit-learn/src/page-components/ResourceCard/ResourceCard.test.tsx +++ b/frontends/mit-learn/src/page-components/ResourceCard/ResourceCard.test.tsx @@ -7,6 +7,7 @@ import { expectProps, } from "../../test-utils" import type { User } from "../../test-utils" +import { getReadableResourceType } from "ol-utilities" import { ResourceCard } from "./ResourceCard" import { AddToLearningPathDialog, @@ -65,11 +66,6 @@ describe.each([ return { resource, view, location } } - const labels = { - addToLearningPaths: "Add to Learning Path", - addToUserList: "Add to User List", - } - test("Applies className to the resource card", () => { const { view } = setup({ user: {}, props: { className: "test-class" } }) expect(view.container.firstChild).toHaveClass("test-class") @@ -91,12 +87,13 @@ describe.each([ ])( "Always shows 'Add to User List' button, but only shows 'Add to Learning Path' button if user is a learning path editor", async ({ user, expectAddToLearningPathButton }) => { - setup({ user }) + const { resource } = setup({ user }) await screen.findByRole("button", { - name: labels.addToUserList, + name: `Bookmark ${getReadableResourceType(resource.resource_type)}`, }) + const addToLearningPathButton = screen.queryByRole("button", { - name: labels.addToLearningPaths, + name: "Add to Learning Path", }) expect(!!addToLearningPathButton).toBe(expectAddToLearningPathButton) }, @@ -150,10 +147,10 @@ describe.each([ user: { is_learning_path_editor: true, is_authenticated: true }, }) const addToUserListButton = await screen.findByRole("button", { - name: labels.addToUserList, + name: `Bookmark ${getReadableResourceType(resource.resource_type)}`, }) const addToLearningPathButton = await screen.findByRole("button", { - name: labels.addToLearningPaths, + name: "Add to Learning Path", }) expect(showModal).not.toHaveBeenCalled() @@ -169,11 +166,11 @@ describe.each([ }) test("Clicking 'Add to User List' opens signup popover if not authenticated", async () => { - setup({ + const { resource } = setup({ user: { is_authenticated: false }, }) const addToUserListButton = await screen.findByRole("button", { - name: labels.addToUserList, + name: `Bookmark ${getReadableResourceType(resource.resource_type)}`, }) await user.click(addToUserListButton) const dialog = screen.getByRole("dialog") diff --git a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.test.tsx b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.test.tsx index a059281b20..3bd9ab8dbd 100644 --- a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.test.tsx +++ b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.test.tsx @@ -3,7 +3,11 @@ import { BrowserRouter } from "react-router-dom" import { screen, render } from "@testing-library/react" import { LearningResourceCard } from "./LearningResourceCard" import type { LearningResourceCardProps } from "./LearningResourceCard" -import { DEFAULT_RESOURCE_IMG, embedlyCroppedImage } from "ol-utilities" +import { + DEFAULT_RESOURCE_IMG, + embedlyCroppedImage, + getReadableResourceType, +} from "ol-utilities" import { ResourceTypeEnum, PlatformEnum, AvailabilityEnum } from "api" import { factories } from "api/test-utils" import { ThemeProvider } from "../ThemeProvider/ThemeProvider" @@ -131,7 +135,9 @@ describe("Learning Resource Card", () => { await addToLearningPathButton.click() - const addToUserListButton = screen.getByLabelText("Add to User List") + const addToUserListButton = screen.getByLabelText( + `Bookmark ${getReadableResourceType(resource.resource_type)}`, + ) await addToUserListButton.click() diff --git a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.tsx b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.tsx index 586f9f5cd4..6e05fefebd 100644 --- a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.tsx +++ b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceCard.tsx @@ -272,7 +272,7 @@ const LearningResourceCard: React.FC = ({ {onAddToUserListClick && ( onAddToUserListClick(event, resource.id)} > {inUserList ? ( diff --git a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.test.tsx b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.test.tsx index 9189cb40d1..7824f7c955 100644 --- a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.test.tsx +++ b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.test.tsx @@ -3,7 +3,11 @@ import { BrowserRouter } from "react-router-dom" import { screen, render } from "@testing-library/react" import { LearningResourceListCard } from "./LearningResourceListCard" import type { LearningResourceListCardProps } from "./LearningResourceListCard" -import { DEFAULT_RESOURCE_IMG, embedlyCroppedImage } from "ol-utilities" +import { + DEFAULT_RESOURCE_IMG, + embedlyCroppedImage, + getReadableResourceType, +} from "ol-utilities" import { ResourceTypeEnum, PlatformEnum, AvailabilityEnum } from "api" import { factories } from "api/test-utils" import { ThemeProvider } from "../ThemeProvider/ThemeProvider" @@ -123,7 +127,9 @@ describe("Learning Resource List Card", () => { ) await addToLearningPathButton.click() - const addToUserListButton = screen.getByLabelText("Add to User List") + const addToUserListButton = screen.getByLabelText( + `Bookmark ${getReadableResourceType(resource.resource_type)}`, + ) await addToUserListButton.click() expect(onAddToLearningPathClick).toHaveBeenCalledWith( diff --git a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.tsx b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.tsx index 9b7517edf0..4bb0ebddde 100644 --- a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.tsx +++ b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCard.tsx @@ -295,7 +295,6 @@ const LearningResourceListCard: React.FC = ({ if (!resource) { return null } - return ( = ({ {onAddToUserListClick && ( onAddToUserListClick(event, resource.id)} > {inUserList ? ( diff --git a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCardCondensed.tsx b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCardCondensed.tsx index 72e3e9ceb0..f37a8f4abe 100644 --- a/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCardCondensed.tsx +++ b/frontends/ol-components/src/components/LearningResourceCard/LearningResourceListCardCondensed.tsx @@ -114,6 +114,7 @@ const LearningResourceListCardCondensed: React.FC< ) } + if (!resource) { return null } @@ -136,7 +137,7 @@ const LearningResourceListCardCondensed: React.FC< {onAddToUserListClick && ( onAddToUserListClick(event, resource.id)} > {inUserList ? ( diff --git a/frontends/ol-components/src/components/LearningResourceExpanded/InfoSection.tsx b/frontends/ol-components/src/components/LearningResourceExpanded/InfoSection.tsx index 2ebd9264a7..4c6ec179bc 100644 --- a/frontends/ol-components/src/components/LearningResourceExpanded/InfoSection.tsx +++ b/frontends/ol-components/src/components/LearningResourceExpanded/InfoSection.tsx @@ -20,6 +20,7 @@ import { LearningResource, LearningResourceRun, ResourceTypeEnum } from "api" import { formatDurationClockTime, getLearningResourcePrices, + getReadableResourceType, } from "ol-utilities" import { theme } from "../ThemeProvider/ThemeProvider" import Typography from "@mui/material/Typography" @@ -288,7 +289,7 @@ const InfoSection = ({ )} onAddToUserListClick?.(event, resource.id) From 7c179d10cd7a5164f407f64c756d496451348b71 Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Wed, 16 Oct 2024 13:21:09 -0400 Subject: [PATCH 2/3] fixing typecheck --- .../src/page-components/ResourceCard/ResourceCard.test.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontends/mit-learn/src/page-components/ResourceCard/ResourceCard.test.tsx b/frontends/mit-learn/src/page-components/ResourceCard/ResourceCard.test.tsx index 7deb96891c..e3c1ceda94 100644 --- a/frontends/mit-learn/src/page-components/ResourceCard/ResourceCard.test.tsx +++ b/frontends/mit-learn/src/page-components/ResourceCard/ResourceCard.test.tsx @@ -89,7 +89,7 @@ describe.each([ async ({ user, expectAddToLearningPathButton }) => { const { resource } = setup({ user }) await screen.findByRole("button", { - name: `Bookmark ${getReadableResourceType(resource.resource_type)}`, + name: `Bookmark ${getReadableResourceType(resource?.resource_type)}`, }) const addToLearningPathButton = screen.queryByRole("button", { @@ -147,7 +147,7 @@ describe.each([ user: { is_learning_path_editor: true, is_authenticated: true }, }) const addToUserListButton = await screen.findByRole("button", { - name: `Bookmark ${getReadableResourceType(resource.resource_type)}`, + name: `Bookmark ${getReadableResourceType(resource?.resource_type)}`, }) const addToLearningPathButton = await screen.findByRole("button", { name: "Add to Learning Path", @@ -170,7 +170,7 @@ describe.each([ user: { is_authenticated: false }, }) const addToUserListButton = await screen.findByRole("button", { - name: `Bookmark ${getReadableResourceType(resource.resource_type)}`, + name: `Bookmark ${getReadableResourceType(resource?.resource_type)}`, }) await user.click(addToUserListButton) const dialog = screen.getByRole("dialog") From f97a8565c9c44f4004a30fdded4c48390e113b42 Mon Sep 17 00:00:00 2001 From: shankar ambady Date: Wed, 16 Oct 2024 13:29:04 -0400 Subject: [PATCH 3/3] fixing parameter to getReadableResourceType --- .../src/page-components/ResourceCard/ResourceCard.test.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/frontends/mit-learn/src/page-components/ResourceCard/ResourceCard.test.tsx b/frontends/mit-learn/src/page-components/ResourceCard/ResourceCard.test.tsx index e3c1ceda94..f281e14403 100644 --- a/frontends/mit-learn/src/page-components/ResourceCard/ResourceCard.test.tsx +++ b/frontends/mit-learn/src/page-components/ResourceCard/ResourceCard.test.tsx @@ -9,6 +9,7 @@ import { import type { User } from "../../test-utils" import { getReadableResourceType } from "ol-utilities" import { ResourceCard } from "./ResourceCard" +import { ResourceTypeEnum } from "api" import { AddToLearningPathDialog, AddToUserListDialog, @@ -89,7 +90,7 @@ describe.each([ async ({ user, expectAddToLearningPathButton }) => { const { resource } = setup({ user }) await screen.findByRole("button", { - name: `Bookmark ${getReadableResourceType(resource?.resource_type)}`, + name: `Bookmark ${getReadableResourceType(resource?.resource_type as ResourceTypeEnum)}`, }) const addToLearningPathButton = screen.queryByRole("button", { @@ -147,7 +148,7 @@ describe.each([ user: { is_learning_path_editor: true, is_authenticated: true }, }) const addToUserListButton = await screen.findByRole("button", { - name: `Bookmark ${getReadableResourceType(resource?.resource_type)}`, + name: `Bookmark ${getReadableResourceType(resource?.resource_type as ResourceTypeEnum)}`, }) const addToLearningPathButton = await screen.findByRole("button", { name: "Add to Learning Path", @@ -170,7 +171,7 @@ describe.each([ user: { is_authenticated: false }, }) const addToUserListButton = await screen.findByRole("button", { - name: `Bookmark ${getReadableResourceType(resource?.resource_type)}`, + name: `Bookmark ${getReadableResourceType(resource?.resource_type as ResourceTypeEnum)}`, }) await user.click(addToUserListButton) const dialog = screen.getByRole("dialog")