Merge branch 'main' of https://github.com/ShellyDCMS/cypress-test-utils

ShellyDCMS · Aug 4, 2023 · 01c053a · 01c053a
2 parents 4a5bd9e + 03051a0
commit 01c053a
Show file tree

Hide file tree

Showing 11 changed files with 335 additions and 39 deletions.
diff --git a/.github/workflows/npm-build.yml b/.github/workflows/npm-build.yml
@@ -7,6 +7,10 @@ on:
   pull_request:
   workflow_dispatch:
 
+permissions:
+  checks: write
+  pull-requests: write
+
 jobs:
   build:
     runs-on: ubuntu-latest
@@ -18,6 +22,14 @@ jobs:
           registry-url: https://registry.npmjs.org/
       - run: npx yarn install --frozen-lockfile
       - run: npm run build
+      - run: npm run cy:run
       - run: npm run generate-md-docs
-
+      - name: Tests Report
+        uses: phoenix-actions/test-reporting@v8
+        id: test-report 
+        if: always() 
+        with:
+          name: Cypress Tests
+          path: ${{ github.workspace }}/cypress/results/json/mochawesome.json
+          reporter: mochawesome-json
 
diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml
@@ -20,6 +20,7 @@ jobs:
           registry-url: https://registry.npmjs.org/
       - run: npx yarn install --frozen-lockfile
       - run: npm run build
+      - run: npm run cy:run
       - run: npm run generate-md-docs
       - name: Generate html docs
         run: npm run generate-docs
@@ -30,8 +31,17 @@ jobs:
           dir: docs
           branch: gh-pages
           token: ${{ secrets.ACCESS_TOKEN }}
+      - name: Tests Report
+        uses: phoenix-actions/test-reporting@v8
+        id: test-report 
+        if: always() 
+        with:
+          name: Cypress Tests
+          path: ${{ github.workspace }}/cypress/results/json/mochawesome.json
+          reporter: mochawesome-json
 
       - run: npm run publish-package
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+
 
diff --git a/.gitignore b/.gitignore
@@ -12,6 +12,7 @@
 /node/
 /cypress/videos
 /cypress/screenshots
+/cypress/results
 /instrumented
 .nyc_output
 .external-resources

diff --git a/README.md b/README.md
@@ -4,6 +4,10 @@ Making TDD fun in the modular UI area.
 
 CypressHelper makes it saner to write UI testing. It enables creating component drivers that will work on all testing levels (component, integration, e2e).
 
+Cypress Helpers can help you develop tests faster
+CypressHelper is designed to be used in any test level, and holds common methods used in Cypress tests
+CypressComponent helpers are designed to be used in component tests and are NOT framework agnostic.
+
 ## Component Drivers
 Testing UI is hard. There are many reasons for that, but a big one relies in the fact that unlike functions or services, where the API is clearly defined, 
 when dealing with graphical user interfaces, it's up for the developer to transform it into an "API" for testing purposes.

diff --git a/cypress.config.ts b/cypress.config.ts
@@ -0,0 +1,39 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  retries: {
+    // Configure retry attempts for `cypress run`
+    // Default is 0
+    runMode: 2,
+    // Configure retry attempts for `cypress open`
+    // Default is 0
+    openMode: 0
+  },
+  reporter: "mochawesome",
+  reporterOptions: 
+   {
+      "reportDir": "cypress/results/json",
+      "overwrite": false,
+      "html": false,
+      "json": true,
+      suiteTitleSeparatedBy: " > ",
+      testCaseSwitchClassnameAndName: false,
+      rootSuiteTitle: "Angular Tests",
+      toConsole: true,
+  },
+  e2e: {
+    setupNodeEvents(on, config) {
+      return config;
+    },
+    supportFile:false,
+    baseUrl: "https://shellydcms.github.io/cypress-test-utils/modules.html",
+    viewportHeight: 1000,
+    viewportWidth: 1600,
+    specPattern: "src/**/*.cy.{js,jsx,ts,tsx}",
+    excludeSpecPattern: "cypress/**/*.driver.{js,jsx,ts,tsx}",
+    defaultCommandTimeout: 50000,
+    experimentalStudio: true
+  },
+
+
+});
diff --git a/index.html b/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<body>
+
+<h1>My First Heading</h1>
+<p>My first paragraph.</p>
+
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@shellygo/cypress-test-utils",
   "description": "Test Automation Utilities",
-  "version": "1.0.23",
+  "version": "1.0.24",
   "author": "Shelly Goldblit",
   "private": false,
   "license": "MIT",
@@ -21,6 +21,8 @@
   "scripts": {
     "build": "rm -rf dist/* && tsc && mv dist/out-tsc/src/lit dist/out-tsc/lit  && mv dist/out-tsc/src/angular dist/out-tsc/angular && mv dist/out-tsc/src/react dist/out-tsc/react",
     "package": "node --max-old-space-size=4400 && npm run build",
+    "cy:run": "npx cypress run",
+    "cy:open": "npx cypress open",
     "copy-readme": "cp README.md dist/out-tsc",
     "publish-package": "npm run copy-readme && cd dist/out-tsc && npm publish",
     "generate-md-docs": "npx typedoc  --includeVersion --plugin typedoc-plugin-markdown  --plugin typedoc-plugin-merge-modules --options typedoc.md.json",
@@ -30,7 +32,7 @@
     "@cypress/mount-utils": "^4.0.0",
     "@types/chai-subset": "^1.3.3",
     "chai-subset": "^1.6.0",
-    "cypress": "^12.5.1",
+    "cypress": "^12.17.3",
     "cypress-real-events": "^1.7.6",
     "cypress-wait-if-happens": "^1.3.3",
     "cypress-wait-until": "^1.7.2"
@@ -43,11 +45,13 @@
     "cross-var": "^1.1.0",
     "gh-pages": "^5.0.0",
     "lit": "^2.7.4",
+    "mochawesome": "^7.1.3",
     "react": "^18.2.0",
     "typedoc": "^0.24.8",
     "typedoc-plugin-markdown": "^3.15.3",
     "typedoc-plugin-merge-modules": "^5.0.1",
-    "typescript": "^4.6.4"
+    "typescript": "^4.6.4",
+    "yarn": "^1.22.19"
   },
   "compilerOptions": {
     "target": "es5",

diff --git a/src/cypress-helper-spec.cy.ts b/src/cypress-helper-spec.cy.ts
@@ -0,0 +1,11 @@
+import { CypressHelper } from "./cypress-helper";
+
+describe("cypress helper tests", () => {
+  const { beforeAndAfter, given, when, get } = new CypressHelper();
+  beforeAndAfter();
+
+  it("should intercept request and mock response", async () => {
+    given.interceptAndMockResponse({url: "**/shellygo/whatever", response: {shelly: "go"}})
+    expect(await(await fetch("https:/shellygo/whatever")).json()).to.include({shelly: "go"})
+  })
+})
diff --git a/src/cypress-helper.ts b/src/cypress-helper.ts
@@ -161,11 +161,22 @@ export class CypressHelper {
      * @example
      * ```ts
      * <button data-cy="move-right">Move</button>
+     * helper.when.realClick('move-right')
+     * ```
+     */
+    realClick: (selector: string, index: number = 0) =>
+      this.get.elementByTestId(selector, index).realClick(),
+    /**
+     * Click a DOM element.
+     *
+     * @example
+     * ```ts
+     * <button data-cy="move-right">Move</button>
      * helper.when.click('move-right')
      * ```
      */
     click: (selector: string, index: number = 0) =>
-      this.get.elementByTestId(selector, index).realClick(),
+    this.get.elementByTestId(selector, index).click(),
     /**
      * overrides native global functions related to time
      * allowing them to be controlled synchronously via helper.when.tick()
@@ -273,7 +284,7 @@ export class CypressHelper {
     /**
      * Scopes all subsequent cy commands to within this element
      * @example
-     * helper.when.within(() => expect(get.emcLogo()).to.exist, 'company-logo)
+     * helper.when.within(() => expect(get.emcLogo()).to.exist, 'company-logo')
      */
     within: (fn: () => void, selector: string, index: number = 0) =>
       this.get.elementByTestId(selector, index).within(fn)

diff --git a/tsconfig.json b/tsconfig.json
@@ -14,8 +14,7 @@
     "skipLibCheck": true,
     "skipDefaultLibCheck": false,
     "rootDir": ".",
-    "types": ["node"],
-    "typeRoots": ["node_modules/@types"],
+    "types": ["node", "cypress"],
     "lib": ["es2018", "dom"],
     "baseUrl": "./",
     "module": "ESNext",