feat(dom): DOM - toHaveStyle #154
Conversation
|
|
||
| let expectedStyle = {} | ||
| let receivedStyle = {} | ||
| let props: string[] = [] |
There was a problem hiding this comment.
Let's try to refactor these above so that we handle mutability.
Use const instead of let
| Object.entries(css).map(([property, value]) => { | ||
| props = [...props, property]; | ||
|
|
||
| normalizer.style[property] = value; | ||
| const normalizedValue = window?.getComputedStyle(normalizer).getPropertyValue(property); | ||
|
|
||
| expectedStyle = { | ||
| ...expectedStyle, | ||
| [property]: normalizedValue?.trim(), | ||
|
|
||
| }; |
There was a problem hiding this comment.
Get this logic in a separate function in our helpers file. This help avoid dupllicated code below.
| normalizer.style[property] = value; | ||
| const normalizedValue = window.getComputedStyle(normalizer).getPropertyValue(property); | ||
|
|
||
| expectedStyle = { | ||
| ...expectedStyle, | ||
| [property]: normalizedValue.trim(), | ||
| }; | ||
|
|
||
| return expectedStyle; | ||
| }); | ||
| } |
There was a problem hiding this comment.
Remove duplicated code by moving it to a function.
| const isSameStyle = !!Object.keys(expectedStyle).length && | ||
| Object.entries(expectedStyle).every(([expectedProp, expectedValue]) => { | ||
| const isCustomProperty = expectedProp.startsWith('--') | ||
| const spellingVariants = [expectedProp] | ||
| expectedProp !== null; | ||
|
|
||
| if (!isCustomProperty) spellingVariants.push(expectedProp.toLowerCase()) | ||
| return spellingVariants.some( searchProp => | ||
| receivedStyle[searchProp] === expectedValue | ||
| ) | ||
| }) | ||
|
|
There was a problem hiding this comment.
Let's extract this in a new function to keep our code readable and simple.
There was a problem hiding this comment.
For tests, keep in mind we want to test the the error assertion and its message. Also the inverted error and its message. depending on the test add both assertions
| console.log("isSameStyle: ", isSameStyle) | ||
| const error = new AssertionError({ | ||
| actual: this.actual, | ||
| message: `Expected the element to have ${JSON.stringify(expectedStyle)} style`, |
There was a problem hiding this comment.
For a better messaging here, we can add the element in the string as well.
For example:
Expected
Added the toHaveStyle matcher.