Skip to content

Commit

Permalink
[THEMES-1744] Converted article-tag-block test suits to react testing…
Browse files Browse the repository at this point in the history 
… library (#1975)

* Converted test suits to react testing library

---------

Co-authored-by: Malavika Koppula <[email protected]>
  • Loading branch information
@malavikakoppula
malavikakoppula and Malavika Koppula authored May 22, 2024
1 parent a759274 commit d140cea
Show file tree
Hide file tree
Showing 2 changed files with 144 additions and 143 deletions.
2 changes: 1 addition & 1 deletion blocks/article-tag-block/features/tag/default.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export const ArticleTagItems = ({ content }) => {
const { taxonomy: { tags = [] } = {} } = content;

return tags.length ? (
<Stack className={BLOCK_CLASS_NAME} direction="horizontal" wrap="wrap" justification="center">
<Stack className={BLOCK_CLASS_NAME} direction="horizontal" wrap="wrap" justification="center" data-testid="article-container">
{tags.map((tag) => {
// fallback to "" because some tags don't have a slug
const { slug = "" } = tag;
Expand Down
285 changes: 143 additions & 142 deletions blocks/article-tag-block/features/tag/default.test.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,144 +1,145 @@
describe("This test is disabled", () => {
it("should succeed", () => {
expect(true);
import { render, screen } from "@testing-library/react"
import { useFusionContext } from "fusion:context";
import React from "react";
import ArticleTags from "./default";
import '@testing-library/jest-dom'

jest.mock("@wpmedia/arc-themes-components", () => ({
...jest.requireActual("@wpmedia/arc-themes-components"),
isServerSide: jest.fn().mockReturnValue(true),
LazyLoad: ({ children }) => children,
}));

describe("the article tag block", () => {
describe("when the global content has an array of tags in its taxonomy", () => {
const mockReturnData = {
arcSite: "the-sun",
globalContent: {
taxonomy: {
tags: [
{
description: "dogs",
slug: "dogs slug",
text: "dogs text",
},
{
description: "cats",
slug: "cats slug",
text: "cats text",
},
],
},
},
};

afterEach(() => {
jest.resetModules();
});

beforeEach(() => {
useFusionContext.mockReturnValue(mockReturnData);
});

test("should return null if lazyLoad on the server and not in the admin", async () => {
const config = {
lazyLoad: true,
};
render(<ArticleTags customFields={config} />);
const wrapper = await screen.findByRole("generic");
expect(wrapper).toBeEmptyDOMElement()
});

test("should render a parent container for the tags", () => {
render(<ArticleTags />);
const wrapper = screen.getByTestId("article-container");
expect(wrapper).toBeInTheDocument();
});

test("should render a pill for each tag in the array", () => {
render(<ArticleTags />);
const pillsArray = screen.getAllByRole("link");
expect(pillsArray.length).toEqual(2);
});

test("should render tags with their correct href", () => {
render(<ArticleTags />);
const pillsArray = screen.getAllByRole("link");
const href0 = pillsArray[0].getAttribute('href');
const href1 = pillsArray[1].getAttribute('href');
expect(href0).toBe("/tags/dogs%20slug/");
expect(href1).toBe("/tags/cats%20slug/");
});
});

describe("when the global content has a property called taxonomy which contains tags array with out slugs", () => {
afterEach(() => {
jest.resetModules();
});

beforeEach(() => {
useFusionContext.mockReturnValue({
arcSite: "the-sun",
globalContent: {
taxonomy: {
tags: [
{
description: "dogs",
text: "dogs text",
},
{
description: "cats",
text: "cats text",
},
],
},
},
});
});

it("should render pill components", () => {
render(<ArticleTags />)
expect(screen.getByText("dogs text")).not.toBeNull();
});
});
});

// import React from "react";
// import { mount } from "enzyme";
// import { useFusionContext } from "fusion:context";
// import ArticleTags from "./default";

// jest.mock("@wpmedia/arc-themes-components", () => ({
// ...jest.requireActual("@wpmedia/arc-themes-components"),
// isServerSide: jest.fn().mockReturnValue(true),
// LazyLoad: ({ children }) => children,
// }));

// describe("the article tag block", () => {
// describe("when the global content has an array of tags in its taxonomy", () => {
// const mockReturnData = {
// arcSite: "the-sun",
// globalContent: {
// taxonomy: {
// tags: [
// {
// description: "dogs",
// slug: "dogs slug",
// text: "dogs text",
// },
// {
// description: "cats",
// slug: "cats slug",
// text: "cats text",
// },
// ],
// },
// },
// };

// afterEach(() => {
// jest.resetModules();
// });

// beforeEach(() => {
// useFusionContext.mockReturnValue(mockReturnData);
// });

// it("should return null if lazyLoad on the server and not in the admin", () => {
// const config = {
// lazyLoad: true,
// };
// const wrapper = mount(<ArticleTags customFields={config} />);
// expect(wrapper.isEmptyRender()).toBe(true);
// });

// it("should render a parent container for the tags", () => {
// const wrapper = mount(<ArticleTags />);
// expect(wrapper.find("div.b-article-tag").length).toEqual(1);
// });

// it("should render a pill for each tag in the array", () => {
// const wrapper = mount(<ArticleTags />);
// expect(wrapper.children().find(".c-pill").length).toEqual(2);
// });

// it("should render tags with their correct href", () => {
// const wrapper = mount(<ArticleTags />);
// expect(wrapper.children().find(".c-pill").at(0).props().href).toBe("/tags/dogs%20slug/");
// expect(wrapper.children().find(".c-pill").at(1).props().href).toBe("/tags/cats%20slug/");
// });
// });

// describe("when the global content has a property called taxonomy which contains tags array with out slugs", () => {
// afterEach(() => {
// jest.resetModules();
// });

// beforeEach(() => {
// useFusionContext.mockReturnValue({
// arcSite: "the-sun",
// globalContent: {
// taxonomy: {
// tags: [
// {
// description: "dogs",
// text: "dogs text",
// },
// {
// description: "cats",
// text: "cats text",
// },
// ],
// },
// },
// });
// });

// it("should render pill components", () => {
// const wrapper = mount(<ArticleTags />);
// const tags = wrapper.find(".c-pill");
// expect(tags.length).toBe(2);
// });
// });

// describe("when the global content has an empty tags array", () => {
// afterEach(() => {
// jest.resetModules();
// });

// beforeEach(() => {
// useFusionContext.mockReturnValue({
// arcSite: "the-sun",
// globalContent: {
// taxonomy: {
// tags: [],
// },
// },
// });
// });

// it("should not render anything", () => {
// const wrapper = mount(<ArticleTags />);
// expect(wrapper.isEmptyRender()).toBe(true);
// });
// });

// describe("when the global content does not have a taxonomy property", () => {
// afterEach(() => {
// jest.resetModules();
// });

// beforeEach(() => {
// useFusionContext.mockReturnValue({
// arcSite: "the-sun",
// globalContent: {},
// });
// });

// it("should not render anything", () => {
// const wrapper = mount(<ArticleTags />);
// expect(wrapper.isEmptyRender()).toBe(true);
// });
// });
// });
describe("when the global content has an empty tags array", () => {
afterEach(() => {
jest.resetModules();
});

beforeEach(() => {
useFusionContext.mockReturnValue({
arcSite: "the-sun",
globalContent: {
taxonomy: {
tags: [],
},
},
});
});

it("should not render anything", async () => {
render(<ArticleTags />);
const wrapper = await screen.findByRole("generic");
expect(wrapper).toBeEmptyDOMElement()
});
});

describe("when the global content does not have a taxonomy property", () => {
afterEach(() => {
jest.resetModules();
});

beforeEach(() => {
useFusionContext.mockReturnValue({
arcSite: "the-sun",
globalContent: {},
});
});

it("should not render anything", async () => {
const { container } = render(<ArticleTags ItemLength={1} />);
expect(container).toBeEmptyDOMElement();
});
});
});

0 comments on commit d140cea

Please sign in to comment.