webui: update test snapshots · tsiry-sandratraina.com/rockbox-zig@f28f614

+5 -1

webui/rockbox/.storybook/preview.tsx

··· 3 3 import Providers from "../src/Providers"; 4 4 import "../src/index.css"; 5 5 import { MemoryRouter, Routes, Route } from "react-router-dom"; 6 + import { mocks } from "../src/mocks"; 7 + import { MockedProvider } from "@apollo/client/testing"; 6 8 7 9 const preview: Preview = { 8 10 parameters: { ··· 31 33 reactRouterDecorator, 32 34 (Story) => ( 33 35 <Providers> 34 - <Story /> 36 + <MockedProvider mocks={mocks} addTypename={false}> 37 + <Story /> 38 + </MockedProvider> 35 39 </Providers> 36 40 ), 37 41 ];

+25 -21

webui/rockbox/src/Components/AlbumDetails/AlbumDetails.test.tsx

··· 3 3 import AlbumDetails from "./AlbumDetails"; 4 4 import { tracks } from "./mocks"; 5 5 import { MemoryRouter } from "react-router-dom"; 6 + import { MockedProvider } from "@apollo/client/testing"; 7 + import { mocks } from "../../mocks"; 6 8 7 9 describe("AlbumDetails", () => { 8 10 it("should render", () => { ··· 13 15 const onUnlike = vi.fn(); 14 16 const { container } = render( 15 17 <MemoryRouter initialEntries={["/"]}> 16 - <AlbumDetails 17 - onGoBack={onGoBack} 18 - onLike={onLike} 19 - onPlayAll={onPlayAll} 20 - onShuffleAll={onShuffleAll} 21 - onUnlike={onUnlike} 22 - tracks={tracks} 23 - album={{ 24 - id: "1", 25 - title: "One Cold Night (Live)", 26 - artist: "Seether", 27 - year: 2006, 28 - albumArt: 29 - "https://resources.tidal.com/images/f6f5f0a6/dc95/4561/9ca6/6ba1e0f6a062/320x320.jpg", 30 - artistId: "1", 31 - md5: "md5", 32 - yearString: "2006", 33 - tracks: [], 34 - }} 35 - volumes={[]} 36 - /> 18 + <MockedProvider mocks={mocks}> 19 + <AlbumDetails 20 + onGoBack={onGoBack} 21 + onLike={onLike} 22 + onPlayAll={onPlayAll} 23 + onShuffleAll={onShuffleAll} 24 + onUnlike={onUnlike} 25 + tracks={tracks} 26 + album={{ 27 + id: "1", 28 + title: "One Cold Night (Live)", 29 + artist: "Seether", 30 + year: 2006, 31 + albumArt: 32 + "https://resources.tidal.com/images/f6f5f0a6/dc95/4561/9ca6/6ba1e0f6a062/320x320.jpg", 33 + artistId: "1", 34 + md5: "md5", 35 + yearString: "2006", 36 + tracks: [], 37 + }} 38 + volumes={[]} 39 + /> 40 + </MockedProvider> 37 41 </MemoryRouter> 38 42 ); 39 43 expect(container).toMatchSnapshot();

+19 -62

webui/rockbox/src/Components/AlbumDetails/__snapshots__/AlbumDetails.test.tsx.snap

··· 177 177 class="css-10asy2d" 178 178 > 179 179 <svg 180 + fill="none" 180 181 height="32" 181 - viewBox="0 0 512 512" 182 182 width="32" 183 183 xmlns="http://www.w3.org/2000/svg" 184 184 > 185 - <title> 186 - Pause 187 - </title> 188 185 <path 189 - d="M208 432h-48a16 16 0 0 1-16-16V96a16 16 0 0 1 16-16h48a16 16 0 0 1 16 16v320a16 16 0 0 1-16 16zm144 0h-48a16 16 0 0 1-16-16V96a16 16 0 0 1 16-16h48a16 16 0 0 1 16 16v320a16 16 0 0 1-16 16z" 186 + d="M10.657 27a2.842 2.842 0 0 1-1.258-.292C8.536 26.283 8 25.458 8 24.563V6.438c0-.899.536-1.721 1.399-2.146a2.856 2.856 0 0 1 2.571.028l17.817 9.273c.755.411 1.213 1.131 1.213 1.906 0 .774-.458 1.495-1.213 1.906l-17.82 9.275a2.846 2.846 0 0 1-1.31.32Z" 190 187 style="fill: #000;" 191 188 /> 192 189 </svg> ··· 231 228 <div 232 229 class="css-frud38" 233 230 > 234 - <img 235 - alt="Album cover" 236 - class="css-31cka" 237 - src="https://resources.tidal.com/images/fe6787d5/4ba5/4d3e/8576/48943ee6a768/320x320.jpg" 238 - /> 239 231 <div 240 - class="css-rbpzuh" 232 + class="css-4ijxew" 241 233 > 242 - <div 243 - class="css-1cojt9j" 234 + <svg 235 + height="28" 236 + viewBox="0 0 24 24" 237 + width="28" 238 + xmlns="http://www.w3.org/2000/svg" 244 239 > 245 - Drankin N Smokin 246 - </div> 240 + <path 241 + d="M8.1 4.65v11.26a3.45 3.45 0 1 0 1.5 2.84V5.85l10.2-2.36v10.62A3.45 3.45 0 1 0 21.3 17V1.61Zm-2 16a2 2 0 1 1 2-2 2 2 0 0 1-1.95 2.05Zm11.7-1.8a1.95 1.95 0 1 1 2-1.85 2 2 0 0 1-1.95 1.9Z" 242 + fill="#b1b2b5" 243 + /> 244 + </svg> 245 + </div> 246 + <div 247 + class="css-rbpzuh" 248 + > 247 249 <div 248 - style="display: flex; flex-direction: row; align-items: center; justify-content: space-between;" 250 + style="color: rgb(177, 178, 181); text-align: center;" 249 251 > 250 - <div 251 - class="css-1jnbdma" 252 - > 253 - 02:03 254 - </div> 255 - <div 256 - class="css-bdl275" 257 - > 258 - Future, Lil Uzi Vert 259 - <span 260 - class="css-c9cgcr" 261 - > 262 - - 263 - </span> 264 - Pluto x Baby Pluto (Deluxe) 265 - </div> 266 - <div 267 - class="css-1jnbdma" 268 - > 269 - 04:15 270 - </div> 271 - </div> 272 - <div 273 - class="css-1n7uud4" 274 - > 275 - <div 276 - aria-label="48% Loaded" 277 - aria-valuemax="100" 278 - aria-valuemin="0" 279 - aria-valuenow="48.3219508605943" 280 - class="" 281 - data-baseweb="progress-bar" 282 - role="progressbar" 283 - > 284 - <div 285 - class="" 286 - > 287 - <div 288 - class="" 289 - > 290 - <div 291 - class="" 292 - /> 293 - </div> 294 - </div> 295 - </div> 252 + No track playing 296 253 </div> 297 254 </div> 298 255 </div>

+13 -9

webui/rockbox/src/Components/Albums/Albums.test.tsx

··· 4 4 import { albums } from "./mocks"; 5 5 import Providers from "../../Providers"; 6 6 import { MemoryRouter } from "react-router-dom"; 7 + import { MockedProvider } from "@apollo/client/testing"; 8 + import { mocks } from "../../mocks"; 7 9 8 10 describe("Albums", () => { 9 11 it("should render", () => { ··· 13 15 const onLike = vi.fn(); 14 16 const { container } = render( 15 17 <MemoryRouter initialEntries={["/"]}> 16 - <Providers> 17 - <Albums 18 - albums={albums} 19 - onPlay={onPlay} 20 - onFilter={onFilter} 21 - onUnLike={onUnLike} 22 - onLike={onLike} 23 - /> 24 - </Providers> 18 + <MockedProvider mocks={mocks}> 19 + <Providers> 20 + <Albums 21 + albums={albums} 22 + onPlay={onPlay} 23 + onFilter={onFilter} 24 + onUnLike={onUnLike} 25 + onLike={onLike} 26 + /> 27 + </Providers> 28 + </MockedProvider> 25 29 </MemoryRouter> 26 30 ); 27 31 expect(container).toMatchSnapshot();

+70 -113

webui/rockbox/src/Components/Albums/__snapshots__/Albums.test.tsx.snap

··· 180 180 class="css-10asy2d" 181 181 > 182 182 <svg 183 + fill="none" 183 184 height="32" 184 - viewBox="0 0 512 512" 185 185 width="32" 186 186 xmlns="http://www.w3.org/2000/svg" 187 187 > 188 - <title> 189 - Pause 190 - </title> 191 188 <path 192 - d="M208 432h-48a16 16 0 0 1-16-16V96a16 16 0 0 1 16-16h48a16 16 0 0 1 16 16v320a16 16 0 0 1-16 16zm144 0h-48a16 16 0 0 1-16-16V96a16 16 0 0 1 16-16h48a16 16 0 0 1 16 16v320a16 16 0 0 1-16 16z" 189 + d="M10.657 27a2.842 2.842 0 0 1-1.258-.292C8.536 26.283 8 25.458 8 24.563V6.438c0-.899.536-1.721 1.399-2.146a2.856 2.856 0 0 1 2.571.028l17.817 9.273c.755.411 1.213 1.131 1.213 1.906 0 .774-.458 1.495-1.213 1.906l-17.82 9.275a2.846 2.846 0 0 1-1.31.32Z" 193 190 style="fill: #000;" 194 191 /> 195 192 </svg> ··· 234 231 <div 235 232 class="css-frud38" 236 233 > 237 - <img 238 - alt="Album cover" 239 - class="css-31cka" 240 - src="https://resources.tidal.com/images/fe6787d5/4ba5/4d3e/8576/48943ee6a768/320x320.jpg" 241 - /> 242 234 <div 243 - class="css-rbpzuh" 235 + class="css-4ijxew" 244 236 > 245 - <div 246 - class="css-1cojt9j" 247 - > 248 - Drankin N Smokin 249 - </div> 250 - <div 251 - style="display: flex; flex-direction: row; align-items: center; justify-content: space-between;" 237 + <svg 238 + height="28" 239 + viewBox="0 0 24 24" 240 + width="28" 241 + xmlns="http://www.w3.org/2000/svg" 252 242 > 253 - <div 254 - class="css-1jnbdma" 255 - > 256 - 02:03 257 - </div> 258 - <div 259 - class="css-bdl275" 260 - > 261 - Future, Lil Uzi Vert 262 - <span 263 - class="css-c9cgcr" 264 - > 265 - - 266 - </span> 267 - Pluto x Baby Pluto (Deluxe) 268 - </div> 269 - <div 270 - class="css-1jnbdma" 271 - > 272 - 04:15 273 - </div> 274 - </div> 243 + <path 244 + d="M8.1 4.65v11.26a3.45 3.45 0 1 0 1.5 2.84V5.85l10.2-2.36v10.62A3.45 3.45 0 1 0 21.3 17V1.61Zm-2 16a2 2 0 1 1 2-2 2 2 0 0 1-1.95 2.05Zm11.7-1.8a1.95 1.95 0 1 1 2-1.85 2 2 0 0 1-1.95 1.9Z" 245 + fill="#b1b2b5" 246 + /> 247 + </svg> 248 + </div> 249 + <div 250 + class="css-rbpzuh" 251 + > 275 252 <div 276 - class="css-1n7uud4" 253 + style="color: rgb(177, 178, 181); text-align: center;" 277 254 > 278 - <div 279 - aria-label="48% Loaded" 280 - aria-valuemax="100" 281 - aria-valuemin="0" 282 - aria-valuenow="48.3219508605943" 283 - class="ae" 284 - data-baseweb="progress-bar" 285 - role="progressbar" 286 - > 287 - <div 288 - class="af ag ah ai aj" 289 - > 290 - <div 291 - class="ak al am an ao ap aq ar" 292 - > 293 - <div 294 - class="ak al am an as at ae au av" 295 - /> 296 - </div> 297 - </div> 298 - </div> 255 + No track playing 299 256 </div> 300 257 </div> 301 258 </div> ··· 334 291 class="css-16zcn16" 335 292 > 336 293 <div 337 - class="aw af ar ax ay az b0 b1 b2 b3 b4 b5 b6 b7 b8 b9 ba bb bc bd be bf bg bh bi bj bk bl bm bn bo" 294 + class="ae af ag ah ai aj ak al am an ao ap aq ar as at au av aw ax ay az b0 b1 b2 b3 b4 b5 b6 b7 b8" 338 295 data-baseweb="input" 339 296 > 340 297 <div 341 - class="af bp bq br b7 b8 bd be bf bg bn bs bt bl bu bv" 298 + class="af b9 ba bb ar as ax ay az b0 b7 bc bd b5 be bf" 342 299 > 343 300 <svg 344 301 data-test="icon-ActionActiveSearch" ··· 356 313 </svg> 357 314 </div> 358 315 <div 359 - class="af ae bw b7 b8 bd be bf bg bt bl" 316 + class="af bg bh ar as ax ay az b0 bd b5" 360 317 data-baseweb="base-input" 361 318 > 362 319 <input 363 320 aria-invalid="false" 364 321 aria-required="false" 365 322 autocomplete="on" 366 - class="aw bl bx by bz c0 c1 c2 c3 c4 c5 ae c6 c7 c8 c9 ca cb bm cc bd cd bf bg ce cf cg" 323 + class="ae b5 bi bj bk bl bm bn bo bp bq bg br bs bt bu bv bw b6 bx ax by az b0 bz c0 c1" 367 324 inputmode="text" 368 325 name="filter" 369 326 placeholder="Search albums" ··· 377 334 style="margin-bottom: 100px;" 378 335 > 379 336 <div 380 - class="ch ci" 337 + class="c2 c3" 381 338 > 382 339 <div 383 - class="aw af cj ci ck cl cm cn co cp cq cr cs ct cu cv cw cx cy cz" 340 + class="ae af c4 c3 c5 c6 c7 c8 c9 ca cb cc cd ce cf cg ch ci cj ck" 384 341 > 385 342 <div 386 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 343 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 387 344 > 388 345 <div 389 346 style="position: relative; width: 100%;" ··· 509 466 </div> 510 467 </div> 511 468 <div 512 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 469 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 513 470 > 514 471 <div 515 472 style="position: relative; width: 100%;" ··· 635 592 </div> 636 593 </div> 637 594 <div 638 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 595 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 639 596 > 640 597 <div 641 598 style="position: relative; width: 100%;" ··· 761 718 </div> 762 719 </div> 763 720 <div 764 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 721 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 765 722 > 766 723 <div 767 724 style="position: relative; width: 100%;" ··· 887 844 </div> 888 845 </div> 889 846 <div 890 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 847 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 891 848 > 892 849 <div 893 850 style="position: relative; width: 100%;" ··· 1013 970 </div> 1014 971 </div> 1015 972 <div 1016 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 973 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 1017 974 > 1018 975 <div 1019 976 style="position: relative; width: 100%;" ··· 1139 1096 </div> 1140 1097 </div> 1141 1098 <div 1142 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 1099 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 1143 1100 > 1144 1101 <div 1145 1102 style="position: relative; width: 100%;" ··· 1265 1222 </div> 1266 1223 </div> 1267 1224 <div 1268 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 1225 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 1269 1226 > 1270 1227 <div 1271 1228 style="position: relative; width: 100%;" ··· 1391 1348 </div> 1392 1349 </div> 1393 1350 <div 1394 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 1351 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 1395 1352 > 1396 1353 <div 1397 1354 style="position: relative; width: 100%;" ··· 1517 1474 </div> 1518 1475 </div> 1519 1476 <div 1520 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 1477 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 1521 1478 > 1522 1479 <div 1523 1480 style="position: relative; width: 100%;" ··· 1643 1600 </div> 1644 1601 </div> 1645 1602 <div 1646 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 1603 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 1647 1604 > 1648 1605 <div 1649 1606 style="position: relative; width: 100%;" ··· 1769 1726 </div> 1770 1727 </div> 1771 1728 <div 1772 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 1729 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 1773 1730 > 1774 1731 <div 1775 1732 style="position: relative; width: 100%;" ··· 1895 1852 </div> 1896 1853 </div> 1897 1854 <div 1898 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 1855 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 1899 1856 > 1900 1857 <div 1901 1858 style="position: relative; width: 100%;" ··· 2021 1978 </div> 2022 1979 </div> 2023 1980 <div 2024 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 1981 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 2025 1982 > 2026 1983 <div 2027 1984 style="position: relative; width: 100%;" ··· 2147 2104 </div> 2148 2105 </div> 2149 2106 <div 2150 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 2107 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 2151 2108 > 2152 2109 <div 2153 2110 style="position: relative; width: 100%;" ··· 2273 2230 </div> 2274 2231 </div> 2275 2232 <div 2276 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 2233 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 2277 2234 > 2278 2235 <div 2279 2236 style="position: relative; width: 100%;" ··· 2399 2356 </div> 2400 2357 </div> 2401 2358 <div 2402 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 2359 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 2403 2360 > 2404 2361 <div 2405 2362 style="position: relative; width: 100%;" ··· 2525 2482 </div> 2526 2483 </div> 2527 2484 <div 2528 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 2485 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 2529 2486 > 2530 2487 <div 2531 2488 style="position: relative; width: 100%;" ··· 2651 2608 </div> 2652 2609 </div> 2653 2610 <div 2654 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 2611 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 2655 2612 > 2656 2613 <div 2657 2614 style="position: relative; width: 100%;" ··· 2777 2734 </div> 2778 2735 </div> 2779 2736 <div 2780 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 2737 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 2781 2738 > 2782 2739 <div 2783 2740 style="position: relative; width: 100%;" ··· 2903 2860 </div> 2904 2861 </div> 2905 2862 <div 2906 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 2863 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 2907 2864 > 2908 2865 <div 2909 2866 style="position: relative; width: 100%;" ··· 3029 2986 </div> 3030 2987 </div> 3031 2988 <div 3032 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 2989 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 3033 2990 > 3034 2991 <div 3035 2992 style="position: relative; width: 100%;" ··· 3155 3112 </div> 3156 3113 </div> 3157 3114 <div 3158 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 3115 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 3159 3116 > 3160 3117 <div 3161 3118 style="position: relative; width: 100%;" ··· 3281 3238 </div> 3282 3239 </div> 3283 3240 <div 3284 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 3241 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 3285 3242 > 3286 3243 <div 3287 3244 style="position: relative; width: 100%;" ··· 3407 3364 </div> 3408 3365 </div> 3409 3366 <div 3410 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 3367 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 3411 3368 > 3412 3369 <div 3413 3370 style="position: relative; width: 100%;" ··· 3533 3490 </div> 3534 3491 </div> 3535 3492 <div 3536 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 3493 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 3537 3494 > 3538 3495 <div 3539 3496 style="position: relative; width: 100%;" ··· 3659 3616 </div> 3660 3617 </div> 3661 3618 <div 3662 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 3619 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 3663 3620 > 3664 3621 <div 3665 3622 style="position: relative; width: 100%;" ··· 3785 3742 </div> 3786 3743 </div> 3787 3744 <div 3788 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 3745 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 3789 3746 > 3790 3747 <div 3791 3748 style="position: relative; width: 100%;" ··· 3911 3868 </div> 3912 3869 </div> 3913 3870 <div 3914 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 3871 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 3915 3872 > 3916 3873 <div 3917 3874 style="position: relative; width: 100%;" ··· 4037 3994 </div> 4038 3995 </div> 4039 3996 <div 4040 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 3997 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 4041 3998 > 4042 3999 <div 4043 4000 style="position: relative; width: 100%;" ··· 4163 4120 </div> 4164 4121 </div> 4165 4122 <div 4166 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 4123 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 4167 4124 > 4168 4125 <div 4169 4126 style="position: relative; width: 100%;" ··· 4289 4246 </div> 4290 4247 </div> 4291 4248 <div 4292 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 4249 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 4293 4250 > 4294 4251 <div 4295 4252 style="position: relative; width: 100%;" ··· 4415 4372 </div> 4416 4373 </div> 4417 4374 <div 4418 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 4375 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 4419 4376 > 4420 4377 <div 4421 4378 style="position: relative; width: 100%;" ··· 4541 4498 </div> 4542 4499 </div> 4543 4500 <div 4544 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 4501 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 4545 4502 > 4546 4503 <div 4547 4504 style="position: relative; width: 100%;" ··· 4667 4624 </div> 4668 4625 </div> 4669 4626 <div 4670 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 4627 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 4671 4628 > 4672 4629 <div 4673 4630 style="position: relative; width: 100%;" ··· 4793 4750 </div> 4794 4751 </div> 4795 4752 <div 4796 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 4753 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 4797 4754 > 4798 4755 <div 4799 4756 style="position: relative; width: 100%;" ··· 4919 4876 </div> 4920 4877 </div> 4921 4878 <div 4922 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 4879 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 4923 4880 > 4924 4881 <div 4925 4882 style="position: relative; width: 100%;" ··· 5045 5002 </div> 5046 5003 </div> 5047 5004 <div 5048 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 5005 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 5049 5006 > 5050 5007 <div 5051 5008 style="position: relative; width: 100%;" ··· 5171 5128 </div> 5172 5129 </div> 5173 5130 <div 5174 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 5131 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 5175 5132 > 5176 5133 <div 5177 5134 style="position: relative; width: 100%;" ··· 5297 5254 </div> 5298 5255 </div> 5299 5256 <div 5300 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 5257 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 5301 5258 > 5302 5259 <div 5303 5260 style="position: relative; width: 100%;" ··· 5423 5380 </div> 5424 5381 </div> 5425 5382 <div 5426 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 5383 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 5427 5384 > 5428 5385 <div 5429 5386 style="position: relative; width: 100%;" ··· 5549 5506 </div> 5550 5507 </div> 5551 5508 <div 5552 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 5509 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 5553 5510 > 5554 5511 <div 5555 5512 style="position: relative; width: 100%;" ··· 5675 5632 </div> 5676 5633 </div> 5677 5634 <div 5678 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 5635 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 5679 5636 > 5680 5637 <div 5681 5638 style="position: relative; width: 100%;" ··· 5801 5758 </div> 5802 5759 </div> 5803 5760 <div 5804 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 5761 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 5805 5762 > 5806 5763 <div 5807 5764 style="position: relative; width: 100%;" ··· 5927 5884 </div> 5928 5885 </div> 5929 5886 <div 5930 - class="aw ae d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc dd de df dg dh di dj dk dl" 5887 + class="ae bg cl cm cn co cp cq cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6" 5931 5888 > 5932 5889 <div 5933 5890 style="position: relative; width: 100%;"

+19 -15

webui/rockbox/src/Components/ArtistDetails/ArtistDetails.test.tsx

··· 4 4 import { albums, tracks } from "./mocks"; 5 5 import Providers from "../../Providers"; 6 6 import { MemoryRouter } from "react-router-dom"; 7 + import { MockedProvider } from "@apollo/client/testing"; 8 + import { mocks } from "../../mocks"; 7 9 8 10 describe("ArtistDetails", () => { 9 11 it("should render", () => { 10 12 const { container } = render( 11 13 <MemoryRouter initialEntries={["/"]}> 12 - <Providers> 13 - <ArtistDetails 14 - name="Daft Punk" 15 - tracks={tracks} 16 - albums={albums} 17 - onPlayAll={vi.fn()} 18 - onShuffleAll={vi.fn()} 19 - onPlayAlbum={vi.fn()} 20 - onLikeAlbum={vi.fn()} 21 - onUnLikeAlbum={vi.fn()} 22 - onLikeTrack={vi.fn()} 23 - onUnlikeTrack={vi.fn()} 24 - onGoBack={vi.fn()} 25 - /> 26 - </Providers> 14 + <MockedProvider mocks={mocks}> 15 + <Providers> 16 + <ArtistDetails 17 + name="Daft Punk" 18 + tracks={tracks} 19 + albums={albums} 20 + onPlayAll={vi.fn()} 21 + onShuffleAll={vi.fn()} 22 + onPlayAlbum={vi.fn()} 23 + onLikeAlbum={vi.fn()} 24 + onUnLikeAlbum={vi.fn()} 25 + onLikeTrack={vi.fn()} 26 + onUnlikeTrack={vi.fn()} 27 + onGoBack={vi.fn()} 28 + /> 29 + </Providers> 30 + </MockedProvider> 27 31 </MemoryRouter> 28 32 ); 29 33 expect(container).toMatchSnapshot();

+26 -69

webui/rockbox/src/Components/ArtistDetails/__snapshots__/ArtistDetails.test.tsx.snap

··· 180 180 class="css-10asy2d" 181 181 > 182 182 <svg 183 + fill="none" 183 184 height="32" 184 - viewBox="0 0 512 512" 185 185 width="32" 186 186 xmlns="http://www.w3.org/2000/svg" 187 187 > 188 - <title> 189 - Pause 190 - </title> 191 188 <path 192 - d="M208 432h-48a16 16 0 0 1-16-16V96a16 16 0 0 1 16-16h48a16 16 0 0 1 16 16v320a16 16 0 0 1-16 16zm144 0h-48a16 16 0 0 1-16-16V96a16 16 0 0 1 16-16h48a16 16 0 0 1 16 16v320a16 16 0 0 1-16 16z" 189 + d="M10.657 27a2.842 2.842 0 0 1-1.258-.292C8.536 26.283 8 25.458 8 24.563V6.438c0-.899.536-1.721 1.399-2.146a2.856 2.856 0 0 1 2.571.028l17.817 9.273c.755.411 1.213 1.131 1.213 1.906 0 .774-.458 1.495-1.213 1.906l-17.82 9.275a2.846 2.846 0 0 1-1.31.32Z" 193 190 style="fill: #000;" 194 191 /> 195 192 </svg> ··· 234 231 <div 235 232 class="css-frud38" 236 233 > 237 - <img 238 - alt="Album cover" 239 - class="css-31cka" 240 - src="https://resources.tidal.com/images/fe6787d5/4ba5/4d3e/8576/48943ee6a768/320x320.jpg" 241 - /> 234 + <div 235 + class="css-4ijxew" 236 + > 237 + <svg 238 + height="28" 239 + viewBox="0 0 24 24" 240 + width="28" 241 + xmlns="http://www.w3.org/2000/svg" 242 + > 243 + <path 244 + d="M8.1 4.65v11.26a3.45 3.45 0 1 0 1.5 2.84V5.85l10.2-2.36v10.62A3.45 3.45 0 1 0 21.3 17V1.61Zm-2 16a2 2 0 1 1 2-2 2 2 0 0 1-1.95 2.05Zm11.7-1.8a1.95 1.95 0 1 1 2-1.85 2 2 0 0 1-1.95 1.9Z" 245 + fill="#b1b2b5" 246 + /> 247 + </svg> 248 + </div> 242 249 <div 243 250 class="css-rbpzuh" 244 251 > 245 252 <div 246 - class="css-1cojt9j" 253 + style="color: rgb(177, 178, 181); text-align: center;" 247 254 > 248 - Drankin N Smokin 249 - </div> 250 - <div 251 - style="display: flex; flex-direction: row; align-items: center; justify-content: space-between;" 252 - > 253 - <div 254 - class="css-1jnbdma" 255 - > 256 - 02:03 257 - </div> 258 - <div 259 - class="css-bdl275" 260 - > 261 - Future, Lil Uzi Vert 262 - <span 263 - class="css-c9cgcr" 264 - > 265 - - 266 - </span> 267 - Pluto x Baby Pluto (Deluxe) 268 - </div> 269 - <div 270 - class="css-1jnbdma" 271 - > 272 - 04:15 273 - </div> 274 - </div> 275 - <div 276 - class="css-1n7uud4" 277 - > 278 - <div 279 - aria-label="48% Loaded" 280 - aria-valuemax="100" 281 - aria-valuemin="0" 282 - aria-valuenow="48.3219508605943" 283 - class="ae" 284 - data-baseweb="progress-bar" 285 - role="progressbar" 286 - > 287 - <div 288 - class="af ag ah ai aj" 289 - > 290 - <div 291 - class="ak al am an ao ap aq ar" 292 - > 293 - <div 294 - class="ak al am an as at ae au av" 295 - /> 296 - </div> 297 - </div> 298 - </div> 255 + No track playing 299 256 </div> 300 257 </div> 301 258 </div> ··· 362 319 class="css-14zx4vh" 363 320 > 364 321 <button 365 - class="aw ax ay az b0 b1 b2 b3 b4 b5 b6 b7 b8 b9 ba bb bc bd be bf bg bh bi ag bj ah bk bl bm bn bo bp bq br bs bt bu bv bw bx as by bz c0 c1 c2" 322 + class="ae af ag ah ai aj ak al am an ao ap aq ar as at au av aw ax ay az b0 b1 b2 b3 b4 b5 b6 b7 b8 b9 ba bb bc bd be bf bg bh bi bj bk bl bm bn" 366 323 data-baseweb="button" 367 324 > 368 325 <div ··· 391 348 class="css-wa9s5g" 392 349 /> 393 350 <button 394 - class="aw ax ay az b0 b1 b2 b3 b4 b5 b6 b7 b8 b9 ba bb bc bd be bf bg bh bi ag bj ah bk bl bm bn bo bp bq br bs bt bu bv bw c3 c4 c5 c6 c0 c1 c2" 351 + class="ae af ag ah ai aj ak al am an ao ap aq ar as at au av aw ax ay az b0 b1 b2 b3 b4 b5 b6 b7 b8 b9 ba bb bc bd be bf bg bo bp bq br bl bm bn" 395 352 data-baseweb="button" 396 353 > 397 354 <div ··· 962 919 style="margin-bottom: 100px;" 963 920 > 964 921 <div 965 - class="c7 c8" 922 + class="bs bt" 966 923 > 967 924 <div 968 - class="c9 af ca c8 cb cc cd ce cf cg ch ci cj ck cl cm cn co cp cq" 925 + class="bu bv bw bt bx by bz c0 c1 c2 c3 c4 c5 c6 c7 c8 c9 ca cb cc" 969 926 > 970 927 <div 971 - class="c9 ae cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc" 928 + class="bu cd ce cf cg ch ci cj ck cl cm cn co cp cq cr cs ct cu cv cw cx cy cz" 972 929 > 973 930 <div 974 931 style="position: relative; width: 100%;" ··· 1093 1050 </div> 1094 1051 </div> 1095 1052 <div 1096 - class="c9 ae cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc" 1053 + class="bu cd ce cf cg ch ci cj ck cl cm cn co cp cq cr cs ct cu cv cw cx cy cz" 1097 1054 > 1098 1055 <div 1099 1056 style="position: relative; width: 100%;" ··· 1218 1175 </div> 1219 1176 </div> 1220 1177 <div 1221 - class="c9 ae cr cs ct cu cv cw cx cy cz d0 d1 d2 d3 d4 d5 d6 d7 d8 d9 da db dc" 1178 + class="bu cd ce cf cg ch ci cj ck cl cm cn co cp cq cr cs ct cu cv cw cx cy cz" 1222 1179 > 1223 1180 <div 1224 1181 style="position: relative; width: 100%;"

+11 -7

webui/rockbox/src/Components/Artists/Artists.test.tsx

··· 4 4 import { artists } from "./mocks"; 5 5 import Providers from "../../Providers"; 6 6 import { MemoryRouter } from "react-router-dom"; 7 + import { MockedProvider } from "@apollo/client/testing"; 8 + import { mocks } from "../../mocks"; 7 9 8 10 describe("Artists", () => { 9 11 it("should render", () => { 10 12 const { container } = render( 11 13 <MemoryRouter initialEntries={["/"]}> 12 - <Providers> 13 - <Artists 14 - artists={artists} 15 - onClickArtist={vi.fn()} 16 - onFilter={vi.fn()} 17 - /> 18 - </Providers> 14 + <MockedProvider mocks={mocks}> 15 + <Providers> 16 + <Artists 17 + artists={artists} 18 + onClickArtist={vi.fn()} 19 + onFilter={vi.fn()} 20 + /> 21 + </Providers> 22 + </MockedProvider> 19 23 </MemoryRouter> 20 24 ); 21 25 expect(container).toMatchSnapshot();

+26 -69

webui/rockbox/src/Components/Artists/__snapshots__/Artists.test.tsx.snap

··· 180 180 class="css-10asy2d" 181 181 > 182 182 <svg 183 + fill="none" 183 184 height="32" 184 - viewBox="0 0 512 512" 185 185 width="32" 186 186 xmlns="http://www.w3.org/2000/svg" 187 187 > 188 - <title> 189 - Pause 190 - </title> 191 188 <path 192 - d="M208 432h-48a16 16 0 0 1-16-16V96a16 16 0 0 1 16-16h48a16 16 0 0 1 16 16v320a16 16 0 0 1-16 16zm144 0h-48a16 16 0 0 1-16-16V96a16 16 0 0 1 16-16h48a16 16 0 0 1 16 16v320a16 16 0 0 1-16 16z" 189 + d="M10.657 27a2.842 2.842 0 0 1-1.258-.292C8.536 26.283 8 25.458 8 24.563V6.438c0-.899.536-1.721 1.399-2.146a2.856 2.856 0 0 1 2.571.028l17.817 9.273c.755.411 1.213 1.131 1.213 1.906 0 .774-.458 1.495-1.213 1.906l-17.82 9.275a2.846 2.846 0 0 1-1.31.32Z" 193 190 style="fill: #000;" 194 191 /> 195 192 </svg> ··· 234 231 <div 235 232 class="css-frud38" 236 233 > 237 - <img 238 - alt="Album cover" 239 - class="css-31cka" 240 - src="https://resources.tidal.com/images/fe6787d5/4ba5/4d3e/8576/48943ee6a768/320x320.jpg" 241 - /> 234 + <div 235 + class="css-4ijxew" 236 + > 237 + <svg 238 + height="28" 239 + viewBox="0 0 24 24" 240 + width="28" 241 + xmlns="http://www.w3.org/2000/svg" 242 + > 243 + <path 244 + d="M8.1 4.65v11.26a3.45 3.45 0 1 0 1.5 2.84V5.85l10.2-2.36v10.62A3.45 3.45 0 1 0 21.3 17V1.61Zm-2 16a2 2 0 1 1 2-2 2 2 0 0 1-1.95 2.05Zm11.7-1.8a1.95 1.95 0 1 1 2-1.85 2 2 0 0 1-1.95 1.9Z" 245 + fill="#b1b2b5" 246 + /> 247 + </svg> 248 + </div> 242 249 <div 243 250 class="css-rbpzuh" 244 251 > 245 252 <div 246 - class="css-1cojt9j" 253 + style="color: rgb(177, 178, 181); text-align: center;" 247 254 > 248 - Drankin N Smokin 249 - </div> 250 - <div 251 - style="display: flex; flex-direction: row; align-items: center; justify-content: space-between;" 252 - > 253 - <div 254 - class="css-1jnbdma" 255 - > 256 - 02:03 257 - </div> 258 - <div 259 - class="css-bdl275" 260 - > 261 - Future, Lil Uzi Vert 262 - <span 263 - class="css-c9cgcr" 264 - > 265 - - 266 - </span> 267 - Pluto x Baby Pluto (Deluxe) 268 - </div> 269 - <div 270 - class="css-1jnbdma" 271 - > 272 - 04:15 273 - </div> 274 - </div> 275 - <div 276 - class="css-1n7uud4" 277 - > 278 - <div 279 - aria-label="48% Loaded" 280 - aria-valuemax="100" 281 - aria-valuemin="0" 282 - aria-valuenow="48.3219508605943" 283 - class="ae" 284 - data-baseweb="progress-bar" 285 - role="progressbar" 286 - > 287 - <div 288 - class="af ag ah ai aj" 289 - > 290 - <div 291 - class="ak al am an ao ap aq ar" 292 - > 293 - <div 294 - class="ak al am an as at ae au av" 295 - /> 296 - </div> 297 - </div> 298 - </div> 255 + No track playing 299 256 </div> 300 257 </div> 301 258 </div> ··· 334 291 style="margin-bottom: 100px;" 335 292 > 336 293 <div 337 - class="aw ax" 294 + class="ae af" 338 295 > 339 296 <div 340 - class="ay af az ax b0 b1 b2 b3 b4 b5 b6 b7 b8 b9 ba bb bc bd be bf" 297 + class="ag ah ai af aj ak al am an ao ap aq ar as at au av aw ax ay" 341 298 > 342 299 <div 343 - class="ay ae bg bh bi bj bk bl bm bn bo bp bq br bs bt bu bv bw bx by bz c0 c1 c2 c3 c4 c5" 300 + class="ag az b0 b1 b2 b3 b4 b5 b6 b7 b8 b9 ba bb bc bd be bf bg bh bi bj bk bl bm bn bo bp" 344 301 > 345 302 <a 346 303 href="/artists/1" ··· 358 315 </a> 359 316 </div> 360 317 <div 361 - class="ay ae bg bh bi bj bk bl bm bn bo bp bq br bs bt bu bv bw bx by bz c0 c1 c2 c3 c4 c5" 318 + class="ag az b0 b1 b2 b3 b4 b5 b6 b7 b8 b9 ba bb bc bd be bf bg bh bi bj bk bl bm bn bo bp" 362 319 > 363 320 <a 364 321 href="/artists/2" ··· 376 333 </a> 377 334 </div> 378 335 <div 379 - class="ay ae bg bh bi bj bk bl bm bn bo bp bq br bs bt bu bv bw bx by bz c0 c1 c2 c3 c4 c5" 336 + class="ag az b0 b1 b2 b3 b4 b5 b6 b7 b8 b9 ba bb bc bd be bf bg bh bi bj bk bl bm bn bo bp" 380 337 > 381 338 <a 382 339 href="/artists/3" ··· 394 351 </a> 395 352 </div> 396 353 <div 397 - class="ay ae bg bh bi bj bk bl bm bn bo bp bq br bs bt bu bv bw bx by bz c0 c1 c2 c3 c4 c5" 354 + class="ag az b0 b1 b2 b3 b4 b5 b6 b7 b8 b9 ba bb bc bd be bf bg bh bi bj bk bl bm bn bo bp" 398 355 > 399 356 <a 400 357 href="/artists/4" ··· 412 369 </a> 413 370 </div> 414 371 <div 415 - class="ay ae bg bh bi bj bk bl bm bn bo bp bq br bs bt bu bv bw bx by bz c0 c1 c2 c3 c4 c5" 372 + class="ag az b0 b1 b2 b3 b4 b5 b6 b7 b8 b9 ba bb bc bd be bf bg bh bi bj bk bl bm bn bo bp" 416 373 > 417 374 <a 418 375 href="/artists/4"

+3 -1

webui/rockbox/src/Components/ControlBar/ControlBarWithData.tsx

··· 31 31 artist: data.currentTrack?.artist, 32 32 title: data.currentTrack?.title, 33 33 cover: data.currentTrack?.albumArt 34 - ? `http://localhost:6062/covers/${data.currentTrack?.albumArt}` 34 + ? data.currentTrack?.albumArt.startsWith("http") 35 + ? data.currentTrack?.albumArt 36 + : `http://localhost:6062/covers/${data.currentTrack?.albumArt}` 35 37 : "", 36 38 duration: data.currentTrack?.length || 0, 37 39 progress: data.currentTrack?.elapsed || 0,

+7 -3

webui/rockbox/src/Components/Files/Files.test.tsx

··· 4 4 import { files } from "./mocks"; 5 5 import { MemoryRouter } from "react-router-dom"; 6 6 import { vi } from "vitest"; 7 + import { MockedProvider } from "@apollo/client/testing"; 8 + import { mocks } from "../../mocks"; 7 9 8 10 describe("Files", () => { 9 11 it("should render", () => { 10 12 const { container } = render( 11 13 <MemoryRouter initialEntries={["/"]}> 12 - <Providers> 13 - <Files files={files} canGoBack={true} onGoBack={vi.fn()} /> 14 - </Providers> 14 + <MockedProvider mocks={mocks}> 15 + <Providers> 16 + <Files files={files} canGoBack={true} onGoBack={vi.fn()} /> 17 + </Providers> 18 + </MockedProvider> 15 19 </MemoryRouter> 16 20 ); 17 21 expect(container).toMatchSnapshot();

+1 -1

webui/rockbox/src/Components/Files/FilesWithData.tsx

··· 6 6 const FilesWithData: FC = () => { 7 7 const navigate = useNavigate(); 8 8 const [refetching, setRefetching] = useState(false); 9 - const { data, refetch, loading } = useGetEntriesQuery(); 9 + const { data, refetch } = useGetEntriesQuery(); 10 10 const [params] = useSearchParams(); 11 11 const path = params.get("q"); 12 12 const canGoBack = !!path;

+19 -62

webui/rockbox/src/Components/Files/__snapshots__/Files.test.tsx.snap

··· 180 180 class="css-10asy2d" 181 181 > 182 182 <svg 183 + fill="none" 183 184 height="32" 184 - viewBox="0 0 512 512" 185 185 width="32" 186 186 xmlns="http://www.w3.org/2000/svg" 187 187 > 188 - <title> 189 - Pause 190 - </title> 191 188 <path 192 - d="M208 432h-48a16 16 0 0 1-16-16V96a16 16 0 0 1 16-16h48a16 16 0 0 1 16 16v320a16 16 0 0 1-16 16zm144 0h-48a16 16 0 0 1-16-16V96a16 16 0 0 1 16-16h48a16 16 0 0 1 16 16v320a16 16 0 0 1-16 16z" 189 + d="M10.657 27a2.842 2.842 0 0 1-1.258-.292C8.536 26.283 8 25.458 8 24.563V6.438c0-.899.536-1.721 1.399-2.146a2.856 2.856 0 0 1 2.571.028l17.817 9.273c.755.411 1.213 1.131 1.213 1.906 0 .774-.458 1.495-1.213 1.906l-17.82 9.275a2.846 2.846 0 0 1-1.31.32Z" 193 190 style="fill: #000;" 194 191 /> 195 192 </svg> ··· 234 231 <div 235 232 class="css-frud38" 236 233 > 237 - <img 238 - alt="Album cover" 239 - class="css-31cka" 240 - src="https://resources.tidal.com/images/fe6787d5/4ba5/4d3e/8576/48943ee6a768/320x320.jpg" 241 - /> 242 234 <div 243 - class="css-rbpzuh" 235 + class="css-4ijxew" 244 236 > 245 - <div 246 - class="css-1cojt9j" 237 + <svg 238 + height="28" 239 + viewBox="0 0 24 24" 240 + width="28" 241 + xmlns="http://www.w3.org/2000/svg" 247 242 > 248 - Drankin N Smokin 249 - </div> 243 + <path 244 + d="M8.1 4.65v11.26a3.45 3.45 0 1 0 1.5 2.84V5.85l10.2-2.36v10.62A3.45 3.45 0 1 0 21.3 17V1.61Zm-2 16a2 2 0 1 1 2-2 2 2 0 0 1-1.95 2.05Zm11.7-1.8a1.95 1.95 0 1 1 2-1.85 2 2 0 0 1-1.95 1.9Z" 245 + fill="#b1b2b5" 246 + /> 247 + </svg> 248 + </div> 249 + <div 250 + class="css-rbpzuh" 251 + > 250 252 <div 251 - style="display: flex; flex-direction: row; align-items: center; justify-content: space-between;" 253 + style="color: rgb(177, 178, 181); text-align: center;" 252 254 > 253 - <div 254 - class="css-1jnbdma" 255 - > 256 - 02:03 257 - </div> 258 - <div 259 - class="css-bdl275" 260 - > 261 - Future, Lil Uzi Vert 262 - <span 263 - class="css-c9cgcr" 264 - > 265 - - 266 - </span> 267 - Pluto x Baby Pluto (Deluxe) 268 - </div> 269 - <div 270 - class="css-1jnbdma" 271 - > 272 - 04:15 273 - </div> 274 - </div> 275 - <div 276 - class="css-1n7uud4" 277 - > 278 - <div 279 - aria-label="48% Loaded" 280 - aria-valuemax="100" 281 - aria-valuemin="0" 282 - aria-valuenow="48.3219508605943" 283 - class="ae" 284 - data-baseweb="progress-bar" 285 - role="progressbar" 286 - > 287 - <div 288 - class="af ag ah ai aj" 289 - > 290 - <div 291 - class="ak al am an ao ap aq ar" 292 - > 293 - <div 294 - class="ak al am an as at ae au av" 295 - /> 296 - </div> 297 - </div> 298 - </div> 255 + No track playing 299 256 </div> 300 257 </div> 301 258 </div>

+7 -3

webui/rockbox/src/Components/Tracks/Tracks.test.tsx

··· 3 3 import Providers from "../../Providers"; 4 4 import { tracks } from "./mocks"; 5 5 import { MemoryRouter } from "react-router-dom"; 6 + import { MockedProvider } from "@apollo/client/testing"; 7 + import { mocks } from "../../mocks"; 6 8 7 9 describe("Tracks", () => { 8 10 it("should render", () => { 9 11 const { container } = render( 10 12 <MemoryRouter initialEntries={["/"]}> 11 - <Providers> 12 - <Tracks tracks={tracks} /> 13 - </Providers> 13 + <MockedProvider mocks={mocks} addTypename={false}> 14 + <Providers> 15 + <Tracks tracks={tracks} /> 16 + </Providers> 17 + </MockedProvider> 14 18 </MemoryRouter> 15 19 ); 16 20 expect(container).toMatchSnapshot();

+23 -66

webui/rockbox/src/Components/Tracks/__snapshots__/Tracks.test.tsx.snap

··· 180 180 class="css-10asy2d" 181 181 > 182 182 <svg 183 + fill="none" 183 184 height="32" 184 - viewBox="0 0 512 512" 185 185 width="32" 186 186 xmlns="http://www.w3.org/2000/svg" 187 187 > 188 - <title> 189 - Pause 190 - </title> 191 188 <path 192 - d="M208 432h-48a16 16 0 0 1-16-16V96a16 16 0 0 1 16-16h48a16 16 0 0 1 16 16v320a16 16 0 0 1-16 16zm144 0h-48a16 16 0 0 1-16-16V96a16 16 0 0 1 16-16h48a16 16 0 0 1 16 16v320a16 16 0 0 1-16 16z" 189 + d="M10.657 27a2.842 2.842 0 0 1-1.258-.292C8.536 26.283 8 25.458 8 24.563V6.438c0-.899.536-1.721 1.399-2.146a2.856 2.856 0 0 1 2.571.028l17.817 9.273c.755.411 1.213 1.131 1.213 1.906 0 .774-.458 1.495-1.213 1.906l-17.82 9.275a2.846 2.846 0 0 1-1.31.32Z" 193 190 style="fill: #000;" 194 191 /> 195 192 </svg> ··· 234 231 <div 235 232 class="css-frud38" 236 233 > 237 - <img 238 - alt="Album cover" 239 - class="css-31cka" 240 - src="https://resources.tidal.com/images/fe6787d5/4ba5/4d3e/8576/48943ee6a768/320x320.jpg" 241 - /> 234 + <div 235 + class="css-4ijxew" 236 + > 237 + <svg 238 + height="28" 239 + viewBox="0 0 24 24" 240 + width="28" 241 + xmlns="http://www.w3.org/2000/svg" 242 + > 243 + <path 244 + d="M8.1 4.65v11.26a3.45 3.45 0 1 0 1.5 2.84V5.85l10.2-2.36v10.62A3.45 3.45 0 1 0 21.3 17V1.61Zm-2 16a2 2 0 1 1 2-2 2 2 0 0 1-1.95 2.05Zm11.7-1.8a1.95 1.95 0 1 1 2-1.85 2 2 0 0 1-1.95 1.9Z" 245 + fill="#b1b2b5" 246 + /> 247 + </svg> 248 + </div> 242 249 <div 243 250 class="css-rbpzuh" 244 251 > 245 252 <div 246 - class="css-1cojt9j" 253 + style="color: rgb(177, 178, 181); text-align: center;" 247 254 > 248 - Drankin N Smokin 249 - </div> 250 - <div 251 - style="display: flex; flex-direction: row; align-items: center; justify-content: space-between;" 252 - > 253 - <div 254 - class="css-1jnbdma" 255 - > 256 - 02:03 257 - </div> 258 - <div 259 - class="css-bdl275" 260 - > 261 - Future, Lil Uzi Vert 262 - <span 263 - class="css-c9cgcr" 264 - > 265 - - 266 - </span> 267 - Pluto x Baby Pluto (Deluxe) 268 - </div> 269 - <div 270 - class="css-1jnbdma" 271 - > 272 - 04:15 273 - </div> 274 - </div> 275 - <div 276 - class="css-1n7uud4" 277 - > 278 - <div 279 - aria-label="48% Loaded" 280 - aria-valuemax="100" 281 - aria-valuemin="0" 282 - aria-valuenow="48.3219508605943" 283 - class="ae" 284 - data-baseweb="progress-bar" 285 - role="progressbar" 286 - > 287 - <div 288 - class="af ag ah ai aj" 289 - > 290 - <div 291 - class="ak al am an ao ap aq ar" 292 - > 293 - <div 294 - class="ak al am an as at ae au av" 295 - /> 296 - </div> 297 - </div> 298 - </div> 255 + No track playing 299 256 </div> 300 257 </div> 301 258 </div> ··· 334 291 class="css-9wcbnz" 335 292 > 336 293 <div 337 - class="aw af ar ax ay az b0 b1 b2 b3 b4 b5 b6 b7 b8 b9 ba bb bc bd be bf bg bh bi bj bk bl bm bn bo" 294 + class="ae af ag ah ai aj ak al am an ao ap aq ar as at au av aw ax ay az b0 b1 b2 b3 b4 b5 b6 b7 b8" 338 295 data-baseweb="input" 339 296 > 340 297 <div 341 - class="af bp bq br b7 b8 bd be bf bg bn bs bt bl bu bv" 298 + class="af b9 ba bb ar as ax ay az b0 b7 bc bd b5 be bf" 342 299 > 343 300 <svg 344 301 data-test="icon-ActionActiveSearch" ··· 356 313 </svg> 357 314 </div> 358 315 <div 359 - class="af ae bw b7 b8 bd be bf bg bt bl" 316 + class="af bg bh ar as ax ay az b0 bd b5" 360 317 data-baseweb="base-input" 361 318 > 362 319 <input 363 320 aria-invalid="false" 364 321 aria-required="false" 365 322 autocomplete="on" 366 - class="aw bl bx by bz c0 c1 c2 c3 c4 c5 ae c6 c7 c8 c9 ca cb bm cc bd cd bf bg ce cf cg" 323 + class="ae b5 bi bj bk bl bm bn bo bp bq bg br bs bt bu bv bw b6 bx ax by az b0 bz c0 c1" 367 324 inputmode="text" 368 325 name="filter" 369 326 placeholder="Search song"

+36

webui/rockbox/src/mocks.ts

··· 1 + import { 2 + GET_CURRENT_TRACK, 3 + GET_PLAYBACK_STATUS, 4 + } from "./GraphQL/Playback/Query"; 5 + 6 + export const mocks = [ 7 + { 8 + request: { 9 + query: GET_CURRENT_TRACK, 10 + }, 11 + result: { 12 + data: { 13 + currentTrack: { 14 + id: "cm272oeon00esm9634q1lw5ae", 15 + title: "Set It Off", 16 + artist: "Boosie Badazz", 17 + album: "Bad Azz", 18 + albumArt: 19 + "https://resources.tidal.com/images/31ce8fc7/b10c/47ee/991d/6fab3e15dbe4/320x320.jpg", 20 + artistId: "cm272ocoi003km963fy45i7cn", 21 + albumId: "cm272ocoi003lm963xo1d7wb2", 22 + elapsed: 153762, 23 + length: 284633, 24 + year: 2006, 25 + yearString: "2006-09-19", 26 + }, 27 + }, 28 + }, 29 + }, 30 + { 31 + request: { 32 + query: GET_PLAYBACK_STATUS, 33 + }, 34 + result: { data: { status: 1 } }, 35 + }, 36 + ];

Configure Feed

Configure Feed