BannerVideo - LCP improvements #356
Annotations
9 errors and 2 warnings
|
test (20)
Process completed with exit code 1.
|
|
app/components/01.atoms/banner-video/tests/BannerVideo.spec.ts > BannerVideo > renders a <section> as the root element by default:
app/components/01.atoms/banner-video/tests/BannerVideo.spec.ts#L46
AssertionError: expected 'DIV' to be 'SECTION' // Object.is equality
Expected: "SECTION"
Received: "DIV"
❯ app/components/01.atoms/banner-video/tests/BannerVideo.spec.ts:46:37
|
|
app/components/01.atoms/banner-video/tests/BannerVideo.spec.ts > BannerVideo > renders correct HTML structure (all props set):
app/components/01.atoms/banner-video/tests/BannerVideo.spec.ts#L39
Error: Snapshot `BannerVideo > renders correct HTML structure (all props set) 1` mismatched
- Expected
+ Received
- "<header class="banner-video full-bleed" data-depth="xl" style="--_aspect-ratio: 16/9; --_align-self: center; --_justify-self: center;"><video class="video" autoplay="" muted="" loop="" playsinline="" preload="auto" poster="/images/banners/video/lake-banner.jpg" style="object-fit: cover;">
+ "<header class="banner-video full-bleed" data-depth="xl" style="--_aspect-ratio: 16/9; --_align-self: center; --_justify-self: center;"><video class="video" autoplay="" muted="" loop="" playsinline="" preload="auto" fetchpriority="high" poster="/images/banners/video/lake-banner.jpg" style="object-fit: cover;">
<source src="/images/banners/video/lake-banner.mp4" type="video/mp4">
- </video><img width="1280" height="720" data-nuxt-img="" srcset="/_ipx/s_1280x720/images/banners/video/lake-banner.jpg 1x, /_ipx/s_2560x1440/images/banners/video/lake-banner.jpg 2x" class="fallback" alt="Lake banner" loading="eager" decoding="async" style="object-fit: cover; object-position: center center;" src="/_ipx/s_1280x720/images/banners/video/lake-banner.jpg"></header>"
+ </video><img width="1280" height="720" data-nuxt-img="" srcset="/_ipx/s_1280x720/images/banners/video/lake-banner.jpg 1x, /_ipx/s_2560x1440/images/banners/video/lake-banner.jpg 2x" class="fallback" alt="Lake banner" loading="eager" fetchpriority="high" decoding="async" style="object-fit: cover; object-position: center center;" src="/_ipx/s_1280x720/images/banners/video/lake-banner.jpg"></header>"
❯ app/components/01.atoms/banner-video/tests/BannerVideo.spec.ts:39:28
|
|
app/components/01.atoms/banner-video/tests/BannerVideo.spec.ts > BannerVideo > renders correct HTML structure (default props):
app/components/01.atoms/banner-video/tests/BannerVideo.spec.ts#L23
Error: Snapshot `BannerVideo > renders correct HTML structure (default props) 1` mismatched
- Expected
+ Received
- "<section class="banner-video" data-depth="md" style="--_aspect-ratio: 21/9; --_align-self: center; --_justify-self: center;"><video class="video" autoplay="" muted="" loop="" playsinline="" preload="auto" poster="/images/banners/video/lake-banner.jpg" style="object-fit: cover;">
+ "<div class="banner-video" data-depth="md" style="--_aspect-ratio: 21/9; --_align-self: center; --_justify-self: center;"><video class="video" autoplay="" muted="" loop="" playsinline="" preload="auto" fetchpriority="high" poster="/images/banners/video/lake-banner.jpg" style="object-fit: cover;">
<source src="/images/banners/video/lake-banner.mp4" type="video/mp4">
- </video><img width="1920" height="1080" data-nuxt-img="" srcset="/_ipx/s_1920x1080/images/banners/video/lake-banner.jpg 1x, /_ipx/s_3840x2160/images/banners/video/lake-banner.jpg 2x" class="fallback" alt="" loading="eager" decoding="async" style="object-fit: cover; object-position: center center;" src="/_ipx/s_1920x1080/images/banners/video/lake-banner.jpg"></section>"
+ </video><img width="1920" height="1080" data-nuxt-img="" srcset="/_ipx/s_1920x1080/images/banners/video/lake-banner.jpg 1x, /_ipx/s_3840x2160/images/banners/video/lake-banner.jpg 2x" class="fallback" alt="" loading="eager" fetchpriority="high" decoding="async" style="object-fit: cover; object-position: center center;" src="/_ipx/s_1920x1080/images/banners/video/lake-banner.jpg"></div>"
❯ app/components/01.atoms/banner-video/tests/BannerVideo.spec.ts:23:28
|
|
test (22)
The strategy configuration was canceled because "test._20" failed
|
|
test (22)
Process completed with exit code 1.
|
|
app/components/01.atoms/banner-video/tests/BannerVideo.spec.ts > BannerVideo > renders a <section> as the root element by default:
app/components/01.atoms/banner-video/tests/BannerVideo.spec.ts#L46
AssertionError: expected 'DIV' to be 'SECTION' // Object.is equality
Expected: "SECTION"
Received: "DIV"
❯ app/components/01.atoms/banner-video/tests/BannerVideo.spec.ts:46:37
|
|
app/components/01.atoms/banner-video/tests/BannerVideo.spec.ts > BannerVideo > renders correct HTML structure (all props set):
app/components/01.atoms/banner-video/tests/BannerVideo.spec.ts#L39
Error: Snapshot `BannerVideo > renders correct HTML structure (all props set) 1` mismatched
- Expected
+ Received
- "<header class="banner-video full-bleed" data-depth="xl" style="--_aspect-ratio: 16/9; --_align-self: center; --_justify-self: center;"><video class="video" autoplay="" muted="" loop="" playsinline="" preload="auto" poster="/images/banners/video/lake-banner.jpg" style="object-fit: cover;">
+ "<header class="banner-video full-bleed" data-depth="xl" style="--_aspect-ratio: 16/9; --_align-self: center; --_justify-self: center;"><video class="video" autoplay="" muted="" loop="" playsinline="" preload="auto" fetchpriority="high" poster="/images/banners/video/lake-banner.jpg" style="object-fit: cover;">
<source src="/images/banners/video/lake-banner.mp4" type="video/mp4">
- </video><img width="1280" height="720" data-nuxt-img="" srcset="/_ipx/s_1280x720/images/banners/video/lake-banner.jpg 1x, /_ipx/s_2560x1440/images/banners/video/lake-banner.jpg 2x" class="fallback" alt="Lake banner" loading="eager" decoding="async" style="object-fit: cover; object-position: center center;" src="/_ipx/s_1280x720/images/banners/video/lake-banner.jpg"></header>"
+ </video><img width="1280" height="720" data-nuxt-img="" srcset="/_ipx/s_1280x720/images/banners/video/lake-banner.jpg 1x, /_ipx/s_2560x1440/images/banners/video/lake-banner.jpg 2x" class="fallback" alt="Lake banner" loading="eager" fetchpriority="high" decoding="async" style="object-fit: cover; object-position: center center;" src="/_ipx/s_1280x720/images/banners/video/lake-banner.jpg"></header>"
❯ app/components/01.atoms/banner-video/tests/BannerVideo.spec.ts:39:28
|
|
app/components/01.atoms/banner-video/tests/BannerVideo.spec.ts > BannerVideo > renders correct HTML structure (default props):
app/components/01.atoms/banner-video/tests/BannerVideo.spec.ts#L23
Error: Snapshot `BannerVideo > renders correct HTML structure (default props) 1` mismatched
- Expected
+ Received
- "<section class="banner-video" data-depth="md" style="--_aspect-ratio: 21/9; --_align-self: center; --_justify-self: center;"><video class="video" autoplay="" muted="" loop="" playsinline="" preload="auto" poster="/images/banners/video/lake-banner.jpg" style="object-fit: cover;">
+ "<div class="banner-video" data-depth="md" style="--_aspect-ratio: 21/9; --_align-self: center; --_justify-self: center;"><video class="video" autoplay="" muted="" loop="" playsinline="" preload="auto" fetchpriority="high" poster="/images/banners/video/lake-banner.jpg" style="object-fit: cover;">
<source src="/images/banners/video/lake-banner.mp4" type="video/mp4">
- </video><img width="1920" height="1080" data-nuxt-img="" srcset="/_ipx/s_1920x1080/images/banners/video/lake-banner.jpg 1x, /_ipx/s_3840x2160/images/banners/video/lake-banner.jpg 2x" class="fallback" alt="" loading="eager" decoding="async" style="object-fit: cover; object-position: center center;" src="/_ipx/s_1920x1080/images/banners/video/lake-banner.jpg"></section>"
+ </video><img width="1920" height="1080" data-nuxt-img="" srcset="/_ipx/s_1920x1080/images/banners/video/lake-banner.jpg 1x, /_ipx/s_3840x2160/images/banners/video/lake-banner.jpg 2x" class="fallback" alt="" loading="eager" fetchpriority="high" decoding="async" style="object-fit: cover; object-position: center center;" src="/_ipx/s_1920x1080/images/banners/video/lake-banner.jpg"></div>"
❯ app/components/01.atoms/banner-video/tests/BannerVideo.spec.ts:23:28
|
|
test (20)
Node.js 20 actions are deprecated. The following actions are running on Node.js 20 and may not work as expected: actions/checkout@v4, actions/setup-node@v4. Actions will be forced to run with Node.js 24 by default starting June 2nd, 2026. Node.js 20 will be removed from the runner on September 16th, 2026. Please check if updated versions of these actions are available that support Node.js 24. To opt into Node.js 24 now, set the FORCE_JAVASCRIPT_ACTIONS_TO_NODE24=true environment variable on the runner or in your workflow file. Once Node.js 24 becomes the default, you can temporarily opt out by setting ACTIONS_ALLOW_USE_UNSECURE_NODE_VERSION=true. For more information see: https://github.blog/changelog/2025-09-19-deprecation-of-node-20-on-github-actions-runners/
|
|
test (22)
Node.js 20 actions are deprecated. The following actions are running on Node.js 20 and may not work as expected: actions/checkout@v4, actions/setup-node@v4. Actions will be forced to run with Node.js 24 by default starting June 2nd, 2026. Node.js 20 will be removed from the runner on September 16th, 2026. Please check if updated versions of these actions are available that support Node.js 24. To opt into Node.js 24 now, set the FORCE_JAVASCRIPT_ACTIONS_TO_NODE24=true environment variable on the runner or in your workflow file. Once Node.js 24 becomes the default, you can temporarily opt out by setting ACTIONS_ALLOW_USE_UNSECURE_NODE_VERSION=true. For more information see: https://github.blog/changelog/2025-09-19-deprecation-of-node-20-on-github-actions-runners/
|