Enhancement/4619 backstopjs image

.github/workflows/visual-regression.yml

@@ -20,6 +20,7 @@ on:
       - '.nvmrc'
       - '**/package.json'
       - 'package-lock.json'
+      - 'src/tests/backstop/config.js'
     types:
       - opened
       - reopened

assets/js/components/notifications/CoreSiteBannerNotifications.stories.js

@@ -30,6 +30,8 @@ const Template = ( { setupRegistry } ) => (
 	</WithRegistrySetup>
 );
 
+const delay = 350; // Needed for fonts to render properly.
+
 const notification1 = {
 	id: 'test-notification',
 	title: 'Google Analytics 5 Beta',
@@ -67,7 +69,7 @@ NotificationCTA.args = {
 NotificationCTA.scenario = {
 	label: 'Global/CoreSiteBannerNotifications1',
 	readySelector: '.googlesitekit-publisher-win',
-	delay: 250, // Needed for fonts to render properly.
+	delay,
 };
 
 export const NoNotifications = Template.bind( {} );
@@ -79,7 +81,7 @@ NoNotifications.args = {
 };
 NoNotifications.scenario = {
 	label: 'Global/CoreSiteBannerNotifications2',
-	delay: 250,
+	delay,
 };
 
 export const NotificationCTAWithSurvey = Template.bind( {} );
@@ -100,7 +102,7 @@ NotificationCTAWithSurvey.args = {
 };
 NotificationCTAWithSurvey.scenario = {
 	label: 'Global/CoreSiteBannerNotifications3',
-	delay: 250,
+	delay,
 };
 
 export const NotificationCTAWithSurveyShortDelay = Template.bind( {} );
@@ -124,7 +126,7 @@ NotificationCTAWithSurveyShortDelay.args = {
 };
 NotificationCTAWithSurveyShortDelay.scenario = {
 	label: 'Global/CoreSiteBannerNotifications4',
-	delay: 250,
+	delay,
 };
 
 export const NotificationCTAWithSurveyLongerDelay = Template.bind( {} );
@@ -149,7 +151,7 @@ NotificationCTAWithSurveyLongerDelay.args = {
 NotificationCTAWithSurveyLongerDelay.scenario = {
 	label: 'Global/CoreSiteBannerNotifications5',
 	readySelector: '.googlesitekit-publisher-win',
-	delay: 250,
+	delay,
 };
 
 export default {

bin/backstop

@@ -0,0 +1,34 @@
+#!/usr/bin/env bash
+
+# Site Kit by Google, Copyright 2022 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+BIN_DIR=$(cd -- "$(dirname -- "${BASH_SOURCE[0]}")" &> /dev/null && pwd)
+ROOT_DIR=$(dirname "$BIN_DIR")
+
+VERSION=6.1.1
+IMAGE=googlesitekit/vrt:$VERSION
+
+# Build the backstopjs image if it doesn't exist yet.
+docker image inspect $IMAGE -f "{{.Id}}" >/dev/null 2>&1 ||
+	docker build -t $IMAGE --build-arg BACKSTOPJS_VERSION=$VERSION $ROOT_DIR/docker/backstopjs
+
+# Run the backstopjs command.
+docker run --rm -it --mount type=bind,source="$ROOT_DIR",target="/src" $IMAGE $1 --config=/src/tests/backstop/config.js
+
+# Display a link to the report only after the "test" command.
+if [ $1 == "test" ]; then
+	echo ""
+	echo "To see the VRT report open this URL in your browser: file://$ROOT_DIR/tests/backstop/html_report/index.html"
+fi

docker/backstopjs/Dockerfile

@@ -0,0 +1,15 @@
+FROM alpine:latest
+
+ARG BACKSTOPJS_VERSION=6.1.1
+
+ENV BACKSTOPJS_VERSION=$BACKSTOPJS_VERSION
+
+RUN apk upgrade --no-cache --available && \
+    apk add --no-cache chromium nodejs npm && \
+    PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true npm i -g backstopjs@${BACKSTOPJS_VERSION} && \
+    npm cache clean -f && \
+    rm -rf /root/.cache
+
+WORKDIR /src
+
+ENTRYPOINT ["backstop"]