Update tests (inject css)

getredash · kravets-levko · Jul 3, 2019 · Jun 25, 2019 · Jun 26, 2019 · Jun 27, 2019
commit f50bf9a64351c74eca52c7b744b16d2dd5c6d3e2
diff --git a/client/app/visualizations/word-cloud/Renderer.jsx b/client/app/visualizations/word-cloud/Renderer.jsx
@@ -100,12 +100,14 @@ function scaleElement(node, container) {
 }
 
 function createLayout() {
+  const fontFamily = window.getComputedStyle(document.body).fontFamily;
+
   return cloud()
     // make the area large enough to contain even very long words; word cloud will be placed in the center of the area
     // TODO: dimensions probably should be larger, but `d3-cloud` has some performance issues related to these values
     .size([5000, 5000])
     .padding(3)
-    .font('"Roboto Regular", sans-serif')
+    .font(fontFamily)
     .rotate(d => d.angle)
     .fontSize(d => d.size)
     .random(() => 0.5); // do not place words randomly - use compact layout

diff --git a/client/app/visualizations/word-cloud/renderer.less b/client/app/visualizations/word-cloud/renderer.less
@@ -1,12 +1,3 @@
-@font-face {
-  font-family: "Roboto Regular";
-  src: url("../../assets/fonts/roboto/Roboto-Regular-webfont.eot");
-  src: url("../../assets/fonts/roboto/Roboto-Regular-webfont.eot?#iefix") format("embedded-opentype"),
-       url("../../assets/fonts/roboto/Roboto-Regular-webfont.woff") format("woff"),
-       url("../../assets/fonts/roboto/Roboto-Regular-webfont.ttf") format("truetype"),
-       url("../../assets/fonts/roboto/Roboto-Regular-webfont.svg") format("svg");
-}
-
 .word-cloud-visualization-container {
   overflow: hidden;
   height: 400px;

diff --git a/client/cypress/integration/visualizations/word_cloud_spec.js b/client/cypress/integration/visualizations/word_cloud_spec.js
@@ -1,7 +1,9 @@
-/* global cy */
+/* global cy, Cypress */
 
 import { createQuery } from '../../support/redash-api';
 
+const { map } = Cypress._;
+
 const SQL = `
   SELECT 'Lorem ipsum dolor'     AS a, 'ipsum'  AS b, 2 AS c UNION ALL
   SELECT 'Lorem sit amet'        AS a, 'amet'   AS b, 2 AS c UNION ALL
@@ -10,13 +12,54 @@ const SQL = `
   SELECT 'sed eiusmod tempor'    AS a, 'tempor' AS b, 7 AS c
 `;
 
+// Hack to fix Cypress -> Percy communication
+// Word Cloud uses `font-family` defined in CSS with a lot of fallbacks, so
+// it's almost impossible to know which font will be used on particular machine/browser.
+// In Cypress browser it could be one font, in Percy - another.
+// The issue is in how Percy takes screenshots: it takes a DOM/CSS/assets snapshot in Cypress,
+// copies it to own servers and restores in own browsers. Word Cloud computes its layout
+// using Cypress font, sets absolute positions for elements (in pixels), and when it is restored
+// on Percy machines (with another font) - visualization gets messed up.
+// Solution: explicitly provide some font that will be 100% the same on all CI machines. In this
+// case, it's "Roboto" just because it's in the list of fallback fonts and we already have this
+// webfont in assets folder (so browser can load it).
+function injectFont(document) {
+  const style = document.createElement('style');
+  style.setAttribute('id', 'percy-fix');
+  style.setAttribute('type', 'text/css');
+
+  const fonts = [
+    ['Roboto', 'Roboto-Light-webfont', 300],
+    ['Roboto', 'Roboto-Regular-webfont', 400],
+    ['Roboto', 'Roboto-Medium-webfont', 500],
+    ['Roboto', 'Roboto-Bold-webfont', 700],
+  ];
+
+  const basePath = '/static/fonts/roboto/';
+
+  // `insertRule` does not load font for some reason. Using text content works ¯\_(ツ)_/¯
+  style.appendChild(document.createTextNode(map(fonts, ([fontFamily, fileName, fontWeight]) => (`
+    @font-face {
+      font-family: "${fontFamily}";
+      font-weight: ${fontWeight};
+      src: url("${basePath}${fileName}.eot");
+      src: url("${basePath}${fileName}.eot?#iefix") format("embedded-opentype"),
+           url("${basePath}${fileName}.woff") format("woff"),
+           url("${basePath}${fileName}.ttf") format("truetype"),
+           url("${basePath}${fileName}.svg") format("svg");
+    }
+  `)).join('\n\n')));
+  document.getElementsByTagName('head')[0].appendChild(style);
+}
+
 describe('Word Cloud', () => {
   beforeEach(() => {
     cy.login();
     createQuery({ query: SQL }).then(({ id }) => {
       cy.visit(`queries/${id}/source`);
       cy.getByTestId('ExecuteButton').click();
     });
+    cy.document().then(injectFont);
   });
 
   it('creates visualization with automatic word frequencies', () => {

diff --git a/client/cypress/support/commands.js b/client/cypress/support/commands.js
@@ -1,3 +1,5 @@
+/* global Cypress */
+
 import '@percy/cypress'; // eslint-disable-line import/no-extraneous-dependencies, import/no-unresolved
 
 const { each } = Cypress._;

diff --git a/webpack.config.js b/webpack.config.js
@@ -75,7 +75,8 @@ const config = {
       { from: "client/app/unsupported.html" },
       { from: "client/app/unsupportedRedirect.js" },
       { from: "client/app/assets/css/*.css", to: "styles/", flatten: true },
-      { from: "node_modules/jquery/dist/jquery.min.js", to: "js/jquery.min.js" }
+      { from: "node_modules/jquery/dist/jquery.min.js", to: "js/jquery.min.js" },
+      { from: "client/app/assets/fonts", to: "fonts/" },
     ])
   ],
   optimization: {