Skip to content

Commit 944b9e7

Browse files
JDOM10JDOM10
committed
refactor(dom): Improve formatting and structure in ElementAssertion and helpers
1 parent f1ba82a commit 944b9e7

File tree

4 files changed

+96
-98
lines changed

4 files changed

+96
-98
lines changed

‎packages/dom/src/lib/ElementAssertion.ts‎

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -155,28 +155,27 @@ export class ElementAssertion<T extends Element> extends Assertion<T> {
155155
*
156156
* @returns The assertion instance.
157157
*/
158-
public toHaveFocus(): this {
158+
public toHaveFocus(): this {
159+
const hasFocus = this.actual === document.activeElement;
159160

160-
const hasFocus = this.actual === document.activeElement;
161-
162-
const error = new AssertionError({
163-
actual: this.actual,
164-
expected: document.activeElement,
165-
message: "Expected the element to be focused",
166-
});
161+
const error = new AssertionError({
162+
actual: this.actual,
163+
expected: document.activeElement,
164+
message: "Expected the element to be focused",
165+
});
167166

168-
const invertedError = new AssertionError({
169-
actual: this.actual,
170-
expected: document.activeElement,
171-
message: "Expected the element NOT to be focused",
172-
});
167+
const invertedError = new AssertionError({
168+
actual: this.actual,
169+
expected: document.activeElement,
170+
message: "Expected the element NOT to be focused",
171+
});
173172

174-
return this.execute({
175-
assertWhen: hasFocus,
176-
error,
177-
invertedError,
178-
});
179-
}
173+
return this.execute({
174+
assertWhen: hasFocus,
175+
error,
176+
invertedError,
177+
});
178+
}
180179

181180
/**
182181
* Asserts that the element has the specified CSS styles.
@@ -191,7 +190,6 @@ export class ElementAssertion<T extends Element> extends Assertion<T> {
191190
*/
192191

193192
public toHaveStyle(expected: Partial<CSSStyleDeclaration>): this {
194-
195193
const [expectedStyle, receivedStyle] = getExpectedAndReceivedStyles(this.actual, expected);
196194

197195
if (!expectedStyle || !receivedStyle) {
@@ -213,7 +211,7 @@ export class ElementAssertion<T extends Element> extends Assertion<T> {
213211
error,
214212
invertedError,
215213
});
216-
}
214+
}
217215

218216
/**
219217
* Asserts that the element has one or more of the specified CSS styles.
@@ -228,7 +226,6 @@ export class ElementAssertion<T extends Element> extends Assertion<T> {
228226
*/
229227

230228
public toHaveSomeStyle(expected: Partial<CSSStyleDeclaration>): this {
231-
232229
const [expectedStyle, elementProcessedStyle] = getExpectedAndReceivedStyles(this.actual, expected);
233230

234231
if (!expectedStyle || !elementProcessedStyle) {
@@ -248,8 +245,9 @@ export class ElementAssertion<T extends Element> extends Assertion<T> {
248245

249246
const invertedError = new AssertionError({
250247
actual: this.actual,
251-
// eslint-disable-next-line max-len
252-
message: `Expected the element NOT to match some of the following styles:\n${JSON.stringify(expectedStyle, null, 2)}`,
248+
249+
message: `Expected the element NOT to match some of the following styles:\n`
250+
+ `${JSON.stringify(expectedStyle, null, 2)}`,
253251
});
254252

255253
return this.execute({

‎packages/dom/src/lib/helpers/helpers.ts‎

Lines changed: 6 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ function normalizeStyles(css: Partial<CSSStyleDeclaration>): StyleDeclaration {
99

1010
const { expectedStyle } = Object.entries(css).reduce(
1111
(acc, [property, value]) => {
12-
1312
if (typeof value !== "string") {
1413
return acc;
1514
}
@@ -36,21 +35,18 @@ function normalizeStyles(css: Partial<CSSStyleDeclaration>): StyleDeclaration {
3635
return expectedStyle;
3736
}
3837

39-
function getReceivedStyle (props: string[], received: CSSStyleDeclaration): StyleDeclaration {
40-
38+
function getReceivedStyle(props: string[], received: CSSStyleDeclaration): StyleDeclaration {
4139
return props.reduce((acc, prop) => {
42-
4340
const actualStyle = received.getPropertyValue(prop).trim();
4441

4542
return actualStyle
46-
? { ...acc, [prop]: actualStyle }
47-
: acc;
48-
43+
? { ...acc, [prop]: actualStyle }
44+
: acc;
4945
}, {} as StyleDeclaration);
5046
}
5147

52-
export const getExpectedAndReceivedStyles =
53-
(actual: Element, expected: Partial<CSSStyleDeclaration>): StyleDeclaration[] => {
48+
export const getExpectedAndReceivedStyles
49+
= (actual: Element, expected: Partial<CSSStyleDeclaration>): StyleDeclaration[] => {
5450
if (!actual.ownerDocument.defaultView) {
5551
throw new Error("The element is not attached to a document with a default view.");
5652
}
@@ -72,4 +68,4 @@ export const getExpectedAndReceivedStyles =
7268
expectedStyle,
7369
elementProcessedStyle,
7470
];
75-
};
71+
};

‎packages/dom/test/unit/lib/ElementAssertion.test.tsx‎

Lines changed: 67 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ import { render } from "@testing-library/react";
33

44
import { ElementAssertion } from "../../../src/lib/ElementAssertion";
55

6-
import { FocusTestComponent } from "./fixtures/focusTestComponent";
76
import { HaveClassTest } from "./fixtures/HaveClassTest";
87
import { NestedElementsTest } from "./fixtures/NestedElementsTest";
98
import { SimpleTest } from "./fixtures/SimpleTest";
109
import { WithAttributesTest } from "./fixtures/WithAttributesTest";
10+
import { FocusTestComponent } from "./fixtures/focusTestComponent";
1111

1212
describe("[Unit] ElementAssertion.test.ts", () => {
1313
describe(".toBeInTheDocument", () => {
@@ -258,8 +258,8 @@ describe("[Unit] ElementAssertion.test.ts", () => {
258258
const test = new ElementAssertion(divTest);
259259

260260
expect(() => test.toHaveAllClasses("foo", "bar", "baz"))
261-
.toThrowError(AssertionError)
262-
.toHaveMessage('Expected the element to have all of these classes: "foo bar baz"');
261+
.toThrowError(AssertionError)
262+
.toHaveMessage('Expected the element to have all of these classes: "foo bar baz"');
263263

264264
expect(test.not.toHaveAllClasses("foo", "bar", "baz")).toBeEqual(test);
265265
});
@@ -300,11 +300,12 @@ describe("[Unit] ElementAssertion.test.ts", () => {
300300
context("when the element has the expected style", () => {
301301
it("returns the assertion instance", () => {
302302
const { getByTestId } = render(
303-
<div
304-
className="foo bar test"
305-
style={{ border: "1px solid black", color: "red", display: "flex" }}
306-
data-testid="test-div"
307-
/>);
303+
<div
304+
className="foo bar test"
305+
style={{ border: "1px solid black", color: "red", display: "flex" }}
306+
data-testid="test-div"
307+
/>,
308+
);
308309
const divTest = getByTestId("test-div");
309310
const test = new ElementAssertion(divTest);
310311

@@ -313,99 +314,102 @@ describe("[Unit] ElementAssertion.test.ts", () => {
313314
expect(() => test.not.toHaveStyle({ border: "1px solid black", color: "red", display: "flex" }))
314315
.toThrowError(AssertionError)
315316
.toHaveMessage(
316-
// eslint-disable-next-line max-len
317-
'Expected the element to NOT match the following style:\n{\n "border": "1px solid black",\n "color": "rgb(255, 0, 0)",\n "display": "flex"\n}',
317+
318+
"Expected the element to NOT match the following style:\n"
319+
+ '{\n "border": "1px solid black",\n "color": "rgb(255, 0, 0)",\n "display": "flex"\n}',
318320
);
319321
});
320322
});
321323

322324
context("when the element does not have the expected style", () => {
323-
it("throws an assertion error", () => {
324-
const { getByTestId } = render(
325-
<div
326-
className="foo bar test"
327-
style={{ color: "blue", display: "block" }}
328-
data-testid="test-div"
329-
/>,
330-
);
325+
it("throws an assertion error", () => {
326+
const { getByTestId } = render(
327+
<div
328+
className="foo bar test"
329+
style={{ color: "blue", display: "block" }}
330+
data-testid="test-div"
331+
/>,
332+
);
331333

332-
const divTest = getByTestId("test-div");
333-
const test = new ElementAssertion(divTest);
334+
const divTest = getByTestId("test-div");
335+
const test = new ElementAssertion(divTest);
334336

335-
expect(() => test.toHaveStyle(({ border: "1px solid black", color: "red", display: "flex" })))
336-
.toThrowError(AssertionError)
337-
.toHaveMessage(
338-
// eslint-disable-next-line max-len
339-
'Expected the element to match the following style:\n{\n "border": "1px solid black",\n "color": "rgb(255, 0, 0)",\n "display": "flex"\n}',
340-
);
337+
expect(() => test.toHaveStyle(({ border: "1px solid black", color: "red", display: "flex" })))
338+
.toThrowError(AssertionError)
339+
.toHaveMessage(
341340

342-
expect(test.not.toHaveStyle({ border: "1px solid black", color: "red", display: "flex" })).toBeEqual(test);
341+
"Expected the element to match the following style:\n"
342+
+ '{\n "border": "1px solid black",\n "color": "rgb(255, 0, 0)",\n "display": "flex"\n}',
343+
);
343344

344-
});
345+
expect(test.not.toHaveStyle({ border: "1px solid black", color: "red", display: "flex" })).toBeEqual(test);
346+
});
345347
});
346348
context("when the element partially match the style", () => {
347-
it("throws an assertion error", () => {
348-
const { getByTestId } = render(
349-
<div
350-
className="foo bar test"
351-
style={{ border: "1px solid black", color: "blue", display: "block" }}
352-
data-testid="test-div"
353-
/>,
354-
);
349+
it("throws an assertion error", () => {
350+
const { getByTestId } = render(
351+
<div
352+
className="foo bar test"
353+
style={{ border: "1px solid black", color: "blue", display: "block" }}
354+
data-testid="test-div"
355+
/>,
356+
);
355357

356-
const divTest = getByTestId("test-div");
357-
const test = new ElementAssertion(divTest);
358+
const divTest = getByTestId("test-div");
359+
const test = new ElementAssertion(divTest);
358360

359-
expect(() => test.toHaveStyle(({ color: "red", display: "flex" })))
360-
.toThrowError(AssertionError)
361-
.toHaveMessage(
362-
// eslint-disable-next-line max-len
363-
'Expected the element to match the following style:\n{\n "color": "rgb(255, 0, 0)",\n "display": "flex"\n}',
364-
);
361+
expect(() => test.toHaveStyle(({ color: "red", display: "flex" })))
362+
.toThrowError(AssertionError)
363+
.toHaveMessage(
365364

366-
expect(test.not.toHaveStyle({ border: "1px solid black", color: "red", display: "flex" })).toBeEqual(test);
365+
"Expected the element to match the following style:\n"
366+
+ '{\n "color": "rgb(255, 0, 0)",\n "display": "flex"\n}',
367+
);
367368

368-
});
369+
expect(test.not.toHaveStyle({ border: "1px solid black", color: "red", display: "flex" })).toBeEqual(test);
370+
});
369371
});
370372
});
371373

372374
describe(".toHaveSomeStyle", () => {
373375
context("when the element contains one or more expected styles", () => {
374376
it("returns the assertion instance", () => {
375377
const { getByTestId } = render(
376-
<div
377-
style={{ color: "blue", maxHeight: "3rem", width: "2rem" }}
378-
data-testid="test-div"
379-
/>,
380-
);
378+
<div
379+
style={{ color: "blue", maxHeight: "3rem", width: "2rem" }}
380+
data-testid="test-div"
381+
/>,
382+
);
381383
const divTest = getByTestId("test-div");
382384
const test = new ElementAssertion(divTest);
383385

384386
expect(test.toHaveSomeStyle({ color: "red", display: "flex", height: "3rem", width: "2rem" })).toBeEqual(test);
385387

386388
expect(() => test.not.toHaveSomeStyle({ color: "blue" }))
387-
.toThrowError(AssertionError)
388-
// eslint-disable-next-line max-len
389-
.toHaveMessage("Expected the element NOT to match some of the following styles:\n{\n \"color\": \"rgb(0, 0, 255)\"\n}");
389+
.toThrowError(AssertionError)
390+
391+
.toHaveMessage("Expected the element NOT to match some of the following styles:\n"
392+
+ "{\n \"color\": \"rgb(0, 0, 255)\"\n}");
390393
});
391394
});
392395

393396
context("when the element does not contain any of the expected styles", () => {
394397
it("throws an assertion error", () => {
395398
const { getByTestId } = render(
396-
<div
397-
className="foo bar test"
398-
style={{ border: "1px solid black", color: "blue", display: "block" }}
399-
data-testid="test-div"
400-
/>,
401-
);
399+
<div
400+
className="foo bar test"
401+
style={{ border: "1px solid black", color: "blue", display: "block" }}
402+
data-testid="test-div"
403+
/>,
404+
);
402405
const divTest = getByTestId("test-div");
403406
const test = new ElementAssertion(divTest);
404407

405408
expect(() => test.toHaveSomeStyle({ color: "red", display: "flex" }))
406-
.toThrowError(AssertionError)
407-
// eslint-disable-next-line max-len
408-
.toHaveMessage("Expected the element to match some of the following styles:\n{\n \"color\": \"rgb(255, 0, 0)\",\n \"display\": \"flex\"\n}");
409+
.toThrowError(AssertionError)
410+
411+
.toHaveMessage("Expected the element to match some of the following styles:\n"
412+
+ "{\n \"color\": \"rgb(255, 0, 0)\",\n \"display\": \"flex\"\n}");
409413

410414
expect(test.not.toHaveSomeStyle({ border: "1px solid blue", color: "red", display: "flex" })).toBeEqual(test);
411415
});

‎packages/dom/test/unit/lib/fixtures/focusTestComponent.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ReactElement } from "react";
1+
import type { ReactElement } from "react";
22

33
export function FocusTestComponent(): ReactElement {
44
return (

0 commit comments

Comments
 (0)