Merge pull request #1408 from finos/upgrade-puppeteer-2

Upgrade `puppeteer` to `9.0.0`
finos · May 1, 2021 · 10fb6f6 · 10fb6f6
2 parents 7754c95 + 706ceb0
commit 10fb6f6
Show file tree

Hide file tree

Showing 26 changed files with 502 additions and 398 deletions.
diff --git a/azure-pipelines.yml b/azure-pipelines.yml
@@ -62,11 +62,36 @@ jobs:
         PSP_DOCKER: 1
 
     - task: PublishTestResults@2
-      condition: succeededOrFailed()
+      condition: succeeded()
       inputs:
         testRunner: JUnit
         testResultsFiles: 'junit.xml'
 
+    - task: PublishPipelineArtifact@1
+      condition: failed()
+      inputs:
+        targetPath: '$(System.DefaultWorkingDirectory)/packages/perspective-viewer/screenshots/'
+        artifactName: "perspective-viewer"
+
+    - task: PublishPipelineArtifact@1
+      condition: failed()
+      inputs:
+        targetPath: '$(System.DefaultWorkingDirectory)/packages/perspective-viewer-datagrid/screenshots/'
+        artifactName: "perspective-viewer-datagrid"
+
+    - task: PublishPipelineArtifact@1
+      condition: failed()
+      inputs:
+        targetPath: '$(System.DefaultWorkingDirectory)/packages/perspective-viewer-d3fc/screenshots/'
+        artifactName: "perspective-viewer-d3fc"
+
+    - task: PublishPipelineArtifact@1
+      condition: failed()
+      inputs:
+        targetPath: '$(System.DefaultWorkingDirectory)/packages/perspective-workspace/screenshots/'
+        artifactName: "perspective-workspace"
+
+
 - job: 'Linux'
   pool:
     vmImage: 'ubuntu-16.04'

diff --git a/docker/puppeteer/Dockerfile b/docker/puppeteer/Dockerfile
@@ -1,6 +1,6 @@
 # Liberally copied from zenato/puppeteer
 
-FROM node:8
+FROM node:14
 
 RUN apt-get update && apt-get install -y wget --no-install-recommends \
     && wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
@@ -12,21 +12,13 @@ RUN apt-get update && apt-get install -y wget --no-install-recommends \
     && apt-get purge --auto-remove -y curl \
     && rm -rf /src/*.deb
 
-RUN yarn add puppeteer@1.14.0
+RUN yarn add puppeteer@9.0.0
 
 RUN groupadd -r pptruser && useradd -r -g pptruser -G audio,video pptruser \
     && mkdir -p /home/pptruser/Downloads \
     && chown -R pptruser:pptruser /home/pptruser \
     && chown -R pptruser:pptruser /node_modules
 
-
-RUN git clone https://github.com/stefanhaustein/TerminalImageViewer.git \
-    && cd TerminalImageViewer/src/main/cpp \
-    && make \
-    && make install \
-    && cd ../../.. \
-    && rm -rf TerminalImageViewer
-
 USER pptruser
 
 CMD ["google-chrome-stable"]
diff --git a/packages/perspective-jupyterlab/test/results/linux.docker.json b/packages/perspective-jupyterlab/test/results/linux.docker.json
@@ -1,6 +1,6 @@
 {
-    "resize_Basic_widget_functions": "30f89fb74a40a6abfe02887d62be8282",
-    "resize_Resize_the_container_causes_the_widget_to_resize": "30f89fb74a40a6abfe02887d62be8282",
-    "resize_row_pivots_traitlet_works": "03e9bd6f294b959000490af0908536f2",
-    "__GIT_COMMIT__": "d6344be7a126e4b2bfa05dbb8c4d5f5feca2b8c5"
+    "resize_Basic_widget_functions": "bb2bf2ecff35fb62ef2e4e1b832467d6",
+    "resize_Resize_the_container_causes_the_widget_to_resize": "bb2bf2ecff35fb62ef2e4e1b832467d6",
+    "resize_row_pivots_traitlet_works": "65892ed4574fe02005e2c8fcf3b67718",
+    "__GIT_COMMIT__": "686bb7147e58992e5d06056778b20d07605a8042"
 }
diff --git a/packages/perspective-test/src/js/globalSetup.js b/packages/perspective-test/src/js/globalSetup.js
@@ -1,11 +1,23 @@
 const puppeteer = require("puppeteer");
 
 module.exports = async function() {
-    let args = ["--disable-accelerated-2d-canvas", "--disable-gpu", "--no-sandbox", "--disable-setuid-sandbox", "--disable-dev-shm-usage", '--proxy-server="direct://"', "--proxy-bypass-list=*"];
+    let args = [
+        `--window-size=1280,1024`,
+        "--disable-accelerated-2d-canvas",
+        "--disable-gpu",
+        "--no-sandbox",
+        "--disable-setuid-sandbox",
+        "--disable-dev-shm-usage",
+        '--proxy-server="direct://"',
+        "--proxy-bypass-list=*"
+    ];
 
     global.__BROWSER__ = await puppeteer.launch({
         headless: !process.env.PSP_PAUSE_ON_FAILURE,
         devtools: !!process.env.PSP_PAUSE_ON_FAILURE,
+
+        // https://github.com/puppeteer/puppeteer/issues/1183
+        defaultViewport: null,
         args
     });
     process.env.PSP_BROWSER_ENDPOINT = global.__BROWSER__.wsEndpoint();

diff --git a/packages/perspective-test/src/js/index.js b/packages/perspective-test/src/js/index.js
@@ -142,12 +142,24 @@ async function get_new_page() {
                     elem.innerText = content;
                     triggerInputEvent(elem);
                 }
+
+                document.activeElement.blur();
             },
             content,
             path
         );
     };
 
+    page.shadow_blur = async function() {
+        await this.evaluate(() => {
+            let elem = document.activeElement;
+            while (elem) {
+                elem.blur();
+                elem = elem.shadowRoot?.activeElement;
+            }
+        });
+    };
+
     page.shadow_focus = async function(...path) {
         await this.evaluate(path => {
             let elem = document;
@@ -387,7 +399,7 @@ test.capture = function capture(name, body, {timeout = 60000, viewport = null, w
                     });
                 }
 
-                const screenshot = await page.screenshot();
+                const screenshot = await page.screenshot({captureBeyondViewport: false, fullPage: true});
                 // await page.close();
                 const hash = crypto
                     .createHash("md5")

diff --git a/packages/perspective-viewer-d3fc/src/js/plugin/plugin.js b/packages/perspective-viewer-d3fc/src/js/plugin/plugin.js
@@ -88,6 +88,7 @@ function drawChart(chart) {
         };
 
         createOrUpdateChart.call(this, el, chart, settings);
+        await new Promise(setTimeout);
     };
 }
 

diff --git a/packages/perspective-viewer-d3fc/src/js/tooltip/tooltip.js b/packages/perspective-viewer-d3fc/src/js/tooltip/tooltip.js
@@ -99,8 +99,8 @@ function showTooltip(containerNode, node, tooltipDiv, centered) {
     tooltipDiv
         .style("left", `${left}px`)
         .style("top", `${top}px`)
-        .transition()
-        .duration(200)
+        // .transition()
+        // .duration(200)
         .style("opacity", 0.9);
 
     if (centered) [left, top] = centerTip(tooltipDiv, containerRect);
@@ -150,8 +150,8 @@ function shiftIfOverflowingChartArea(tooltipDiv, containerRect, left, top, cente
 function hideTooltip(tooltipDiv) {
     if (tooltipDiv) {
         tooltipDiv
-            .transition()
-            .duration(500)
+            // .transition()
+            // .duration(500)
             .style("opacity", 0);
     }
 }
diff --git a/packages/perspective-viewer-d3fc/test/html/shares-template.html b/packages/perspective-viewer-d3fc/test/html/shares-template.html
@@ -23,7 +23,7 @@
 
     <perspective-viewer plugin="{view-name}" row-pivots='["Date"]' column-pivots='[]' filters='[]' sort='[]'
         columns='["Open","Close","High","Low"]'
-        aggregates='{"Date":"distinct count","Change%":"sum","High":"sum","Low":"sum","Open":"sum","Close":"sum","Vol.":"sum"}'>
+        aggregates='{"Date":"distinct count","Change %":"sum","High":"sum","Low":"sum","Open":"sum","Close":"sum","Vol.":"sum"}'>
 
     </perspective-viewer>
 

diff --git a/packages/perspective-viewer-d3fc/test/js/integration/candlestick.spec.js b/packages/perspective-viewer-d3fc/test/js/integration/candlestick.spec.js
@@ -22,7 +22,7 @@ utils.with_server({}, () => {
                 const viewer = await page.$("perspective-viewer");
                 await page.evaluate(element => element.setAttribute("filters", '[["Name", "==", "BARC"]]'), viewer);
                 await page.evaluate(async element => await element.flush(), viewer);
-                await page.evaluate(() => document.activeElement.blur());
+                await page.shadow_blur();
             });
 
             test.capture("filter to date range.", async page => {
@@ -31,7 +31,7 @@ utils.with_server({}, () => {
                 await page.evaluate(element => element.setAttribute("column-pivots", '["Name"]'), viewer);
                 await page.evaluate(element => element.setAttribute("filters", '[["Date", ">", "2019-01-01"]]'), viewer);
                 await page.evaluate(async element => await element.flush(), viewer);
-                await page.evaluate(() => document.activeElement.blur());
+                await page.shadow_blur();
             });
         },
         {reload_page: false, root: path.join(__dirname, "..", "..", "..")}

diff --git a/packages/perspective-viewer-d3fc/test/js/integration/ohlc.spec.js b/packages/perspective-viewer-d3fc/test/js/integration/ohlc.spec.js
@@ -22,7 +22,7 @@ utils.with_server({}, () => {
                 const viewer = await page.$("perspective-viewer");
                 await page.evaluate(element => element.setAttribute("filters", '[["Name", "==", "BARC"]]'), viewer);
                 await page.waitForSelector("perspective-viewer:not([updating])");
-                await page.evaluate(() => document.activeElement.blur());
+                await page.shadow_blur();
             });
 
             test.capture("filter to date range.", async page => {
@@ -31,7 +31,7 @@ utils.with_server({}, () => {
                 await page.evaluate(element => element.setAttribute("column-pivots", '["Name"]'), viewer);
                 await page.evaluate(element => element.setAttribute("filters", '[["Date", ">", "2019-01-01"]]'), viewer);
                 await page.waitForSelector("perspective-viewer:not([updating])");
-                await page.evaluate(() => document.activeElement.blur());
+                await page.shadow_blur();
             });
         },
         {reload_page: false, root: path.join(__dirname, "..", "..", "..")}

diff --git a/packages/perspective-viewer-d3fc/test/js/integration/sunburst.spec.js b/packages/perspective-viewer-d3fc/test/js/integration/sunburst.spec.js
@@ -28,7 +28,7 @@ utils.with_server({}, () => {
                 await page.evaluate(element => element.setAttribute("columns", '["Sales", "Profit"]'), viewer);
                 await page.evaluate(element => element.setAttribute("filters", '[["Product ID", "==", "FUR-BO-10001798"]]'), viewer);
                 await page.waitForSelector("perspective-viewer:not([updating])");
-                await page.evaluate(() => document.activeElement.blur());
+                await page.shadow_blur();
                 const result = await page.waitFor(
                     element => {
                         let elem = element.shadowRoot.querySelector("perspective-d3fc-chart").shadowRoot.querySelector(".segment");
@@ -50,7 +50,7 @@ utils.with_server({}, () => {
                 await page.evaluate(element => element.setAttribute("columns", '["Sales", "Profit"]'), viewer);
                 await page.evaluate(element => element.setAttribute("filters", '[["Product ID", "==", "FUR-BO-10001798"]]'), viewer);
                 await page.waitForSelector("perspective-viewer:not([updating])");
-                await page.evaluate(() => document.activeElement.blur());
+                await page.shadow_blur();
                 await page.mouse.click(500, 400);
                 const result = await page.waitFor(
                     element => {
-Original file line number
+Diff line change
@@ Expand Up / @@ -88,6 +88,7 @@ function drawChart(chart) { @@
             };
             createOrUpdateChart.call(this, el, chart, settings);
+            await new Promise(setTimeout);
         };
     }
@@ Expand Down @@