Merge pull request #47 from Sett17/master

fix(ReporterUtils): filename extraction for component testing
BBE78 · Oct 10, 2023 · c2e3714 · c2e3714
2 parents adf248c + 6a5c929
commit c2e3714
Show file tree

Hide file tree

Showing 12 changed files with 186 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -40,6 +40,10 @@ Take a look at the Actions tests matrix results: tested with Node.js v\[~~12.x~~
 
 [![Cypress Compatibility](https://github.com/BBE78/cypress-sonarqube-reporter/actions/workflows/ci.yml/badge.svg)](https://github.com/BBE78/cypress-sonarqube-reporter/actions/workflows/ci.yml)
 
+### Compatibility with Cypress Component Testing
+
+With the integration of the recent changes in #47, the reporter now supports Cypress component testing. Users can leverage the functionalities of `cypress-sonarqube-reporter` for both end-to-end tests and component tests conducted through Cypress.
+
 ## Example
 
 The following Cypress/Mocha spec...

diff --git a/example/cypress.config.js b/example/cypress.config.js
@@ -15,4 +15,11 @@ module.exports = defineConfig({
     },
     baseUrl: 'http://localhost:3000/',
   },
+
+  component: {
+    devServer: {
+      framework: 'create-react-app',
+      bundler: 'webpack',
+    },
+  },
 });
diff --git a/example/cypress/support/component-index.html b/example/cypress/support/component-index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>
diff --git a/example/cypress/support/component.js b/example/cypress/support/component.js
@@ -0,0 +1,27 @@
+// ***********************************************************
+// This example support/component.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+// import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import { mount } from 'cypress/react'
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(<MyComponent />)
diff --git a/example/src/App.cy.js b/example/src/App.cy.js
@@ -0,0 +1,10 @@
+/// <reference types="cypress" />
+
+import React from 'react'
+import App from './App'
+
+describe('<App />', () => {
+  it('renders', () => {
+    cy.mount(<App />)
+  })
+})
diff --git a/src/ReporterUtils.js b/src/ReporterUtils.js
@@ -27,6 +27,7 @@ const throwError = (message) => {
 
 /**
  * Extract the spec file path from the suite.
+ * May ignore the options.useAbsoluteSpecPath if the requested is not available.
  * Raise an error if the spec could not be extracted.
  *
  * @param {object} suite the Mocha suite
@@ -36,13 +37,15 @@ const throwError = (message) => {
 const extractSpecFromSuite = (suite, options) => {
     const title = suite.title;
     const tag = '[@spec: ';
-    const index = title.indexOf(tag);
+    const index = title?.indexOf(tag);
     let spec;
     if (index > -1) {
         spec = JSON.parse(title.substring(index + tag.length, title.lastIndexOf(']')));
         spec = options.useAbsoluteSpecPath ? spec.absolute : spec.relative;
-    } else if (suite.invocationDetails) {
+    } else if (suite.invocationDetails?.absoluteFile || suite.invocationDetails?.relativeFile) {
         spec = options.useAbsoluteSpecPath ? suite.invocationDetails.absoluteFile : suite.invocationDetails.relativeFile;
+    } else if (suite.parent?.file) {
+        spec = suite.parent.file;
     } else {
         throwError(`could not find spec filename from title: ${title} or from 'suite.invocationDetails'`);
     }

diff --git a/test/cypress/component/MyComponent.spec.js b/test/cypress/component/MyComponent.spec.js
@@ -0,0 +1,45 @@
+const specTitle = require("../../../specTitle");
+
+describe(specTitle("The root suite"), () => {
+
+    it("Test case #1 (must pass)", () => {
+        expect(true).to.be.true;
+    });
+
+    describe("A sub suite", () => {
+
+        it("Test case #2 (must pass)", () => {
+            expect(true).to.be.true;
+        });
+
+        it("Test case #3 (must fail)", () => {
+            expect(true).to.be.false;
+        });
+
+    });
+
+    describe("Another sub suite", () => {
+
+        xit("Test case #4 (must be skipped)", () => {
+            expect(true).to.be.false;
+        });
+
+        it("Test case #5 (must raise an error)", () => {
+            undefined.toString();
+        });
+
+    });
+
+    describe("A suite with a failed before hook", () => {
+
+        before(() => {
+            undefined.toString();
+        });
+
+        it("Test case #6 (must be skipped because of failed before hook)", () => {
+            expect(true).to.be.true;
+        });
+
+    });
+
+});
diff --git a/test/cypress/support/component-index.html b/test/cypress/support/component-index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>
diff --git a/test/specs/Reporter.spec.js b/test/specs/Reporter.spec.js
@@ -312,4 +312,32 @@ describe('Testing reporter', () => {
 
     });
 
+    describe('component test', () => {
+
+        const conditionalTest = isCypressVersionAtLeast(11, 0) ? test : test.skip;
+        const testDir = path.resolve(testOuputDir, 'component');
+        const reportPath = path.resolve(testDir, 'MyComponent.spec.js.xml');
+
+        beforeAll(() => {
+            cleanOuputDir(testDir);
+        });
+
+        conditionalTest('running Cypress', () => {
+            const config = overwriteConfig(cypressDefaultConfig, {
+                testingType: 'component',
+                reporterOptions: {
+                    outputDir: testDir,
+                    overwrite: false,
+                    preserveSpecsDir: false
+                },
+            });
+            config.spec= '**/MyComponent.spec.js';
+
+            return cypress.run(config).then(() => {
+                verifyReport(reportPath, config, 'MyComponent.spec.js', true, true);
+            });
+        }, cypressRunTimeout);
+
+    });
+
 });
diff --git a/test/specs/ReporterUtils.spec.js b/test/specs/ReporterUtils.spec.js
@@ -104,6 +104,15 @@ describe('Testing ReporterUtils.js', () => {
             expect(result).toBe('/builds/group/project/test/Sample.spec.js');
         });
 
+        it('with file only in parent', () => {
+            const result = extractSpecFromSuite({
+                parent: {
+                    file: 'test/Sample.spec.js'
+                }
+            }, {});
+            expect(result).toBe('test/Sample.spec.js');
+        });
+
         it('with spec in title', () => {
             expect(() => {
                 extractSpecFromSuite({

diff --git a/test/specs/TestUtils.js b/test/specs/TestUtils.js
@@ -29,8 +29,8 @@ const verifyReportExists = (reportPath) => {
 };
 
 
-const verifyGeneratedReport = (reportPath, options, specFileName = 'Sample.spec.js', cypressVersionGreaterThan10 = false) => {
-    const titleSeparator = (options && options.titleSeparator) ? options.titleSeparator : ' - ';
+const verifyGeneratedReport = (reportPath, options, specFileName = 'Sample.spec.js', cypressVersionGreaterThan10 = false, isComponentTest = false) => {
+    const titleSeparator = options?.titleSeparator ?? ' - ';
     const useFullTitle = (options && options.useFullTitle === false) ? false : true;
     const xml = fse.readFileSync(reportPath, { encoding: 'utf8' });
     const json = parser.parse(xml, {
@@ -44,11 +44,14 @@ const verifyGeneratedReport = (reportPath, options, specFileName = 'Sample.spec.
     expect(json.testExecutions).toBeDefined();
     expect(json.testExecutions._version).toBe(1);
     expect(json.testExecutions.file).toBeDefined();
-    expect(json.testExecutions.file._path).toBe((options && options.useAbsoluteSpecPath)
-        ? resolve(`test/cypress/integration/${specFileName}`).replace(/\\/g, '/')   // force path separator to unix style for better
-        : cypressVersionGreaterThan10
-            ? `../cypress/integration/${specFileName}`
-            : `test/cypress/integration/${specFileName}`);
+    expect(json.testExecutions.file._path).toBe(
+        isComponentTest
+            ? `test/cypress/component/${specFileName}`
+            : (options?.useAbsoluteSpecPath
+                ? resolve(`test/cypress/integration/${specFileName}`).replace(/\\/g, '/')   // force path separator to unix style for better readability
+                : cypressVersionGreaterThan10
+                    ? `../cypress/integration/${specFileName}`
+                    : `test/cypress/integration/${specFileName}`));
     expect(json.testExecutions.file.testCase).toBeDefined();
     expect(json.testExecutions.file.testCase).toBeArray();
     expect(json.testExecutions.file.testCase).toBeArrayOfSize(6);
@@ -117,9 +120,9 @@ const verifyGeneratedReport = (reportPath, options, specFileName = 'Sample.spec.
 };
 
 
-const verifyReport = (reportPath, config, specFileName, cypressVersionGreaterThan10 = false) => {
+const verifyReport = (reportPath, config, specFileName, cypressVersionGreaterThan10 = false, isComponentTest = false) => {
     verifyReportExists(reportPath);
-    verifyGeneratedReport(reportPath, config ? config.reporterOptions : undefined, specFileName, cypressVersionGreaterThan10);
+    verifyGeneratedReport(reportPath, config ? config.reporterOptions : undefined, specFileName, cypressVersionGreaterThan10, isComponentTest);
 };
 
 

diff --git a/test/specs/cypress.config.js b/test/specs/cypress.config.js
@@ -11,5 +11,19 @@ module.exports = defineConfig({
         trashAssetsBeforeRuns: false,
         video: false,
         videosFolder: 'dist/cypress/videos'
-    }
+    },
+
+    component: {
+        devServer: {
+            framework: 'react',
+            bundler: 'webpack',
+            webpackConfig: {},
+        },
+        supportFile: false,
+        indexHtmlFile: './test/cypress/support/component-index.html',
+        specPattern: './test/cypress/component/**/*.spec.{js,jsx,ts,tsx}',
+        trashAssetsBeforeRuns: false,
+        video: false,
+        videosFolder: 'dist/cypress/videos'
+    },
 });