From d2b4090217bfe6c7a5ae501f2a156da947aadb54 Mon Sep 17 00:00:00 2001
From: "Sander.Schutten@athora.nl" <Sander.Schutten@athora.nl>
Date: Wed, 21 Jun 2023 14:00:15 +0200
Subject: [PATCH] Added console-error-checking

---
 README.md                       |  1 +
 src/setup-page.ts               | 12 +++++++++++-
 src/test-storybook.ts           |  4 ++++
 src/util/getCliOptions.test.ts  |  9 +++++++++
 src/util/getCliOptions.ts       |  2 ++
 src/util/getParsedCliOptions.ts |  3 ++-
 6 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 7f3a2608..6d0158ed 100644
--- a/README.md
+++ b/README.md
@@ -150,6 +150,7 @@ Usage: test-storybook [options]
 | `--junit`                         | Indicates that test information should be reported in a junit file. <br/>`test-storybook --**junit**`                                                                         |
 | `--ci`                            | Instead of the regular behavior of storing a new snapshot automatically, it will fail the test and require Jest to be run with `--updateSnapshot`. <br/>`test-storybook --ci` |
 | `--shard [shardIndex/shardCount]` | Splits your test suite across different machines to run in CI. <br/>`test-storybook --shard=1/3`                                                                              |
+| `--checkConsole`                  | Checks the browser console output for errors<br/>`test-storybook --checkConsole`                                                                                              |
 
 ## Ejecting configuration
 
diff --git a/src/setup-page.ts b/src/setup-page.ts
index 64634e38..f3a3f1f5 100644
--- a/src/setup-page.ts
+++ b/src/setup-page.ts
@@ -51,6 +51,7 @@ const sanitizeURL = (url: string) => {
 
 export const setupPage = async (page: Page, browserContext: BrowserContext) => {
   const targetURL = process.env.TARGET_URL;
+  const checkConsole = process.env.TEST_CHECK_CONSOLE;
 
   const viewMode = process.env.VIEW_MODE || 'story';
   const renderedEvent = viewMode === 'docs' ? 'docsRendered' : 'storyRendered';
@@ -306,10 +307,14 @@ export const setupPage = async (page: Page, browserContext: BrowserContext) => {
 
         // collect logs to show upon test error
         let logs = [];
+        let hasErrors = false;
 
         const spyOnConsole = (method, name) => {
           const originalFn = console[method];
           return function () {
+            if (\`${checkConsole}\`==='true' && method==='error') {
+              hasErrors = true;
+            }
             const message = [...arguments].map(composeMessage).join(', ');
             const prefix = \`\${bold(name)}: \`;
             logs.push(prefix + message);
@@ -332,7 +337,12 @@ export const setupPage = async (page: Page, browserContext: BrowserContext) => {
         })
 
         return new Promise((resolve, reject) => {
-          channel.on('${renderedEvent}', () => resolve(document.getElementById('root')));
+          channel.on('${renderedEvent}', () => { 
+            if (hasErrors) {
+              return reject(new StorybookTestRunnerError(storyId, 'Browser console errors', logs));
+            }
+            return resolve(document.getElementById('root'));             
+          });
           channel.on('storyUnchanged', () => resolve(document.getElementById('root')));
           channel.on('storyErrored', ({ description }) => reject(
             new StorybookTestRunnerError(storyId, description, logs))
diff --git a/src/test-storybook.ts b/src/test-storybook.ts
index b68566db..9fc8201b 100644
--- a/src/test-storybook.ts
+++ b/src/test-storybook.ts
@@ -297,6 +297,10 @@ const main = async () => {
   const { storiesPaths, lazyCompilation } = getStorybookMetadata();
   process.env.STORYBOOK_STORIES_PATTERN = storiesPaths;
 
+  if (runnerOptions.checkConsole) {
+    process.env.TEST_CHECK_CONSOLE = 'true';
+  }
+
   if (lazyCompilation && isLocalStorybookIp) {
     log(
       `You're running Storybook with lazy compilation enabled, and will likely cause issues with the test runner locally. Consider disabling 'lazyCompilation' in ${runnerOptions.configDir}/main.js when running 'test-storybook' locally.`
diff --git a/src/util/getCliOptions.test.ts b/src/util/getCliOptions.test.ts
index ae4d2726..91ef708c 100644
--- a/src/util/getCliOptions.test.ts
+++ b/src/util/getCliOptions.test.ts
@@ -10,4 +10,13 @@ describe('getCliOptions', () => {
     const opts = getCliOptions();
     expect(opts.runnerOptions).toMatchObject(customConfig);
   });
+
+  it('returns checkConsole option if passed', () => {
+    const customConfig = { checkConsole: true };
+    jest
+      .spyOn(cliHelper, 'getParsedCliOptions')
+      .mockReturnValue({ options: customConfig, extraArgs: [] });
+    const opts = getCliOptions();
+    expect(opts.runnerOptions).toMatchObject(customConfig);
+  });
 });
diff --git a/src/util/getCliOptions.ts b/src/util/getCliOptions.ts
index 9e098a5b..47d0e181 100644
--- a/src/util/getCliOptions.ts
+++ b/src/util/getCliOptions.ts
@@ -14,6 +14,7 @@ export type CliOptions = {
     coverage?: boolean;
     junit?: boolean;
     browsers?: BrowserType | BrowserType[];
+    checkConsole?: boolean;
   };
   jestOptions: JestOptions;
 };
@@ -28,6 +29,7 @@ const STORYBOOK_RUNNER_COMMANDS: StorybookRunnerCommand[] = [
   'url',
   'coverage',
   'junit',
+  'checkConsole',
 ];
 
 function copyOption<ObjType extends object, KeyType extends keyof ObjType>(
diff --git a/src/util/getParsedCliOptions.ts b/src/util/getParsedCliOptions.ts
index 67d200ad..a7b5f203 100644
--- a/src/util/getParsedCliOptions.ts
+++ b/src/util/getParsedCliOptions.ts
@@ -70,7 +70,8 @@ export const getParsedCliOptions = (): ParsedCliOptions => {
     .option(
       '--shard <shardIndex/shardCount>',
       'Splits your test suite across different machines to run in CI.'
-    );
+    )
+    .option('--checkConsole', 'Checks the browser console output for errors');
 
   program.exitOverride();