Code Coverage report doesn't reflect reality coverage of hits and misses - highlighting random lines

Abierto
  • ¿Algo no está bien?
#587 16 comentarios 5 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
25/100
Tipo de issue
Error
Claridad
Necesita aclaración
Estado de actividad
Estancado
Stack tecnológico
babel, cypress, javascript, node.js, typescript
Área
frontend, testing-qa

Línea de trabajo

Clona el repositorio de Nomad-Lang enlazado, cambia a task/88/update-cypress, instala las dependencias y ejecuta client/npm run test:cy:ci. Inspecciona babel.config.js, la configuración de NYC en package.json, .nyc_output/out.json y client/coverage/lcov-report/index.html para comparar las ubicaciones del código fuente de Vue con los aciertos y errores reportados. Se considera terminado cuando el informe resalta correctamente los archivos de Vue y existe una prueba reproducible o una explicación del comportamiento corregido.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

bug

Logs and screenshots

  • screenshot of line coverage report, hit and miss lines don't make sense on the .vue files. Not sure what exactly is being missed or hit by the test running against the app. Just seems kinda randomly placed everywhere.
Screen Shot 2022-08-28 at 1 11 19 PM

I'm not sure if I understand this debug step here below. I don't know where the logs are output or if this variable is set before starting the client app or before running the cypress tests. my npm run dev command may be slightly different than what is expected in the README.

Please provide debug logs by running Cypress from the terminal with DEBUG=code-coverage environment variable set, see the Debugging section of the README file.

Versions

  • What is this plugin's version? - latest - v3.10.0
  • If the plugin worked before in version X, but stopped after upgrading to version Y, please try the released versions between X and Y to see where the breaking change was. - n/a
  • What is Cypress version? - latest - v10.6.0
  • What is your operating system? MacOS Catalina 10.15.7
  • What is the shell? - GNU bash, version 3.2.57(1)-release (x86_64-apple-darwin19)
  • What is the Node version? - v16.14.2
  • What is the NPM version? - v8.5.0
  • How do you instrument your application? Cypress does not instrument web application code, so you need to do it yourself.
  • I instrument the vue app with my babel.config.js file displayed below
const plugins = [];
if (process.env.NODE_ENV === "development") {
  plugins.push([
    "babel-plugin-istanbul",
    {
      extension: [".ts", ".js", ".vue"]
    }
  ]);
}
module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins
};
  • When running tests, if you open the web application in regular browser, and open DevTools, do you see window.__coverage__ object? Can you paste a screenshot? - yes
  • screenshot of coverage object in application window in dev mode
Screen Shot 2022-08-28 at 1 23 12 PM
  • Is there .nyc_output folder? Is there .nyc_output/out.json file. Is it empty? Can you paste at least part of it so we can see the keys and file paths? - folder and file is there, not empty
{
  "<REDACTED>/Nomad-Lang/client/src/main.ts": {
    "path": "<REDACTED>/Nomad-Lang/client/src/main.ts",
    "statementMap": {
      "0": {
        "start": {
          "line": 2,
          "column": 22
        },
        "end": {
          "line": 4,
          "column": 1
        }
      },
      "1": {
        "start": {
          "line": 3,
          "column": 4
        },
        "end": {
          "line": 3,
          "column": 62
        }
      },
      "2": {
        "start": {
          "line": 5,
          "column": 0
        },
        "end": {
          "line": 5,
          "column": 62
        }
      },
  • Do you have any custom NYC settings in package.json (nyc object) or in other NYC config files - yes
"nyc": {
    "all": true,
    "include": [
      "src/components/*.vue",
      "src/router/index.ts",
      "src/store/*.ts",
      "src/utils/*.ts",
      "src/views/*.vue",
      "src/App.vue",
      "src/main.ts"
    ]
  },
  • Do you run Cypress tests in a Docker container? - no

Describe the bug
A clear and concise description of what the bug is.

  • It seems for some reason the hit and miss highlighting is not accurate at all in the .vue files, I cant really tell what I need to cover what's being missed in the .vue files. It just seems like it highlights random places and shows IF ELSE branching in random places where there is no IF ELSE branch in the line coverage report files.

Link to the repo
Bugs with a reproducible example, like an open source repo showing the bug, are the most likely to be resolved.

  • repo
  • steps to reproduce
git clone [email protected]:Dj-Viking/Nomad-Lang.git && \
cd Nomad-Lang && \
git checkout task/88/update-cypress && \
npm install && \
cd client && \
npm run test:cy:ci
  • when tests are finished feel free to killall node as the concurrent shell command running the client dev server and the headless cypress tests, will keep a background shell running of the client dev server even with a SIGTERM in the current foreground shell.
  • open coverage report in browser from client/coverage/lcov-report/index.html (right-click and run in live server or just open the index.html file in your browser of choice)
  • look at any .vue file that was covered by the cypress tests

Thanks for your time,

Anders a.k.a. DJViking

Lenguaje dominante
TypeScript
Estrellas
440
Forks
114
Merge medio
42 min
PR fusionados (30 d)
19

Preparar el entorno

  • Sin Dockerfile ni archivo de Docker Compose
  • Tiene una plantilla de pull request
  • Sin guía de contribución

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de cypress-io/code-coverage

Todos los issues de cypress-io/code-coverage

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.