New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remap is not working properly when using source map files from webpack #68

Closed
matt-schrader opened this Issue Jun 13, 2016 · 7 comments

Comments

Projects
None yet
3 participants
@matt-schrader
Copy link

matt-schrader commented Jun 13, 2016

This issue is most likely related to other similar issues I've seen in your queue. I wanted to log it to hopefully provide a bit more info to give some more use cases. We are trying to use Webpack to build typescript and then test with karma and then use remap to show coverage on our typescript.

Using 0.6.4 of remap poses issues in doing so. Here is a sample repo that will demonstrate the issue: https://github.com/matt-schrader/typescript_code_coverage

I have made changes on my box to make it work for me. I'll post those changes, but by no means am I recommending them as solutions as I'm not sure they are correct for the community. The changes I made are after the //MATT comment.

First run the build

npm install
npm run build
npm run test
npm run coverage

The last the step should give an error like

Error: EACCES: permission denied, mkdir '/src'
    at Error (native)
    at Object.fs.mkdirSync (fs.js:794:18)
    at Function.sync (/Users/j1014252/Playground/typescript/getting_started_with_webpack/node_modules/remap-istanbul/node_modules/istanbul/node_modules/mkdirp/index.js:71:13)
    at SyncFileWriter.extend.writeFile (/Users/j1014252/Playground/typescript/getting_started_with_webpack/node_modules/remap-istanbul/node_modules/istanbul/lib/util/file-writer.js:55:16)
    at FileWriter.extend.writeFile (/Users/j1014252/Playground/typescript/getting_started_with_webpack/node_modules/remap-istanbul/node_modules/istanbul/lib/util/file-writer.js:147:23)
    at HtmlReport.Report.mix.writeFiles (/Users/j1014252/Playground/typescript/getting_started_with_webpack/node_modules/remap-istanbul/node_modules/istanbul/lib/report/html.js:479:16)
    at /Users/j1014252/Playground/typescript/getting_started_with_webpack/node_modules/remap-istanbul/node_modules/istanbul/lib/report/html.js:484:22
    at Array.forEach (native)
    at HtmlReport.Report.mix.writeFiles (/Users/j1014252/Playground/typescript/getting_started_with_webpack/node_modules/remap-istanbul/node_modules/istanbul/lib/report/html.js:482:23)
    at HtmlReport.Report.mix.writeReport (/Users/j1014252/Playground/typescript/getting_started_with_webpack/node_modules/remap-istanbul/node_modules/istanbul/lib/report/html.js:566:14)

To fix this I changed node_modules/remap-istanbul/node_modules/istanbul/lib/report/html.writeFiles to be:

writeFiles: function (writer, node, dir, collector) {
        var that = this,
            indexFile = path.resolve(dir, 'index.html'),
            childFile;
        if (this.opts.verbose) { console.error('Writing ' + indexFile); }
        writer.writeFile(indexFile, function (contentWriter) {
            that.writeIndexPage(contentWriter, node);
        });
        node.children.forEach(function (child) {

            if (child.kind === 'dir') {
                //MATT
                var childDir = child.relativeName;
                if (childDir.charAt(0) === '/') {
                  childDir = childDir.substring(1);
                }
                that.writeFiles(writer, child, path.resolve(dir, childDir), collector);
            } else {
                childFile = path.resolve(dir, child.relativeName + '.html');
                if (that.opts.verbose) { console.error('Writing ' + childFile); }
                writer.writeFile(childFile, function (contentWriter) {
                    that.writeDetailPage(contentWriter, child, collector.fileCoverageFor(child.fullPath()));
                });
            }
        });
    }

Then I ran into an issue where the links and style includes from the html reports were incorrect. The links included a '/' and the style includes had an extra '../' causing the source code coverage to not work at all. To fix this I changed node_modules/remap-istanbul/node_modules/istanbul/lib/report/html.cleanPath to be

function cleanPath(name) {
  //MATT
  var pathToClean = name;

  if (pathToClean.charAt(0) === '/') {
    pathToClean = pathToClean.substring(1);
  }
    var SEP = path.sep || '/';
    return (SEP !== '/') ? pathToClean.split(SEP).join('/') : pathToClean;
}

After these two changes I am seeing coverage properly.

@matt-schrader

This comment has been minimized.

Copy link

matt-schrader commented Sep 6, 2016

Unfortunately this issue is not fixed by this merge. I looked into this a bit more today and I think the real culprit to this is the paths resulting from webpack sourcemaps including webpack:///app.ts in front of each file name. webpack:// get stripped off and we are left with /app.ts. So, Istanbul/remap can't write the report.

I plan on looking into a better fix for this particular issue as I have time.

@matt-schrader

This comment has been minimized.

Copy link

matt-schrader commented Sep 7, 2016

I've submitted a pull request to Istanbul to fix this issue. I'm sure that what I've provided isn't the full solution so I'll hopefully be working with them to get a good fix in place.

gotwarlost/istanbul#696

@matt-schrader

This comment has been minimized.

Copy link

matt-schrader commented Sep 8, 2016

I missed the devtoolModuleFilenameTemplate option that webpack provides. I am now utilizing this to remove the default prefix of "webpack:///" from the source paths.

@dinvlad

This comment has been minimized.

Copy link

dinvlad commented Oct 3, 2016

@matt-schrader, could you please elaborate on how you use that option? I've set devtoolModuleFilenameTemplate: '[resource-path]' in webpack.config but it doesn't seem to help.

@matt-schrader

This comment has been minimized.

Copy link

matt-schrader commented Oct 3, 2016

Yes, check out my sample project: https://github.com/matt-schrader/typescript_code_coverage. The use of that is in the webpack.test.config.js file. Let me know if that helps.

@dinvlad

This comment has been minimized.

Copy link

dinvlad commented Oct 3, 2016

Thanks Matt, I've just also figured out that I needed to put this option under output: (instead of stand-alone) in webpack.config. Now it works correctly!

@matt-schrader

This comment has been minimized.

Copy link

matt-schrader commented Oct 3, 2016

Glad you found the issue!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment