simplifying the markup test

Author: mansona

lib/markup.js

@@ -1,8 +1,6 @@
 export default function (doc) {
-  console.log('transforming markup for document');
   for (const data of doc.data) {
     const { id, attributes } = data;
-    console.log(`\tGenerating markup for ${id}`);
 
     try {
       const description = attributes.description;
@@ -11,20 +9,16 @@ export default function (doc) {
         attributes.description = fixFilename(description);
       }
 
-      // console.log('\tcompleted highlighting')
-
       replaceDescriptionFor(attributes.methods);
       replaceDescriptionFor(attributes.properties);
       replaceDescriptionFor(attributes.events);
-      // console.log(`\tMarkup Generated for ${id}\n`)
     } catch (e) {
       console.log(`Error generating markup for ${id}`);
       console.log(e);
       process.exit(1);
     }
   }
 
-  console.log('completed markup transformation for document');
   return doc;
 }
 
@@ -39,7 +33,7 @@ function replaceDescriptionFor(items) {
   }
 }
 
-function fixFilename(description) {
+export function fixFilename(description) {
   if (description) {
     description = description
       .replaceAll(/```([^\n]+)\.(js|hbs|ts)\n/g, '```$2 {data-filename=$1.$2}\n')

test/markup-test.js

@@ -1,58 +1,19 @@
-import markup from '../lib/markup.js';
+import { fixFilename } from '../lib/markup.js';
 import { assert } from 'chai';
-import fs from 'fs';
+import fsExtra from 'fs-extra';
+import { join } from 'path';
 
-function desc(path) {
-  return {
-    id: Date.now(),
-    attributes: {
-      description: fs.readFileSync(`./test/mocks/description/${path}.md`, 'utf-8'),
-      methods: [],
-      properties: [],
-      events: [],
-    },
-  };
-}
+const { readFileSync, readdirSync } = fsExtra;
 
-function mark(path) {
-  let data = [desc(path)];
-  let result = markup({ data });
-  let content = result.data[0].attributes.description;
-  maybeWrite(content, path);
-  return content;
-}
-
-function maybeWrite(content, path) {
-  const fsPath = `./test/mocks/description/${path}.html`;
-  if (fs.existsSync(fsPath)) {
-    return;
-  }
-  fs.writeFileSync(fsPath, content, 'utf-8');
-}
-
-function snapshot(path) {
-  const fsPath = `./test/mocks/description/${path}.html`;
-  return fs.readFileSync(fsPath, 'utf8');
-}
+const inputFiles = readdirSync('./test/mocks/input');
 
 describe('markup', () => {
-  it('render correct syntax for handlebars with title', function () {
-    const caseName = 'handlebars-title';
-    assert.equal(mark(caseName), snapshot(caseName));
-  });
+  for (let file of inputFiles) {
+    it(`render correct syntax for ${file}`, function () {
+      const inputFile = readFileSync(join('./test/mocks/input', file), 'utf-8');
+      const outputFile = readFileSync(join('./test/mocks/output', file), 'utf-8');
 
-  it('render correct syntax for handlebars without title', function () {
-    const caseName = 'handlebars';
-    assert.equal(mark(caseName), snapshot(caseName));
-  });
-
-  it('render correct syntax for javascript with title', function () {
-    const caseName = 'javascript-title';
-    assert.equal(mark(caseName), snapshot(caseName));
-  });
-
-  it('render correct syntax for javascript without title', function () {
-    const caseName = 'javascript';
-    assert.equal(mark(caseName), snapshot(caseName));
-  });
+      assert.equal(fixFilename(inputFile), outputFile);
+    });
+  }
 });

test/mocks/description/handlebars-title.html

@@ -0,0 +1,21 @@
+```handlebars {data-filename=app/components/person-profile.hbs}
+  <h1>{{person.title}}</h1>
+  {{! Executed in the component's context. }}
+  {{yield}} {{! block contents }}
+  ```
+  If you want to customize the component, in order to
+  handle events or actions, you implement a subclass
+  of `Ember.Component` named after the name of the
+  component.
+  For example, you could implement the action
+  `hello` for the `person-profile` component:
+  ```js {data-filename=app/components/person-profile.js}
+  import Ember from 'ember';
+  export default Ember.Component.extend({
+    actions: {
+      hello(name) {
+        console.log("Hello", name);
+      }
+    }
+  });
+```

test/mocks/description/handlebars.html

@@ -0,0 +1,21 @@
+```handlebars
+  <h1>{{person.title}}</h1>
+  {{! Executed in the component's context. }}
+  {{yield}} {{! block contents }}
+  ```
+  If you want to customize the component, in order to
+  handle events or actions, you implement a subclass
+  of `Ember.Component` named after the name of the
+  component.
+  For example, you could implement the action
+  `hello` for the `person-profile` component:
+  ```js {data-filename=app/components/person-profile.js}
+  import Ember from 'ember';
+  export default Ember.Component.extend({
+    actions: {
+      hello(name) {
+        console.log("Hello", name);
+      }
+    }
+  });
+```

test/mocks/description/javascript-title.html

@@ -0,0 +1,10 @@
+```js {data-filename=app/routes/articles.js}
+import Route from '@ember/routing/route';
+export default class ArticlesRoute extends Route {
+  resetController(controller, isExiting, transition) {
+    if (isExiting && transition.targetName !== 'error') {
+      controller.set('page', 1);
+    }
+  }
+}
+```

test/mocks/description/javascript.html

@@ -0,0 +1,10 @@
+```js
+import Route from '@ember/routing/route';
+export default class ArticlesRoute extends Route {
+  resetController(controller, isExiting, transition) {
+    if (isExiting && transition.targetName !== 'error') {
+      controller.set('page', 1);
+    }
+  }
+}
+```