add image test for mathjax v3

Author: archmoj

.circleci/config.yml

@@ -216,6 +216,24 @@ jobs:
           name: Test MathJax on firefox-latest
           command: .circleci/test.sh mathjax-firefox82+
 
+  make-baselines-mathjax3:
+    docker:
+      - image: circleci/python:3.8.9
+    working_directory: ~/plotly.js
+    steps:
+      - attach_workspace:
+          at: ~/
+      - run:
+          name: Install kaleido, plotly.io and required fonts
+          command: .circleci/env_image.sh
+      - run:
+          name: Create mathjax v3 png files
+          command: .circleci/test.sh make-baselines-mathjax3
+      - persist_to_workspace:
+          root: ~/
+          paths:
+            - plotly.js
+
   make-baselines:
     parallelism: 4
     docker:
@@ -249,6 +267,20 @@ jobs:
           path: build
           destination: /
 
+  test-baselines-mathjax3:
+    docker:
+      - image: circleci/node:16.8.0
+    working_directory: ~/plotly.js
+    steps:
+      - attach_workspace:
+          at: ~/
+      - run:
+          name: Compare pixels of mathjax v3 baselines
+          command: .circleci/test.sh test-image-mathjax3
+      - store_artifacts:
+          path: build
+          destination: /
+
   make-exports:
     docker:
       - image: circleci/python:3.8.9
@@ -413,6 +445,12 @@ workflows:
       - flaky-no-gl-jasmine:
           requires:
             - install-and-cibuild
+      - make-baselines-mathjax3:
+          requires:
+            - install-and-cibuild
+      - test-baselines-mathjax3:
+          requires:
+            - make-baselines-mathjax3
       - make-baselines:
           requires:
             - install-and-cibuild

.circleci/test.sh

@@ -80,6 +80,11 @@ case $1 in
         exit $EXIT_STATE
         ;;
 
+    make-baselines-mathjax3)
+        python3 test/image/make_baseline.py mathjax3    legend_mathjax_title_and_items mathjax parcats_grid_subplots table_latex_multitrace_scatter table_plain_birds table_wrapped_birds ternary-mathjax || EXIT_STATE=$?
+        exit $EXIT_STATE
+        ;;
+
     make-baselines)
         SUITE=$(find $ROOT/test/image/mocks/ -type f -printf "%f\n" | sed 's/\.json$//1' | circleci tests split)
         python3 test/image/make_baseline.py $SUITE || EXIT_STATE=$?
@@ -91,6 +96,11 @@ case $1 in
         exit $EXIT_STATE
         ;;
 
+    test-image-mathjax3)
+        node test/image/compare_pixels_test.js mathjax3 || { tar -cvf build/baselines.tar build/test_images/*.png ; exit 1 ; } || EXIT_STATE=$?
+        exit $EXIT_STATE
+        ;;
+
     source-syntax)
         npm run lint        || EXIT_STATE=$?
         npm run test-syntax || EXIT_STATE=$?

test/image/baselines/mathjax3___legend_mathjax_title_and_items.png

@@ -41,16 +41,33 @@ if(argv._.length === 0) {
 
 // Build list of mocks to compare
 var allMockList = [];
+var mathjax3;
 argv._.forEach(function(pattern) {
-    var mockList = getMockList(pattern);
+    if(pattern === 'mathjax3') {
+        mathjax3 = true;
+    } else {
+        var mockList = getMockList(pattern);
 
-    if(mockList.length === 0) {
-        throw 'No mocks found with pattern ' + pattern;
-    }
+        if(mockList.length === 0) {
+            throw 'No mocks found with pattern ' + pattern;
+        }
 
-    allMockList = allMockList.concat(mockList);
+        allMockList = allMockList.concat(mockList);
+    }
 });
 
+if(mathjax3) {
+    allMockList = [
+        'legend_mathjax_title_and_items',
+        'mathjax',
+        'parcats_grid_subplots',
+        'table_latex_multitrace_scatter',
+        'table_plain_birds',
+        'table_wrapped_birds',
+        'ternary-mathjax'
+    ];
+}
+
 // To get rid of duplicates
 function unique(value, index, self) {
     return self.indexOf(value) === index;
@@ -75,11 +92,19 @@ for(var i = 0; i < allMockList.length; i++) {
         continue;
     }
 
+    var isMapbox = mockName.substr(0, 7) === 'mapbox_';
+    var isOtherFlaky = [
+        // list flaky mocks other than mapbox:
+        'gl3d_bunny-hull'
+    ].indexOf(mockName) !== -1;
+
+    if(mathjax3) mockName = 'mathjax3___' + mockName;
+
     var imagePaths = getImagePaths(mockName);
     var base = imagePaths.baseline;
     var test = imagePaths.test;
 
-    if(!common.doesFileExist(test)) {
+    if(!common.doesFileExist(test) && !mathjax3) {
         console.log('- skip:', mockName);
         skipped.push(mockName);
         continue;
@@ -114,12 +139,6 @@ for(var i = 0; i < allMockList.length; i++) {
         height: height
     });
 
-    var isMapbox = mockName.substr(0, 7) === 'mapbox_';
-    var isOtherFlaky = [
-        // list flaky mocks other than mapbox:
-        'gl3d_bunny-hull'
-    ].indexOf(mockName) !== -1;
-
     var shouldBePixelPerfect = !(isMapbox || isOtherFlaky);
 
     var numDiffPixels = pixelmatch(img0.data, img1.data, diff.data, width, height, {