Merge pull request #18 from hammzj/dev/use-in-js

Allow JS to use this package

.github/workflows/lint.yml

@@ -21,7 +21,7 @@ jobs:
       - name: Build
         run: |
           yarn install
-          yarn run dev:tsc
+          yarn run dev:build
 
   lint:
     name: Run eslint

.github/workflows/publish.yml

@@ -15,6 +15,7 @@ jobs:
           registry-url: 'https://registry.npmjs.org'
           scope: '@hammzj'
       - run: yarn
+      - run: yarn dev:build
       - run: yarn publish
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_JS_REGISTRY_AUTH_TOKEN }}
@@ -30,6 +31,7 @@ jobs:
           registry-url: 'https://npm.pkg.github.com'
           scope: '@hammzj'
       - run: yarn
+      - run: yarn dev:build
       - run: yarn publish
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hammzj/cypress-page-object",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "description": "A set of template classes and guides to help with developing component and page objects in Cypress.",
   "author": "Zachary Hamm <[email protected]>",
   "license": "MIT",
@@ -19,15 +19,15 @@
     "test",
     "test automation"
   ],
-  "main": "index.ts",
+  "main": "build/dist/src/index.js",
+  "types": "build/dist/src/index.d.ts",
   "files": [
-    "src/",
-    "index.ts",
+    "build/dist/src",
     "LICENSE",
     "README.md"
   ],
   "scripts": {
-    "dev:tsc": "tsc",
+    "dev:build": "tsc",
     "dev:lint": "eslint . --ext .js,.ts",
     "dev:prettier": "prettier --write \"**/*.{ts,tsx,js,jsx}\" \"docs/**/*.md\" \"*.md\"",
     "dev:postinstall": "husky install",

src/page.object.ts

@@ -21,7 +21,7 @@ class InsufficientPathVariablesError extends Error {
  * object, or both.
  */
 export default class PageObject extends ElementCollection {
-    static readonly #PATH_REPLACEMENT_REGEX = /(?<pathVariable>:\w+)/g;
+    private static readonly PATH_REPLACEMENT_REGEX = /(?<pathVariable>:\w+)/g;
     protected metadata: IPageMetadata;
 
     /**
@@ -45,18 +45,18 @@ export default class PageObject extends ElementCollection {
      * @example <summary>Replacing path variables with inputs</summary>
      * //baseUrl = "http://localhost:3000"
      * //this.metadata.path = "/user/:userId/post/:postId"
-     * this.#customPathUrl("1234", "post-9876") => "http://localhost:3000/user/1234/post/post-9876"
+     * this.customPathUrl("1234", "post-9876") => "http://localhost:3000/user/1234/post/post-9876"
      * @example <summary>A path without path variables/summary>
      * //baseUrl = "http://localhost:3000"
      * //this.metadata.path = "/settings/privacy"
-     * this.#customPathUrl("1234") => "http://localhost:3000/settings/privacy" //Works, but will log an error to the console
+     * this.customPathUrl("1234") => "http://localhost:3000/settings/privacy" //Works, but will log an error to the console
      * @private
      */
-    #customPathUrl(...pathInputs: string[]) {
-        const matches = this.metadata.path.match(PageObject.#PATH_REPLACEMENT_REGEX);
+    customPathUrl(...pathInputs: string[]) {
+        const matches = this.metadata.path.match(PageObject.PATH_REPLACEMENT_REGEX);
         if (matches == null) {
             //console.error("No path variables exist found for URL path: " + this.metadata.path);
-            return this.#urlObject().toString();
+            return this.urlObject().toString();
         }
         //Deep copy the original path
         let replacedPath = this.metadata.path.repeat(1);
@@ -68,10 +68,10 @@ export default class PageObject extends ElementCollection {
             replacedPath = replacedPath.replace(pathVar, sub);
         }
         //console.debug("replacedPath", replacedPath);
-        return this.#urlObject(replacedPath).toString();
+        return this.urlObject(replacedPath).toString();
     }
 
-    #urlObject(path = this.metadata.path) {
+    private urlObject(path = this.metadata.path) {
         return new URL(path, this.metadata.baseUrl);
     }
 
@@ -81,7 +81,7 @@ export default class PageObject extends ElementCollection {
      * @return pageURL {string}
      */
     url(...pathInputs: string[]): string {
-        return pathInputs ? this.#customPathUrl(...pathInputs) : this.#urlObject().toString();
+        return pathInputs ? this.customPathUrl(...pathInputs) : this.urlObject().toString();
     }
 
     visit(pathInputs: string[], opts?: Partial<Cypress.VisitOptions>): void {

tests/cypress/e2e/examples.cy.ts

@@ -1,5 +1,12 @@
-import { PageObject, ComponentObject, IPageMetadata } from "../../../index";
-import { ComponentObjectFunction, Elements, NestedComponents } from "../../../src";
+import {
+    ElementCollection,
+    ComponentObject,
+    PageObject,
+    IPageMetadata,
+    ComponentObjectFunction,
+    Elements,
+    NestedComponents,
+} from "../../../src";
 
 describe("Element collections", function () {
     beforeEach(function () {
@@ -102,6 +109,10 @@ describe("Element collections", function () {
     });
 
     describe("Component objects", function () {
+        it("is an instance of an ElementCollection", function () {
+            expect(PageObject.prototype instanceof ElementCollection).to.eq(true);
+        });
+
         specify("component objects are located using a base container function", function () {
             class ProPricingCardObject extends ComponentObject {
                 public elements: Elements;
@@ -744,6 +755,10 @@ describe("Element collections", function () {
 
         const examplePageObject = new ExamplePageObject();
 
+        it("is an instance of an ElementCollection", function () {
+            expect(PageObject.prototype instanceof ElementCollection).to.eq(true);
+        });
+
         specify("Page objects can have elements", function () {
             examplePageObject.elements.contentTitle().should("have.text", "Pricing");
             examplePageObject.elements

tsconfig.json

@@ -1,19 +1,13 @@
 {
   "compilerOptions": {
-    "module": "commonjs",
-    "moduleResolution": "node",
-    "target": "es6",
-    "lib": [
-      "es6",
-      "dom"
-    ],
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "esModuleInterop": false,
+    "target": "ES2016",
+    "allowJs": false,
     "declaration": true,
-    "types": [
-      "cypress",
-      "node"
-    ],
+    "declarationMap": true,
     "sourceMap": false,
-    "allowJs": true,
     "jsx": "react",
     "strict": false,
     "rootDir": ".",
@@ -22,12 +16,20 @@
     "noImplicitThis": true,
     "noImplicitAny": false,
     "strictNullChecks": true,
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": false,
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "types": [
+      "cypress",
+      "node"
+    ]
   },
   "include": [
-    "src/**/*"
+    "src/**/*",
+    "tests/**/*"
   ],
-
   "types": [
     "typePatches"
   ]