-
Notifications
You must be signed in to change notification settings - Fork 9.5k
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.
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
core: remove dependency on WebInspector #6209
Conversation
"jsdom": "^9.12.0", | ||
"mocha": "^3.2.0", | ||
"npm-run-posix-or-windows": "^2.0.2", | ||
"nyc": "^11.6.0", | ||
"postinstall-prepare": "^1.0.1", | ||
"prettier": "^1.14.3", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
😮 ? mistake or are we moving to prettier?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
not used for anything other than toMatchInlineSnapshot
right now, you know I'd be on board though :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yeah sorry I read it to late in your comment above. But I think we should just move 😋 I've found a way to let travis fail without changing code on commit.
prettier --list-different '**/*.{js,json}
nodes.forEach(node => nodeMap.set(node.nodeId, node)); | ||
nodes.forEach(node => (node.parentNode = nodeMap.get(node.parentId))); | ||
// @ts-ignore - once passing through the filter, it's guaranteed to have a parent | ||
return nodes.filter(nodeInBody); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@brendankenny I was struggling with this in my own projects to. Is there no way to fix this with jsdoc?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I was struggling with this in my own projects to. Is there no way to fix this with jsdoc?
there actually is as of tsc 3.1! (in jsdoc. In ts I think it was working in 2.5 or 2.6)
The downside is it can be quite awkward for inline functions in filter()
, but this case isn't. I'm not sure how it will work in this instance since nodeInBody
is recursive, though.
Instead of nodeInBody
returning a boolean
, you instead make it one of typescripts type guards, telling the compiler that the boolean return value is actually asserting if the input is a certain type or not. The return annotation for nodeInBody
becomes @return {node is LH.Artifacts.FontSize.DomNodeWithParent}
. This should work since DomNodeWithParent
is a valid derived type of DomNodeMaybeWithParent
, though, again, not sure what happens with that recursive call.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
worked like a charm 👍
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@patrickhulce shouldn't we remove the ts-ignore if it worked?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I did. Maybe Github is being too smart for us and showing the original diff for the old convo? 🤷♂️
/** @type {Map<string, LH.Crdp.CSS.CSSStyleSheetHeader>} */ | ||
const stylesheets = new Map(); | ||
/** @param {LH.Crdp.CSS.StyleSheetAddedEvent} sheet */ | ||
const onStylesheetAdd = sheet => stylesheets.set(sheet.header.styleSheetId, sheet.header); | ||
passContext.driver.on('CSS.styleSheetAdded', onStylesheetAdd); | ||
|
||
const enableDOM = passContext.driver.sendCommand('DOM.enable'); | ||
const enableCSS = passContext.driver.sendCommand('CSS.enable'); | ||
await passContext.driver.sendCommand('DOM.enable'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
not that it's a big deal but we had a Promise.all in the previous version. Probably not worth the hassle
await Promise.all([passContext.driver.sendCommand('DOM.enable'), passContext.driver.sendCommand('CSS.enable')]);
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
sure might as well
*/ | ||
function getFontSizeInformation(driver, node) { | ||
return driver.sendCommand('CSS.getComputedStyleForNode', {nodeId: node.parentId}) | ||
function fetchComputedFontSize(driver, node) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
any reason why we are not asyncing this function?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
oh no real reason other than I didn't touch any of the logic, small diff whens don't mean much in this PR though 😆
totalTextLength, | ||
})); | ||
}); | ||
await passContext.driver.sendCommand('DOM.disable'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
same goes for this one that it was a Promise.all before
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ok, still working through this, but I think it looks pretty great (and generally applicable if we eventually have other audits needing to look at the style cascade for particular nodes). Some surface-level comments for you until I get back into this in the morning
nodes.forEach(node => nodeMap.set(node.nodeId, node)); | ||
nodes.forEach(node => (node.parentNode = nodeMap.get(node.parentId))); | ||
// @ts-ignore - once passing through the filter, it's guaranteed to have a parent | ||
return nodes.filter(nodeInBody); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I was struggling with this in my own projects to. Is there no way to fix this with jsdoc?
there actually is as of tsc 3.1! (in jsdoc. In ts I think it was working in 2.5 or 2.6)
The downside is it can be quite awkward for inline functions in filter()
, but this case isn't. I'm not sure how it will work in this instance since nodeInBody
is recursive, though.
Instead of nodeInBody
returning a boolean
, you instead make it one of typescripts type guards, telling the compiler that the boolean return value is actually asserting if the input is a certain type or not. The return annotation for nodeInBody
becomes @return {node is LH.Artifacts.FontSize.DomNodeWithParent}
. This should work since DomNodeWithParent
is a valid derived type of DomNodeMaybeWithParent
, though, again, not sure what happens with that recursive call.
const TEXT_NODE_TYPE = 3; | ||
|
||
/** @typedef {LH.Artifacts.FontSize['analyzedFailingNodesData'][0]} FailingNodeData */ | ||
/** @typedef {LH.Artifacts.FontSize.DomNodeMaybeWithParent} DomNodeMaybeWithParent*/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
since DomNodeMaybeWithParent
is just for this file, can we just make it a local typedef?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
also, I apologize for the type names in here I'm responsible for :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
microsoft/TypeScript#20077 seems to suggest inheritance plus recursive type doesn't work so well, I might need some help making it local :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
microsoft/TypeScript#20077 seems to suggest inheritance plus recursive type doesn't work so well,
ah yeah, that comment even has a reference from me talking about the limitiation in a different PR. Nevermind :)
|
||
/** @typedef {LH.Artifacts.FontSize['analyzedFailingNodesData'][0]} FailingNodeData */ | ||
/** @typedef {LH.Artifacts.FontSize.DomNodeMaybeWithParent} DomNodeMaybeWithParent*/ | ||
|
||
const Driver = require('../../driver.js'); // eslint-disable-line no-unused-vars |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
change to an import typedef while in here?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
return nodes.filter(nodeInBody); | ||
}); | ||
async function getAllNodesFromBody(driver) { | ||
const nodes = /** @type {DomNodeMaybeWithParent[]} */ (await driver.getNodesInDocument()); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
is this a bad assertion since parentId
might not be assigned on the underlying Protocol.DOM.Node
? I'm not sure what the alternative would be...make the Map
key on number|undefined
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yeah didn't even have to do that, just a fallback for parent id
nah you were right first time 👍
* @param {string} selector | ||
* @return {number} | ||
*/ | ||
function computeSelectorSpecificity(selector) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🤕
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't know how to interpret this emoji :) haha
} | ||
|
||
/** | ||
* |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
maybe a jsdoc string to explain what "direct" means in this context?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍 renamed the function a bit too
} | ||
|
||
/** | ||
* @param {Driver} driver | ||
* @param {LH.Artifacts.FontSize.DomNodeWithParent} node text node | ||
* @returns {Promise<?{fontSize: number, textLength: number, node: LH.Artifacts.FontSize.DomNodeWithParent}>} | ||
* @returns {Promise<?FailingNodeData>} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I guess it's unfortunate to call this FailingNodeData
since it might not be failing at this point. Would it lose precision elsewhere to rename it (NodeFontData
or whatever)?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
yeah I think that works fine 👍
node: /** @type {LH.Artifacts.FontSize.DomNodeWithParent} */ (node.parentNode), | ||
}; | ||
} catch (err) { | ||
Sentry.captureException(err); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
should we debounce this in keeping with #5994?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
thoughts on #6215 first? :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ok, I think I'm getting font-size.js
now :) Made a few more name suggestions to ease understanding of the flow. I'm continuing the review now, but wanted you to get some feedback
const TEXT_NODE_TYPE = 3; | ||
|
||
/** @typedef {LH.Artifacts.FontSize['analyzedFailingNodesData'][0]} FailingNodeData */ | ||
/** @typedef {LH.Artifacts.FontSize.DomNodeMaybeWithParent} DomNodeMaybeWithParent*/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
microsoft/TypeScript#20077 seems to suggest inheritance plus recursive type doesn't work so well,
ah yeah, that comment even has a reference from me talking about the limitiation in a different PR. Nevermind :)
numTypes += types.length; | ||
} | ||
|
||
return Math.min(9, numIDs) * 100 + Math.min(9, numClasses) * 10 + Math.min(9, numTypes); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
does !important
figure into things?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I've ignored !important
so far, think it's worth handling? I'll at least comment it's absence
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
think it's worth handling?
no idea :) I have used it in anger more than once, so if you really really mean to override a font-size with it, it would be annoying if lighthouse didn't recognize it.
Is it non-trivial to support?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is it non-trivial to support?
Kinda, we basically have to do this entire thing twice, once looking for !important and once not. The good news is that LH will still recognize the percentage of text going down. If you !important
'd a valid font size, the risk is that you !important
an also invalid font-size and we point to a rule that isn't really winning.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ha, I guess I hadn't completely thought through how this gatherer is working.
Of course we already have the computed style, so the css parsing is just to get the rule that caused that style. It's complicated enough that I had forgotten that by this point 😳 I'll add a comment on analyzeFailingNodes
} | ||
|
||
/** | ||
* Returns effective CSS rule for given CSS property. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Since this is just matching against font-size
, maybe mention that instead. "effective" also isn't immediately clear here, instead of something about how it's the css rule currently setting the style for the font-size
property
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
.catch(err => { | ||
require('../../../lib/sentry.js').captureException(err); | ||
return null; | ||
async function fetchComputedFontSize(driver, node) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
maybe rename node
to textNode
? Wasn't immediately clear why you'd want the computed style for the node's parent without that info :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done!
// @ts-ignore - font size property guaranteed to be returned in getComputedStyle | ||
fontSize: parseInt(fontSizeProperty.value, 10), | ||
textLength: getNodeTextLength(node), | ||
node: /** @type {LH.Artifacts.FontSize.DomNodeWithParent} */ (node.parentNode), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
cast not needed anymore, I don't think
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fixed
.sort((a, b) => b.textLength - a.textLength) | ||
.slice(0, MAX_NODES_ANALYZED); | ||
|
||
return {totalTextLength, visitedTextLength, failingTextLength, nodesToAnalyze}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
maybe failingNodes
to standardize on that terminology instead of nodesToAnalyze
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
well the nodesToAnalyze is the capped subset of failingNodes
so I like that they're named differently, failingNodesSubsetToAnalyze
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
well the nodesToAnalyze is the capped subset of failingNodes so I like that they're named differently, failingNodesSubsetToAnalyze?
failingNodesSubset
? cappedFailingNodes
? importantFailingNodes
? failingNodesToSource
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
* @param {Array<NodeFontData>} nodesToAnalyze | ||
*/ | ||
static async analyzeFailingNodes(driver, nodesToAnalyze) { | ||
const analysisPromises = nodesToAnalyze.map(async failingNode => { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It would be nice if there was an easier way to express the async behavior needed but still use forEach
0 | ||
); | ||
|
||
return {analyzedFailingNodesData, analyzedFailingTextLength}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
just analyzedFailingNodes
, maybe?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
well that's just based on the artifact shape name, feel strongly enough to change the artifact type and its usages up the chain?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
well that's just based on the artifact shape name, feel strongly enough to change the artifact type and its usages up the chain?
ha, I didn't before, but I think we maybe should. The Data
part is definitely redundant, but what do you think about sourcedFailingNodes
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ok, jk, font-size.js
is really the bulk of this
@@ -1,61 +0,0 @@ | |||
/** |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🎉 🎉 💃 🕺
.prettierrc
Outdated
@@ -0,0 +1,6 @@ | |||
printWidth: 100 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
at the very least this should be under lighthouse-core/test/
:P
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
;)
const driver = { | ||
on() {}, | ||
off() {}, | ||
sendCommand(command, params) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit: switch to async and can drop the Promise.resolve/reject
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
it('should identify inline styles', () => { | ||
const result = FontSizeGather.getEffectiveFontRule({inlineStyle}); | ||
expect(result).toMatchInlineSnapshot(` | ||
Object { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
IMO, it seems like
a) it would be shorter and easier to read as an inline object literal and an expect.toEqual
b) if reading isn't important, then could just be a regular snapshot (we have shorter ones :)
c) if these were going to occasionally update, maybe there's an advantage for snapshots' ease of use, but these shouldn't ever change
rather than bringing in prettier just for this feature
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@paulirish were you as stoked for inlinesnapshot all the things as I was or am I alone on this one :)
@hoten @exterkamp any opinions on snapshot testing?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I like snapshot testing. I can't figure out why one would want to do it inline, though... Seems creating the initial snapshot + approving updates to the snapshot become a lot more menial tasks.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@hoten the inline snapshot is still managed automatically (that's why we needed to update jest and add a prettier dependency), the benefit is you just get to see the result right next to the test instead of a separate file
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Snapshot testing all the way!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think inline snapshots introduce benefits to 1) testing consistency and 2) dev ergonomics
Consistency
The alternative we're weighing this against is expect.toEqual(obj)
. But obj
could be an object literal or it could just constructed some other way.. (expected = JSON.parse(JSON.stringify(thing)); expected.change = 42
)
Adopting inline snapshots brings consistency to this pattern and prioritizes a declarative view of the expected object. I think this encourages more reviewable tests.
Ergonomics
First time writing the assertion, just do expect(result).toMatchInlineSnapshot()
and the test will be updated with the current result. When making any changes that affect the expected value, updating them is just a matter of typing u
.
To be fair, we don't spend a lot of time writing expecting values, but these workflow improvements make authoring tests faster and easier. (Which encourages more tests).
(I looked across our usage of deepStrictEqual and the large majority are very small expected objects... like 1-3 lines tall)
TBH I think toEqual() continues to make sense if the obj literal is like 1-4ish lines tall. From 5-15 lines tall, inline snapshot I think wins for creating/updating advantages. And past 15 lines moving to a non-inline snapshot makes the most sense.
wdyt?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
First time writing the assertion, just do expect(result).toMatchInlineSnapshot() and the test will be updated with the current result. When making any changes that affect the expected value, updating them is just a matter of typing u.
this is actually why I think snapshots are great. I agree they might be overkill for smaller objects but should we really care? It's easier to always snapshot test just to make it consistent for contributers? Or at least go for something like always do inlinesnapshots for audit results & gatherer results?
}); | ||
|
||
it('should cap the craziness', () => { | ||
expect(compute('h1.a.b.c.d.e.f.g.h.i.j.k.l.m.n.o.p')).toEqual(91); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
😆
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ok, some more naming comments and then I swear I'm done with those :)
analyze
definitely confuses things (it confused me), as really the (font size) analysis has already been done at that point. It's more just finding the CSS rule responsible. I guess an argument could be made that that's "analysis", but it didn't really occur to me :)
getNodesInDocument() { | ||
return Promise.resolve(nodes); | ||
}, | ||
result = { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
nit: can just return since nothing else is being done to result
(IMO marginally more readable since you have to skip down pretty far to see it's just being returned, but, again, just a nit :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
numTypes += types.length; | ||
} | ||
|
||
return Math.min(9, numIDs) * 100 + Math.min(9, numClasses) * 10 + Math.min(9, numTypes); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ha, I guess I hadn't completely thought through how this gatherer is working.
Of course we already have the computed style, so the css parsing is just to get the rule that caused that style. It's complicated enough that I had forgotten that by this point 😳 I'll add a comment on analyzeFailingNodes
} | ||
|
||
/** | ||
* Finds the most specific directly matched CSS rule from the list. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
font-size rule
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
* @param {LH.Gatherer.PassContext['driver']} driver | ||
* @param {Array<NodeFontData>} nodesToAnalyze | ||
*/ | ||
static async analyzeFailingNodes(driver, nodesToAnalyze) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe we could make that clearer than "analyze", since it's not really doing any analysis. fetchSourceRule
describes itself well, so maybe something like fetchFailingNodeSourceRules
? sourceFailingNodes
? :)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
done
.sort((a, b) => b.textLength - a.textLength) | ||
.slice(0, MAX_NODES_ANALYZED); | ||
|
||
return {totalTextLength, visitedTextLength, failingTextLength, nodesToAnalyze}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
well the nodesToAnalyze is the capped subset of failingNodes so I like that they're named differently, failingNodesSubsetToAnalyze?
failingNodesSubset
? cappedFailingNodes
? importantFailingNodes
? failingNodesToSource
?
0 | ||
); | ||
|
||
return {analyzedFailingNodesData, analyzedFailingTextLength}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
well that's just based on the artifact shape name, feel strongly enough to change the artifact type and its usages up the chain?
ha, I didn't before, but I think we maybe should. The Data
part is definitely redundant, but what do you think about sourcedFailingNodes
?
"styleSheetId": undefined, | ||
"type": "Regular", | ||
} | ||
`); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
also
expect(result).toEqual({
cssProperties: [{
name: 'font-size',
value: 12,
}],
parentRule: {
origin: 'user-agent',
selectors: [{
text: 'body',
}],
},
styleSheetId: undefined,
type: 'Regular',
});
still way better here :P
OK now that we've tabled the artifact refactoring for another day I think the only outstanding item here is the If the effort to use inline snapshots is going to be this high for every change, the savings in maintaining large expectations will be negated by the effort in justifying their usage, so I'd like a holding rule either way :) I am pro-snapshots. It seems like @wardpeet is as well with @hoten @paulirish @exterkamp how do you rule? |
You can put me on the "against" list. I'm not convinced that small objects are a good candidate for snapshot testing. HTML, for sure, but the entire jest / snapshot overhead for this current use case can just be a deep object equality assertion. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's land this
🔔 🔔 🔔
👯♂️ 👯 🕺
🎉 🌮 🎉
Summary
A lot going on here but overall this PR removes the DevTools dependency on the font-size gatherer
toMatchInlineSnapshot
toMatchInlineSnapshot