feat: Support static snapshots in .percy.yml configuration file (#159)

* Add static snapshot options to percy.yml config util

* Update percy.yml configuration test

* Consume percy.yml settings but fall back to flags and defaults if it doesn't exist

* Update snapshot command glob parsing order

* Update percy.yml configuration test

* make configuration key format consistent

* static-site => static-snapshots

* shift configuration into an isolated directory and split out the various configuration interfaces into multiple files

* minor renaming

* make configuration value more accurate

src/commands/snapshot.ts

@@ -1,4 +1,6 @@
 import {flags} from '@oclif/command'
+import configuration from '../configuration/configuration'
+import {StaticSnapshotsConfiguration} from '../configuration/static-snapshots-configuration'
 import Constants from '../services/constants'
 import {StaticSnapshotOptions} from '../services/static-snapshot-options'
 import StaticSnapshotService from '../services/static-snapshot-service'
@@ -17,7 +19,7 @@ export default class Snapshot extends PercyCommand {
 
   static examples = [
     '$ percy snapshot _site/',
-    '$ percy snapshot _site/ --base-url "/blog"',
+    '$ percy snapshot _site/ --base-url "/blog/"',
     '$ percy snapshot _site/ --ignore-files "/blog/drafts/**"',
   ]
 
@@ -60,18 +62,26 @@ export default class Snapshot extends PercyCommand {
     const port = flags.port as number
     const staticServerPort = port + 1
     const networkIdleTimeout = flags['network-idle-timeout'] as number
-    const baseUrl = flags['base-url'] as string
-    const rawIgnoreGlob = flags['ignore-files'] as string
-    const rawSnapshotGlob = flags['snapshot-files'] as string
 
-    const snapshotGlobs = rawSnapshotGlob.split(',')
-
-    const ignoreGlobs = rawIgnoreGlob ? rawIgnoreGlob.split(',') : []
+    const baseUrlFlag = flags['base-url'] as string
+    const rawIgnoreGlobFlag = flags['ignore-files'] as string
+    const rawSnapshotGlobFlag = flags['snapshot-files'] as string
 
     // exit gracefully if percy will not run
     if (!this.percyWillRun()) { this.exit(0) }
 
-    // check that the base url passed in starts with a slash and exit if it is missing
+    // read configurations from the percy.yml file
+    const conf = (configuration()['static-snapshots'] || {}) as StaticSnapshotsConfiguration
+    const baseUrl = conf['base-url'] || baseUrlFlag
+    const rawSnapshotFiles = conf['snapshot-files'] || rawSnapshotGlobFlag
+    const rawIgnoreFiles = conf['ignore-files'] || rawIgnoreGlobFlag
+
+    const snapshotGlobs = rawSnapshotFiles.split(',')
+
+    // if it is an empty string then convert it to an empty array instead of an array of an empty string
+    const ignoreGlobs = rawIgnoreFiles ? rawIgnoreFiles.split(',') : []
+
+    // check that base url starts with a slash and exit if it is missing
     if (baseUrl[0] !== '/') {
       logger.warn('The base-url flag must begin with a slash.')
       this.exit(1)

src/utils/configuration.ts → src/configuration/configuration.ts

@@ -1,15 +1,13 @@
 import * as fs from 'fs'
 import * as yaml from 'js-yaml'
 import * as path from 'path'
-
-export interface SnapshotConfiguration {
-  widths?: [number],
-  'min-height'?: number,
-}
+import { SnapshotConfiguration } from './snapshot-configuration'
+import { StaticSnapshotsConfiguration } from './static-snapshots-configuration'
 
 export interface Configuration {
   version: number,
   snapshot: SnapshotConfiguration
+  'static-snapshots': StaticSnapshotsConfiguration
 }
 
 const configuration = (relativePath = '.percy.yml'): Configuration => {
@@ -22,11 +20,12 @@ const configuration = (relativePath = '.percy.yml'): Configuration => {
     // in a chain. snapshot specific options -> agent configuration -> default values
 
     const defaultConfiguration: Configuration = {
-      version: 1.0, snapshot: {},
+      'version': 1.0,
+      'snapshot': {},
+      'static-snapshots': {},
     }
 
     return defaultConfiguration
-
   }
 }
 

src/configuration/snapshot-configuration.ts

@@ -0,0 +1,4 @@
+export interface SnapshotConfiguration {
+  widths?: [number],
+  'min-height'?: number,
+}

src/configuration/static-snapshots-configuration.ts

@@ -0,0 +1,5 @@
+export interface StaticSnapshotsConfiguration {
+  'base-url'?: string,
+  'snapshot-files'?: string,
+  'ignore-files'?: string,
+}

src/services/agent-service.ts

@@ -2,8 +2,9 @@ import * as bodyParser from 'body-parser'
 import * as cors from 'cors'
 import * as express from 'express'
 import {Server} from 'http'
-import { SnapshotOptions } from '../percy-agent-client/snapshot-options'
-import configuration, {SnapshotConfiguration} from '../utils/configuration'
+import configuration from '../configuration/configuration'
+import {SnapshotConfiguration} from '../configuration/snapshot-configuration'
+import {SnapshotOptions} from '../percy-agent-client/snapshot-options'
 import logger, {profile} from '../utils/logger'
 import {AgentOptions} from './agent-options'
 import BuildService from './build-service'

test/utils/configuration.test.ts → test/configuration/configuration.test.ts

@@ -1,5 +1,5 @@
 import {expect} from 'chai'
-import configuration from '../../src/utils/configuration'
+import configuration from '../../src/configuration/configuration'
 
 describe('Configuration', () => {
   it('parses valid configuration', () => {
@@ -8,11 +8,14 @@ describe('Configuration', () => {
     expect(subject.version).to.eql(1)
     expect(subject.snapshot.widths).to.eql([375, 1280])
     expect(subject.snapshot['min-height']).to.eql(1024)
+    expect(subject['static-snapshots']['base-url']).to.eql('/blog/')
+    expect(subject['static-snapshots']['snapshot-files']).to.eql('**/*.html')
+    expect(subject['static-snapshots']['ignore-files']).to.eql('**/*.htm')
   })
 
   it('gracefully handles a missing file', () => {
     const subject = configuration('test/support/.file-does-not-exist.yml')
 
-    expect(subject).to.eql({version: 1.0, snapshot: {}})
+    expect(subject).to.eql({'version': 1.0, 'snapshot': {}, 'static-snapshots': {}})
   })
 })

test/support/.percy.yml

@@ -2,3 +2,7 @@ version: 1
 snapshot:
   widths: [375, 1280]
   min-height: 1024
+static-snapshots:
+  base-url: /blog/
+  snapshot-files: '**/*.html'
+  ignore-files: '**/*.htm'