ref(replays): Refactor tab filters to use the url bar to store data#39030
Conversation
github-actions
Bot
added
the
Scope: Frontend
| it('filters console breadcrumbs by search term', () => { | ||
| const result = filterBreadcrumbs(breadcrumbs, 'comp', []); | ||
| expect(result.length).toEqual(2); | ||
| it('should update the url on user input', () => { |
There was a problem hiding this comment.
this isn't really testing user input is it? it's more url params
There was a problem hiding this comment.
yeah.. that's very true. I'll rename it.
To test the user input properly we'd want to write an RTL test that loads up the react component i think.
| }, | ||
| }); | ||
|
|
||
| result.current.setSearchTerm('component'); |
There was a problem hiding this comment.
current comes out of RTL, it's a ref (?) i guess that holds the last output of the hook: https://testing-library.com/docs/react-testing-library/api/#renderhook
| /* eslint-disable react-hooks/exhaustive-deps */ | ||
| const stringyLogLevel = JSON.stringify(query.consoleLogLevel); | ||
| const logLevel = useMemo(() => decodeList(query.consoleLogLevel), [stringyLogLevel]); | ||
| /* eslint-enable react-hooks/exhaustive-deps */ |
There was a problem hiding this comment.
Which dep list would this rule yell at?
There was a problem hiding this comment.
I didn't want to pass in query.consoleLogLevel because it's a string[], so it'll be a new object often enough. Instead I was playing with shoving that array into JSON.stringify and then using that as the hook dep.
useMemo complains because it expected query.consoleLogLevel to be in the deps array.
| JSON.stringify(item.html).toLowerCase().includes(searchTerm), | ||
| }; | ||
|
|
||
| function useDomFilters({actions}: Options): Return { |
There was a problem hiding this comment.
Seems like a lot of similar code between this hook and the console filters
There was a problem hiding this comment.
yes, same structure in all three. I'll look at what can be done.
also, i'm mocking more data for tests. Not the most exciting but once we have the examples the next tests will be easier.
…ab (#39038) Updated the header to have a link that will open the Console tab, and auto-select the 'error' filter:  If there are no errors in the replay, then clicking the link will still open the Console tab, and set the filter to be `level=error`. Normally you wouldn't be able to set `level=error` yourself when there are no errors because the dropdown is populated only with values that exist in the data. Depends on #39030 Fixes #38861
2 participants
Refactor the Console, DOM & Network tabs so that their filter inputs put their state inside the url instead of inside a
useStatehook.This means users will be able to share their view of the page with each other, and also we'll be able to deep-link into some views.
#38861