Merge pull request #20 from NetCZ/feature/similar-component-names

Similar component names fix
NetCZ · Mar 19, 2019 · 5e02fc4 · 5e02fc4
2 parents 805d69b + 78a293f
commit 5e02fc4
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 6 deletions.
diff --git a/src/helper.js b/src/helper.js
@@ -76,7 +76,7 @@ exports.createPart = function createPart(settings, options) {
 };
 
 exports.createParts = function createParts(options, dirPath, inputFile, fileNames) {
-  var inputFileName = inputFile.split(options.test)[0];
+  var inputFileName = new RegExp(`^${ inputFile.split(options.test)[0] }`);
   var parts = {},
     that = this;
 
@@ -89,7 +89,7 @@ exports.createParts = function createParts(options, dirPath, inputFile, fileName
 
     if (_.has(parts, settings.tagName) || _.has(parts, settings.fileType)) {
       var type = settings.tagName || settings.fileType;
-      throw new TypeError(`File "${file}" can't be used as "${type}", because it was already defined in "${_.get(parts[type], 'file', null)}".`);
+      throw new TypeError(`File "${ file }" can't be used as "${ type }", because it was already defined in "${ _.get(parts[type], 'file', null) }".`);
     }
 
     parts[settings.tagName || settings.fileType] = that.createPart(settings, options);

diff --git a/test/files/similar-component-names/Component.vue.html b/test/files/similar-component-names/Component.vue.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/test/files/similar-component-names/Component.vue.js b/test/files/similar-component-names/Component.vue.js
diff --git a/test/files/similar-component-names/SimilarComponent.vue.html b/test/files/similar-component-names/SimilarComponent.vue.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+</head>
+<body>
+
+</body>
+</html>
diff --git a/test/files/similar-component-names/SimilarComponent.vue.js b/test/files/similar-component-names/SimilarComponent.vue.js
diff --git a/test/loader.js b/test/loader.js
@@ -14,7 +14,8 @@ var twoPartsDir = path.resolve(dir + '/files/two-parts') + path.sep,
   emptyDir = path.resolve(dir + '/files/empty') + path.sep,
   twoComponentsSameDir = path.resolve(dir + '/files/two-components-same-dir') + path.sep,
   twoComponentsDuplicateSameDir = path.resolve(dir + '/files/two-components-duplicate-same-dir') + path.sep,
-  twoPartsDirCustomScript = path.resolve(dir + '/files/two-parts-custom-script') + path.sep;
+  twoPartsDirCustomScript = path.resolve(dir + '/files/two-parts-custom-script') + path.sep,
+  similarComponentNamesDir = path.resolve(dir + '/files/similar-component-names') + path.sep;
 
 beforeEach(function () {
   loader = require('../index');
@@ -48,11 +49,11 @@ describe('loader: errors', function () {
   });
 
   it('should throw duplication TypeError - multiple components in same directory', function () {
-    var content = require(duplicateDir + 'Component.vue');
+    var content = require(twoComponentsDuplicateSameDir + 'SecondComponent.vue');
 
     assert.throws(function () {
-      loader.apply(_.assign({}, webpack, { context: twoComponentsDuplicateSameDir }), [content, { file: 'Component.vue.js' }]);
-    }, TypeError, 'File "SecondComponent.vue.html" can\'t be used as "template", because it was already defined in "FirstComponent.vue.html".');
+      loader.apply(_.assign({}, webpack, { context: twoComponentsDuplicateSameDir }), [content, { file: 'SecondComponent.vue.js' }]);
+    }, TypeError, 'File "SecondComponent.vue.pug" can\'t be used as "template", because it was already defined in "SecondComponent.vue.html".');
   });
 });
 
@@ -257,4 +258,26 @@ describe('loader: success', function () {
 
     assert.strictEqual(result, expected);
   });
+
+  it('should has two parts even when similar component names occurs - first component', function () {
+    var content = require(similarComponentNamesDir + 'Component.vue');
+
+    var expected = '<template separated src="' + similarComponentNamesDir + 'Component.vue.html" lang="html"></template>' +
+      '<script separated src="' + similarComponentNamesDir + 'Component.vue.js" lang="js"></script>';
+
+    var result = loader.apply(_.assign({}, webpack, { context: similarComponentNamesDir }), [content, { file: 'Component.vue.js' }]);
+
+    assert.strictEqual(result, expected);
+  });
+
+  it('should has two parts even when similar component names occurs - second component', function () {
+    var content = require(similarComponentNamesDir + 'SimilarComponent.vue');
+
+    var expected = '<template separated src="' + similarComponentNamesDir + 'SimilarComponent.vue.html" lang="html"></template>' +
+      '<script separated src="' + similarComponentNamesDir + 'SimilarComponent.vue.js" lang="js"></script>';
+
+    var result = loader.apply(_.assign({}, webpack, { context: similarComponentNamesDir }), [content, { file: 'SimilarComponent.vue.js' }]);
+
+    assert.strictEqual(result, expected);
+  });
 });