feat(parser): plain JavaScript files are now being parsed (#128)

- Add tests on js file parsing

Author: silverspectro

__tests__/core/__fixtures__/methods/Component/Component.js

@@ -0,0 +1,20 @@
+
+/**
+ * @vue-prop {String} test - test description
+ * @vue-data {String} [foo=bar] - Foo description
+ */
+export default ({
+  name: 'component',
+  props: {
+    test: {
+      type: String,
+    },
+  },
+  data() {
+    return {
+      foo: 'bar',
+    };
+  },
+  methods: {},
+  computed: {},
+});

__tests__/core/seekExportDefaultLine.js

@@ -2,37 +2,43 @@ const path = require('path');
 const fs = require('fs');
 const seekExportDefaultLine = require('../../lib/core/seekExportDefaultLine');
 
-const readComponent = (component, cb) => {
-  const filename = path.join(__dirname, `__fixtures__/methods/${component}.vue`);
+const readComponent = (componentPath, cb) => {
+  const filename = path.join(__dirname, `__fixtures__/methods/${componentPath}`);
 
   fs.readFile(filename, 'utf8', (err, source) => cb(source));
 };
 
 describe('core.seekExportDefaultLine', () => {
   test('A normal component', (done) => {
-    readComponent('Component', (source) => {
+    readComponent('Component.vue', (source) => {
       expect(seekExportDefaultLine(source)).toBe(9);
       done();
     });
   });
 
   test('A normal component with a lot of spaces', (done) => {
-    readComponent('ComponentWithSpaces', (source) => {
+    readComponent('ComponentWithSpaces.vue', (source) => {
       expect(seekExportDefaultLine(source)).toBe(14);
       done();
     });
   });
 
   test('When <script> is before <template>', (done) => {
-    readComponent('ScriptBeforeTemplate', (source) => {
+    readComponent('ScriptBeforeTemplate.vue', (source) => {
       expect(seekExportDefaultLine(source)).toBe(5);
       done();
     });
   });
   test('When `export default` is inside <template>', (done) => {
-    readComponent('ComponentWithExportDefaultInTemplate', (source) => {
+    readComponent('ComponentWithExportDefaultInTemplate.vue', (source) => {
       expect(seekExportDefaultLine(source)).toBe(6);
       done();
     });
   });
+  test('When component is js file', (done) => {
+    readComponent('Component/Component.js', (source) => {
+      expect(seekExportDefaultLine(source, 'Component.js')).toBe(6);
+      done();
+    });
+  });
 });

cypress/integration/templates/default.spec.js

@@ -164,3 +164,169 @@ describe('Template: default', () => {
     cy.contains('created()').should('not.exist');
   });
 });
+
+describe('Template JS: default', () => {
+  /* eslint-disable newline-per-chained-call */
+  before(() => {
+    cy.visit('/../../../example/docs/module-CounterJS.html');
+    cy.screenshot();
+  });
+
+  it('should renders module name correctly', () => {
+    cy
+      .get('.page-title')
+      .contains('Module: CounterJS');
+
+    cy
+      .get('nav a[href="module-CounterJS.html"]')
+      .contains('CounterJS');
+  });
+
+  it('should renders props correctly', () => {
+    const props = [
+      {
+        name: '<code>initialCounter</code>',
+        type: 'Number',
+        defaultValue: '-',
+        required: '<b>Yes</b>',
+        description: '-',
+      },
+      {
+        name: '<code>step</code>',
+        type: 'Number',
+        defaultValue: '<code>1</code>',
+        required: 'No',
+        description: 'Step',
+      },
+    ];
+
+    cy.get('[data-jsdoc-vuejs="section-props"]').contains('Props');
+    cy.get('[data-jsdoc-vuejs="table-props"]').as('table-props');
+
+    cy
+      .get('@table-props')
+      .find('> thead > tr > th')
+      .contains('Name')
+      .next().contains('Type')
+      .next().contains('Default value')
+      .next().contains('Required?')
+      .next().contains('Description');
+
+    cy
+      .get('@table-props')
+      .find('> tbody > tr')
+      .then(($rows) => {
+        expect($rows).to.have.length(2);
+
+        props.forEach((prop, i) => {
+          const $row = $rows.eq(i);
+          const $children = $row.children();
+
+          expect($children.eq(0).html()).to.eq(prop.name);
+          expect($children.eq(1).html()).to.eq(prop.type);
+          expect($children.eq(2).html()).to.eq(prop.defaultValue);
+          expect($children.eq(3).html()).to.eq(prop.required);
+          expect($children.eq(4).html()).to.eq(prop.description);
+        });
+      });
+  });
+
+  it('should renders data correctly', () => {
+    const data = [
+      {
+        name: '<code>counter</code>',
+        type: 'Number',
+        defaultValue: '-',
+        description: "Current counter's value",
+      },
+    ];
+
+    cy.get('[data-jsdoc-vuejs="section-data"]').contains('Data');
+    cy.get('[data-jsdoc-vuejs="table-data"]').as('table-data');
+
+    cy
+      .get('@table-data')
+      .find('> thead > tr > th')
+      .contains('Name')
+      .next().contains('Type')
+      .next().contains('Default value')
+      .next().contains('Description');
+
+    cy
+      .get('@table-data')
+      .find('> tbody > tr')
+      .then(($rows) => {
+        expect($rows).to.have.length(1);
+
+        data.forEach((d, i) => {
+          const $row = $rows.eq(i);
+          const $children = $row.children();
+
+          expect($children.eq(0).html()).to.eq(d.name);
+          expect($children.eq(1).html()).to.eq(d.type);
+          expect($children.eq(2).html()).to.eq(d.defaultValue);
+          expect($children.eq(3).html()).to.eq(d.description);
+        });
+      });
+  });
+
+  it('should renders computed correctly', () => {
+    const computeds = [
+      { name: '<code>fooList</code>', type: 'Array.&lt;String&gt;', description: 'A list of foo' },
+      { name: '<code>barList</code>', type: 'Array.&lt;String&gt;', description: 'A list of bar' },
+      { name: '<code>message</code>', type: 'String', description: 'A message' },
+    ];
+
+    cy.get('[data-jsdoc-vuejs="section-computed"]').contains('Computed');
+    cy.get('[data-jsdoc-vuejs="table-computed"]').as('table-computed');
+
+    cy
+      .get('@table-computed')
+      .find('> thead > tr > th')
+      .contains('Name')
+      .next().contains('Type')
+      .next().contains('Description');
+
+    cy
+      .get('@table-computed')
+      .find('> tbody > tr')
+      .then(($rows) => {
+        expect($rows).to.have.length(3);
+
+        computeds.forEach((computed, i) => {
+          const $row = $rows.eq(i);
+          const $children = $row.children();
+
+          expect($children.eq(0).html()).to.eq(computed.name);
+          expect($children.eq(1).html()).to.eq(computed.type);
+          expect($children.eq(2).html()).to.eq(computed.description);
+        });
+      });
+  });
+
+  it('should render methods properly', () => {
+    cy.contains('h3', 'Methods').should('have.attr', 'class', 'subsection-title');
+
+    cy.get('#decrement')
+      .contains('decrement()')
+      .next('.description')
+      .next('.details')
+      .contains('a[href="js_CounterJS.js.html#line43"]', 'line 43');
+
+    cy.get('#increment')
+      .contains('increment()')
+      .next('.description')
+      .next('.details')
+      .contains('a[href="js_CounterJS.js.html#line36"]', 'line 36');
+
+    cy.get('#showDialog')
+      .contains('showDialog(counter)')
+      .next('.description')
+      .next('h5')
+      .next('.params')
+      .next('.details')
+      .contains('a[href="js_CounterJS.js.html#line51"]', 'line 51');
+
+    cy.contains('created()').should('not.exist');
+  });
+});