feat: Make JavaScript generator auto step insertion optional (#457)

* Make JavaScript generator ignore opinionated step insertion if flag is passed.

* Fixup.

* Add ability to accept custom steps structure and output corresponding code.

* Modify `generateFromSteps` helper to work with full `Steps` param. Add `Steps` type definition to Synthetics instead of Recorder repo.

* Export `Step` and `Steps`.

* Add option to preserve whitespace lines when generating step code.

* Add `Action` type to package exports.

* Remove unneeded modification to `package.json`.

* Add test to cover `throw` condition.

* Add JSDoc comment for generator function.

* Delete unused function and tests.

* Rename "new step" flag.

* Export `actionTitle` helper function.

* Make generator join code lines to single string.

* Remove override params and simplify action generator function.

* Simplify code.

* Delete obsolete code.

Author: justinkambic

__tests__/formatter/__snapshots__/javascript.test.ts.snap

@@ -1,36 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Synthetics JavaScript formatter inline journeys 1`] = `
-"step('Go to https://vigneshh.in/', async () => {
-  await page.goto('https://vigneshh.in/');
-  expect(await page.isVisible('text=Babel Minify')).toBeTruthy();
-  expect(await page.isEditable('text=Babel Minify')).toBeTruthy();
-  expect(await page.textContent('text=Babel Minify')).toMatch('Babel');
-});
-step('Click text=Babel Minify', async () => {
-  const [page1] = await Promise.all([
-    page.waitForEvent('popup'),
-    page.click('text=Babel Minify')
-  ]);
-  await Promise.all([
-    page1.waitForNavigation(/*{ url: 'https://github.com/babel/minify' }*/),
-    page1.click('a:has-text(\\"smoke\\")')
-  ]);
-  await page1.close();
-});"
-`;
-
-exports[`Synthetics JavaScript formatter suite journeys 1`] = `
+exports[`Synthetics JavaScript formatter accepts custom step organization 1`] = `
 "const { journey, step, expect } = require('@elastic/synthetics');
 
 journey('Recorded journey', async ({ page, context }) => {
-  step('Go to https://vigneshh.in/', async () => {
+  step('Open new page', async () => {
     await page.goto('https://vigneshh.in/');
+  });
+  step('Assert text=Babel Minify isVisible', async () => {
     expect(await page.isVisible('text=Babel Minify')).toBeTruthy();
     expect(await page.isEditable('text=Babel Minify')).toBeTruthy();
-    expect(await page.textContent('text=Babel Minify')).toMatch('Babel');
   });
-  step('Click text=Babel Minify', async () => {
+  step('Assert text=Babel Minify textContent', async () => {
+    expect(await page.textContent('text=Babel Minify')).toMatch('Babel');
     const [page1] = await Promise.all([
       page.waitForEvent('popup'),
       page.click('text=Babel Minify')
@@ -39,13 +21,17 @@ journey('Recorded journey', async ({ page, context }) => {
       page1.waitForNavigation(/*{ url: 'https://github.com/babel/minify' }*/),
       page1.click('a:has-text(\\"smoke\\")')
     ]);
+  });
+  step('Close page', async () => {
     await page1.close();
   });
 });"
 `;
 
-exports[`Synthetics JavaScript formatter use modified title if available 1`] = `
-"step('Visiting profile', async () => {
+exports[`Synthetics JavaScript formatter uses custom step names 1`] = `
+"step('test-name', async () => {
   await page.goto('https://vigneshh.in/');
+  expect(await page.isVisible('text=Babel Minify')).toBeTruthy();
+  expect(await page.isEditable('text=Babel Minify')).toBeTruthy();
 });"
 `;

__tests__/formatter/javascript.test.ts

@@ -24,162 +24,176 @@
  */
 import {
   SyntheticsGenerator,
-  ActionInContext,
+  Step,
+  Steps,
 } from '../../src/formatter/javascript';
 
-const recorderActions: Array<ActionInContext> = [
-  {
-    pageAlias: 'page',
-    isMainFrame: true,
-    frameUrl: 'about:blank',
-    committed: true,
-    action: {
-      name: 'openPage',
-      url: 'about:blank',
-      signals: [],
+const recorderStep: Step = {
+  actions: [
+    {
+      pageAlias: 'page',
+      isMainFrame: true,
+      frameUrl: 'about:blank',
+      committed: true,
+      action: {
+        name: 'openPage',
+        url: 'about:blank',
+        signals: [],
+      },
     },
-  },
-  {
-    pageAlias: 'page',
-    isMainFrame: true,
-    frameUrl: 'https://vigneshh.in/',
-    committed: true,
-    action: {
-      name: 'navigate',
-      url: 'https://vigneshh.in/',
-      signals: [],
+    {
+      pageAlias: 'page',
+      isMainFrame: true,
+      frameUrl: 'https://vigneshh.in/',
+      committed: true,
+      action: {
+        name: 'navigate',
+        url: 'https://vigneshh.in/',
+        signals: [],
+      },
     },
-  },
-  {
-    pageAlias: 'page',
-    isMainFrame: true,
-    frameUrl: 'https://vigneshh.in/',
-    action: {
-      name: 'assert',
-      isAssert: true,
-      command: 'isVisible',
-      selector: 'text=Babel Minify',
-      signals: [],
+    {
+      pageAlias: 'page',
+      isMainFrame: true,
+      frameUrl: 'https://vigneshh.in/',
+      action: {
+        name: 'assert',
+        isAssert: true,
+        command: 'isVisible',
+        selector: 'text=Babel Minify',
+        signals: [],
+      },
     },
-  },
-  {
-    pageAlias: 'page',
-    isMainFrame: true,
-    frameUrl: 'https://vigneshh.in/',
-    action: {
-      name: 'assert',
-      isAssert: true,
-      command: 'isEditable',
-      selector: 'text=Babel Minify',
-      signals: [],
+    {
+      pageAlias: 'page',
+      isMainFrame: true,
+      frameUrl: 'https://vigneshh.in/',
+      action: {
+        name: 'assert',
+        isAssert: true,
+        command: 'isEditable',
+        selector: 'text=Babel Minify',
+        signals: [],
+      },
     },
-  },
-  {
-    pageAlias: 'page',
-    isMainFrame: true,
-    frameUrl: 'https://vigneshh.in/',
-    action: {
-      name: 'assert',
-      isAssert: true,
-      command: 'textContent',
-      selector: 'text=Babel Minify',
-      value: 'Babel',
-      signals: [],
+    {
+      pageAlias: 'page',
+      isMainFrame: true,
+      frameUrl: 'https://vigneshh.in/',
+      action: {
+        name: 'assert',
+        isAssert: true,
+        command: 'textContent',
+        selector: 'text=Babel Minify',
+        value: 'Babel',
+        signals: [],
+      },
     },
-  },
-  {
-    pageAlias: 'page',
-    isMainFrame: true,
-    frameUrl: 'https://vigneshh.in/',
-    action: {
-      name: 'click',
-      selector: 'text=Babel Minify',
-      signals: [
-        {
-          name: 'popup',
-          popupAlias: 'page1',
-          isAsync: true,
-        },
-      ],
-      button: 'left',
-      modifiers: 0,
-      clickCount: 1,
+    {
+      pageAlias: 'page',
+      isMainFrame: true,
+      frameUrl: 'https://vigneshh.in/',
+      action: {
+        name: 'click',
+        selector: 'text=Babel Minify',
+        signals: [
+          {
+            name: 'popup',
+            popupAlias: 'page1',
+            isAsync: true,
+          },
+        ],
+        button: 'left',
+        modifiers: 0,
+        clickCount: 1,
+      },
+      committed: true,
     },
-    committed: true,
-  },
-  {
-    pageAlias: 'page1',
-    isMainFrame: true,
-    frameUrl: 'https://github.com/babel/minify',
-    action: {
-      name: 'click',
-      selector: 'a:has-text("smoke")',
-      signals: [
-        {
-          name: 'navigation',
-          url: 'https://github.com/babel/minify',
-        },
-        {
-          name: 'navigation',
-          url: 'https://github.com/babel/minify/tree/master/smoke',
-        },
-        {
-          name: 'navigation',
-          url: 'https://github.com/babel/minify/tree/master/smoke',
-          isAsync: true,
-        },
-        {
-          name: 'navigation',
-          url: 'https://github.com/babel/minify',
-          isAsync: true,
-        },
-      ],
-      button: 'left',
-      modifiers: 0,
-      clickCount: 1,
+    {
+      pageAlias: 'page1',
+      isMainFrame: true,
+      frameUrl: 'https://github.com/babel/minify',
+      action: {
+        name: 'click',
+        selector: 'a:has-text("smoke")',
+        signals: [
+          {
+            name: 'navigation',
+            url: 'https://github.com/babel/minify',
+          },
+          {
+            name: 'navigation',
+            url: 'https://github.com/babel/minify/tree/master/smoke',
+          },
+          {
+            name: 'navigation',
+            url: 'https://github.com/babel/minify/tree/master/smoke',
+            isAsync: true,
+          },
+          {
+            name: 'navigation',
+            url: 'https://github.com/babel/minify',
+            isAsync: true,
+          },
+        ],
+        button: 'left',
+        modifiers: 0,
+        clickCount: 1,
+      },
     },
-  },
-  {
-    pageAlias: 'page1',
-    isMainFrame: true,
-    frameUrl: 'https://github.com/babel/minify',
-    committed: true,
-    action: {
-      name: 'closePage',
-      signals: [],
+    {
+      pageAlias: 'page1',
+      isMainFrame: true,
+      frameUrl: 'https://github.com/babel/minify',
+      committed: true,
+      action: {
+        name: 'closePage',
+        signals: [],
+      },
     },
-  },
-  {
-    pageAlias: 'page',
-    isMainFrame: true,
-    frameUrl: 'https://vigneshh.in/',
-    committed: true,
-    action: {
-      name: 'closePage',
-      signals: [],
+    {
+      pageAlias: 'page',
+      isMainFrame: true,
+      frameUrl: 'https://vigneshh.in/',
+      committed: true,
+      action: {
+        name: 'closePage',
+        signals: [],
+      },
     },
-  },
-];
+  ],
+};
 
 describe('Synthetics JavaScript formatter', () => {
-  it('inline journeys', async () => {
-    const formatter = new SyntheticsGenerator(false);
-    expect(formatter.generateText(recorderActions)).toMatchSnapshot();
+  it('accepts custom step organization', () => {
+    const generator = new SyntheticsGenerator(true);
+    const testSteps: Steps = [
+      { actions: recorderStep.actions.slice(0, 2) },
+      { actions: recorderStep.actions.slice(2, 4) },
+      { actions: recorderStep.actions.slice(4, 7) },
+      { actions: recorderStep.actions.slice(7, 9) },
+    ];
+    expect(generator.generateFromSteps(testSteps)).toMatchSnapshot();
   });
 
-  it('suite journeys', async () => {
-    const formatter = new SyntheticsGenerator(true);
-    expect(formatter.generateText(recorderActions)).toMatchSnapshot();
+  it('uses custom step names', () => {
+    const generator = new SyntheticsGenerator(false);
+    const testSteps: Steps = [{ actions: recorderStep.actions.slice(0, 4) }];
+    expect(
+      generator.generateFromSteps(
+        testSteps.map((s: Step) => {
+          s.name = 'test-name';
+          return s;
+        })
+      )
+    ).toMatchSnapshot();
   });
 
-  it('use modified title if available', async () => {
-    const formatter = new SyntheticsGenerator(false);
-    const actions = [
-      {
-        ...recorderActions[1],
-        title: 'Visiting profile',
-      },
-    ];
-    expect(formatter.generateText(actions)).toMatchSnapshot();
+  it('throws error if processing empty step', () => {
+    const generator = new SyntheticsGenerator(false);
+    const testSteps: Steps = [{ actions: [] }];
+    expect(() => generator.generateFromSteps(testSteps)).toThrowError(
+      'Cannot process an empty step'
+    );
   });
 });