Skip to content

Commit 02c6673

Browse files
westonruterwestonruter
committed
Add test cases for external background images
1 parent 3abf92a commit 02c6673

4 files changed

+257
-2
lines changed

‎plugins/image-prioritizer/tests/test-cases/lcp-element-external-background-image-complete-samples-but-element-absent.php

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<?php
2+
// phpcs:disable WordPress.WP.EnqueuedResources.NonEnqueuedStylesheet
3+
return array(
4+
'set_up' => static function ( Test_Image_Prioritizer_Helper $test_case ): void {
5+
add_filter(
6+
'od_breakpoint_max_widths',
7+
static function () {
8+
return array( 480, 600, 782 );
9+
}
10+
);
11+
12+
$slug = od_get_url_metrics_slug( od_get_normalized_query_vars() );
13+
$sample_size = od_get_url_metrics_breakpoint_sample_size();
14+
15+
$bg_images = array(
16+
'https://example.com/mobile.jpg',
17+
'https://example.com/tablet.jpg',
18+
'https://example.com/phablet.jpg',
19+
'https://example.com/desktop.jpg',
20+
);
21+
22+
// Fully populate all viewport groups, but for all except desktop record that the LCP element had a different tag, id, or class.
23+
foreach ( array_merge( od_get_breakpoint_max_widths(), array( 1000 ) ) as $i => $viewport_width ) {
24+
for ( $j = 0; $j < $sample_size; $j++ ) {
25+
OD_URL_Metrics_Post_Type::store_url_metric(
26+
$slug,
27+
$test_case->get_sample_url_metric(
28+
array(
29+
'viewport_width' => $viewport_width,
30+
'elements' => array(),
31+
'extended_root' => array(
32+
'lcpElementExternalBackgroundImage' => array(
33+
'url' => $bg_images[ $i ],
34+
'tag' => 0 === $i ? 'DIV' : 'HEADER',
35+
'id' => 1 === $i ? 'foo' : 'masthead',
36+
'class' => 2 === $i ? 'bar' : 'banner',
37+
),
38+
),
39+
)
40+
)
41+
);
42+
}
43+
}
44+
},
45+
'buffer' => '
46+
<html lang="en">
47+
<head>
48+
<meta charset="utf-8">
49+
<title>...</title>
50+
<link rel="stylesheet" href="/style.css">
51+
</head>
52+
<body>
53+
<header id="masthead" class="banner">
54+
<h1>Example</h1>
55+
</header>
56+
</body>
57+
</html>
58+
',
59+
'expected' => '
60+
<html lang="en">
61+
<head>
62+
<meta charset="utf-8">
63+
<title>...</title>
64+
<link rel="stylesheet" href="/style.css">
65+
<link data-od-added-tag rel="preload" fetchpriority="high" as="image" href="https://example.com/desktop.jpg" media="screen and (min-width: 783px)">
66+
</head>
67+
<body>
68+
<header id="masthead" class="banner">
69+
<h1>Example</h1>
70+
</header>
71+
</body>
72+
</html>
73+
',
74+
);

‎plugins/image-prioritizer/tests/test-cases/lcp-element-external-background-image-present-in-document-and-fully-populated-samples.php

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<?php
2+
// phpcs:disable WordPress.WP.EnqueuedResources.NonEnqueuedStylesheet
3+
return array(
4+
'set_up' => static function ( Test_Image_Prioritizer_Helper $test_case ): void {
5+
add_filter(
6+
'od_breakpoint_max_widths',
7+
static function () {
8+
return array( 480, 600, 782 );
9+
}
10+
);
11+
12+
$slug = od_get_url_metrics_slug( od_get_normalized_query_vars() );
13+
$sample_size = od_get_url_metrics_breakpoint_sample_size();
14+
15+
$bg_images = array(
16+
'https://example.com/mobile.jpg',
17+
'https://example.com/tablet.jpg',
18+
'https://example.com/phablet.jpg',
19+
'https://example.com/desktop.jpg',
20+
);
21+
22+
// Fully populate all viewport groups.
23+
foreach ( array_merge( od_get_breakpoint_max_widths(), array( 1000 ) ) as $i => $viewport_width ) {
24+
for ( $j = 0; $j < $sample_size; $j++ ) {
25+
OD_URL_Metrics_Post_Type::store_url_metric(
26+
$slug,
27+
$test_case->get_sample_url_metric(
28+
array(
29+
'viewport_width' => $viewport_width,
30+
'elements' => array(),
31+
'extended_root' => array(
32+
'lcpElementExternalBackgroundImage' => array(
33+
'url' => $bg_images[ $i ],
34+
'tag' => 'HEADER',
35+
'id' => 'masthead',
36+
'class' => 'banner',
37+
),
38+
),
39+
)
40+
)
41+
);
42+
}
43+
}
44+
},
45+
'buffer' => '
46+
<html lang="en">
47+
<head>
48+
<meta charset="utf-8">
49+
<title>...</title>
50+
<link rel="stylesheet" href="/style.css">
51+
</head>
52+
<body>
53+
<header id="masthead" class="banner">
54+
<h1>Example</h1>
55+
</header>
56+
</body>
57+
</html>
58+
',
59+
'expected' => '
60+
<html lang="en">
61+
<head>
62+
<meta charset="utf-8">
63+
<title>...</title>
64+
<link rel="stylesheet" href="/style.css">
65+
<link data-od-added-tag rel="preload" fetchpriority="high" as="image" href="https://example.com/desktop.jpg" media="screen and (min-width: 783px)">
66+
<link data-od-added-tag rel="preload" fetchpriority="high" as="image" href="https://example.com/mobile.jpg" media="screen and (max-width: 480px)">
67+
<link data-od-added-tag rel="preload" fetchpriority="high" as="image" href="https://example.com/phablet.jpg" media="screen and (min-width: 601px) and (max-width: 782px)">
68+
<link data-od-added-tag rel="preload" fetchpriority="high" as="image" href="https://example.com/tablet.jpg" media="screen and (min-width: 481px) and (max-width: 600px)">
69+
</head>
70+
<body>
71+
<header id="masthead" class="banner">
72+
<h1>Example</h1>
73+
</header>
74+
</body>
75+
</html>
76+
',
77+
);

‎plugins/image-prioritizer/tests/test-cases/lcp-element-external-background-image-present-in-document-and-partially-populated-samples.php

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<?php
2+
// phpcs:disable WordPress.WP.EnqueuedResources.NonEnqueuedStylesheet
3+
return array(
4+
'set_up' => static function ( Test_Image_Prioritizer_Helper $test_case ): void {
5+
add_filter(
6+
'od_breakpoint_max_widths',
7+
static function () {
8+
return array( 480, 600, 782 );
9+
}
10+
);
11+
12+
$slug = od_get_url_metrics_slug( od_get_normalized_query_vars() );
13+
$sample_size = od_get_url_metrics_breakpoint_sample_size();
14+
15+
$bg_images = array(
16+
'https://example.com/mobile.jpg',
17+
'https://example.com/tablet.jpg',
18+
'https://example.com/phablet.jpg',
19+
'https://example.com/desktop.jpg',
20+
);
21+
22+
$viewport_sample_sizes = array(
23+
$sample_size,
24+
$sample_size - 1,
25+
0,
26+
$sample_size,
27+
);
28+
29+
// Partially populate all viewport groups.
30+
foreach ( array_merge( od_get_breakpoint_max_widths(), array( 1000 ) ) as $i => $viewport_width ) {
31+
for ( $j = 0; $j < $viewport_sample_sizes[ $i ]; $j++ ) {
32+
OD_URL_Metrics_Post_Type::store_url_metric(
33+
$slug,
34+
$test_case->get_sample_url_metric(
35+
array(
36+
'viewport_width' => $viewport_width,
37+
'elements' => array(),
38+
'extended_root' => array(
39+
'lcpElementExternalBackgroundImage' => array(
40+
'url' => $bg_images[ $i ],
41+
'tag' => 'HEADER',
42+
'id' => 'masthead',
43+
'class' => 'banner',
44+
),
45+
),
46+
)
47+
)
48+
);
49+
}
50+
}
51+
52+
// Store one more URL metric for desktop which has a different background image.
53+
OD_URL_Metrics_Post_Type::store_url_metric(
54+
$slug,
55+
$test_case->get_sample_url_metric(
56+
array(
57+
'viewport_width' => 1000,
58+
'elements' => array(),
59+
'extended_root' => array(
60+
'lcpElementExternalBackgroundImage' => array(
61+
'url' => 'https://example.com/desktop-alt.jpg',
62+
'tag' => 'HEADER',
63+
'id' => 'masthead',
64+
'class' => 'banner',
65+
),
66+
),
67+
)
68+
)
69+
);
70+
},
71+
'buffer' => '
72+
<html lang="en">
73+
<head>
74+
<meta charset="utf-8">
75+
<title>...</title>
76+
<link rel="stylesheet" href="/style.css">
77+
</head>
78+
<body>
79+
<header id="masthead" class="banner">
80+
<h1>Example</h1>
81+
</header>
82+
</body>
83+
</html>
84+
',
85+
'expected' => '
86+
<html lang="en">
87+
<head>
88+
<meta charset="utf-8">
89+
<title>...</title>
90+
<link rel="stylesheet" href="/style.css">
91+
<link data-od-added-tag rel="preload" fetchpriority="high" as="image" href="https://example.com/mobile.jpg" media="screen and (max-width: 480px)">
92+
</head>
93+
<body>
94+
<header id="masthead" class="banner">
95+
<h1>Example</h1>
96+
</header>
97+
<script type="module">/* import detect ... */</script>
98+
</body>
99+
</html>
100+
',
101+
);

‎tests/class-optimization-detective-test-helpers.php

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@ public function get_sample_url_metric( array $params ): OD_URL_Metric {
8686
'viewport_width' => 480,
8787
'elements' => array(),
8888
'timestamp' => microtime( true ),
89+
'extended_root' => array(),
8990
),
9091
$params
9192
);
@@ -94,7 +95,7 @@ public function get_sample_url_metric( array $params ): OD_URL_Metric {
9495
$params['elements'][] = $params['element'];
9596
}
9697

97-
return new OD_URL_Metric(
98+
$data = array_merge(
9899
array(
99100
'etag' => $params['etag'],
100101
'url' => $params['url'],
@@ -118,8 +119,10 @@ function ( array $element ): array {
118119
},
119120
$params['elements']
120121
),
121-
)
122+
),
123+
$params['extended_root']
122124
);
125+
return new OD_URL_Metric( $data );
123126
}
124127

125128
/**

0 commit comments

Comments
 (0)