feat: use drawer instead of popover for book filters #24
Triggered via pull request
November 11, 2026 23:16
hestro
Status
Failure
Total duration
1m 3s
Artifacts
–
Annotations
10 errors
|
app/routes/books.test.tsx > BooksPage > shows the books and the number of results from the API:
frontend/app/hooks/useIsMobile.ts#L7
TestingLibraryElementError: Unable to find role="button" and name `/^Favorite /`
Ignored nodes: comments, script, style
<body>
<div>
<h2>
Unexpected Application Error!
</h2>
<h3
style="font-style: italic;"
>
window.matchMedia is not a function
</h3>
<pre
style="padding: 0.5rem; background-color: rgba(200, 200, 200, 0.5);"
>
TypeError: window.matchMedia is not a function
at getSnapshot (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/hooks/useIsMobile.ts:7:19)
at mountSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:8507:24)
at Object.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:28939:16)
at process.env.NODE_ENV.exports.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react@19.3.1/node_modules/react/cjs/react.development.js:1316:34)
at useMediaQuery (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/hooks/useIsMobile.ts:19:12)
at SearchBar (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/components/books/SearchBar/SearchBar.tsx:42:20)
at Object.react_stack_bottom_frame (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:28571:20)
at renderWithHooks (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:8030:22)
at updateFunctionComponent (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:10569:19)
at beginWork (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:12205:18)
</pre>
<p>
💿 Hey developer 👋
</p>
<p>
You can provide a way better UX than this when your app throws errors by providing your own
<code
style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
>
ErrorBoundary
</code>
or
<code
style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
>
errorElement
</code>
prop on your route.
</p>
</div>
</body>
Ignored nodes: comments, script, style
<body>
<div>
<h2>
Unexpected Application Error!
</h2>
<h3
style="font-style: italic;"
>
window.matchMedia is not a function
</h3>
<pre
style="padding: 0.5rem; background-color: rgba(200, 200, 200, 0.5);"
>
TypeError: window.matchMedia is not a function
at getSnapshot (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/hooks/useIsMobile.ts:7:19)
at mountSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:8507:24)
at Object.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:28939:16)
at process.env.NODE_ENV.exports.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react@19.3.1/node_modules/react/cjs/react.development.js:1316:34)
at useMediaQuery (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/f
|
|
app/routes/books.test.tsx > BooksPage > sends the search, filters, sort and page from the URL to the API:
frontend/app/hooks/useIsMobile.ts#L7
TestingLibraryElementError: Unable to find an element with the text: 15 results. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
Ignored nodes: comments, script, style
<body>
<div>
<h2>
Unexpected Application Error!
</h2>
<h3
style="font-style: italic;"
>
window.matchMedia is not a function
</h3>
<pre
style="padding: 0.5rem; background-color: rgba(200, 200, 200, 0.5);"
>
TypeError: window.matchMedia is not a function
at getSnapshot (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/hooks/useIsMobile.ts:7:19)
at mountSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:8507:24)
at Object.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:28939:16)
at process.env.NODE_ENV.exports.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react@19.3.1/node_modules/react/cjs/react.development.js:1316:34)
at useMediaQuery (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/hooks/useIsMobile.ts:19:12)
at SearchBar (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/components/books/SearchBar/SearchBar.tsx:42:20)
at Object.react_stack_bottom_frame (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:28571:20)
at renderWithHooks (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:8030:22)
at updateFunctionComponent (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:10569:19)
at beginWork (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:12205:18)
</pre>
<p>
💿 Hey developer 👋
</p>
<p>
You can provide a way better UX than this when your app throws errors by providing your own
<code
style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
>
ErrorBoundary
</code>
or
<code
style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
>
errorElement
</code>
prop on your route.
</p>
</div>
</body>
Ignored nodes: comments, script, style
<body>
<div>
<h2>
Unexpected Application Error!
</h2>
<h3
style="font-style: italic;"
>
window.matchMedia is not a function
</h3>
<pre
style="padding: 0.5rem; background-color: rgba(200, 200, 200, 0.5);"
>
TypeError: window.matchMedia is not a function
at getSnapshot (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/hooks/useIsMobile.ts:7:19)
at mountSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:8507:24)
at Object.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:28939:16)
at process.env.NODE_ENV.exports.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_mo
|
|
app/routes/books.test.tsx > BooksPage > tells the user when no books match the search:
frontend/app/hooks/useIsMobile.ts#L7
TestingLibraryElementError: Unable to find an element with the text: No books found for this search. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.
Ignored nodes: comments, script, style
<body>
<div>
<h2>
Unexpected Application Error!
</h2>
<h3
style="font-style: italic;"
>
window.matchMedia is not a function
</h3>
<pre
style="padding: 0.5rem; background-color: rgba(200, 200, 200, 0.5);"
>
TypeError: window.matchMedia is not a function
at getSnapshot (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/hooks/useIsMobile.ts:7:19)
at mountSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:8507:24)
at Object.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:28939:16)
at process.env.NODE_ENV.exports.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react@19.3.1/node_modules/react/cjs/react.development.js:1316:34)
at useMediaQuery (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/hooks/useIsMobile.ts:19:12)
at SearchBar (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/components/books/SearchBar/SearchBar.tsx:42:20)
at Object.react_stack_bottom_frame (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:28571:20)
at renderWithHooks (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:8030:22)
at updateFunctionComponent (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:10569:19)
at beginWork (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:12205:18)
</pre>
<p>
💿 Hey developer 👋
</p>
<p>
You can provide a way better UX than this when your app throws errors by providing your own
<code
style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
>
ErrorBoundary
</code>
or
<code
style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
>
errorElement
</code>
prop on your route.
</p>
</div>
</body>
Ignored nodes: comments, script, style
<body>
<div>
<h2>
Unexpected Application Error!
</h2>
<h3
style="font-style: italic;"
>
window.matchMedia is not a function
</h3>
<pre
style="padding: 0.5rem; background-color: rgba(200, 200, 200, 0.5);"
>
TypeError: window.matchMedia is not a function
at getSnapshot (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/hooks/useIsMobile.ts:7:19)
at mountSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:8507:24)
at Object.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:28939:16)
at process.env.NODE_ENV.exports.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Projec
|
|
app/routes/books.test.tsx > BooksPage > suggests books with similar titles when the search has a typo:
frontend/app/hooks/useIsMobile.ts#L7
TestingLibraryElementError: Unable to find role="heading" and name "Suggested books"
Ignored nodes: comments, script, style
<body>
<div>
<h2>
Unexpected Application Error!
</h2>
<h3
style="font-style: italic;"
>
window.matchMedia is not a function
</h3>
<pre
style="padding: 0.5rem; background-color: rgba(200, 200, 200, 0.5);"
>
TypeError: window.matchMedia is not a function
at getSnapshot (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/hooks/useIsMobile.ts:7:19)
at mountSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:8507:24)
at Object.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:28939:16)
at process.env.NODE_ENV.exports.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react@19.3.1/node_modules/react/cjs/react.development.js:1316:34)
at useMediaQuery (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/hooks/useIsMobile.ts:19:12)
at SearchBar (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/components/books/SearchBar/SearchBar.tsx:42:20)
at Object.react_stack_bottom_frame (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:28571:20)
at renderWithHooks (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:8030:22)
at updateFunctionComponent (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:10569:19)
at beginWork (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:12205:18)
</pre>
<p>
💿 Hey developer 👋
</p>
<p>
You can provide a way better UX than this when your app throws errors by providing your own
<code
style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
>
ErrorBoundary
</code>
or
<code
style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
>
errorElement
</code>
prop on your route.
</p>
</div>
</body>
Ignored nodes: comments, script, style
<body>
<div>
<h2>
Unexpected Application Error!
</h2>
<h3
style="font-style: italic;"
>
window.matchMedia is not a function
</h3>
<pre
style="padding: 0.5rem; background-color: rgba(200, 200, 200, 0.5);"
>
TypeError: window.matchMedia is not a function
at getSnapshot (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/hooks/useIsMobile.ts:7:19)
at mountSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:8507:24)
at Object.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:28939:16)
at process.env.NODE_ENV.exports.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react@19.3.1/node_modules/react/cjs/react.development.js:1316:34)
at useMediaQuery (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project
|
|
app/routes/books.test.tsx > BooksPage > pages and sorts the similar titles:
frontend/app/hooks/useIsMobile.ts#L7
TestingLibraryElementError: Unable to find role="button" and name `/^Favorite /`
Ignored nodes: comments, script, style
<body>
<div>
<h2>
Unexpected Application Error!
</h2>
<h3
style="font-style: italic;"
>
window.matchMedia is not a function
</h3>
<pre
style="padding: 0.5rem; background-color: rgba(200, 200, 200, 0.5);"
>
TypeError: window.matchMedia is not a function
at getSnapshot (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/hooks/useIsMobile.ts:7:19)
at mountSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:8507:24)
at Object.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:28939:16)
at process.env.NODE_ENV.exports.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react@19.3.1/node_modules/react/cjs/react.development.js:1316:34)
at useMediaQuery (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/hooks/useIsMobile.ts:19:12)
at SearchBar (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/components/books/SearchBar/SearchBar.tsx:42:20)
at Object.react_stack_bottom_frame (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:28571:20)
at renderWithHooks (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:8030:22)
at updateFunctionComponent (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:10569:19)
at beginWork (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:12205:18)
</pre>
<p>
💿 Hey developer 👋
</p>
<p>
You can provide a way better UX than this when your app throws errors by providing your own
<code
style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
>
ErrorBoundary
</code>
or
<code
style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
>
errorElement
</code>
prop on your route.
</p>
</div>
</body>
Ignored nodes: comments, script, style
<body>
<div>
<h2>
Unexpected Application Error!
</h2>
<h3
style="font-style: italic;"
>
window.matchMedia is not a function
</h3>
<pre
style="padding: 0.5rem; background-color: rgba(200, 200, 200, 0.5);"
>
TypeError: window.matchMedia is not a function
at getSnapshot (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/hooks/useIsMobile.ts:7:19)
at mountSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:8507:24)
at Object.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:28939:16)
at process.env.NODE_ENV.exports.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react@19.3.1/node_modules/react/cjs/react.development.js:1316:34)
at useMediaQuery (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/f
|
|
app/routes/books.test.tsx > BooksPage > suggests top-rated books with the same filters when the search has no results:
frontend/app/hooks/useIsMobile.ts#L7
TestingLibraryElementError: Unable to find role="heading" and name "Suggested books"
Ignored nodes: comments, script, style
<body>
<div>
<h2>
Unexpected Application Error!
</h2>
<h3
style="font-style: italic;"
>
window.matchMedia is not a function
</h3>
<pre
style="padding: 0.5rem; background-color: rgba(200, 200, 200, 0.5);"
>
TypeError: window.matchMedia is not a function
at getSnapshot (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/hooks/useIsMobile.ts:7:19)
at mountSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:8507:24)
at Object.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:28939:16)
at process.env.NODE_ENV.exports.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react@19.3.1/node_modules/react/cjs/react.development.js:1316:34)
at useMediaQuery (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/hooks/useIsMobile.ts:19:12)
at SearchBar (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/components/books/SearchBar/SearchBar.tsx:42:20)
at Object.react_stack_bottom_frame (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:28571:20)
at renderWithHooks (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:8030:22)
at updateFunctionComponent (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:10569:19)
at beginWork (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:12205:18)
</pre>
<p>
💿 Hey developer 👋
</p>
<p>
You can provide a way better UX than this when your app throws errors by providing your own
<code
style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
>
ErrorBoundary
</code>
or
<code
style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
>
errorElement
</code>
prop on your route.
</p>
</div>
</body>
Ignored nodes: comments, script, style
<body>
<div>
<h2>
Unexpected Application Error!
</h2>
<h3
style="font-style: italic;"
>
window.matchMedia is not a function
</h3>
<pre
style="padding: 0.5rem; background-color: rgba(200, 200, 200, 0.5);"
>
TypeError: window.matchMedia is not a function
at getSnapshot (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/hooks/useIsMobile.ts:7:19)
at mountSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:8507:24)
at Object.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:28939:16)
at process.env.NODE_ENV.exports.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react@19.3.1/node_modules/react/cjs/react.development.js:1316:34)
at useMediaQuery (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project
|
|
app/routes/books.test.tsx > BooksPage > suggests top-rated books without filters when the filters have no results:
frontend/app/hooks/useIsMobile.ts#L7
TestingLibraryElementError: Unable to find role="heading" and name "Suggested books"
Ignored nodes: comments, script, style
<body>
<div>
<h2>
Unexpected Application Error!
</h2>
<h3
style="font-style: italic;"
>
window.matchMedia is not a function
</h3>
<pre
style="padding: 0.5rem; background-color: rgba(200, 200, 200, 0.5);"
>
TypeError: window.matchMedia is not a function
at getSnapshot (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/hooks/useIsMobile.ts:7:19)
at mountSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:8507:24)
at Object.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:28939:16)
at process.env.NODE_ENV.exports.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react@19.3.1/node_modules/react/cjs/react.development.js:1316:34)
at useMediaQuery (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/hooks/useIsMobile.ts:19:12)
at SearchBar (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/components/books/SearchBar/SearchBar.tsx:42:20)
at Object.react_stack_bottom_frame (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:28571:20)
at renderWithHooks (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:8030:22)
at updateFunctionComponent (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:10569:19)
at beginWork (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:12205:18)
</pre>
<p>
💿 Hey developer 👋
</p>
<p>
You can provide a way better UX than this when your app throws errors by providing your own
<code
style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
>
ErrorBoundary
</code>
or
<code
style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
>
errorElement
</code>
prop on your route.
</p>
</div>
</body>
Ignored nodes: comments, script, style
<body>
<div>
<h2>
Unexpected Application Error!
</h2>
<h3
style="font-style: italic;"
>
window.matchMedia is not a function
</h3>
<pre
style="padding: 0.5rem; background-color: rgba(200, 200, 200, 0.5);"
>
TypeError: window.matchMedia is not a function
at getSnapshot (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/hooks/useIsMobile.ts:7:19)
at mountSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:8507:24)
at Object.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:28939:16)
at process.env.NODE_ENV.exports.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react@19.3.1/node_modules/react/cjs/react.development.js:1316:34)
at useMediaQuery (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project
|
|
app/routes/books.test.tsx > BooksPage > keeps the user's minimum number of ratings in the suggestions when it is higher:
frontend/app/hooks/useIsMobile.ts#L7
TestingLibraryElementError: Unable to find role="button" and name `/^Favorite /`
Ignored nodes: comments, script, style
<body>
<div>
<h2>
Unexpected Application Error!
</h2>
<h3
style="font-style: italic;"
>
window.matchMedia is not a function
</h3>
<pre
style="padding: 0.5rem; background-color: rgba(200, 200, 200, 0.5);"
>
TypeError: window.matchMedia is not a function
at getSnapshot (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/hooks/useIsMobile.ts:7:19)
at mountSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:8507:24)
at Object.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:28939:16)
at process.env.NODE_ENV.exports.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react@19.3.1/node_modules/react/cjs/react.development.js:1316:34)
at useMediaQuery (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/hooks/useIsMobile.ts:19:12)
at SearchBar (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/components/books/SearchBar/SearchBar.tsx:42:20)
at Object.react_stack_bottom_frame (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:28571:20)
at renderWithHooks (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:8030:22)
at updateFunctionComponent (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:10569:19)
at beginWork (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:12205:18)
</pre>
<p>
💿 Hey developer 👋
</p>
<p>
You can provide a way better UX than this when your app throws errors by providing your own
<code
style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
>
ErrorBoundary
</code>
or
<code
style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
>
errorElement
</code>
prop on your route.
</p>
</div>
</body>
Ignored nodes: comments, script, style
<body>
<div>
<h2>
Unexpected Application Error!
</h2>
<h3
style="font-style: italic;"
>
window.matchMedia is not a function
</h3>
<pre
style="padding: 0.5rem; background-color: rgba(200, 200, 200, 0.5);"
>
TypeError: window.matchMedia is not a function
at getSnapshot (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/hooks/useIsMobile.ts:7:19)
at mountSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:8507:24)
at Object.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:28939:16)
at process.env.NODE_ENV.exports.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react@19.3.1/node_modules/react/cjs/react.development.js:1316:34)
at useMediaQuery (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/f
|
|
app/routes/books.test.tsx > BooksPage > browses through the suggestions on a suggested book's details page:
frontend/app/hooks/useIsMobile.ts#L7
TestingLibraryElementError: Unable to find role="link" and name `/^Before They Are Hanged/`
Ignored nodes: comments, script, style
<body>
<div>
<h2>
Unexpected Application Error!
</h2>
<h3
style="font-style: italic;"
>
window.matchMedia is not a function
</h3>
<pre
style="padding: 0.5rem; background-color: rgba(200, 200, 200, 0.5);"
>
TypeError: window.matchMedia is not a function
at getSnapshot (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/hooks/useIsMobile.ts:7:19)
at mountSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:8507:24)
at Object.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:28939:16)
at process.env.NODE_ENV.exports.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react@19.3.1/node_modules/react/cjs/react.development.js:1316:34)
at useMediaQuery (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/hooks/useIsMobile.ts:19:12)
at SearchBar (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/components/books/SearchBar/SearchBar.tsx:42:20)
at Object.react_stack_bottom_frame (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:28571:20)
at renderWithHooks (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:8030:22)
at updateFunctionComponent (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:10569:19)
at beginWork (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:12205:18)
</pre>
<p>
💿 Hey developer 👋
</p>
<p>
You can provide a way better UX than this when your app throws errors by providing your own
<code
style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
>
ErrorBoundary
</code>
or
<code
style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
>
errorElement
</code>
prop on your route.
</p>
</div>
</body>
Ignored nodes: comments, script, style
<body>
<div>
<h2>
Unexpected Application Error!
</h2>
<h3
style="font-style: italic;"
>
window.matchMedia is not a function
</h3>
<pre
style="padding: 0.5rem; background-color: rgba(200, 200, 200, 0.5);"
>
TypeError: window.matchMedia is not a function
at getSnapshot (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/hooks/useIsMobile.ts:7:19)
at mountSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:8507:24)
at Object.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:28939:16)
at process.env.NODE_ENV.exports.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react@19.3.1/node_modules/react/cjs/react.development.js:1316:34)
at useMediaQuery (/home/martakam/actions-runner/_work/T37-Project-2/T37-
|
|
app/routes/books.test.tsx > BooksPage > shows an error message when the API request fails:
frontend/app/hooks/useIsMobile.ts#L7
TestingLibraryElementError: Unable to find role="alert"
Ignored nodes: comments, script, style
<body>
<div>
<h2>
Unexpected Application Error!
</h2>
<h3
style="font-style: italic;"
>
window.matchMedia is not a function
</h3>
<pre
style="padding: 0.5rem; background-color: rgba(200, 200, 200, 0.5);"
>
TypeError: window.matchMedia is not a function
at getSnapshot (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/hooks/useIsMobile.ts:7:19)
at mountSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:8507:24)
at Object.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:28939:16)
at process.env.NODE_ENV.exports.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react@19.3.1/node_modules/react/cjs/react.development.js:1316:34)
at useMediaQuery (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/hooks/useIsMobile.ts:19:12)
at SearchBar (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/components/books/SearchBar/SearchBar.tsx:42:20)
at Object.react_stack_bottom_frame (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:28571:20)
at renderWithHooks (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:8030:22)
at updateFunctionComponent (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:10569:19)
at beginWork (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:12205:18)
</pre>
<p>
💿 Hey developer 👋
</p>
<p>
You can provide a way better UX than this when your app throws errors by providing your own
<code
style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
>
ErrorBoundary
</code>
or
<code
style="padding: 2px 4px; background-color: rgba(200, 200, 200, 0.5);"
>
errorElement
</code>
prop on your route.
</p>
</div>
</body>
Ignored nodes: comments, script, style
<body>
<div>
<h2>
Unexpected Application Error!
</h2>
<h3
style="font-style: italic;"
>
window.matchMedia is not a function
</h3>
<pre
style="padding: 0.5rem; background-color: rgba(200, 200, 200, 0.5);"
>
TypeError: window.matchMedia is not a function
at getSnapshot (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/hooks/useIsMobile.ts:7:19)
at mountSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:8507:24)
at Object.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react-dom@19.3.1_react@19.3.1/node_modules/react-dom/cjs/react-dom-client.development.js:28939:16)
at process.env.NODE_ENV.exports.useSyncExternalStore (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/node_modules/.pnpm/react@19.3.1/node_modules/react/cjs/react.development.js:1316:34)
at useMediaQuery (/home/martakam/actions-runner/_work/T37-Project-2/T37-Project-2/frontend/app/hooks/useIsMo
|