adapt buildDescription for selector naming

src/build-code/buildDescription.ts

@@ -1,8 +1,8 @@
-import { isNil } from 'lodash';
+import { snakeCase } from 'lodash';
 import { decodeHtml } from '../web/lang';
-import { Doc, Step } from '../types';
+import { Doc } from '../types';
 
-export const describeDoc = (target: Doc): string => {
+export const buildDescription = (target: Doc): string => {
   const attrs = target.attrs || {};
 
   // ex. "departure date"
@@ -17,53 +17,19 @@ export const describeDoc = (target: Doc): string => {
 
   description = description.trim();
 
-  if (description.length > 40) {
-    description = `${description.substring(0, 40)}...`;
+  if (description.length > 15) {
+    description = `${description.substring(0, 15)}`;
   }
 
-  // strip single quotes so the description is valid javascript
-  description = description.replace("'", '');
+  // remove double quotes to make it usable as a JSON key
+  description = description.replace('"', '');
 
   // remove invisible characters which look like an empty string but have a length
   // https://www.w3resource.com/javascript-exercises/javascript-string-exercise-32.php
   // https://stackoverflow.com/a/21797208/230462
   description = description.replace(/[^\x20-\x7E]/g, '');
 
-  if (description.length) {
-    return ` "${description}"`;
-  }
-
-  return '';
-};
-
-export const buildDescription = (step: Step): string => {
-  if (step.action === 'press' || step.action === 'scroll') {
-    // self explanatory, no description necessary
-    return '';
-  }
-
-  const description = describeDoc(step.target);
-
-  const target = step.target;
-
-  // link/input
-  const tagName = `${target.name === 'a' ? ' link' : ` ${target.name}` || ''}`;
-
-  if (step.action === 'click') {
-    return `click${description}${tagName}`;
-  }
-
-  if (step.action === 'select') {
-    return `select${description}`;
-  }
-
-  if (step.action === 'fill' || step.action === 'type') {
-    if (step.value === '' || isNil(step.value)) {
-      return `clear${description}${tagName}`;
-    }
-
-    return `type into${description}${tagName}`;
-  }
+  description += ` ${target.name}`;
 
-  throw new Error(`Invalid step action ${step.action}`);
+  return snakeCase(description);
 };

test/build-code/buildDescription.test.ts

@@ -1,117 +1,51 @@
-import {
-  buildDescription,
-  describeDoc,
-} from '../../src/build-code/buildDescription';
-import { Step } from '../../src/types';
 import { Doc } from '@jperl/html-parse-stringify';
+import { buildDescription } from '../../src/build-code/buildDescription';
 
-const baseStep: Step = {
-  action: 'click',
-  htmlSelector: '',
-  target: {
-    name: 'input',
-    type: 'tag',
-  },
-  index: 0,
-  page: 0,
-};
-
-const doc = (attrs: object): Doc => ({
+const doc = (attrs: object = {}): Doc => ({
   attrs,
   name: 'input',
   type: 'tag',
   voidElement: false,
 });
 
 describe('buildDescription', () => {
-  it('excludes target name if it does not exist', () => {
-    expect(buildDescription(baseStep)).toBe('click input');
-  });
-
-  it('uses alt attribute if no other attributes specified', () => {
-    const step: Step = {
-      ...baseStep,
-      target: {
-        attrs: {
-          alt: 'spirit',
-        },
-        name: 'img',
-        type: 'tag',
-      },
-    };
-
-    expect(buildDescription(step)).toBe('click "spirit" img');
-  });
-
-  it('formats clear input', () => {
-    const step: Step = {
-      ...baseStep,
-      action: 'fill',
-      value: null,
-    };
-
-    expect(buildDescription(step)).toEqual('clear input');
-  });
-
-  it('formats type input', () => {
-    const step: Step = {
-      ...baseStep,
-      action: 'type',
-      value: 'something',
-    };
-
-    expect(buildDescription(step)).toEqual('type into input');
-  });
-
-  it('formats scroll action', () => {
-    const step: Step = {
-      ...baseStep,
-      action: 'scroll',
-    };
-
-    expect(buildDescription(step)).toBe('');
-  });
-
-  it('formats select action', () => {
-    const step: Step = {
-      ...baseStep,
-      action: 'select',
-    };
+  it('escapes single quotes', () => {
+    expect(buildDescription(doc({ labels: "someone's" }))).toBe(
+      'someones_input',
+    );
 
-    expect(buildDescription(step)).toBe('select');
+    expect(buildDescription(doc({ labels: "'" }))).toBe('input');
   });
 
-  it('skips formatting press', () => {
-    const step: Step = {
-      ...baseStep,
-      action: 'press',
-      value: 'Enter',
-    };
-
-    expect(buildDescription(step)).toEqual('');
+  it('excludes target name if it does not exist', () => {
+    expect(buildDescription(doc())).toBe('input');
   });
-});
 
-describe('describeDoc', () => {
   it('formats labels', () => {
-    expect(describeDoc(doc({ labels: 'name username' }))).toBe(
-      ' "name username"',
+    expect(buildDescription(doc({ labels: 'name username' }))).toBe(
+      'name_username_input',
     );
   });
 
   it('shortens target name if needed', () => {
-    expect(describeDoc(doc({ innertext: `sign in${'x'.repeat(200)}` }))).toBe(
-      ' "sign inxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx..."',
-    );
+    expect(
+      buildDescription(doc({ innertext: `sign in${'x'.repeat(100)}` })),
+    ).toBe('sign_inxxxxxxxx_input');
   });
 
-  it('escapes single quotes', () => {
-    expect(describeDoc(doc({ labels: "someone's" }))).toBe(` "someones"`);
-
-    expect(describeDoc(doc({ labels: "'" }))).toBe('');
+  it('removes invisible characters', () => {
+    expect(buildDescription(doc({ labels: '​' }))).toBe('input');
   });
 
-  it('removes invisible characters', () => {
-    expect(describeDoc(doc({ labels: '​' }))).toBe('');
+  it('uses alt attribute if no other attributes specified', () => {
+    expect(
+      buildDescription({
+        attrs: {
+          alt: 'spirit',
+        },
+        name: 'img',
+        type: 'tag',
+      }),
+    ).toBe('spirit_img');
   });
 });