feat: format JSON as JS (#395)

This allows producing code in a consistent style while stringifying arbitrary JSON objects.
puppeteer · Nov 23, 2022 · d74e793 · d74e793
1 parent 92cf062
commit d74e793
Show file tree

Hide file tree

Showing 14 changed files with 540 additions and 117 deletions.
diff --git a/__snapshots__/JSONUtils.test.ts.js b/__snapshots__/JSONUtils.test.ts.js
@@ -0,0 +1,46 @@
+exports['JSONUtils should format JSON as JS 1'] = `
+{
+  title: 'test',
+  test: true,
+  steps: [
+    {
+      type: 'click',
+      target: 'main',
+      selectors: [
+        'aria/Test',
+        [
+          '.cls',
+          '.cls'
+        ]
+      ],
+      offsetX: 1,
+      offsetY: 1,
+      assertedEvents: [
+        {
+          type: 'navigation'
+        }
+      ]
+    },
+    {
+      type: 'click',
+      target: 'main',
+      selectors: [
+        'aria/Test'
+      ],
+      offsetX: 1,
+      offsetY: 1,
+      assertedEvents: [
+        {
+          type: 'navigation'
+        }
+      ]
+    }
+  ],
+  otherTest: 1.234,
+  nullTest: null
+}
+`;
+
+exports['JSONUtils should properly escape <script> 1'] = `
+'\\x3Cscript>test\\x3C/script>\\x3Cscript>test\\x3C/script>\\x3Cscript>test\\x3C/script>'
+`;
diff --git a/__snapshots__/LighthouseStringifyExtension.test.ts.js b/__snapshots__/LighthouseStringifyExtension.test.ts.js
@@ -8,28 +8,43 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
   const timeout = 5000;
   page.setDefaultTimeout(timeout);
 
-  const flags = {"screenEmulation":{"disabled":true}}
+  const flags = {
+    screenEmulation: {
+      disabled: true
+    }
+  }
   const config = undefined;
   const lhApi = await import('lighthouse/core/api.js');
-  const lhFlow = await lhApi.startFlow(page, {name: "Test Flow", config, flags});
+  const lhFlow = await lhApi.startFlow(page, {name: 'Test Flow', config, flags});
   {
     const targetPage = page;
-    await targetPage.setViewport({"width":757,"height":988})
+    await targetPage.setViewport({
+      width: 757,
+      height: 988
+    })
   }
   await lhFlow.startNavigation();
   {
     const targetPage = page;
     const promises = [];
     promises.push(targetPage.waitForNavigation());
-    await targetPage.goto("https://example.com");
+    await targetPage.goto('https://example.com');
     await Promise.all(promises);
   }
   await lhFlow.endNavigation();
   await lhFlow.startTimespan();
   {
     const targetPage = page;
-    await scrollIntoViewIfNeeded([["#button"]], targetPage, timeout);
-    const element = await waitForSelectors([["#button"]], targetPage, { timeout, visible: true });
+    await scrollIntoViewIfNeeded([
+      [
+        '#button'
+      ]
+    ], targetPage, timeout);
+    const element = await waitForSelectors([
+      [
+        '#button'
+      ]
+    ], targetPage, { timeout, visible: true });
     await element.click({
       offset: {
         x: 61,
@@ -54,28 +69,43 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
   const timeout = 5000;
   page.setDefaultTimeout(timeout);
 
-  const flags = {"screenEmulation":{"disabled":true}}
+  const flags = {
+    screenEmulation: {
+      disabled: true
+    }
+  }
   const config = undefined;
   const lhApi = await import('lighthouse/core/api.js');
-  const lhFlow = await lhApi.startFlow(page, {name: "Test Flow", config, flags});
+  const lhFlow = await lhApi.startFlow(page, {name: 'Test Flow', config, flags});
   {
     const targetPage = page;
-    await targetPage.setViewport({"width":757,"height":988})
+    await targetPage.setViewport({
+      width: 757,
+      height: 988
+    })
   }
   await lhFlow.startNavigation();
   {
     const targetPage = page;
     const promises = [];
     promises.push(targetPage.waitForNavigation());
-    await targetPage.goto("https://example.com");
+    await targetPage.goto('https://example.com');
     await Promise.all(promises);
   }
   await lhFlow.endNavigation();
   await lhFlow.startTimespan();
   {
     const targetPage = page;
-    await scrollIntoViewIfNeeded([["#button"]], targetPage, timeout);
-    const element = await waitForSelectors([["#button"]], targetPage, { timeout, visible: true });
+    await scrollIntoViewIfNeeded([
+      [
+        '#button'
+      ]
+    ], targetPage, timeout);
+    const element = await waitForSelectors([
+      [
+        '#button'
+      ]
+    ], targetPage, { timeout, visible: true });
     await element.click({
       offset: {
         x: 61,
@@ -89,7 +119,7 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
     const targetPage = page;
     const promises = [];
     promises.push(targetPage.waitForNavigation());
-    await targetPage.goto("https://example.com/page/");
+    await targetPage.goto('https://example.com/page/');
     await Promise.all(promises);
   }
   await lhFlow.endNavigation();
@@ -111,20 +141,27 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
   const timeout = 5000;
   page.setDefaultTimeout(timeout);
 
-  const flags = {"screenEmulation":{"disabled":true}}
+  const flags = {
+    screenEmulation: {
+      disabled: true
+    }
+  }
   const config = undefined;
   const lhApi = await import('lighthouse/core/api.js');
-  const lhFlow = await lhApi.startFlow(page, {name: "Test Flow", config, flags});
+  const lhFlow = await lhApi.startFlow(page, {name: 'Test Flow', config, flags});
   {
     const targetPage = page;
-    await targetPage.setViewport({"width":757,"height":988})
+    await targetPage.setViewport({
+      width: 757,
+      height: 988
+    })
   }
   await lhFlow.startNavigation();
   {
     const targetPage = page;
     const promises = [];
     promises.push(targetPage.waitForNavigation());
-    await targetPage.goto("https://example.com");
+    await targetPage.goto('https://example.com');
     await Promise.all(promises);
   }
   await lhFlow.endNavigation();
@@ -133,8 +170,16 @@ const puppeteer = require('puppeteer'); // v13.0.0 or later
     const targetPage = page;
     const promises = [];
     promises.push(targetPage.waitForNavigation());
-    await scrollIntoViewIfNeeded([["#link"]], targetPage, timeout);
-    const element = await waitForSelectors([["#link"]], targetPage, { timeout, visible: true });
+    await scrollIntoViewIfNeeded([
+      [
+        '#link'
+      ]
+    ], targetPage, timeout);
+    const element = await waitForSelectors([
+      [
+        '#link'
+      ]
+    ], targetPage, { timeout, visible: true });
     await element.click({
       offset: {
         x: 61,

diff --git a/__snapshots__/PuppeteerReplayStringifyExtension.test.ts.js b/__snapshots__/PuppeteerReplayStringifyExtension.test.ts.js
@@ -2,16 +2,16 @@ exports[
   'PuppeteerReplayStringifyExtension should print the script for a click step 1'
 ] = `
 await runner.runStep({
-  "type": "click",
-  "target": "main",
-  "selectors": [
-    "aria/Test"
+  type: 'click',
+  target: 'main',
+  selectors: [
+    'aria/Test'
   ],
-  "offsetX": 1,
-  "offsetY": 1,
-  "assertedEvents": [
+  offsetX: 1,
+  offsetY: 1,
+  assertedEvents: [
     {
-      "type": "navigation"
+      type: 'navigation'
     }
   ]
 });
@@ -28,16 +28,16 @@ export async function run(extension) {
   await runner.runBeforeAllSteps();
 
   await runner.runStep({
-    "type": "click",
-    "target": "main",
-    "selectors": [
-      "aria/Test"
+    type: 'click',
+    target: 'main',
+    selectors: [
+      'aria/Test'
     ],
-    "offsetX": 1,
-    "offsetY": 1,
-    "assertedEvents": [
+    offsetX: 1,
+    offsetY: 1,
+    assertedEvents: [
       {
-        "type": "navigation"
+        type: 'navigation'
       }
     ]
   });

diff --git a/__snapshots__/PuppeteerStringifyExtension.test.ts.js b/__snapshots__/PuppeteerStringifyExtension.test.ts.js
@@ -3,8 +3,12 @@ exports[
 ] = `
 {
   const targetPage = page;
-  await scrollIntoViewIfNeeded(["aria/Test"], targetPage, timeout);
-  const element = await waitForSelectors(["aria/Test"], targetPage, { timeout, visible: true });
+  await scrollIntoViewIfNeeded([
+    'aria/Test'
+  ], targetPage, timeout);
+  const element = await waitForSelectors([
+    'aria/Test'
+  ], targetPage, { timeout, visible: true });
   await element.click({
     offset: {
       x: 1,
@@ -22,8 +26,12 @@ exports[
   const targetPage = page;
   const promises = [];
   promises.push(targetPage.waitForNavigation());
-  await scrollIntoViewIfNeeded(["aria/Test"], targetPage, timeout);
-  const element = await waitForSelectors(["aria/Test"], targetPage, { timeout, visible: true });
+  await scrollIntoViewIfNeeded([
+    'aria/Test'
+  ], targetPage, timeout);
+  const element = await waitForSelectors([
+    'aria/Test'
+  ], targetPage, { timeout, visible: true });
   await element.click({
     offset: {
       x: 1,
@@ -40,8 +48,18 @@ exports[
 ] = `
 {
   const targetPage = page;
-  await scrollIntoViewIfNeeded([["aria/Test","aria/Test2"]], targetPage, timeout);
-  const element = await waitForSelectors([["aria/Test","aria/Test2"]], targetPage, { timeout, visible: true });
+  await scrollIntoViewIfNeeded([
+    [
+      'aria/Test',
+      'aria/Test2'
+    ]
+  ], targetPage, timeout);
+  const element = await waitForSelectors([
+    [
+      'aria/Test',
+      'aria/Test2'
+    ]
+  ], targetPage, { timeout, visible: true });
   await element.click({
     offset: {
       x: 1,
@@ -57,15 +75,28 @@ exports[
 ] = `
 {
   const targetPage = page;
-  await scrollIntoViewIfNeeded(["aria/Test"], targetPage, timeout);
-  const element = await waitForSelectors(["aria/Test"], targetPage, { timeout, visible: true });
+  await scrollIntoViewIfNeeded([
+    'aria/Test'
+  ], targetPage, timeout);
+  const element = await waitForSelectors([
+    'aria/Test'
+  ], targetPage, { timeout, visible: true });
   const inputType = await element.evaluate(el => el.type);
   if (inputType === 'select-one') {
-    await changeSelectElement(element, "Hello World")
-  } else if (["textarea","text","url","tel","search","password","number","email"].includes(inputType)) {
-    await typeIntoElement(element, "Hello World");
+    await changeSelectElement(element, 'Hello World')
+  } else if ([
+    'textarea',
+    'text',
+    'url',
+    'tel',
+    'search',
+    'password',
+    'number',
+    'email'
+  ].includes(inputType)) {
+    await typeIntoElement(element, 'Hello World');
   } else {
-    await changeElementValue(element, "Hello World");
+    await changeElementValue(element, 'Hello World');
   }
 }
 
@@ -76,15 +107,28 @@ exports[
 ] = `
 {
   const targetPage = page;
-  await scrollIntoViewIfNeeded(["aria/Test"], targetPage, timeout);
-  const element = await waitForSelectors(["aria/Test"], targetPage, { timeout, visible: true });
+  await scrollIntoViewIfNeeded([
+    'aria/Test'
+  ], targetPage, timeout);
+  const element = await waitForSelectors([
+    'aria/Test'
+  ], targetPage, { timeout, visible: true });
   const inputType = await element.evaluate(el => el.type);
   if (inputType === 'select-one') {
-    await changeSelectElement(element, "#333333")
-  } else if (["textarea","text","url","tel","search","password","number","email"].includes(inputType)) {
-    await typeIntoElement(element, "#333333");
+    await changeSelectElement(element, '#333333')
+  } else if ([
+    'textarea',
+    'text',
+    'url',
+    'tel',
+    'search',
+    'password',
+    'number',
+    'email'
+  ].includes(inputType)) {
+    await typeIntoElement(element, '#333333');
   } else {
-    await changeElementValue(element, "#333333");
+    await changeElementValue(element, '#333333');
   }
 }