```","url":"https://ray.run/discord-forum/threads/600-coverage-for-javascript-in-an-aspnet-core-dotnet-app#message-2650"},{"@type":"Comment","author":{"@type":"Person","name":"myliu"},"datePublished":"2023-06-11T01:44:04.788Z","text":"Which happens when the first page gets loaded (Index) because _Layout is shared for all pages","url":"https://ray.run/discord-forum/threads/600-coverage-for-javascript-in-an-aspnet-core-dotnet-app#message-2649"},{"@type":"Comment","author":{"@type":"Person","name":"cenfun"},"datePublished":"2023-06-11T01:55:00.352Z","text":"just created a demo and it works. see commit changes https://github.com/cenfun/WebApplication3/commit/8879c18727412045f51d696d44cb6ea1086d4af8\nand report preview:","url":"https://ray.run/discord-forum/threads/600-coverage-for-javascript-in-an-aspnet-core-dotnet-app#message-2648"},{"@type":"Comment","author":{"@type":"Person","name":"myliu"},"datePublished":"2023-06-11T01:56:49.257Z","text":"You were able to get an lcov file with js coverage info with this?","url":"https://ray.run/discord-forum/threads/600-coverage-for-javascript-in-an-aspnet-core-dotnet-app#message-2647"},{"@type":"Comment","author":{"@type":"Person","name":"cenfun"},"datePublished":"2023-06-11T01:57:57.533Z","text":"it should be yes. here is icov.info content: \n\nTN:\nSF:localhost-8090\\js\\site.js\nFN:7,addNumbers\nFN:11,subtractNumbers\nFN:15,multiplyNumbers\nFN:19,divideNumbers\nFNF:4\nFNH:4\nFNDA:1,addNumbers\nFNDA:1,subtractNumbers\nFNDA:1,multiplyNumbers\nFNDA:2,divideNumbers\nDA:1,1\nDA:2,1\nDA:3,1\nDA:4,1\nDA:5,1\nDA:6,1\nDA:7,1\nDA:8,1\nDA:9,1\nDA:10,1\nDA:11,1\nDA:12,1\nDA:13,1\nDA:14,1\nDA:15,1\nDA:16,1\nDA:17,1\nDA:18,1\nDA:19,2\nDA:20,2\nDA:21,1\nDA:22,1\nDA:23,1\nDA:24,2\nDA:25,1\nDA:26,1\nDA:27,1\nDA:28,1\nDA:29,1\nDA:30,1\nDA:31,1\nDA:32,1\nLF:32\nLH:32\nBRDA:1,0,0,1\nBRDA:7,1,0,1\nBRDA:11,2,0,1\nBRDA:15,3,0,1\nBRDA:19,4,0,2\nBRDA:20,5,0,1\nBRF:6\nBRH:6\nend_of_record","url":"https://ray.run/discord-forum/threads/600-coverage-for-javascript-in-an-aspnet-core-dotnet-app#message-2646"},{"@type":"Comment","author":{"@type":"Person","name":"myliu"},"datePublished":"2023-06-11T02:03:50.193Z","text":"That does look right 🤔 \n\nI'm attempting to test right now. Did you use npm test as the script?","url":"https://ray.run/discord-forum/threads/600-coverage-for-javascript-in-an-aspnet-core-dotnet-app#message-2645"},{"@type":"Comment","author":{"@type":"Person","name":"myliu"},"datePublished":"2023-06-11T02:07:27.978Z","text":"","url":"https://ray.run/discord-forum/threads/600-coverage-for-javascript-in-an-aspnet-core-dotnet-app#message-2644"},{"@type":"Comment","author":{"@type":"Person","name":"myliu"},"datePublished":"2023-06-11T02:08:18.441Z","text":"Now I'm really confused.. I pulled your changes and I'm still seeing no coverage :\\","url":"https://ray.run/discord-forum/threads/600-coverage-for-javascript-in-an-aspnet-core-dotnet-app#message-2643"},{"@type":"Comment","author":{"@type":"Person","name":"cenfun"},"datePublished":"2023-06-11T02:11:57.578Z","text":"can you open this file","url":"https://ray.run/discord-forum/threads/600-coverage-for-javascript-in-an-aspnet-core-dotnet-app#message-2642"},{"@type":"Comment","author":{"@type":"Person","name":"cenfun"},"datePublished":"2023-06-11T02:13:37.631Z","text":"this logs should be the nyc logs, there is no need to use nyc if using nonocart-reporter","url":"https://ray.run/discord-forum/threads/600-coverage-for-javascript-in-an-aspnet-core-dotnet-app#message-2641"},{"@type":"Comment","author":{"@type":"Person","name":"cenfun"},"datePublished":"2023-06-11T02:15:05.548Z","text":"If you want nyc works you have to follow nyc rules, I don't know much about this","url":"https://ray.run/discord-forum/threads/600-coverage-for-javascript-in-an-aspnet-core-dotnet-app#message-2640"},{"@type":"Comment","author":{"@type":"Person","name":"myliu"},"datePublished":"2023-06-11T02:18:45.907Z","text":"No, you're abolsutely right. This is what I'm seeing inside of the test-results/coverage folder for the lcov file. And THIS looks right. I'm fairly sure I had checked this file before too in my work project, but I'm going to open up my laptop and check again right now!! Thank you!! Hoping for the best 🙂 I'll keep you updated","url":"https://ray.run/discord-forum/threads/600-coverage-for-javascript-in-an-aspnet-core-dotnet-app#message-2639"},{"@type":"Comment","author":{"@type":"Person","name":"cenfun"},"datePublished":"2023-06-11T02:19:19.248Z","text":"great","url":"https://ray.run/discord-forum/threads/600-coverage-for-javascript-in-an-aspnet-core-dotnet-app#message-2638"},{"@type":"Comment","author":{"@type":"Person","name":"myliu"},"datePublished":"2023-06-11T02:37:55.206Z","text":"Cenfun!!! Thank you so much. I think I got lost in all my various efforts that in the end I must have been over looking where the this proper lcov was being put. \n\nThough I'm still surprised no other method worked. But after two weeks I'm just happy that THIS method works with monocart!\n\nI'll be able to confirm on Monday when I push this lcov to Sonar for validation.. but I'm pretty sure I'm reading it right as far a coverage goes.\n\nEither way thank you so much! You've made sure that my last two weeks of work was not wasted 🥳","url":"https://ray.run/discord-forum/threads/600-coverage-for-javascript-in-an-aspnet-core-dotnet-app#message-2637"},{"@type":"Comment","author":{"@type":"Person","name":"cenfun"},"datePublished":"2023-06-11T02:47:43.556Z","text":"NP. just remind, it should use `addCoverageReport` instead of `attachCoverageReport` to generate global coverage report if you need put coverage to Sonar. read more about this https://github.com/cenfun/monocart-reporter#global-coverage-report","url":"https://ray.run/discord-forum/threads/600-coverage-for-javascript-in-an-aspnet-core-dotnet-app#message-2636"},{"@type":"Comment","author":{"@type":"Person","name":"myliu"},"datePublished":"2023-06-11T02:51:13.572Z","text":"Thanks for that info Cen 🙂 I'll start testing it Monday and if I run into any issue with the Sonar Coverage I'll double check with you that I set it up properly if you dont mind","url":"https://ray.run/discord-forum/threads/600-coverage-for-javascript-in-an-aspnet-core-dotnet-app#message-2635"},{"@type":"Comment","author":{"@type":"Person","name":"myliu"},"datePublished":"2023-06-12T22:03:15.178Z","text":"Hello again, Cent! \n\nThe lcov file generated provides absolute path (which includes the localhost path)\n\nExample: SF:localhost-44351\\js\\testfile.js\n\nIs there a way to get relative file path\n\nFor example when I get my karma/jasmine coverage it looks like\n\nSF: wwwroot\\js\\testfile.js","url":"https://ray.run/discord-forum/threads/600-coverage-for-javascript-in-an-aspnet-core-dotnet-app#message-2634"},{"@type":"Comment","author":{"@type":"Person","name":"cenfun"},"datePublished":"2023-06-13T10:42:55.505Z","text":"yes it should be a issue. I will think about how to fix it.","url":"https://ray.run/discord-forum/threads/600-coverage-for-javascript-in-an-aspnet-core-dotnet-app#message-2633"},{"@type":"Comment","author":{"@type":"Person","name":"cenfun"},"datePublished":"2023-06-14T15:59:40.713Z","text":"try new version
[email protected], using option `sourcePath` to replace the path with your wanted:\n```\nconst report = await attachCoverageReport(coverageData, test.info(), {\n lcov: true,\n sourcePath: (sourcePath, fileSources) => {\n var newPath = sourcePath.replace(/\\\\/g, '/');\n return newPath;\n }\n });\n\n```","url":"https://ray.run/discord-forum/threads/600-coverage-for-javascript-in-an-aspnet-core-dotnet-app#message-2632"},{"@type":"Comment","author":{"@type":"Person","name":"myliu"},"datePublished":"2023-06-14T16:04:01.479Z","text":"Wow! That was fast! Thank you. I will test it out. Was currently just using a script in build pipeline to replace the location 😅\n\nI do have one more question if you don't mind. Is there a way for me to define the coverage folder name for the lcov file?\n\nRight now it goes to coverage-'random letters and numbers' \n\nWhich can change and I need folder name to remain the same","url":"https://ray.run/discord-forum/threads/600-coverage-for-javascript-in-an-aspnet-core-dotnet-app#message-2631"},{"@type":"Comment","author":{"@type":"Person","name":"cenfun"},"datePublished":"2023-06-14T16:27:43.823Z","text":"you should using `addCoverageReport` NOT `attachCoverageReport`, `attach report` is works for single test, so there is a test-id in the dir name. `add report` is works for global coverage report, the dir name is `coverage`","url":"https://ray.run/discord-forum/threads/600-coverage-for-javascript-in-an-aspnet-core-dotnet-app#message-2630"},{"@type":"Comment","author":{"@type":"Person","name":"myliu"},"datePublished":"2023-06-14T16:43:01.325Z","text":"I understand. Thank you. When I attempted to use addCoverageReport instead no LCOV file was generated. I still get an accurate html report. Is there anything different I need to do when running it this way?","url":"https://ray.run/discord-forum/threads/600-coverage-for-javascript-in-an-aspnet-core-dotnet-app#message-2629"},{"@type":"Comment","author":{"@type":"Person","name":"cenfun"},"datePublished":"2023-06-15T06:56:25.331Z","text":"when you using `addCoverageReport` the options will be moved to config file `coverage` option:\nhttps://github.com/cenfun/monocart-reporter#global-coverage-report","url":"https://ray.run/discord-forum/threads/600-coverage-for-javascript-in-an-aspnet-core-dotnet-app#message-2627"},{"@type":"Comment","author":{"@type":"Person","name":"myliu"},"datePublished":"2023-06-26T14:30:26.295Z","text":"@cenfun \n\nI did get the global report working. However, the sourchPath replace isn't working. I did a console log and saw that the new path looks right but the lcov file isn't changed","url":"https://ray.run/discord-forum/threads/600-coverage-for-javascript-in-an-aspnet-core-dotnet-app#message-113832"},{"@type":"Comment","author":{"@type":"Person","name":"myliu"},"datePublished":"2023-06-26T15:56:52.908Z","text":"Also as additional information \n\nwhen javascript has something like ``````\n\nthe asp-append messes up the reporting structure. Which makes sense considering (its tagging a version onto the file)\n\nBut would be nice if that were excluded somehow","url":"https://ray.run/discord-forum/threads/600-coverage-for-javascript-in-an-aspnet-core-dotnet-app#message-113831"},{"@type":"Comment","author":{"@type":"Person","name":"myliu"},"datePublished":"2023-06-26T15:57:22.880Z","text":"Especially for SonarQube as the file path will be wrong in the lcov","url":"https://ray.run/discord-forum/threads/600-coverage-for-javascript-in-an-aspnet-core-dotnet-app#message-113829"},{"@type":"Comment","author":{"@type":"Person","name":"cenfun"},"datePublished":"2023-06-27T10:31:23.178Z","text":"Please try the new version
[email protected], the `sourcePath` should works for `lcov` see following example\n```\ncoverage: {\n\n sourcePath: (sp) => {\n return `pre-dir/${sp}`;\n },\n\n lcov: true\n\n },\n```\nand we will see the new path with `pre-dir` in the lcov.info \n```\nTN:\nSF:pre-dir\\coverage-v8\\packages\\coverage\\src\\index.js\nFN:1,i\n```\nif you have any questions please submit it to here https://github.com/cenfun/monocart-reporter/issues\nSorry, I don't check Discord often","url":"https://ray.run/discord-forum/threads/600-coverage-for-javascript-in-an-aspnet-core-dotnet-app#message-129285"},{"@type":"Comment","author":{"@type":"Person","name":"myliu"},"datePublished":"2023-06-27T22:32:33.740Z","text":"No problem at all, Cen. I gave it a shot and submitted my issue to the github. As always thanks for the help 🙂","url":"https://ray.run/discord-forum/threads/600-coverage-for-javascript-in-an-aspnet-core-dotnet-app#message-137126"}],"dateModified":"2023-06-27T22:32:33.740Z","datePublished":"2023-06-09T23:36:09.837Z","discussionUrl":"https://ray.run/discord-forum/threads/1116873403241091093-coverage-for-javascript-in-an-aspnet-core-dotnet-app","headline":"coverage for javascript in an asp.net core dotnet app","url":"https://ray.run/discord-forum/"}
coverage for javascript in an asp.net core dotnet app
Hi all! I'm a newer developer so bear with me 🙂 But I've been struggling for a couple weeks trying to get this setup properly.
My goal is to get an LCOV coverage file for my JS test methods hit during my Playwright test. It appears as though Playwright sees the JavaScript hit (When I do a console log of Playwrights JS Coverage ) but while attempting to use 'v8-to-istanbul' I get nothing.
I've also managed to see coverage for my JS files using Monocart-reporter. But again with that the ' window.coverage ' appears to be empty.
I'm not sure what to check/test to see where things are going wrong and would really appreciate some help if possible.
This thread is trying to answer question "How can I get an LCOV coverage file for my JavaScript test methods hit during my Playwright test in an ASP.NET Core dotnet app?"
41 replies
Thanks for the quick reply, Cen!!
I apologize for being overly generic with my writing..
I do have the proper syntax for the window.coverage line inside of my test.spec.js file like :
const coverageData = await page.evaluate(() => window.__coverage__ );
And I have a babelconfig.babelrc file that looks like
{
"presets": ["@babel/preset-env"],
"plugins": [istanbul"]
}
Does this appear correct so far?
yes, looks correct. can you create a demo repo of the issue so I can debug it locally?
Sure 🙂 I'll create a new repo and see if it fails and if so hand that over. The project I'm currently trying to get it to work with is work related and I cannot provide that.
I do appreciate you letting me know that I've done the initial setup properly. I will setup the new repo soon and test and let you know how that goes.
Hi Cen!
I believe I've recreated everything that needed to be in this test project I just made. In this project I'm testing @playwright/test and v8-to-istanbul to get coverage as shown in the playwright coverage section. And I'm instrumenting with babel-plugin-istanbul
I see the site.js file, but no coverage. Please let me know what I might be doing wrong. Very much appreciate your assistance!
https://github.com/Rycorlin/WebApplication3
EDIT: I understand you're here for monocart so I've updated my test to include the monocart report with lcov instead of using the v8-to-istanbul.
I'm getting
"[MCR] invalid coverage input"
or
"Cannot read properties of undefined (reading 'summary')"
(when attempting to console.log(report.summary) )
which I assume is because the its null? Either way I feel as though I'm missing something
@myliu your repo link shows 404 error. it's private or wrong url?
@cenfun: You're absolutely correct! My apologies I just fixed it
You're absolutely correct! My apologies I just fixed it
and did you try V8 format coverage report?
await Promise.all([
page.coverage.startJSCoverage(),
page.coverage.startCSSCoverage()
]);
await page.goto(pageUrl);
const [jsCoverage, cssCoverage] = await Promise.all([
page.coverage.stopJSCoverage(),
page.coverage.stopCSSCoverage()
]);
const coverageList = [... jsCoverage, ... cssCoverage];
const report = await attachCoverageReport(coverageList, test.info(), {
// or convent to istanbul with following option
// toIstanbul: true
});
console.log(report.summary);
@cenfun: When doing this I do get coverage shown, just no coverage when attempting to get an lcov file generated
When doing this I do get coverage shown, just no coverage when attempting to get an lcov file generated
I cann't start up your repo, seems some knowledge of c# is required i don't know this
you said no coverage means coverage is 0?
I found the js file wwwroot/js/site.js so which page will load this js file?
@cenfun: Yes that is correct
@cenfun: site.js will get loaded by _Layout.cshtml
``` <script src="~/js/site.js" asp-append-version="true"></script> ```
site.js will get loaded by _Layout.cshtml
<script src="~/js/site.js" asp-append-version="true"></script>
Which happens when the first page gets loaded (Index) because _Layout is shared for all pages
You were able to get an lcov file with js coverage info with this?
it should be yes. here is icov.info content:
TN:
SF:localhost-8090\js\site.js
FN:7,addNumbers
FN:11,subtractNumbers
FN:15,multiplyNumbers
FN:19,divideNumbers
FNF:4
FNH:4
FNDA:1,addNumbers
FNDA:1,subtractNumbers
FNDA:1,multiplyNumbers
FNDA:2,divideNumbers
DA:1,1
DA:2,1
DA:3,1
DA:4,1
DA:5,1
DA:6,1
DA:7,1
DA:8,1
DA:9,1
DA:10,1
DA:11,1
DA:12,1
DA:13,1
DA:14,1
DA:15,1
DA:16,1
DA:17,1
DA:18,1
DA:19,2
DA:20,2
DA:21,1
DA:22,1
DA:23,1
DA:24,2
DA:25,1
DA:26,1
DA:27,1
DA:28,1
DA:29,1
DA:30,1
DA:31,1
DA:32,1
LF:32
LH:32
BRDA:1,0,0,1
BRDA:7,1,0,1
BRDA:11,2,0,1
BRDA:15,3,0,1
BRDA:19,4,0,2
BRDA:20,5,0,1
BRF:6
BRH:6
end_of_record
That does look right 🤔
I'm attempting to test right now. Did you use npm test as the script?
Now I'm really confused.. I pulled your changes and I'm still seeing no coverage :\
this logs should be the nyc logs, there is no need to use nyc if using nonocart-reporter
If you want nyc works you have to follow nyc rules, I don't know much about this
No, you're abolsutely right. This is what I'm seeing inside of the test-results/coverage folder for the lcov file. And THIS looks right. I'm fairly sure I had checked this file before too in my work project, but I'm going to open up my laptop and check again right now!! Thank you!! Hoping for the best 🙂 I'll keep you updated
Cenfun!!! Thank you so much. I think I got lost in all my various efforts that in the end I must have been over looking where the this proper lcov was being put.
Though I'm still surprised no other method worked. But after two weeks I'm just happy that THIS method works with monocart!
I'll be able to confirm on Monday when I push this lcov to Sonar for validation.. but I'm pretty sure I'm reading it right as far a coverage goes.
Either way thank you so much! You've made sure that my last two weeks of work was not wasted 🥳
Thanks for that info Cen 🙂 I'll start testing it Monday and if I run into any issue with the Sonar Coverage I'll double check with you that I set it up properly if you dont mind
Hello again, Cent!
The lcov file generated provides absolute path (which includes the localhost path)
Example: SF:localhost-44351\js\testfile.js
Is there a way to get relative file path
For example when I get my karma/jasmine coverage it looks like
SF: wwwroot\js\testfile.js
yes it should be a issue. I will think about how to fix it.
try new version [email protected], using option sourcePath to replace the path with your wanted:
const report = await attachCoverageReport(coverageData, test.info(), {
lcov: true,
sourcePath: (sourcePath, fileSources) => {
var newPath = sourcePath.replace(/\\/g, '/');
return newPath;
}
});
Wow! That was fast! Thank you. I will test it out. Was currently just using a script in build pipeline to replace the location 😅
I do have one more question if you don't mind. Is there a way for me to define the coverage folder name for the lcov file?
Right now it goes to coverage-'random letters and numbers'
Which can change and I need folder name to remain the same
you should using addCoverageReport NOT attachCoverageReport, attach report is works for single test, so there is a test-id in the dir name. add report is works for global coverage report, the dir name is coverage
I understand. Thank you. When I attempted to use addCoverageReport instead no LCOV file was generated. I still get an accurate html report. Is there anything different I need to do when running it this way?
@cenfun
I did get the global report working. However, the sourchPath replace isn't working. I did a console log and saw that the new path looks right but the lcov file isn't changed
Also as additional information
when javascript has something like <script src="~/js/site.js" asp-append-version="true"></script>
the asp-append messes up the reporting structure. Which makes sense considering (its tagging a version onto the file)
But would be nice if that were excluded somehow
Especially for SonarQube as the file path will be wrong in the lcov
Please try the new version [email protected], the sourcePath should works for lcov see following example
coverage: {
sourcePath: (sp) => {
return `pre-dir/${sp}`;
},
lcov: true
},
and we will see the new path with pre-dir in the lcov.info
TN:
SF:pre-dir\coverage-v8\packages\coverage\src\index.js
FN:1,i
if you have any questions please submit it to here https://github.com/cenfun/monocart-reporter/issues
Sorry, I don't check Discord often
@cenfun: No problem at all, Cen. I gave it a shot and submitted my issue to the github. As always thanks for the help 🙂
No problem at all, Cen. I gave it a shot and submitted my issue to the github. As always thanks for the help 🙂
