Skip to content

Commit

Permalink
feat(TestRun): add special page for receipt
Browse files Browse the repository at this point in the history
  • Loading branch information
@harunbleech
harunbleech committed Oct 21, 2024
1 parent dbbcbca commit b5633b4
Show file tree
Hide file tree
Showing 10 changed files with 155 additions and 73 deletions.
48 changes: 28 additions & 20 deletions components/test-run-alerts/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,27 +63,35 @@ class="vrts-test-run-alerts__card-link"
<a href="<?php echo esc_url( get_permalink( $alert->post_id ) ); ?>" target="_blank" class="vrts-test-run-alerts__card-path"><?php echo esc_html( $tested_url ); ?></a>
</div>
<?php endforeach; ?>
<script>
const urlParams = new URLSearchParams( window.location.search );
const currentAlertId = urlParams.get( 'alert_id' );

if ( currentAlertId ) {
const $sidebar = document.querySelector(
'.vrts-test-run-page__sidebar'
);
const $alert = document.getElementById(
`vrts-alert-${ currentAlertId }`
);

if ( $alert ) {
$sidebar.scrollTo( {
left: 0,
top: $alert.offsetTop - 100,
} );
}
}
</script>
</div>
<?php endif; ?>
<?php vrts()->component( 'test-run-receipt', $data ); ?>
<script>
const urlParams = new URLSearchParams( window.location.search );
const currentAlertId = urlParams.get( 'alert_id' );

if ( currentAlertId ) {
const $sidebar = document.querySelector(
'.vrts-test-run-page__sidebar'
);

let $alert = document.getElementById(
`vrts-alert-${ currentAlertId }`
);

let offsetTop = 0;

while ( $alert && $alert !== $sidebar ) {
offsetTop += $alert.offsetTop;
$alert = $alert.offsetParent;
}

if ( $alert ) {
$sidebar.scrollTo( {
left: 0,
top: offsetTop - 82,
} );
}
}
</script>
</vrts-test-run-alerts>
17 changes: 10 additions & 7 deletions components/test-run-alerts/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,9 @@ class VrtsTestRunAlerts extends window.HTMLElement {
}

const href = $el.getAttribute( 'href' );
const $comparisons = document.querySelector( 'vrts-comparisons' );
const $content =
document.querySelector( 'vrts-comparisons' ) ||
document.querySelector( 'vrts-test-run-success' );
const $pagination = document.querySelector(
'vrts-test-run-pagination'
);
Expand All @@ -162,7 +164,7 @@ class VrtsTestRunAlerts extends window.HTMLElement {
$el.setAttribute( 'data-vrts-current', 'true' );

const timeout = setTimeout( () => {
$comparisons.setAttribute( 'data-vrts-loading', 'true' );
$content.setAttribute( 'data-vrts-loading', 'true' );
}, 200 );

fetch( href )
Expand All @@ -173,21 +175,22 @@ class VrtsTestRunAlerts extends window.HTMLElement {
const parser = new window.DOMParser();
const $html = parser.parseFromString( data, 'text/html' );

const $newComparisons =
$html.querySelector( 'vrts-comparisons' );
const $newContent =
$html.querySelector( 'vrts-comparisons' ) ||
$html.querySelector( 'vrts-test-run-success' );
const $newPagination = $html.querySelector(
'vrts-test-run-pagination'
);

window.history.replaceState( {}, '', href );

window.scrollTo( {
top: $comparisons.offsetTop - 62,
top: $content.offsetTop - 62,
behavior: 'smooth',
} );

if ( $newComparisons ) {
$comparisons.replaceWith( $newComparisons );
if ( $newContent ) {
$content.replaceWith( $newContent );
}

if ( $newPagination ) {
Expand Down
16 changes: 13 additions & 3 deletions components/test-run-page/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,15 @@
<div class="vrts-test-run-page__content" data-vrts-fullscreen="false">
<div class="vrts-test-run-page__content-heading">
<?php vrts()->component( 'test-run-info', $data['run'] ); ?>
<?php vrts()->component( 'test-run-pagination', $data['pagination'] ); ?>
<?php
vrts()->component( 'test-run-pagination', [
'run' => $data['run'],
'pagination' => $data['pagination'],
'is_receipt' => $data['is_receipt'],
] );
?>
</div>
<?php if ( $data['alerts'] ) : ?>
<?php if ( $data['alerts'] && ! $data['is_receipt'] ) : ?>
<?php
vrts()->component( 'comparisons', [
'alert' => $data['alert'],
Expand All @@ -20,7 +26,11 @@
<?php vrts()->icon( 'arrow-down' ); ?>
</div>
<?php else : ?>
<?php vrts()->component( 'test-run-success' ); ?>
<?php
vrts()->component( 'test-run-success', [
'is_receipt' => $data['is_receipt'],
] );
?>
<?php endif; ?>
</div>
</vrts-test-run-page>
30 changes: 18 additions & 12 deletions components/test-run-pagination/index.php
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
<?php

if ( 0 === $data['prev_alert_id'] && 0 === $data['next_alert_id'] ) {
// don't show pagination if there is no previous or next alert.
use Vrts\Core\Utilities\Url_Helpers;

// don't show pagination if there is no previous or next alert.
if ( 0 === $data['pagination']['total'] ) {
return;
}

Expand All @@ -10,21 +12,25 @@
<span class="screen-reader-text"><?php esc_html_e( 'Current Page', 'visual-regression-tests' ); ?></span>
<span class="vrts-test-run-pagination__text">
<?php
printf(
/* translators: %d: pages. */
esc_html_x( 'Alert %1$d of %2$d', 'e.g. Alert 1 of 2', 'visual-regression-tests' ),
esc_html( $data['current'] ),
esc_html( $data['total'] )
);
if ( $data['is_receipt'] ) {
esc_html_e( 'Test Receipt', 'visual-regression-tests' );
} else {
printf(
/* translators: %d: pages. */
esc_html_x( 'Alert %1$d of %2$d', 'e.g. Alert 1 of 2', 'visual-regression-tests' ),
esc_html( $data['pagination']['current'] ),
esc_html( $data['pagination']['total'] )
);
}
?>
</span>
<a data-vrts-pagination="prev" data-vrts-alert-id="<?php echo esc_attr( $data['prev_alert_id'] ); ?>" class="button <?php echo ( 0 === $data['prev_alert_id'] ) ? 'button-disabled' : ''; ?>"
<?php echo ( 0 !== $data['prev_alert_id'] ) ? 'href="' . esc_url( $data['prev_link'] ) . '"' : ''; ?>>
<a data-vrts-pagination="prev" data-vrts-alert-id="<?php echo esc_attr( $data['pagination']['prev_alert_id'] ); ?>" class="button <?php echo ( 0 === $data['pagination']['prev_alert_id'] ) ? 'button-disabled' : ''; ?>"
<?php echo ( 0 !== $data['pagination']['prev_alert_id'] ) ? 'href="' . esc_url( Url_Helpers::get_alert_page( $data['pagination']['prev_alert_id'], $data['run']->id ) ) . '"' : ''; ?>>
<span class="screen-reader-text"><?php esc_html_e( 'Previous alert', 'visual-regression-tests' ); ?></span>
<span aria-hidden="true">‹</span>
</a>
<a data-vrts-pagination="next" data-vrts-alert-id="<?php echo esc_attr( $data['next_alert_id'] ); ?>" class="button <?php echo ( 0 === $data['next_alert_id'] ) ? 'button-disabled' : ''; ?>"
<?php echo ( 0 !== $data['next_alert_id'] ) ? 'href="' . esc_url( $data['next_link'] ) . '"' : ''; ?>>
<a data-vrts-pagination="next" data-vrts-alert-id="<?php echo esc_attr( $data['pagination']['next_alert_id'] ); ?>" class="button <?php echo ( 0 === $data['pagination']['next_alert_id'] ) ? 'button-disabled' : ''; ?>"
<?php echo ( 0 !== $data['pagination']['next_alert_id'] ) ? 'href="' . esc_url( Url_Helpers::get_alert_page( $data['pagination']['next_alert_id'], $data['run']->id ) ) . '"' : ''; ?>>
<span class="screen-reader-text"><?php esc_html_e( 'Next alert', 'visual-regression-tests' ); ?></span>
<span aria-hidden="true">›</span>
</a>
Expand Down
28 changes: 19 additions & 9 deletions components/test-run-pagination/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ class VrtsTestRunPagination extends window.HTMLElement {
e.preventDefault();
const $el = e.currentTarget;
const nextAlertId = $el.getAttribute( 'data-vrts-alert-id' );
const $nextAlert = document.getElementById(
let $nextAlert = document.getElementById(
`vrts-alert-${ nextAlertId }`
);

Expand All @@ -37,7 +37,9 @@ class VrtsTestRunPagination extends window.HTMLElement {
}

const href = $el.getAttribute( 'href' );
const $comparisons = document.querySelector( 'vrts-comparisons' );
const $content =
document.querySelector( 'vrts-comparisons' ) ||
document.querySelector( 'vrts-test-run-success' );
const $sidebar = document.querySelector(
'.vrts-test-run-page__sidebar'
);
Expand All @@ -52,15 +54,22 @@ class VrtsTestRunPagination extends window.HTMLElement {
let interval = null;

const timeout = setTimeout( () => {
$comparisons.setAttribute( 'data-vrts-loading', 'true' );
$content.setAttribute( 'data-vrts-loading', 'true' );
const loadingStartTime = window.Date.now();
interval = setInterval( () => {
loadingElapsedTime = window.Date.now() - loadingStartTime;
}, 50 );
}, 200 );

let offsetTop = 0;

while ( $nextAlert && $nextAlert !== $sidebar ) {
offsetTop += $nextAlert.offsetTop;
$nextAlert = $nextAlert.offsetParent;
}

$sidebar.scrollTo( {
top: $nextAlert.offsetTop - 100,
top: offsetTop - 82,
behavior: 'smooth',
} );

Expand All @@ -72,16 +81,17 @@ class VrtsTestRunPagination extends window.HTMLElement {
const parser = new window.DOMParser();
const $html = parser.parseFromString( data, 'text/html' );

const $newComparisons =
$html.querySelector( 'vrts-comparisons' );
const $newContent =
$html.querySelector( 'vrts-comparisons' ) ||
$html.querySelector( 'vrts-test-run-success' );
const $newPagination = $html.querySelector(
'vrts-test-run-pagination'
);

window.history.replaceState( {}, '', href );

window.scrollTo( {
top: $comparisons.offsetTop - 62,
top: $content.offsetTop - 62,
behavior: 'smooth',
} );

Expand All @@ -91,8 +101,8 @@ class VrtsTestRunPagination extends window.HTMLElement {
: 0;

setTimeout( () => {
if ( $newComparisons ) {
$comparisons.replaceWith( $newComparisons );
if ( $newContent ) {
$content.replaceWith( $newContent );
}

if ( $newPagination ) {
Expand Down
32 changes: 27 additions & 5 deletions components/test-run-receipt/_style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,37 +5,43 @@
padding: 0 12px;
margin: 30px auto 30px auto;
background-color: #f6f7fb;
box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.07);
max-width: 280px;
transition: box-shadow 0.2s;

@media (min-width: 851px) {
max-width: 100%;
margin: 8px 20px 20px;
}

&:hover,
&:has(:focus-within) {
box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.15);
}

&::before,
&::after {
--mask: radial-gradient(10px at top, #0000 97%, #000) 50% / 18.5px 100%;
--vrts-test-run-receipt-mask: radial-gradient(10px at top, #0000 97%, #000) 50% / 18.5px 100%;
position: absolute;
left: 0;
right: 0;
bottom: 100%;
content: "";
mask: var(--mask);
mask: var(--vrts-test-run-receipt-mask);
display: block;
height: 10px;
background: inherit;
}

&::after {
--mask: radial-gradient(10px at bottom, #0000 97%, #000) 50% / 18.5px 100%;
--vrts-test-run-receipt-mask: radial-gradient(10px at bottom, #0000 97%, #000) 50% / 18.5px 100%;
bottom: -10px;
}

> * {
padding: 12px 0;

&:not(:last-child) {
&:where(:not(:last-child)) {
border-bottom: 1px dashed #c3c4c7;
}
}
Expand All @@ -48,6 +54,22 @@
left: 0;
}

a {
z-index: 2;
}

&__link {
display: block;
border: none;
position: absolute;
inset: 0;

&:focus {
outline: 0;
box-shadow: none;
}
}

&__header {
display: flex;
flex-direction: column;
Expand Down
1 change: 1 addition & 0 deletions components/test-run-receipt/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
?>

<div class="vrts-test-run-receipt">
<a id="vrts-alert-receipt" class="vrts-test-run-receipt__link" data-vrts-alert="receipt" href="<?php echo esc_url( Url_Helpers::get_alert_page( 'receipt', $data['run']->id ) ); ?>"></a>
<div class="vrts-test-run-receipt__header">
<div class="vrts-test-run-receipt__header-logo">
<?php vrts()->logo(); ?>
Expand Down
2 changes: 1 addition & 1 deletion components/test-run-success/_style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
.vrts-test-run-success {
display: block;
padding: 50px 20px;
padding: max(50px, 12%) 20px;
border-top: 0;

&__inner {
Expand Down
6 changes: 5 additions & 1 deletion components/test-run-success/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@
<div class="vrts-test-run-success__inner">
<div class="vrts-test-run-success__lottie-player" vrts-lottie-player></div>
<div class="vrts-test-run-success__content">
<p><?php esc_html_e( 'Smooth sailing – no changes found!', 'visual-regression-tests' ); ?></p>
<?php if ( $data['is_receipt'] ) : ?>
<p><?php esc_html_e( 'Congrats – you have seen all the changes in this Run!', 'visual-regression-tests' ); ?></p>
<?php else : ?>
<p><?php esc_html_e( 'Smooth sailing – no changes found!', 'visual-regression-tests' ); ?></p>
<?php endif; ?>
<p><?php esc_html_e( "You're good to go.", 'visual-regression-tests' ); ?></p>
</div>
</div>
Expand Down
Loading

0 comments on commit b5633b4

Please sign in to comment.