✨ Add browser and remote support for @percy/logger (#235)

* ✨ Browserify @percy/logger

* 🐛 Fix internal logger API usage

* ✅ Update logger test helper usage

* ♻ Move color utils into util module

* ✨ Add remote logging capability

* ✨ Facilitate remote logging through core server

* ✅ Fix test script for Windows

packages/cli-build/src/commands/build/wait.js

@@ -76,23 +76,21 @@ export class Wait extends Command {
       'total-comparisons-finished': finished
     }
   }) {
-    let stdout = logger.instance.stdout;
-
     // update the same line each time
-    readline.cursorTo(stdout, 0);
+    readline.cursorTo(logger.stdout, 0);
 
     // still recieving snapshots
     if (state === 'pending') {
-      stdout.write(logger.format('Recieving snapshots...', 'cli:build:wait'));
+      logger.stdout.write(logger.format('Recieving snapshots...', 'cli:build:wait'));
 
     // need to clear the line before finishing
     } else if (finished === total || state === 'finished') {
-      readline.clearLine(stdout);
+      readline.clearLine(logger.stdout);
     }
 
     // processing snapshots
     if (state === 'processing') {
-      stdout.write(logger.format(
+      logger.stdout.write(logger.format(
         `Processing ${count} snapshots - ` + (
           finished === total ? 'finishing up...'
             : `${finished} of ${total} comparisons finished...`),

packages/cli-build/test/finalize.test.js

@@ -19,7 +19,7 @@ describe('percy build:finalize', () => {
 
     expect(logger.stderr).toEqual([]);
     expect(logger.stdout).toEqual([
-      '[percy] Percy is disabled\n'
+      '[percy] Percy is disabled'
     ]);
   });
 
@@ -30,8 +30,8 @@ describe('percy build:finalize', () => {
 
     expect(logger.stdout).toEqual([]);
     expect(logger.stderr).toEqual([
-      '[percy] This command should only be used with PERCY_PARALLEL_TOTAL=-1\n',
-      '[percy] Current value is "5"\n'
+      '[percy] This command should only be used with PERCY_PARALLEL_TOTAL=-1',
+      '[percy] Current value is "5"'
     ]);
   });
 
@@ -49,8 +49,8 @@ describe('percy build:finalize', () => {
 
     expect(logger.stderr).toEqual([]);
     expect(logger.stdout).toEqual([
-      '[percy] Finalizing parallel build...\n',
-      '[percy] Finalized build #1: https://percy.io/test/test/123\n'
+      '[percy] Finalizing parallel build...',
+      '[percy] Finalized build #1: https://percy.io/test/test/123'
     ]);
   });
 });

packages/cli-build/test/wait.test.js

@@ -35,15 +35,15 @@ describe('percy build:wait', () => {
 
     expect(logger.stderr).toEqual([]);
     expect(logger.stdout).toEqual([
-      '[percy] Percy is disabled\n'
+      '[percy] Percy is disabled'
     ]);
   });
 
   it('logs an error and exits when required args are missing', async () => {
     await expectAsync(Wait.run([])).toBeRejectedWithError('EEXIT: 1');
     expect(logger.stdout).toEqual([]);
     expect(logger.stderr).toEqual([
-      '[percy] Error: Missing build ID or commit SHA\n'
+      '[percy] Error: Missing build ID or commit SHA'
     ]);
   });
 
@@ -100,8 +100,8 @@ describe('percy build:wait', () => {
 
     expect(logger.stderr).toEqual([]);
     expect(logger.stdout).toEqual(jasmine.arrayContaining([
-      '[percy] Build #10 finished! https://percy.io/test/test/123\n',
-      '[percy] Found 16 changes\n'
+      '[percy] Build #10 finished! https://percy.io/test/test/123',
+      '[percy] Found 16 changes'
     ]));
   });
 
@@ -115,8 +115,8 @@ describe('percy build:wait', () => {
 
     expect(logger.stderr).toEqual([]);
     expect(logger.stdout).toEqual(jasmine.arrayContaining([
-      '[percy] Build #10 finished! https://percy.io/test/test/123\n',
-      '[percy] Found 16 changes\n'
+      '[percy] Build #10 finished! https://percy.io/test/test/123',
+      '[percy] Found 16 changes'
     ]));
   });
 
@@ -130,8 +130,8 @@ describe('percy build:wait', () => {
 
     expect(logger.stderr).toEqual([]);
     expect(logger.stdout).toEqual(jasmine.arrayContaining([
-      '[percy] Build #10 finished! https://percy.io/test/test/123\n',
-      '[percy] Found 0 changes\n'
+      '[percy] Build #10 finished! https://percy.io/test/test/123',
+      '[percy] Found 0 changes'
     ]));
   });
 
@@ -141,7 +141,7 @@ describe('percy build:wait', () => {
 
     expect(logger.stdout).toEqual([]);
     expect(logger.stderr).toEqual(jasmine.arrayContaining([
-      '[percy] Build #10 is expired. https://percy.io/test/test/123\n'
+      '[percy] Build #10 is expired. https://percy.io/test/test/123'
     ]));
   });
 
@@ -156,9 +156,9 @@ describe('percy build:wait', () => {
 
       expect(logger.stdout).toEqual([]);
       expect(logger.stderr).toEqual(jasmine.arrayContaining([
-        '[percy] Build #10 failed! https://percy.io/test/test/123\n',
+        '[percy] Build #10 failed! https://percy.io/test/test/123',
         '[percy] Some snapshots in this build took too long to render ' +
-          'even after multiple retries.\n'
+          'even after multiple retries.'
       ]));
     });
 
@@ -172,8 +172,8 @@ describe('percy build:wait', () => {
 
       expect(logger.stdout).toEqual([]);
       expect(logger.stderr).toEqual(jasmine.arrayContaining([
-        '[percy] Build #10 failed! https://percy.io/test/test/123\n',
-        '[percy] No snapshots were uploaded to this build.\n'
+        '[percy] Build #10 failed! https://percy.io/test/test/123',
+        '[percy] No snapshots were uploaded to this build.'
       ]));
     });
 
@@ -187,8 +187,8 @@ describe('percy build:wait', () => {
 
       expect(logger.stdout).toEqual([]);
       expect(logger.stderr).toEqual(jasmine.arrayContaining([
-        '[percy] Build #10 failed! https://percy.io/test/test/123\n',
-        '[percy] Failed to correctly finalize.\n'
+        '[percy] Build #10 failed! https://percy.io/test/test/123',
+        '[percy] Failed to correctly finalize.'
       ]));
     });
 
@@ -202,8 +202,8 @@ describe('percy build:wait', () => {
 
       expect(logger.stdout).toEqual([]);
       expect(logger.stderr).toEqual(jasmine.arrayContaining([
-        '[percy] Build #10 failed! https://percy.io/test/test/123\n',
-        '[percy] Some build or snapshot resources failed to correctly upload.\n'
+        '[percy] Build #10 failed! https://percy.io/test/test/123',
+        '[percy] Some build or snapshot resources failed to correctly upload.'
       ]));
     });
 
@@ -222,8 +222,8 @@ describe('percy build:wait', () => {
 
       expect(logger.stdout).toEqual([]);
       expect(logger.stderr).toEqual(jasmine.arrayContaining([
-        '[percy] Build #10 failed! https://percy.io/test/test/123\n',
-        '[percy] Only 3 of 4 parallelized build processes finished.\n'
+        '[percy] Build #10 failed! https://percy.io/test/test/123',
+        '[percy] Only 3 of 4 parallelized build processes finished.'
       ]));
     });
 
@@ -237,8 +237,8 @@ describe('percy build:wait', () => {
 
       expect(logger.stdout).toEqual([]);
       expect(logger.stderr).toEqual(jasmine.arrayContaining([
-        '[percy] Build #10 failed! https://percy.io/test/test/123\n',
-        '[percy] Error: unrecognized_reason\n'
+        '[percy] Build #10 failed! https://percy.io/test/test/123',
+        '[percy] Error: unrecognized_reason'
       ]));
     });
   });

packages/cli-command/test/command.test.js

@@ -76,7 +76,7 @@ describe('PercyCommand', () => {
 
     expect(logger.stdout).toEqual([]);
     expect(logger.stderr).toEqual([
-      '[percy] Error: test error\n'
+      '[percy] Error: test error'
     ]);
   });
 

packages/cli-config/src/commands/config/migrate.js

@@ -92,6 +92,6 @@ export class Migrate extends Command {
 
     this.log.info('Config file migrated!');
     // when dry-running, print config to stdout when finished
-    if (dry) logger.instance.stdout.write('\n' + body);
+    if (dry) logger.stdout.write('\n' + body);
   }
 }

packages/cli-config/test/create.test.js

@@ -7,66 +7,66 @@ describe('percy config:create', () => {
   it('creates a .percy.yml config file by default', async () => {
     await Create.run([]);
     expect(logger.stderr).toEqual([]);
-    expect(logger.stdout).toEqual(['[percy] Created Percy config: .percy.yml\n']);
+    expect(logger.stdout).toEqual(['[percy] Created Percy config: .percy.yml']);
     expect(getMockConfig('.percy.yml')).toBe(PercyConfig.stringify('yaml'));
   });
 
   it('can create a .percyrc config file', async () => {
     await Create.run(['--rc']);
     expect(logger.stderr).toEqual([]);
-    expect(logger.stdout).toEqual(['[percy] Created Percy config: .percyrc\n']);
+    expect(logger.stdout).toEqual(['[percy] Created Percy config: .percyrc']);
     expect(getMockConfig('.percyrc')).toBe(PercyConfig.stringify('yaml'));
   });
 
   it('can create a .percy.yaml config file', async () => {
     await Create.run(['--yaml']);
     expect(logger.stderr).toEqual([]);
-    expect(logger.stdout).toEqual(['[percy] Created Percy config: .percy.yaml\n']);
+    expect(logger.stdout).toEqual(['[percy] Created Percy config: .percy.yaml']);
     expect(getMockConfig('.percy.yaml')).toBe(PercyConfig.stringify('yaml'));
   });
 
   it('can create a .percy.yml config file', async () => {
     await Create.run(['--yml']);
     expect(logger.stderr).toEqual([]);
-    expect(logger.stdout).toEqual(['[percy] Created Percy config: .percy.yml\n']);
+    expect(logger.stdout).toEqual(['[percy] Created Percy config: .percy.yml']);
     expect(getMockConfig('.percy.yml')).toBe(PercyConfig.stringify('yaml'));
   });
 
   it('can create a .percy.json config file', async () => {
     await Create.run(['--json']);
     expect(logger.stderr).toEqual([]);
-    expect(logger.stdout).toEqual(['[percy] Created Percy config: .percy.json\n']);
+    expect(logger.stdout).toEqual(['[percy] Created Percy config: .percy.json']);
     expect(getMockConfig('.percy.json')).toBe(PercyConfig.stringify('json'));
   });
 
   it('can create a .percy.js config file', async () => {
     await Create.run(['--js']);
     expect(logger.stderr).toEqual([]);
-    expect(logger.stdout).toEqual(['[percy] Created Percy config: .percy.js\n']);
+    expect(logger.stdout).toEqual(['[percy] Created Percy config: .percy.js']);
     expect(getMockConfig('.percy.js')).toBe(PercyConfig.stringify('js'));
   });
 
   it('can create specific config files', async () => {
     let filename = path.join('.config', 'percy.config.js');
     await Create.run([filename]);
     expect(logger.stderr).toEqual([]);
-    expect(logger.stdout).toEqual([`[percy] Created Percy config: ${filename}\n`]);
+    expect(logger.stdout).toEqual([`[percy] Created Percy config: ${filename}`]);
     expect(getMockConfig(filename)).toBe(PercyConfig.stringify('js'));
   });
 
   it('logs an error and exits when the filetype is unsupported', async () => {
     await expectAsync(Create.run([path.join('.config', 'percy.config.php')])).toBeRejectedWithError('EEXIT: 1');
     expect(logger.stdout).toEqual([]);
-    expect(logger.stderr).toEqual(['[percy] Unsupported filetype: php\n']);
+    expect(logger.stderr).toEqual(['[percy] Unsupported filetype: php']);
   });
 
   it('logs an error and exits when the config file already exists', async () => {
     await Create.run(['.percy.yml']);
-    logger.clear();
+    logger.reset();
 
     await expectAsync(Create.run(['.percy.yml'])).toBeRejectedWithError('EEXIT: 1');
 
     expect(logger.stdout).toEqual([]);
-    expect(logger.stderr).toEqual(['[percy] Percy config already exists: .percy.yml\n']);
+    expect(logger.stderr).toEqual(['[percy] Percy config already exists: .percy.yml']);
   });
 });

packages/cli-config/test/migrate.test.js

@@ -20,9 +20,9 @@ describe('percy config:migrate', () => {
 
     expect(logger.stderr).toEqual([]);
     expect(logger.stdout).toEqual([
-      '[percy] Found config file: .percy.yml\n',
-      '[percy] Migrating config file...\n',
-      '[percy] Config file migrated!\n'
+      '[percy] Found config file: .percy.yml',
+      '[percy] Migrating config file...',
+      '[percy] Config file migrated!'
     ]);
 
     expect(getMockConfig('.percy.old.yml')).toContain('version: 1');
@@ -34,10 +34,10 @@ describe('percy config:migrate', () => {
     expect(getMockConfig('.percy.yml')).toContain('version: 1');
     expect(logger.stderr).toEqual([]);
     expect(logger.stdout).toEqual([
-      '[percy] Found config file: .percy.yml\n',
-      '[percy] Migrating config file...\n',
-      '[percy] Config file migrated!\n',
-      '\nversion: 2\n'
+      '[percy] Found config file: .percy.yml',
+      '[percy] Migrating config file...',
+      '[percy] Config file migrated!',
+      '\nversion: 2'
     ]);
   });
 
@@ -80,7 +80,7 @@ describe('percy config:migrate', () => {
 
     expect(logger.stdout).toEqual([]);
     expect(logger.stderr).toEqual([
-      '[percy] Config file not found\n'
+      '[percy] Config file not found'
     ]);
   });
 
@@ -95,7 +95,7 @@ describe('percy config:migrate', () => {
 
     expect(logger.stdout).toEqual([]);
     expect(logger.stderr).toEqual([
-      '[percy] Error: test\n'
+      '[percy] Error: test'
     ]);
   });
 
@@ -104,10 +104,10 @@ describe('percy config:migrate', () => {
     await Migrate.run([]);
 
     expect(logger.stdout).toEqual([
-      '[percy] Found config file: .percy.yml\n'
+      '[percy] Found config file: .percy.yml'
     ]);
     expect(logger.stderr).toEqual([
-      '[percy] Config is already the latest version\n'
+      '[percy] Config is already the latest version'
     ]);
 
     expect(getMockConfig('.percy.old.yml')).toBeUndefined();

packages/cli-config/test/validate.test.js

@@ -30,14 +30,14 @@ describe('percy config:validate', () => {
 
     expect(logger.stderr).toEqual([]);
     expect(logger.stdout).toEqual([
-      '[percy] Found config file: .percy.yml\n',
+      '[percy] Found config file: .percy.yml',
       '[percy] Using config:\n' + [
         '{',
         '  version: 2,',
         '  test: {',
         '    value: \'percy\'',
         '  }',
-        '}\n'
+        '}'
       ].join('\n')
     ]);
   });
@@ -49,14 +49,14 @@ describe('percy config:validate', () => {
 
     expect(logger.stderr).toEqual([]);
     expect(logger.stdout).toEqual([
-      `[percy] Found config file: ${filename}\n`,
+      `[percy] Found config file: ${filename}`,
       '[percy] Using config:\n' + [
         '{',
         '  version: 2,',
         '  test: {',
         '    value: \'config\'',
         '  }',
-        '}\n'
+        '}'
       ].join('\n')
     ]);
   });
@@ -66,12 +66,12 @@ describe('percy config:validate', () => {
     await expectAsync(Validate.run(['.invalid.yml'])).toBeRejectedWithError('EEXIT: 1');
 
     expect(logger.stdout).toEqual([
-      '[percy] Found config file: .invalid.yml\n'
+      '[percy] Found config file: .invalid.yml'
     ]);
     expect(logger.stderr).toEqual([
-      '[percy] Invalid config:\n',
-      '[percy] - bar: unknown property\n',
-      '[percy] - test.value: should be a string, received a boolean\n'
+      '[percy] Invalid config:',
+      '[percy] - bar: unknown property',
+      '[percy] - test.value: should be a string, received a boolean'
     ]);
   });
 });