Skip to content

BannerVideo - LCP improvements #356

BannerVideo - LCP improvements

BannerVideo - LCP improvements #356

Triggered via push April 24, 2026 22:22
Status Failure
Total duration 2m 17s
Artifacts

test.yml

on: push
Matrix: test
Fit to window
Zoom out
Zoom in

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/