Merge pull request #2 from Russo-creation/jest-and-puppeteer

fix jest e2e test
Russo-creation · Dec 21, 2020 · 50e43db · 50e43db
2 parents 91d8f82 + 224d4dd
commit 50e43db
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 26 deletions.
diff --git a/frontend/__image_snapshots__/customSnapshotName-snap.png b/frontend/__image_snapshots__/customSnapshotName-snap.png
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -25,6 +25,9 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <title>React App</title>
+
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/frontend/src/components/App.test.js b/frontend/src/components/App.test.js
@@ -16,6 +16,13 @@ import puppeteer from 'puppeteer';
 
 import {globalTestFunction} from "../../testGlobalFunctions"
 
+function sleep(millisecondsCount) {
+    if (!millisecondsCount) {
+        return;
+    }
+    return new Promise(resolve => setTimeout(resolve, millisecondsCount)).catch();
+}
+
 describe('image-snapshot', () => {
   globalTestFunction();
 
@@ -34,33 +41,40 @@ describe('image-snapshot', () => {
 
   it('visual regression test', async done => {
     try {
-      await page.goto(`${process.env.REACT_APP_FRONTEND_URL}/`, { waitUntil: 'load' });
+      await page.goto(`${process.env.REACT_APP_FRONTEND_URL}/`, { waitUntil: ['load', 'domcontentloaded', 'networkidle2'], timeout: 12000 });
 
-      //write to input id="myinput" value Hello
-      await page.type('#myinput', 'Hello');
+      await page.evaluateHandle('document.fonts.ready').then(async() => {
 
-      //check if page title equals React App
-      //await expect(page.title()).resolves.toMatch('React App');
+        //write to input id="myinput" value Hello
+        await page.type('#myinput', 'Hello');
 
-      // await expect(page).toMatch('GraphQL');
+        //check if page title equals React App
+        //await expect(page.title()).resolves.toMatch('React App');
 
-      // await page.reload({waitUntil: 'networkidle0'});
-
-      //add timeout for something
-     // await page.waitForTimeout(1000).then(() => console.log('Waited a second!'));
+        // await expect(page).toMatch('GraphQL');
 
-      const image = await page.screenshot({
-        fullPage: true,
-      });
-      expect(image).toMatchImageSnapshot({
-        customSnapshotsDir: "./__image_snapshots__/",
-        customSnapshotIdentifier: 'customSnapshotName',
-        //  customDiffDir: "./__image_snapshots__/",
-        failureThreshold: 0.005,
-        failureThresholdType: 'percent'
-      });
+        // await page.reload({waitUntil: 'networkidle0'});
+
+        //add timeout for something
+        // await page.waitForTimeout(1000).then(() => console.log('Waited a second!'));
+
+        const bodyHeight = await page.evaluate(() => document.body.scrollHeight);
+        await page.setViewport({ width: 300, height: bodyHeight });
+
+        const image = await page.screenshot({
+          //fullPage: true,
+        });
+        expect(image).toMatchImageSnapshot({
+          customSnapshotsDir: "./__image_snapshots__/",
+          customSnapshotIdentifier: 'customSnapshotName',
+          //  customDiffDir: "./__image_snapshots__/",
+          failureThreshold: 0.005,
+          failureThresholdType: 'percent'
+        });
+
+        done();
 
-      done();
+      });
     } catch (err) {
       console.log(err);
     }

diff --git a/frontend/src/style/index.css b/frontend/src/style/index.css
@@ -1,13 +1,10 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: 'Roboto', sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  font-family: 'Roboto', sans-serif;
 }