Merge pull request #20 from hammzj/dev/update-base-types

Dev/update base types

.eslintrc.json

@@ -29,7 +29,6 @@
   },
   "ignorePatterns": [
     "build",
-    "cypress",
     "dist",
     "node_modules",
     "**/*.js",

.gitignore

@@ -102,7 +102,6 @@ dist
 
 # vuepress v2.x temp and cache directory
 .temp
-.cache
 
 # Docusaurus cache and generated files
 .docusaurus
@@ -128,3 +127,6 @@ dist
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
+
+#Cypress stuff
+cypress/screenshots

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hammzj/cypress-page-object",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "A set of template classes and guides to help with developing component and page objects in Cypress.",
   "author": "Zachary Hamm <zjhamm304+github@gmail.com>",
   "license": "MIT",

src/component.object.ts

@@ -1,12 +1,15 @@
-import { BaseContainerFunction } from "./types";
+import { BaseContainerFunction, Elements, NestedComponents } from "./types";
 import ElementCollection from "./element.collection";
 
 /**
  * A component object is useful when building websites using components.
  * A component can represent a collection of individual element selectors, or even contain
- * other nested component objects themselves.
+ * other nested component objects themselves. It must provide a base container function.
  */
 export default class ComponentObject extends ElementCollection {
+    protected declare elements: Elements;
+    protected declare components: NestedComponents;
+
     constructor(baseContainerFn?: BaseContainerFunction) {
         super(baseContainerFn);
     }

src/element.collection.ts

@@ -1,4 +1,5 @@
 import { BaseContainerFunction, ComponentObjectFunction, Elements, NestedComponents, IMetadata } from "./types";
+import ComponentObject from "./component.object";
 
 /**
  * Base class for describing page objects and components, which have a collection of element selectors
@@ -184,15 +185,13 @@ export default abstract class ElementCollection {
      *
      * @example <summary>Nesting an element without using this function</summary>
      * //RadioSelectionFormObject
-     * RadioButtonObject(fn, buttonText) {
-     *   this.elements.form().within(() => fn(new RadioButtonObject(buttonText)));
-     * }
+     * RadioButtonObject: (fn, buttonText) => this.elements.form().within(() => fn(new RadioButtonObject(buttonText)));
+     *
      */
-    //@ts-ignore
-    performWithin(
+    performWithin<TComponentObject extends ComponentObject>(
         baseElement: Cypress.Chainable<Cypress.JQueryWithSelector>,
-        nestedComponent: ElementCollection,
-        fn: ComponentObjectFunction
+        nestedComponent: TComponentObject,
+        fn: ComponentObjectFunction<TComponentObject>
     ): void {
         baseElement.within(() => fn(nestedComponent));
     }

src/types/element.collection.ts

@@ -1,18 +1,22 @@
-import ElementCollection from "../element.collection";
+import ComponentObject from "../component.object";
 
-export type ElementSelectorFunction = (...params: any) => Cypress.Chainable<Cypress.JQueryWithSelector>;
-
-export type BaseContainerFunction = ElementSelectorFunction;
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export type ElementSelectorFunction<TElement extends Node = HTMLElement> = (
+    ...params: any
+) => Cypress.Chainable<JQuery<TElement>>;
+export type BaseContainerFunction<TElement extends Node = HTMLElement> = ElementSelectorFunction<TElement>;
 
 export type Elements = {
-    [key: string]: ElementSelectorFunction;
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+    [key: string]: ElementSelectorFunction<any>;
 };
 
-export type ComponentObjectFunction = (instance: ElementCollection | any) => void;
+export type ComponentObjectFunction<TComponentObject extends ComponentObject> = (instance: TComponentObject) => void;
 
-export type NestedComponents = {
-    [key: string]: (fn: ComponentObjectFunction, ...params: any) => void;
-};
+export interface NestedComponents {
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+    [key: string]: (fn: ComponentObjectFunction<any>, ...params: any) => void;
+}
 
 export interface IMetadata {
     [key: string]: any;