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.

Sign up for GitHub

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

Jump to bottom

Refactor CSS Style Declaration types to support latest TypeScript #773

Merged
merged 1 commit into from
Aug 1, 2020
Merged

Refactor CSS Style Declaration types to support latest TypeScript #773

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
18 changes: 9 additions & 9 deletions lib/assertions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,9 +24,9 @@ export interface ExistsOptions {
count: number;
}

export interface Dictionary<T> {
[key: string]: T;
}
type CSSStyleDeclarationProperty = keyof CSSStyleDeclaration;

type ActualCSSStyleDeclaration = Partial<Record<CSSStyleDeclarationProperty, unknown>>;
Comment on lines +27 to +29
Copy link
Contributor Author

@BarryThePenguin BarryThePenguin Jul 31, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

CSSStyleDeclaration requires all properties to be defined

Using Partial allows the assertions to define a subset of CSSStyleDeclaration properties

Using unknown here allows us to get around the issue of CSSStyleDeclaration having properties like readonly length: number; and readonly parentRule: CSSRule | null;

Really, they can be anything as they're passed in by tests as expectedProperties


export default class DOMAssertions {
constructor(
Expand Down Expand Up @@ -730,14 +730,14 @@ export default class DOMAssertions {
*/
hasPseudoElementStyle(
selector: string | null,
expected: Dictionary<string>,
expected: Record<string, string>,
message?: string
): DOMAssertions {
let element = this.findTargetElement();
if (!element) return this;

let computedStyle = window.getComputedStyle(element, selector);
let expectedProperties = Object.keys(expected) as [keyof CSSStyleDeclaration];
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[keyof CSSStyleDeclaration] indicates an array with a single item of keyof CSSStyleDeclaration

Is that deliberate?

let expectedProperties = Object.keys(expected) as CSSStyleDeclarationProperty[];
if (expectedProperties.length <= 0) {
throw new TypeError(
`Missing style expectations. There must be at least one style property in the passed in expectation object.`
Expand All @@ -747,7 +747,7 @@ export default class DOMAssertions {
let result = expectedProperties.every(
property => computedStyle[property] === expected[property]
);
let actual: Dictionary<string> = {};
let actual: ActualCSSStyleDeclaration = {};

expectedProperties.forEach(property => (actual[property] = computedStyle[property]));

Expand Down Expand Up @@ -800,15 +800,15 @@ export default class DOMAssertions {
*/
doesNotHavePseudoElementStyle(
selector: string | null,
expected: Dictionary<any>,
expected: Record<string, unknown>,
message: string
): DOMAssertions {
let element = this.findTargetElement();
if (!element) return this;

let computedStyle = window.getComputedStyle(element, selector);

let expectedProperties = Object.keys(expected) as [keyof CSSStyleDeclaration];
let expectedProperties = Object.keys(expected) as CSSStyleDeclarationProperty[];
if (expectedProperties.length <= 0) {
throw new TypeError(
`Missing style expectations. There must be at least one style property in the passed in expectation object.`
Expand All @@ -818,7 +818,7 @@ export default class DOMAssertions {
let result = expectedProperties.some(
property => computedStyle[property] !== expected[property]
);
let actual: Dictionary<any> = {};
let actual: ActualCSSStyleDeclaration = {};

expectedProperties.forEach(property => (actual[property] = computedStyle[property]));

Expand Down