Skip to content
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

Issues with first-class component templates? #392

Closed
spuxx1701 opened this issue Oct 9, 2023 · 12 comments
Closed

Issues with first-class component templates? #392

spuxx1701 opened this issue Oct 9, 2023 · 12 comments

Comments

@spuxx1701
Copy link

Hello there! It appears I'm having issues with collecting coverage from first-class component templates (<template>).

When running ember test with COVERAGE=true, Im getting the following error on the first .gts file:

.../components/misc/loading-indicator/loading-indicator.component.ts: Scope functions can only consist of a single return statement which returns an object expression containing references to in-scope valuesError: .../components/misc/loading-indicator/loading-indicator.component.ts: Scope functions can only consist of a single return statement which returns an object expression containing references to in-scope values

Is there a known incompatibility between ember-cli-code-coverage and gjs/gts files? Is there a workaround I'm not aware of?

@veelci
Copy link

veelci commented Oct 18, 2023

@spuxx1701 I have 2 non-typescript projects on ember 4.12 and I'm running into this issue as well in one of the projects.
I've aligned the dependencies and configuration of both projects to be the same, so I'm not entirely sure what the issue is. The only thing that is different between the working and non-working project is that I migrated all of the files to .gjs at once in the working project.

Edit: I went back to the working project and added a few non-.gjs components and the tests still ran with coverage enabled.

@vstefanovic97
Copy link
Contributor

Hi, I've been trying to get .gjs/.gts coverage working for a few days, I've done some digging and I think I've Identified the steps to get this working.

So there are a couple of things needed.

  1. Add .gjs/.gts extension to babel-plugin-istanbul 's extension options (this is just so that it recognizes and instruments these files).
  2. Add source map support for content-tag
    Basically the code is first getting transpiled by content-tag from gjs/gts to ts/js and after that it is running through babel where the instrumentation happens, BUT when we transpile it with content-tag right now it doesn't generate source maps which are actually needed to map the transpiled code back to the original gjs/gts code, w/o this coverage lines will be off also it will report on some function that don't exist in the source code.
    Created issues for this:
    [Feature request] source map generation embroider-build/content-tag#61
  3. Remap the coverage data generated during test runs to the original code using istanbul-lib-source-maps and providing it the inputSourceMap that we get from step 2.
    This last step basically means we need to add some additional functionality to ember-cli-code-coverage, after that in theory it should work (I will work on this and try to make a PR, also will raise a separate issue for this part)

@veelci
Copy link

veelci commented Jan 24, 2024

@vstefanovic97 I have .gjs code coverage working in one of my projects. I just have no idea why it works in one project and not the other two projects. All of the projects are on Ember 4.12.3.

@veelci
Copy link

veelci commented Jan 24, 2024

@spuxx1701 I figured out why this occurs. Both v1 and v2 of babel-plugin-ember-template-compilation were present in my package-lock.json (v1 is a dependency of @embroider/core). Adding an override in my package.json to force v2 has fixed the error.

@vstefanovic97
Copy link
Contributor

vstefanovic97 commented Jan 24, 2024

@veelci just out of curiosity what version of ember-template-imports are you using and are the reports acurate (lines in the correct places etc.) ?
Also I assume it's a classic app build right?

Can you maybe provide an example of a .gjs component and it's report?

@veelci
Copy link

veelci commented Jan 25, 2024

@vstefanovic97 I'm using ember-template-imports 3.4.2 w/ a classic build. After closer inspection, there reports are missing for .gjs components. However, running ember test with COVERAGE=true no longer fails.

@vstefanovic97
Copy link
Contributor

vstefanovic97 commented Jan 25, 2024

@veelci yeah it was weird for me when you said .gjs coverage was working because of all the thing I listed that need to be done for the coverage to work properly.
But I'm working on a PR to get the coverage working hope to have it around next week

@vstefanovic97
Copy link
Contributor

I made a PR #405 which should make it work

@vstefanovic97
Copy link
Contributor

#405 has been merged and release in 2.1.0 @veelci, @spuxx1701 mind trying it out and see if it works for you guys?

@veelci
Copy link

veelci commented Feb 22, 2024

I haven't tried 2.1.0, but 2.1.1 works for me for both classic and embroider builds.

@vstefanovic97
Copy link
Contributor

That is great to hear @veelci.
@spuxx1701 can you try and then close the issue if all good?

@spuxx1701
Copy link
Author

Tested again with 2.1.1 and it appears to work. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants