Skip to content

Commit 256509f

Browse files
JDOM10JDOM10
committed
refactor(dom): Improve formatting and structure in ElementAssertion and helpers
1 parent f13a993 commit 256509f

4 files changed

Lines changed: 93 additions & 94 deletions

File tree

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

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

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

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

176-
return this.execute({
177-
assertWhen: hasFocus,
178-
error,
179-
invertedError,
180-
});
181-
}
175+
return this.execute({
176+
assertWhen: hasFocus,
177+
error,
178+
invertedError,
179+
});
180+
}
182181

183182
/**
184183
* Asserts that the element has the specified CSS styles.
@@ -193,7 +192,6 @@ export class ElementAssertion<T extends Element> extends Assertion<T> {
193192
*/
194193

195194
public toHaveStyle(expected: Partial<CSSStyleDeclaration>): this {
196-
197195
const [expectedStyle, receivedStyle] = getExpectedAndReceivedStyles(this.actual, expected);
198196

199197
if (!expectedStyle || !receivedStyle) {
@@ -215,7 +213,7 @@ export class ElementAssertion<T extends Element> extends Assertion<T> {
215213
error,
216214
invertedError,
217215
});
218-
}
216+
}
219217

220218
/**
221219
* Asserts that the element has one or more of the specified CSS styles.
@@ -230,7 +228,6 @@ export class ElementAssertion<T extends Element> extends Assertion<T> {
230228
*/
231229

232230
public toHaveSomeStyle(expected: Partial<CSSStyleDeclaration>): this {
233-
234231
const [expectedStyle, elementProcessedStyle] = getExpectedAndReceivedStyles(this.actual, expected);
235232

236233
if (!expectedStyle || !elementProcessedStyle) {
@@ -250,8 +247,9 @@ export class ElementAssertion<T extends Element> extends Assertion<T> {
250247

251248
const invertedError = new AssertionError({
252249
actual: this.actual,
253-
// eslint-disable-next-line max-len
254-
message: `Expected the element NOT to match some of the following styles:\n${JSON.stringify(expectedStyle, null, 2)}`,
250+
251+
message: `Expected the element NOT to match some of the following styles:\n`
252+
+ `${JSON.stringify(expectedStyle, null, 2)}`,
255253
});
256254

257255
return this.execute({

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

Lines changed: 3 additions & 7 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,16 +35,13 @@ 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

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

Lines changed: 67 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { NestedElementsTest } from "./fixtures/NestedElementsTest";
1010
import { SimpleTest } from "./fixtures/SimpleTest";
1111
import { WithAttributesTest } from "./fixtures/WithAttributesTest";
1212

13+
1314
describe("[Unit] ElementAssertion.test.ts", () => {
1415
describe(".toBeInTheDocument", () => {
1516
context("when the element is in the document", () => {
@@ -259,8 +260,8 @@ describe("[Unit] ElementAssertion.test.ts", () => {
259260
const test = new ElementAssertion(divTest);
260261

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

265266
expect(test.not.toHaveAllClasses("foo", "bar", "baz")).toBeEqual(test);
266267
});
@@ -301,11 +302,12 @@ describe("[Unit] ElementAssertion.test.ts", () => {
301302
context("when the element has the expected style", () => {
302303
it("returns the assertion instance", () => {
303304
const { getByTestId } = render(
304-
<div
305-
className="foo bar test"
306-
style={{ border: "1px solid black", color: "red", display: "flex" }}
307-
data-testid="test-div"
308-
/>);
305+
<div
306+
className="foo bar test"
307+
style={{ border: "1px solid black", color: "red", display: "flex" }}
308+
data-testid="test-div"
309+
/>,
310+
);
309311
const divTest = getByTestId("test-div");
310312
const test = new ElementAssertion(divTest);
311313

@@ -314,99 +316,102 @@ describe("[Unit] ElementAssertion.test.ts", () => {
314316
expect(() => test.not.toHaveStyle({ border: "1px solid black", color: "red", display: "flex" }))
315317
.toThrowError(AssertionError)
316318
.toHaveMessage(
317-
// eslint-disable-next-line max-len
318-
'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}',
319+
320+
"Expected the element to NOT match the following style:\n"
321+
+ '{\n "border": "1px solid black",\n "color": "rgb(255, 0, 0)",\n "display": "flex"\n}',
319322
);
320323
});
321324
});
322325

323326
context("when the element does not have the expected style", () => {
324-
it("throws an assertion error", () => {
325-
const { getByTestId } = render(
326-
<div
327-
className="foo bar test"
328-
style={{ color: "blue", display: "block" }}
329-
data-testid="test-div"
330-
/>,
331-
);
327+
it("throws an assertion error", () => {
328+
const { getByTestId } = render(
329+
<div
330+
className="foo bar test"
331+
style={{ color: "blue", display: "block" }}
332+
data-testid="test-div"
333+
/>,
334+
);
335+
336+
const divTest = getByTestId("test-div");
337+
const test = new ElementAssertion(divTest);
332338

333-
const divTest = getByTestId("test-div");
334-
const test = new ElementAssertion(divTest);
339+
expect(() => test.toHaveStyle(({ border: "1px solid black", color: "red", display: "flex" })))
340+
.toThrowError(AssertionError)
341+
.toHaveMessage(
335342

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

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

357-
const divTest = getByTestId("test-div");
358-
const test = new ElementAssertion(divTest);
360+
const divTest = getByTestId("test-div");
361+
const test = new ElementAssertion(divTest);
359362

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

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

369-
});
371+
expect(test.not.toHaveStyle({ border: "1px solid black", color: "red", display: "flex" })).toBeEqual(test);
372+
});
370373
});
371374
});
372375

373376
describe(".toHaveSomeStyle", () => {
374377
context("when the element contains one or more expected styles", () => {
375378
it("returns the assertion instance", () => {
376379
const { getByTestId } = render(
377-
<div
378-
style={{ color: "blue", maxHeight: "3rem", width: "2rem" }}
379-
data-testid="test-div"
380-
/>,
381-
);
380+
<div
381+
style={{ color: "blue", maxHeight: "3rem", width: "2rem" }}
382+
data-testid="test-div"
383+
/>,
384+
);
382385
const divTest = getByTestId("test-div");
383386
const test = new ElementAssertion(divTest);
384387

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

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

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

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

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

‎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)