🏗️ ✅Add visual diff tests for all AMP components on www.ampbyexample.com

(#13394)
ampproject · Feb 9, 2018 · 9ecdaaa · 9ecdaaa
1 parent 669d752
commit 9ecdaaa
Show file tree

Hide file tree

Showing 933 changed files with 282,044 additions and 1,418 deletions.
diff --git a/.gitignore b/.gitignore
@@ -22,3 +22,4 @@ package-lock.json
 *.swp
 *.swo
 yarn-error.log
+PERCY_BUILD_ID
diff --git a/build-system/config.js b/build-system/config.js
@@ -132,6 +132,7 @@ module.exports = {
     '!extensions/amp-animation/0.1/css-expr-impl.js',
     '!extensions/amp-bind/0.1/bind-expr-impl.js',
     '!test/coverage/**/*.*',
+    '!test/visual-diff/visual-tests.js',
   ],
   jsonGlobs: [
     '**/*.json',
@@ -161,7 +162,9 @@ module.exports = {
     // of the AMP runtime, so shouldn't be checked.
     '!extensions/amp-a4a/*/test/testdata/*.js',
     '!examples/*.js',
+    '!examples/visual-tests/**/*',
     '!test/coverage/**/*.*',
+    '!test/visual-diff/visual-tests.js',
   ],
   changelogIgnoreFileTypes: /\.md|\.json|\.yaml|LICENSE|CONTRIBUTORS$/,
 };
diff --git a/build-system/copy-abe-visual-test-pages.sh b/build-system/copy-abe-visual-test-pages.sh
@@ -0,0 +1,167 @@
+#!/bin/bash
+#
+# Copyright 2018 The AMP HTML Authors. All Rights Reserved.
+#
+# 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
+#
+#      http://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.
+#
+# This script clones https://github.com/ampproject/amp-by-example and
+# regenerates all the pages on www.ampbyexample.com so they can be used as test
+# pages by the AMP visual diff tests.
+
+GREEN() { echo -e "\033[1;32m$1\033[0m"; }
+CYAN() { echo -e "\033[1;36m$1\033[0m"; }
+YELLOW() { echo -e "\033[1;33m$1\033[0m"; }
+RED() { echo -e "\033[1;31m$1\033[0m"; }
+
+RUN() {
+  $* || { echo $(RED "ERROR:") "Command" $(CYAN $1) "failed"  ; exit 1; }
+}
+
+#SCRIPT=${BASH_SOURCE[0]}
+SCRIPT=`realpath $0`
+BUILD_SYSTEM_DIR=$(dirname "$SCRIPT")
+AMPHTML_DIR=$(dirname "$BUILD_SYSTEM_DIR")
+SRC_DIR=$(dirname "$AMPHTML_DIR")
+ABE_DIR="$SRC_DIR/amp-by-example"
+ABE_TESTS_PATH="examples/visual-tests/amp-by-example"
+ABE_TESTS_DIR="$AMPHTML_DIR/$ABE_TESTS_PATH"
+ABE_TESTS_JSON_FILE="$AMPHTML_DIR/test/visual-diff/visual-tests.js"
+ABE_COMPONENTS_DIR="$ABE_TESTS_DIR/components"
+ABE_CLONE_PATH="git@github.com:ampproject/amp-by-example.git"
+
+echo $(YELLOW "-----------------------------------------------------------------------------------------------------------------")
+echo $(GREEN "Running") $(CYAN $SCRIPT)
+echo $(GREEN "This script does the following:")
+echo $(GREEN "  1. If required, creates a local") $(CYAN "amp-by-example") $(GREEN "git client in") $(CYAN $ABE_DIR)
+echo $(GREEN "  2. If already present, updates the local") $(CYAN "amp-by-example") $(GREEN "git client")
+echo $(GREEN "  3. Runs") $(CYAN "gulp build") $(GREEN "to regenerate pages")
+echo $(GREEN "  4. Copies the") $(CYAN "dist") $(GREEN "folder to") $(CYAN "$ABE_TESTS_DIR")
+echo $(GREEN "  5. Prepends all local directory links with") $(CYAN "$ABE_TESTS_PATH")
+echo $(GREEN "  6. Generates test json for all components in") $(CYAN "$ABE_COMPONENTS_DIR")
+echo $(YELLOW "-----------------------------------------------------------------------------------------------------------------")
+echo -e "\n"
+
+read -n 1 -s -r -p "$(GREEN 'Press any key to continue...')"
+
+# Create a clone in ampproject/amp-by-example if required
+echo -e "\n"
+echo $(GREEN "Checking for the existence of") $(CYAN $ABE_DIR)
+if [ -d "$ABE_DIR" ]; then
+  echo "Found" $(CYAN $ABE_DIR)
+else
+  echo "Could not find" $(CYAN $ABE_DIR)
+
+  echo -e "\n"
+  echo $(GREEN "Cloning") $(CYAN $ABE_CLONE_PATH) $(GREEN "into") $(CYAN $ABE_DIR)
+  RUN "cd $SRC_DIR"
+  RUN "git clone $ABE_CLONE_PATH"
+
+  echo -e "\n"
+  echo $(GREEN "Running") $(CYAN "npm install")
+  RUN "cd $ABE_DIR"
+  RUN "npm install"
+fi
+
+# Create a fresh build in ampproject/amp-by-example
+echo -e "\n"
+echo $(GREEN "Changing directory to") $(CYAN $ABE_DIR)
+RUN "cd $ABE_DIR"
+RUN "echo `pwd`"
+
+echo -e "\n"
+echo $(GREEN "Current branch")
+RUN "git branch"
+
+echo -e "\n"
+echo $(GREEN "Status and local changes from current branch")
+RUN "git status"
+RUN "git diff"
+
+echo -e "\n"
+echo $(GREEN "Resetting local changes")
+RUN "git checkout master -- ."
+RUN "git status"
+
+echo -e "\n"
+echo $(GREEN "Checking out the") $(CYAN "master") $(GREEN "branch")
+RUN "git checkout master"
+
+echo -e "\n"
+echo $(GREEN "Fetching latest changes from") $(CYAN "upstream")
+RUN "git fetch"
+RUN "git status"
+
+echo -e "\n"
+echo $(GREEN "Applying changes locally")
+RUN "git rebase"
+RUN "git status"
+
+echo -e "\n"
+echo $(GREEN "Cleaning") $(CYAN "dist") $(GREEN "directory in") $(CYAN $ABE_DIR)
+RUN "gulp clean"
+
+echo -e "\n"
+echo $(GREEN "Building") $(CYAN "amp-by-example")
+RUN "gulp build"
+
+# Copy dist directory to examples/visual-diff/amp-by-example
+echo -e "\n"
+echo $(GREEN "Copying contents of") $(CYAN "$ABE_DIR/dist") $(GREEN "from") \
+$(GREEN "to") $(CYAN "$ABE_TESTS_DIR")
+RUN "rm -rf $ABE_TESTS_DIR/*"
+RUN "cp -r $ABE_DIR/dist/* $ABE_TESTS_DIR/"
+
+echo -e "\n"
+echo $(GREEN "Contents of") $(CYAN "$ABE_TESTS_DIR")
+RUN "ls -la $ABE_TESTS_DIR/"
+
+echo -e "\n"
+echo $(GREEN "Subdirectories in") $(CYAN "$ABE_TESTS_DIR")
+cd $ABE_TESTS_DIR
+RUN "ls -d */"
+
+echo -e "\n"
+echo $(GREEN "Prepending all local directory links with") $(CYAN "$ABE_TESTS_DIR")
+for HTML_FILE in `find . -name "*.html"`
+do
+  echo "Processing $HTML_FILE..."
+  for DIRPATH in `ls -d */`
+  do
+    DIRNAME=`basename $DIRPATH`
+    sed -i "s~/$DIRNAME/~/$ABE_TESTS_PATH/$DIRNAME/~g" $HTML_FILE
+    sed -i "s~ampbyexample\.com/$ABE_TESTS_PATH/$DIRNAME/~ampbyexample\.com/$DIRNAME/~g" $HTML_FILE
+  done
+done
+
+echo -e "\n"
+echo $(GREEN "Generating test json for all components in") $(CYAN "$ABE_COMPONENTS_DIR")
+echo $(GREEN "Copy this code into the") $(CYAN "webpages") $(GREEN "section of") $(CYAN "$ABE_TESTS_JSON_FILE")
+RUN "cd $ABE_COMPONENTS_DIR"
+for COMPONENT_DIR in `ls -d */`
+do
+  COMPONENT=`basename $COMPONENT_DIR`
+  echo "    {"
+  echo "      \"url\": \"examples/visual-tests/amp-by-example/components/$COMPONENT/index.html\","
+  echo "      \"name\": \"$COMPONENT - Amp By Example\""
+  echo "    },"
+done
+
+echo -e "\n"
+echo $(YELLOW "-----------------------------------------------------------------------------------------------------------------")
+echo $(GREEN "Successfully completed the following:")
+echo $(GREEN "  1. Created / updated the local") $(CYAN "amp-by-example") $(GREEN "git client")
+echo $(GREEN "  2. Regenerated all pages in") $(CYAN "$ABE_TESTS_DIR")
+echo $(GREEN "  3. Replaced the contents of") $(CYAN "$ABE_TESTS_DIR") $(GREEN "with newly built pages")
+echo $(GREEN "  4. Prepended all local directory links with") $(CYAN "$ABE_TESTS_PATH")
+echo $(GREEN "  5. Generated test json for all components in") $(CYAN "$ABE_COMPONENTS_DIR")
+echo $(YELLOW "-----------------------------------------------------------------------------------------------------------------")
diff --git a/build-system/pr-check.js b/build-system/pr-check.js
@@ -165,7 +165,7 @@ function isOwnersFile(filePath) {
  * @return {boolean}
  */
 function isDocFile(filePath) {
-  return path.extname(filePath) == '.md';
+  return path.extname(filePath) == '.md' && !filePath.startsWith('examples/');
 }
 
 /**
@@ -176,7 +176,7 @@ function isDocFile(filePath) {
 function isVisualDiffFile(filePath) {
   const filename = path.basename(filePath);
   return (filename == 'visual-diff.rb' ||
-          filename == 'visual-tests.json' ||
+          filename == 'visual-tests.js' ||
           filePath.startsWith('examples/visual-tests/'));
 }
 

diff --git a/build-system/tasks/check-links.js b/build-system/tasks/check-links.js
@@ -39,7 +39,7 @@ function getMarkdownFiles() {
   const filesInPr =
         getStdout('git diff --name-only master...HEAD').trim().split('\n');
   return filesInPr.filter(function(file) {
-    return path.extname(file) == '.md';
+    return path.extname(file) == '.md' && !file.startsWith('examples/');
   });
 }
 

diff --git a/build-system/tasks/visual-diff.rb b/build-system/tasks/visual-diff.rb
@@ -38,7 +38,7 @@
 AMP_RUNTIME_FILE = 'dist/amp.js'
 BUILD_STATUS_URL = 'https://amphtml-percy-status-checker.appspot.com/status'
 BUILD_PROCESSING_POLLING_INTERVAL_SECS = 5
-BUILD_PROCESSING_TIMEOUT_SECS = 60
+BUILD_PROCESSING_TIMEOUT_SECS = 60 * 5
 PERCY_BUILD_URL = 'https://percy.io/ampproject/amphtml/builds'
 OUT = ENV['TRAVIS'] ? '/dev/null' : :out
 
@@ -209,12 +209,12 @@ def close_web_server(pid)
 end
 
 
-# Loads all the visual tests from a well-known json config file.
+# Loads all the visual tests from a well-known pseudo-json config file.
 def load_visual_tests_config_json
   json_file = File.open(
       File.join(
           File.dirname(__FILE__),
-          '../../test/visual-diff/visual-tests.json'),
+          '../../test/visual-diff/visual-tests.js'),
       'r')
   json_file.read
 end