diff --git a/src/services/agent-service.ts b/src/services/agent-service.ts index 3f535110..6c56d146 100644 --- a/src/services/agent-service.ts +++ b/src/services/agent-service.ts @@ -107,13 +107,6 @@ export class AgentService { } let domSnapshot = request.body.domSnapshot - const percyCSSFileName = `percy-specific.${Date.now()}.css` as string - - // Inject the link to the percy specific css if the option is passed - if (snapshotOptions.percyCSS) { - const cssLink = `` - domSnapshot = domSnapshot.replace(/<\/body>/i, cssLink + '$&') - } if (domSnapshot.length > Constants.MAX_FILE_SIZE_BYTES) { logger.info(`snapshot skipped[max_file_size_exceeded]: '${request.body.name}'`) @@ -127,10 +120,21 @@ export class AgentService { snapshotLogger, ) + const percyCSSFileName = `percy-specific.${Date.now()}.css` as string + + // Inject the link to the percy specific css if the option is passed + // This must be done _AFTER_ asset discovery, or you risk their server + // serving a response for this CSS we're injecting into the DOM + if (snapshotOptions.percyCSS) { + const cssLink = `` + domSnapshot = domSnapshot.replace(/<\/body>/i, cssLink + '$&') + } + resources = resources.concat( - this.snapshotService.buildLogResource(snapshotLog), + this.snapshotService.buildRootResource(request.body.url, domSnapshot), // @ts-ignore we won't write anything if css is not is passed - this.snapshotService.buildPercyCSSResource(percyCSSFileName, snapshotOptions.percyCSS), + this.snapshotService.buildPercyCSSResource(percyCSSFileName, snapshotOptions.percyCSS, snapshotLogger), + this.snapshotService.buildLogResource(snapshotLog), ) const snapshotCreation = this.snapshotService.create( diff --git a/src/services/snapshot-service.ts b/src/services/snapshot-service.ts index 9933d8af..d849c8bf 100644 --- a/src/services/snapshot-service.ts +++ b/src/services/snapshot-service.ts @@ -23,27 +23,27 @@ export default class SnapshotService extends PercyClientService { this.assetDiscoveryService = new AssetDiscoveryService(buildId, configuration) } - async buildResources( + buildResources( rootResourceUrl: string, domSnapshot = '', options: SnapshotOptions, logger: any, ): Promise { - const rootResource = this.percyClient.makeResource({ - resourceUrl: rootResourceUrl, - content: domSnapshot, - isRoot: true, - mimetype: 'text/html', - }) - - const discoveredResources = await this.assetDiscoveryService.discoverResources( + return this.assetDiscoveryService.discoverResources( rootResourceUrl, domSnapshot, options, logger, ) + } - return [rootResource].concat(discoveredResources) + buildRootResource(rootResourceUrl: string, domSnapshot = ''): Promise { + return this.percyClient.makeResource({ + resourceUrl: rootResourceUrl, + content: domSnapshot, + isRoot: true, + mimetype: 'text/html', + }) } buildLogResource(logFilePath: string) { @@ -65,8 +65,10 @@ export default class SnapshotService extends PercyClientService { }) } - buildPercyCSSResource(fileName: string, css: string) { + buildPercyCSSResource(fileName: string, css: string, logger: any) { if (!css) { return [] } + logger.debug(`Creating Percy Specific file: ${fileName}. CSS string: ${css}`) + const buffer = Buffer.from(css, 'utf8') const sha = crypto.createHash('sha256').update(buffer).digest('hex') const localPath = path.join(os.tmpdir(), sha) @@ -74,6 +76,8 @@ export default class SnapshotService extends PercyClientService { // write the SHA file if it doesn't exist if (!fs.existsSync(localPath)) { fs.writeFileSync(localPath, buffer, 'utf8') + } else { + logger.debug(`Skipping writing Percy specific file: ${fileName}.`) } return this.percyClient.makeResource({