diff --git a/packages/dom/test/unit/lib/ElementAssertion.test.tsx b/packages/dom/test/unit/lib/ElementAssertion.test.tsx index 804bc53..4682ecf 100644 --- a/packages/dom/test/unit/lib/ElementAssertion.test.tsx +++ b/packages/dom/test/unit/lib/ElementAssertion.test.tsx @@ -12,6 +12,17 @@ function TestComponent(): ReactElement { ); } +function ContainsTestComponent(): ReactElement { + return ( + + + + + + + ); +} + describe("[Unit] ElementAssertion.test.ts", () => { describe(".toBeInTheDocument", () => { context("when the element is in the document", () => { @@ -42,4 +53,81 @@ describe("[Unit] ElementAssertion.test.ts", () => { }); }); }); + + describe(".toContainElement", () => { + context("when the ancestor element contains the descendant element", () => { + it("returns the assertion instance", () => { + const { getByTestId } = render(); + + const grandparent = getByTestId("grandparent"); + const parent = getByTestId("parent"); + const child = getByTestId("child"); + const svgElement = getByTestId("svg-element"); + + const grandparentTest = new ElementAssertion(grandparent); + const parentTest = new ElementAssertion(parent); + + expect(grandparentTest.toContainElement(parent)); + expect(grandparentTest.toContainElement(child)); + expect(grandparentTest.toContainElement(svgElement)); + expect(parentTest.toContainElement(child)); + + expect(() => grandparentTest.not.toContainElement(parent)) + .toThrowError(AssertionError) + .toHaveMessage("Expected the container to NOT contain the element"); + + expect(() => grandparentTest.not.toContainElement(child)) + .toThrowError(AssertionError) + .toHaveMessage("Expected the container to NOT contain the element"); + + expect(() => grandparentTest.not.toContainElement(svgElement)) + .toThrowError(AssertionError) + .toHaveMessage("Expected the container to NOT contain the element"); + + expect(() => parentTest.not.toContainElement(child)) + .toThrowError(AssertionError) + .toHaveMessage("Expected the container to NOT contain the element"); + }); + }); + + context("when the descendant element does not contain the ancestor element", () => { + it("returns the assertion instance", () => { + const { getByTestId } = render(); + + const grandparent = getByTestId("grandparent"); + const parent = getByTestId("parent"); + const child = getByTestId("child"); + const svgElement = getByTestId("svg-element"); + + const parentTest = new ElementAssertion(parent); + const childTest = new ElementAssertion(child); + + expect(parentTest.not.toContainElement(grandparent)); + expect(parentTest.not.toContainElement(svgElement)); + expect(childTest.not.toContainElement(grandparent)); + expect(childTest.not.toContainElement(parent)); + expect(childTest.not.toContainElement(svgElement)); + + expect(() => parentTest.toContainElement(grandparent)) + .toThrowError(AssertionError) + .toHaveMessage("Expected the container to contain the element"); + + expect(() => parentTest.toContainElement(svgElement)) + .toThrowError(AssertionError) + .toHaveMessage("Expected the container to contain the element"); + + expect(() => childTest.toContainElement(grandparent)) + .toThrowError(AssertionError) + .toHaveMessage("Expected the container to contain the element"); + + expect(() => childTest.toContainElement(parent)) + .toThrowError(AssertionError) + .toHaveMessage("Expected the container to contain the element"); + + expect(() => childTest.toContainElement(svgElement)) + .toThrowError(AssertionError) + .toHaveMessage("Expected the container to contain the element"); + }); + }); + }); });