WIP static snapshot service

percy · Apr 11, 2019 · fe05779 · fe05779
1 parent 956bed5
commit fe05779
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 18 deletions.
diff --git a/src/commands/snapshot.ts b/src/commands/snapshot.ts
@@ -60,7 +60,7 @@ export default class Snapshot extends PercyCommand {
     const {args} = this.parse(Snapshot)
     const {flags} = this.parse(Snapshot)
 
-    const rawStaticAssetDirectory = args.staticAssets as string
+    const staticAssetDirectory = args.staticAssets as string
     const port = flags.port as number
     const portPlusOne = port + 1
     const networkIdleTimeout = flags['network-idle-timeout'] as number
@@ -74,7 +74,7 @@ export default class Snapshot extends PercyCommand {
 
     const widths = rawWidths.split(',').map(Number)
     const baseUrl = this.cleanTrailingSlash(rawBaseUrl)
-    const staticAssetDirectory = this.cleanTrailingSlash(rawStaticAssetDirectory)
+    // const staticAssetDirectory = this.cleanTrailingSlash(rawStaticAssetDirectory)
 
     // start the agent service
     await this.agentService.start({port, networkIdleTimeout})
@@ -102,9 +102,19 @@ export default class Snapshot extends PercyCommand {
   }
 
   private cleanTrailingSlash(input: string) {
-    if (input.substr(-1) === '/' || input.substr(-1) === '\\') {
-      return input.substr(0, input.length - 1)
+    // remove slash from first and last position in a given string
+    let output = input
+
+    // check the end
+    if (output.substr(-1) === '/' || output.substr(-1) === '\\') {
+      output = output.substr(0, output.length - 1)
+    }
+
+    // check the beginning
+    if (output.substr(0, 1) === '/' || output.substr(0, 1) === '\\') {
+      output = output.substr(1, output.length)
     }
-    return input
+
+    return output
   }
 }
diff --git a/src/services/static-snapshot-service.ts b/src/services/static-snapshot-service.ts
@@ -1,10 +1,13 @@
 import * as bodyParser from 'body-parser'
 import * as cors from 'cors'
 import * as express from 'express'
+import * as fs from 'fs'
 import {Server} from 'http'
+import * as path from 'path'
 import * as puppeteer from 'puppeteer'
+import * as walk from 'walk'
 import logger from '../utils/logger'
-import { agentJsFilename } from '../utils/sdk-utils'
+import {agentJsFilename} from '../utils/sdk-utils'
 import {StaticSnapshotOptions} from './static-snapshot-options'
 
 // Use this instead of importing PercyAgent - we only want the browserified version
@@ -43,8 +46,56 @@ export default class StaticSnapshotService {
 
     const page = await browser.newPage()
 
-    // need to make a list of pages to visit based on the html files
-    // in the static asset dir
+    const pageUrls = [] as any
+    const baseUrl = `http://localhost:${this.options.port}`
+
+    const walkOptions = {
+      listeners: {
+        file: (root: any, fileStats: any, next: any) => {
+          // make sure the file is part of the capture group, and not part of the ignore group
+          const isCapturableFile = fileStats.name.match(this.options.snapshotCaptureRegex)[0]
+          const isIgnorableFile = fileStats.name.match(this.options.snapshotIgnoreRegex)[0]
+          const shouldVisitFile = isCapturableFile && !isIgnorableFile
+
+          if (shouldVisitFile) {
+            // for each file need to build a URL for the browser to visit
+            pageUrls.push(baseUrl + root.replace(this.options.staticAssetDirectory, '') + '/' + fileStats.name)
+          }
+        },
+      },
+    }
+
+    await walk.walkSync(this.options.staticAssetDirectory, walkOptions)
+    console.log(pageUrls)
+
+    // await pageUrls.forEach(async (url: any) => {
+    //   await page.goto(url)
+
+    //   const percyAgentClientFilename = agentJsFilename()
+
+    //   await page.addScriptTag({
+    //     path: percyAgentClientFilename,
+    //   })
+
+    //   const domSnapshot = await page.evaluate((name) => {
+    //     const percyAgentClient = new PercyAgent()
+    //     return percyAgentClient.snapshot(name)
+    //   }, url)
+    // })
+
+    for (const url of pageUrls) {
+      await page.goto(url)
+      const percyAgentClientFilename = agentJsFilename()
+
+      await page.addScriptTag({
+        path: percyAgentClientFilename,
+      })
+
+      await page.evaluate((name) => {
+        const percyAgentClient = new PercyAgent()
+        return percyAgentClient.snapshot(name)
+      }, url)
+    }
 
     // then, for each file:
     // use file name as snapshot name
@@ -53,19 +104,22 @@ export default class StaticSnapshotService {
     // do snapshot
 
     // just testing one page for now
-    const url = `http://localhost:${this.options.port}/`
+    // const url = `http://localhost:${this.options.port}/`
+    // const url = pageUrls[5]
 
-    await page.goto(url)
-    const percyAgentClientFilename = agentJsFilename()
+    // await page.goto(url)
+    // const percyAgentClientFilename = agentJsFilename()
 
-    await page.addScriptTag({
-      path: percyAgentClientFilename,
-    })
+    // await page.addScriptTag({
+    //   path: percyAgentClientFilename,
+    // })
+
+    // const domSnapshot = await page.evaluate((name) => {
+    //   const percyAgentClient = new PercyAgent()
+    //   return percyAgentClient.snapshot(name)
+    // }, url)
 
-    const domSnapshot = await page.evaluate((name) => {
-      const percyAgentClient = new PercyAgent()
-      return percyAgentClient.snapshot(name)
-    }, url)
+    browser.close()
   }
 
   async stop() {