Merge pull request #10 from happo/inline-canvases

Inline canvases as PNG images

cypress/integration/home_page_spec.js

@@ -1,10 +1,12 @@
 describe('The Home Page', () => {
   it('successfully loads', () => {
     cy.visit('/');
+    cy.wait(100);
     cy.get('body').happoScreenshot({ component: 'Full-page' });
     cy.get('.card').happoScreenshot({ component: 'Card' });
 
     cy.visit('/');
+    cy.wait(100);
     cy.get('.button').happoScreenshot({
       component: 'Button',
       variant: 'default',
@@ -16,9 +18,10 @@ describe('The Home Page', () => {
       variant: 'multiple',
     });
 
-
     cy.get('.button').happoScreenshot();
     cy.get('.button').happoScreenshot();
     cy.get('.button').happoScreenshot();
+
+    cy.get('canvas').happoScreenshot({ component: 'Canvas' });
   });
 });

index.js

@@ -46,8 +46,8 @@ function extractCSSBlocks({ doc }) {
 
 function getSubjectAssetUrls(subject, doc) {
   const allUrls = [];
-  const allElements = [subject[0]].concat(
-    Array.from(subject[0].querySelectorAll('*')),
+  const allElements = [subject].concat(
+    Array.from(subject.querySelectorAll('*')),
   );
   allElements.forEach(element => {
     const srcset = element.getAttribute('srcset');
@@ -67,14 +67,47 @@ function getSubjectAssetUrls(subject, doc) {
   return allUrls.map(url => ({ url, baseUrl }));
 }
 
+function inlineCanvases(doc, subject) {
+  const canvases = [];
+  if (subject.tagName === 'CANVAS') {
+    canvases.push(subject);
+  }
+  canvases.push(...Array.from(subject.querySelectorAll('canvas')));
+
+  let newSubject = subject;
+  const replacements = [];
+  for (const canvas of canvases) {
+    const image = doc.createElement('img');
+    const canvasImageBase64 = canvas.toDataURL('image/png');
+    image.src = canvasImageBase64;
+    const style = window.getComputedStyle(canvas, '');
+    image.style.cssText = style.cssText;
+    canvas.replaceWith(image);
+    if (canvas === subject) {
+      // We're inlining the subject (the `cy.get('canvas')` element). Make sure
+      // we return the modified subject.
+      newSubject = image;
+    }
+    replacements.push({ from: canvas, to: image });
+  }
+
+  function cleanup() {
+    for (const { from, to } of replacements) {
+      to.replaceWith(from);
+    }
+  }
+  return { subject: newSubject, cleanup };
+}
+
 Cypress.Commands.add(
   'happoScreenshot',
   { prevSubject: true },
-  (subject, options = {}) => {
+  (originalSubject, options = {}) => {
     const component = options.component || cy.state('runnable').fullTitle();
     const variant = options.variant || 'default';
     cy.document().then(doc => {
-      const html = subject.prop('outerHTML');
+      const { subject, cleanup } = inlineCanvases(doc, originalSubject[0]);
+      const html = subject.outerHTML;
       const assetUrls = getSubjectAssetUrls(subject, doc);
       const cssBlocks = extractCSSBlocks({ doc });
       cy.task('happoRegisterSnapshot', {
@@ -85,6 +118,7 @@ Cypress.Commands.add(
         variant,
         targets: options.targets,
       });
+      cleanup();
     });
   },
 );

pages/index.js

@@ -1,4 +1,19 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
+
+function CanvasImage() {
+  const ref = useRef();
+  useEffect(() => {
+    const ctx = ref.current.getContext('2d');
+    ctx.moveTo(0, 0);
+    ctx.lineTo(200, 100);
+    ctx.stroke();
+    ctx.font = '30px Arial';
+    ctx.rotate(0.25);
+    ctx.fillText('Hello World', 20, 50);
+  });
+
+  return <canvas style={{ padding: 20 }} ref={ref} width="200" height="100" />;
+}
 
 export default function IndexPage() {
   useEffect(() => {
@@ -10,6 +25,7 @@ export default function IndexPage() {
 
   return (
     <div>
+      <CanvasImage />
       <div className="card">
         <h1>I'm a card</h1>
         <img src="/hotel.jpg" />

public/global.css

@@ -15,3 +15,7 @@ body {
 button {
   font-family: 'CustomFont';
 }
+
+canvas {
+  border: 2px solid red;
+}