Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(testing): improve matchers feedback #211

Merged
merged 1 commit into from
May 26, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
fix(testing): improve matchers feedback
  • Loading branch information
aralroca committed May 26, 2024
commit a3b9239608f6bf06a16341789d20b65996ffb647
54 changes: 46 additions & 8 deletions packages/brisa/src/core/test/matchers/index.test.ts
Original file line number Diff line number Diff line change
@@ -50,7 +50,17 @@ describe("test matchers", () => {
expect(() =>
expect(div).toHaveAttribute("data-test", "test"),
).toThrowError(
`Expected: ${greenLog("test")}\nReceived: ${redLog("test-2")}`,
`Expected: ${greenLog('"test"')}\nReceived: ${redLog('"test-2"')}`,
);
});

it("should not pass if the element has not the attribute specifing the attribute", () => {
const div = document.createElement("div");

expect(() =>
expect(div).toHaveAttribute("data-test", "test"),
).toThrowError(
`Expected: ${greenLog('"test"')}\nReceived: ${redLog("null")}`,
);
});

@@ -80,7 +90,7 @@ describe("test matchers", () => {
const div = document.createElement("div");

expect(() => expect(div).toHaveTagName("span")).toThrowError(
"expected element to have tag name span",
`Expected: ${greenLog("span")}\nReceived: ${redLog("div")}`,
);
});
});
@@ -121,11 +131,20 @@ describe("test matchers", () => {
expect(shadowRoot).toHaveTextContent("test");
});

it("should fail if the element does not have the rendered text because have another one", () => {
const div = document.createElement("div");
div.textContent = "test-2";

expect(() => expect(div).toHaveTextContent("test")).toThrowError(
`Expected: ${greenLog('"test"')}\nReceived: ${redLog('"test-2"')}`,
);
});

it("should fail if the element does not have the rendered text", () => {
const div = document.createElement("div");

expect(() => expect(div).toHaveTextContent("test")).toThrowError(
`Expected: ${greenLog("test")}\nReceived: ${redLog('""')}`,
`Expected: ${greenLog('"test"')}\nReceived: ${redLog('""')}`,
);
});
});
@@ -182,11 +201,22 @@ describe("test matchers", () => {
expect(div).toContainTextContent("test");
});

it("should fail if the element does not contain the rendered text because have another one", () => {
const div = document.createElement("div");
div.textContent = "foo";

expect(() => expect(div).toContainTextContent("test")).toThrowError(
`Expected to contain: ${greenLog('"test"')}\nReceived: ${redLog(
'"foo"',
)}`,
);
});

it("should fail if the element does not contain the rendered text", () => {
const div = document.createElement("div");

expect(() => expect(div).toContainTextContent("test")).toThrowError(
`Expected to contain: ${greenLog("test")}\nReceived: ${redLog('""')}`,
`Expected to contain: ${greenLog('"test"')}\nReceived: ${redLog('""')}`,
);
});
});
@@ -204,7 +234,15 @@ describe("test matchers", () => {
div.style.color = "red";

expect(() => expect(div).toHaveStyle("color", "blue")).toThrowError(
"expected element to have style color with value blue",
`Expected: ${greenLog('"blue"')}\nReceived: ${redLog('"red"')}`,
);
});

it("should fail if the element does not have any style", () => {
const div = document.createElement("div");

expect(() => expect(div).toHaveStyle("color", "blue")).toThrowError(
`Expected: ${greenLog('"blue"')}\nReceived: ${redLog('""')}`,
);
});
});
@@ -222,7 +260,7 @@ describe("test matchers", () => {
const div = document.createElement("div");

expect(() => expect(div).toHaveClass("test")).toThrowError(
"expected element to have class test",
`Expected: ${greenLog('"test"')}\nReceived: ${redLog('""')}`,
);
});
});
@@ -239,7 +277,7 @@ describe("test matchers", () => {
const input = document.createElement("input");

expect(() => expect(input).toHaveValue("test")).toThrowError(
"expected input element to have value test",
`Expected: ${greenLog('"test"')}\nReceived: ${redLog('""')}`,
);
});

@@ -485,7 +523,7 @@ describe("test matchers", () => {
input.type = "text";

expect(() => expect(input).toBeInputTypeOf("number")).toThrowError(
"expected input element to be of type number",
`Expected: ${greenLog('"number"')}\nReceived: ${redLog('"text"')}`,
);
});

39 changes: 27 additions & 12 deletions packages/brisa/src/core/test/matchers/index.ts
Original file line number Diff line number Diff line change
@@ -22,11 +22,12 @@ function toHaveAttribute(received: unknown, attribute: string, value?: string) {
}

if (value !== undefined) {
const attr = received.getAttribute(attribute);
return {
pass: received.getAttribute(attribute) === value,
pass: attr === value,
message: () =>
`Expected: ${greenLog(value)}\nReceived: ${redLog(
received.getAttribute(attribute) ?? "",
`Expected: ${greenLog(`"${value}"`)}\nReceived: ${redLog(
attr ? `"${attr}"` : "null",
)}`,
};
}
@@ -46,7 +47,10 @@ function toHaveTagName(received: unknown, tagName: string) {

return {
pass: received.tagName.toLowerCase() === tagName.toLowerCase(),
message: () => `expected element to have tag name ${tagName}`,
message: () =>
`Expected: ${greenLog(tagName)}\nReceived: ${redLog(
received.tagName.toLowerCase(),
)}`,
};
}

@@ -64,8 +68,8 @@ function toHaveTextContent(received: unknown, text: string) {
return {
pass: received.textContent === text,
message: () =>
`Expected: ${greenLog(text)}\nReceived: ${redLog(
received.textContent || '""',
`Expected: ${greenLog(`"${text}"`)}\nReceived: ${redLog(
`"${received.textContent}"`,
)}`,
};
}
@@ -82,8 +86,8 @@ function toContainTextContent(received: unknown, text: string) {
typeof received.textContent === "string" &&
received.textContent.includes(text),
message: () =>
`Expected to contain: ${greenLog(text)}\nReceived: ${redLog(
received.textContent || '""',
`Expected to contain: ${greenLog(`"${text}"`)}\nReceived: ${redLog(
`"${received.textContent}"`,
)}`,
};
}
@@ -98,7 +102,9 @@ function toHaveStyle(received: unknown, style: string, value: string) {
return {
pass: received.style[style as any] === value,
message: () =>
`expected element to have style ${style} with value ${value}`,
`Expected: ${greenLog(`"${value}"`)}\nReceived: ${redLog(
`"${received.style[style as any]}"`,
)}`,
};
}

@@ -111,7 +117,10 @@ function toHaveClass(received: unknown, className: string) {

return {
pass: received.classList.contains(className),
message: () => `expected element to have class ${className}`,
message: () =>
`Expected: ${greenLog(`"${className}"`)}\nReceived: ${redLog(
`"${received.className}"`,
)}`,
};
}

@@ -124,7 +133,10 @@ function toHaveValue(received: unknown, value: string) {

return {
pass: received.value === value,
message: () => `expected input element to have value ${value}`,
message: () =>
`Expected: ${greenLog(`"${value}"`)}\nReceived: ${redLog(
`"${received.value}"`,
)}`,
};
}

@@ -244,7 +256,10 @@ function toBeInputTypeOf(received: unknown, type: InputType) {

return {
pass: received.type === type,
message: () => `expected input element to be of type ${type}`,
message: () =>
`Expected: ${greenLog(`"${type}"`)}\nReceived: ${redLog(
`"${received.type}"`,
)}`,
};
}