feat(dom): DOM - ttoHaveClass , toHaveAllClasses and toHaveAnyClass

[fonsiher]

Added the toHaveClass matcher.

[ChristianSama]

Looks great @fonsiher. Thank you!

[JoseLion]

Looks good so far, but I think we can improve things if we create 3 assertions instead of one 🙂

[JoseLion]

What do you think about making more than one assertion instead of adding the options param? To me, it'll provide more readability if we have the following:

expect(elem).toHaveClass("w-full"); // single arg

expect(elem).toHaveAnyClass("w-full", "flex"); // variadic args

expect(elem).toHaveAllClasses("w-full", "flex", "gap-8"); // variadic args

[fonsiher]

Thanks @JoseLion this is actually a great idea to improve readability. I just added these new matches.

[suany0805]

Can we rename the PR to contain all the toHaveClass , toHaveAllClasses, toHaveAnyClass 👀 please?

[JoseLion]

Looking good! I left some comments and suggestions. Let me know if you have any questions 🙂

[JoseLion]

No need to add the hyphen. IDEs add it for us:

Suggested change

	* @param className - The class name to check.
	* @param className The class name to check.

[JoseLion]

Maybe we can pass a className prop to the <HaveClassTestComponent /> component to avoid using classList.add(..), wdyt?

[JoseLion]

Suggested change

	export function HaveClassTestComponent(): ReactElement {
	return (
	<div data-testid="classTest">
	{"Test text inside a div"}
	</div>
	);
	}
	export function HaveClassTestComponent(): ReactElement {
	return (
	<div data-testid="classTest">
	{"Test text inside a div"}
	</div>
	);
	}

[JoseLion]

Do we really need the data-testid? The getByTestID(..) query should be our last resort when finding elements. For instance, this element can be found with the query below instead:

getByText("Test text inside a div")