Add unit tests for amp-layout#35157
Conversation
| import {createElementWithAttributes} from '#core/dom'; | ||
| import {Layout} from '#core/dom/layout'; | ||
|
|
||
| describes.realWin('amp-layout', {amp: true}, (env) => { |
There was a problem hiding this comment.
Can we move this to test/unit/builtins/test-amp-layout to mirror the tree structure?
There was a problem hiding this comment.
I was thinking the same.
Need to move all 3 builtins though, so figured i should leave it for a followup.
| 'amp-layout', | ||
| attrs | ||
| ); | ||
| ampLayout.innerHTML = innerHTML; |
There was a problem hiding this comment.
fyi, the more common way unit tests normally set up dom is with htmlFor:
amphtml/extensions/amp-iframe/1.0/test/test-amp-iframe.js
Lines 43 to 46 in d0fe752
There was a problem hiding this comment.
Sorry if this is obvious...but can you speak to the benefit of htmlFor vs. innerHTML?
There was a problem hiding this comment.
Good question! It's one of those things that has a bit of that "we've always done it this way" bias, so it's good you're asking.
Component unit tests tend to prefer htmlFor for static DOM that's even the slightest more complicated than single node, otherwise DOM APIs are preferred next. There's a stronger guarantee over innerHtml in both of those approaches that the markup your inserting is well formed, plus you also get auto formatting for html blocks.
In this specific test, things could be more readable by using htmlFor as well:
const ampLayout = html `
<amp-layout layout="fixed" width="100" height="100">
<span>hello</span>
<span>world</span>
</amp-layout>
`I personally tend to avoid innerHtml whenever there are other tools to accomplish the same goal, and often recommend the same for others, but it's not a hard and fast rule. There is rarely a benefit that I've seen to using it, and avoiding it is more critical in production code particularly in cases where XSS or performance may be a concern, but here it's more of a stylistic choice.
summary
Adds two basic unit tests for
<amp-layout>.The second test in particular would have caught #35154