feat: Improve report layout & add stats (#97)

* feat: Improve report layout & add stats

* chore: Fix tests

Author: manosim

lib/cli/run.test.ts

@@ -1,4 +1,5 @@
 import path from 'path';
+import { promises as fs } from 'fs';
 import execa, { ExecaReturnValue } from 'execa';
 
 import { CliRunOptions, Config } from '../types';
@@ -12,12 +13,19 @@ describe('run.ts', () => {
   const bundleIdIOS = 'org.reactjs.native.example.RNDemo';
   const mockBundleIdResponse = { stdout: bundleIdIOS } as ExecaReturnValue<any>;
 
+  const mkdirMock = jest.spyOn(fs, 'mkdir');
+
+  jest
+    .spyOn(process, 'cwd')
+    .mockReturnValue('/Users/johndoe/Projects/my-project');
+
   const execKillMock = {
     kill: jest.fn(),
   } as unknown as execa.ExecaChildProcess<any>;
   const execMock = jest.spyOn(execa, 'command').mockImplementation();
 
   beforeEach(() => {
+    mkdirMock.mockReset();
     execMock.mockReset().mockReturnValue(execKillMock);
   });
 
@@ -208,11 +216,13 @@ describe('run.ts', () => {
       },
     };
 
-    const expectedJestCommand = `jest --config=${path.join(
-      process.cwd(),
-      'lib',
-      'jest-config.json'
-    )} --roots=${path.join(process.cwd())} --runInBand`;
+    const jestConfigPath = path.join(__dirname, '..', 'jest-config.json');
+
+    const expectedJestCommand = `jest --config=${jestConfigPath} --roots=${path.join(
+      process.cwd()
+    )} --runInBand`;
+
+    const expectedJestCommandWithReport = `${expectedJestCommand} --json --outputFile=/Users/johndoe/Projects/my-project/.owl/report/jest-report.json`;
 
     const commandSyncMock = jest.spyOn(execa, 'commandSync');
     const mockGenerateReport = jest.spyOn(reportHelpers, 'generateReport');
@@ -225,25 +235,33 @@ describe('run.ts', () => {
     });
 
     it('runs an iOS project', async () => {
-      jest.spyOn(configHelpers, 'getConfig').mockResolvedValueOnce(config);
+      jest
+        .spyOn(configHelpers, 'getConfig')
+        .mockResolvedValueOnce({ ...config, report: true });
       const mockRunIOS = jest.spyOn(run, 'runIOS').mockResolvedValueOnce();
       const mockRestoreIOSUI = jest
         .spyOn(run, 'restoreIOSUI')
         .mockResolvedValueOnce();
 
+      mkdirMock.mockResolvedValue(undefined);
+
       await run.runHandler(args);
 
+      await expect(mkdirMock).toHaveBeenCalled();
       await expect(mockRunIOS).toHaveBeenCalled();
       await expect(commandSyncMock).toHaveBeenCalledTimes(1);
-      await expect(commandSyncMock).toHaveBeenCalledWith(expectedJestCommand, {
-        env: {
-          OWL_DEBUG: 'false',
-          OWL_IOS_SIMULATOR: 'iPhone Simulator',
-          OWL_PLATFORM: 'ios',
-          OWL_UPDATE_BASELINE: 'false',
-        },
-        stdio: 'inherit',
-      });
+      await expect(commandSyncMock).toHaveBeenCalledWith(
+        expectedJestCommandWithReport,
+        {
+          env: {
+            OWL_DEBUG: 'false',
+            OWL_IOS_SIMULATOR: 'iPhone Simulator',
+            OWL_PLATFORM: 'ios',
+            OWL_UPDATE_BASELINE: 'false',
+          },
+          stdio: 'inherit',
+        }
+      );
       await expect(mockRestoreIOSUI).toHaveBeenCalled();
     });
 
@@ -329,10 +347,23 @@ describe('run.ts', () => {
       commandSyncMock.mockRejectedValueOnce(undefined!);
 
       try {
-        await run.runHandler({ ...args, update: true });
+        await run.runHandler({ ...args });
       } catch {
+        await expect(commandSyncMock).toHaveBeenCalledWith(
+          expectedJestCommand,
+          {
+            env: {
+              OWL_DEBUG: 'false',
+              OWL_IOS_SIMULATOR: 'iPhone Simulator',
+              OWL_PLATFORM: 'ios',
+              OWL_UPDATE_BASELINE: 'false',
+            },
+            stdio: 'inherit',
+          }
+        );
         await expect(mockRunIOS).toHaveBeenCalled();
         await expect(commandSyncMock).toHaveBeenCalledTimes(1);
+        await expect(mkdirMock).not.toHaveBeenCalled();
         await expect(mockGenerateReport).not.toHaveBeenCalled();
       }
     });

lib/cli/run.ts

@@ -1,5 +1,6 @@
 import path from 'path';
 import execa from 'execa';
+import { promises as fs } from 'fs';
 
 import { cleanupScreenshots } from '../screenshot';
 import { CliRunOptions, Config } from '../types';
@@ -86,6 +87,7 @@ export const runAndroid = async (config: Config, logger: Logger) => {
 };
 
 export const runHandler = async (args: CliRunOptions) => {
+  const cwd = process.cwd();
   const config = await getConfig(args.config);
   const logger = new Logger(config.debug);
   const runProject = args.platform === 'ios' ? runIOS : runAndroid;
@@ -108,7 +110,23 @@ export const runHandler = async (args: CliRunOptions) => {
   await runProject(config, logger);
 
   const jestConfigPath = path.join(__dirname, '..', 'jest-config.json');
-  const jestCommand = `jest --config=${jestConfigPath} --roots=${process.cwd()} --runInBand`;
+  const jestCommandArgs = [
+    'jest',
+    `--config=${jestConfigPath}`,
+    `--roots=${cwd}`,
+    '--runInBand',
+  ];
+
+  if (config.report) {
+    const reportDirPath = path.join(cwd, '.owl', 'report');
+    const outputFile = path.join(reportDirPath, 'jest-report.json');
+
+    await fs.mkdir(reportDirPath, { recursive: true });
+
+    jestCommandArgs.push(`--json --outputFile=${outputFile}`);
+  }
+
+  const jestCommand = jestCommandArgs.join(' ');
 
   logger.print(
     `[OWL - CLI] ${

lib/report.test.ts

@@ -36,7 +36,9 @@ describe('report.ts', () => {
       .spyOn(handlebars, 'compile')
       .mockImplementationOnce(() => () => '<h1>Hello World Compiled</h1>');
 
-    readFileMock.mockResolvedValue(htmlTemplate);
+    readFileMock
+      .mockResolvedValueOnce('{}')
+      .mockResolvedValueOnce(htmlTemplate);
     mkdirMock.mockResolvedValue(undefined);
     readdirMock.mockResolvedValue([]);
 
@@ -61,7 +63,9 @@ describe('report.ts', () => {
       .spyOn(handlebars, 'compile')
       .mockImplementationOnce(() => () => '<h1>Hello World Compiled</h1>');
 
-    readFileMock.mockResolvedValue(htmlTemplate);
+    readFileMock
+      .mockResolvedValueOnce('{}')
+      .mockResolvedValueOnce(htmlTemplate);
     mkdirMock.mockResolvedValue(undefined);
     readdirMock.mockResolvedValue([]);
 

lib/report.ts

@@ -3,7 +3,7 @@ import handlebars from 'handlebars';
 import { promises as fs } from 'fs';
 
 import { Logger } from './logger';
-import { Platform } from './types';
+import { JestReport, Platform, ReportStats } from './types';
 import { fileExists } from './utils/file-exists';
 
 export const cleanupReport = async () => {
@@ -16,6 +16,11 @@ export const cleanupReport = async () => {
 export const generateReport = async (logger: Logger, platform: Platform) => {
   const cwd = process.cwd();
   const reportDirPath = path.join(cwd, '.owl', 'report');
+
+  const jestOutputFilepath = path.join(reportDirPath, 'jest-report.json');
+  const jestOutputText = await fs.readFile(jestOutputFilepath, 'utf8');
+  const jestOutput = JSON.parse(jestOutputText) as JestReport;
+
   const diffScreenshotsDirPath = path.join(cwd, '.owl', 'diff', platform);
   const baselineScreenshotsDirPath = path.join(
     cwd,
@@ -44,6 +49,20 @@ export const generateReport = async (logger: Logger, platform: Platform) => {
     (screenshot) => !failingScreenshots.includes(screenshot)
   );
 
+  const duration = (Date.now() - jestOutput.startTime) / 1000;
+  const durationFormatted = parseFloat(`${duration}`).toFixed(2);
+
+  const stats: ReportStats = {
+    totalTestSuites: jestOutput.numTotalTestSuites,
+    totalTests: jestOutput.numTotalTests,
+    failedTestSuites: jestOutput.numFailedTestSuites,
+    failedTests: jestOutput.numFailedTests,
+    passedTestSuites: jestOutput.numPassedTestSuites,
+    passedTests: jestOutput.numPassedTests,
+    duration: durationFormatted,
+    success: jestOutput.success,
+  };
+
   logger.info(`[OWL - CLI] Generating Report`);
 
   const reportFilename = 'index.html';
@@ -52,10 +71,11 @@ export const generateReport = async (logger: Logger, platform: Platform) => {
   const templateScript = handlebars.compile(htmlTemplate);
   const htmlContent = templateScript({
     currentYear: new Date().getFullYear(),
-    currentDateTime: new Date().toISOString(),
+    currentDateTime: new Date().toUTCString(),
     platform,
     failingScreenshots,
     passingScreenshots,
+    stats,
   });
 
   await fs.mkdir(reportDirPath, { recursive: true });