Skip to content

Commit

Permalink
Add unit test for call to action card
Browse files Browse the repository at this point in the history
  • Loading branch information
SmileyJames committed Jun 27, 2021
1 parent a500adb commit e384667
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 4 deletions.
2 changes: 1 addition & 1 deletion app/src/Home.js
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ const Home = () => {
imageSrc={image.src}
imageAlt={image.alt}
bodyText={description}
onCallToAction={() => onNewGame(index)}
onAction={() => onNewGame(index)}
buttonLabel={`Start ${name}`}
variant="secondary"
/>
Expand Down
31 changes: 31 additions & 0 deletions app/src/components/cta-card/CallToAction.test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import CallToActionCard from "./index";
import { render } from "@testing-library/react";
import userEvent from "@testing-library/user-event";

describe("Call to Action Card", () => {
test("renders image, header, body and clickable button with label", () => {
const onAction = jest.fn();
const { getByText, getByRole } = render(
<CallToActionCard
bodyText="big body baby"
headingText="Heading up the West Coast"
imageSrc="big_apple.png"
imageAlt="An apple that is big"
buttonLabel="Click Me"
onAction={onAction}
/>
)

expect(getByText("big body baby")).toBeInTheDocument();
expect(getByText("Heading up the West Coast")).toBeInTheDocument();

const image = getByRole("img");
expect(image).toHaveAttribute("src", "big_apple.png");
expect(image).toHaveAttribute("alt", "An apple that is big");

const button = getByRole("button")
expect(button).toHaveTextContent("Click Me")
userEvent.click(button);
expect(onAction).toHaveBeenCalled();
});
})
6 changes: 3 additions & 3 deletions app/src/components/cta-card/CallToActionCard.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const CallToActionCard = ({
imageAlt,
headingText,
bodyText,
onCallToAction = () => {},
onAction = () => {},
buttonLabel,
variant,
}) => (
Expand All @@ -30,8 +30,8 @@ const CallToActionCard = ({
<Text>{bodyText}</Text>
<Flex justifyContent="end" mt={3}>
<Button
onClick={onCallToAction}
onKeyPress={onCallToAction}
onClick={onAction}
onKeyPress={onAction}
variant={variant ?? "primary"}
>
{buttonLabel}
Expand Down

0 comments on commit e384667

Please sign in to comment.