change ctor to get options

documents/README.md

@@ -52,6 +52,17 @@ In the [examples](https://github.com/ShellyDCMS/cypress-test-utils-examples/tree
 Each app contains a driver that uses helpers, component tests, integration tests and e2e tests.
 As you can see, all test levels use the *same* driver, meaning that if the feature's implementation changes, you'll need to change the driver alone, not the tests.
 
+## Framework Spesific Information
+### Using Shadow DOM
+When using <slot> elements with shadow dom, some things may not be where you expect them, fo example the text of this button is not directly inside the slot containing it.
+![image](https://github.com/ShellyDCMS/cypress-test-utils/assets/60476837/c14b0877-4c9a-4f37-ba18-0220b9192b0f)
+CypressHelper will look for the assignedNode to retrieve the text, given that the selector of the slot has a '-slot' suffix.
+You may change this behaviour by overriding the default values when creating CypressHelper.
+
+### Angular
+When mounting an angular component, autoSpyOutputs is set to true, meaning all event emitters are automatically spied on and may be accessed during a test using `helper.get.spy("<EventEmitterName>")`
+
+### 
 ## Usage
 This library provides an API to interact with UI elements - `CypressHelper` that combines the common features. 
 To add it to your repo use
@@ -65,3 +76,4 @@ or
 ## Developing
 1. Set up the repo -  `yarn`
 2. Build the project - `npm run build`
+3. Runnin tests - `npm run cy:run`

documents/classes/CypressAngularComponentHelper.md

@@ -1,4 +1,4 @@
-[@shellygo/cypress-test-utils - v1.0.34](../README.md) / [Modules](../modules.md) / CypressAngularComponentHelper
+[@shellygo/cypress-test-utils - v1.0.36](../README.md) / [Modules](../modules.md) / CypressAngularComponentHelper
 
 # Class: CypressAngularComponentHelper<T\>
 

documents/classes/CypressHelper.md

@@ -1,4 +1,4 @@
-[@shellygo/cypress-test-utils - v1.0.34](../README.md) / [Modules](../modules.md) / CypressHelper
+[@shellygo/cypress-test-utils - v1.0.36](../README.md) / [Modules](../modules.md) / CypressHelper
 
 # Class: CypressHelper
 
@@ -14,10 +14,9 @@ CypressHelper exposes the following public properties:
 
 ### Properties
 
-- [defaultDataAttribute](CypressHelper.md#defaultdataattribute)
-- [defaultShadowSlotSuffix](CypressHelper.md#defaultshadowslotsuffix)
 - [get](CypressHelper.md#get)
 - [given](CypressHelper.md#given)
+- [options](CypressHelper.md#options)
 - [when](CypressHelper.md#when)
 
 ### Methods
@@ -28,29 +27,16 @@ CypressHelper exposes the following public properties:
 
 ### constructor
 
-• **new CypressHelper**(`defaultDataAttribute?`, `defaultShadowSlotSuffix?`)
+• **new CypressHelper**(`options?`)
 
 #### Parameters
 
-| Name | Type | Default value |
-| :------ | :------ | :------ |
-| `defaultDataAttribute?` | `string` | `"data-cy"` |
-| `defaultShadowSlotSuffix?` | `string` | `"slot"` |
+| Name | Type |
+| :------ | :------ |
+| `options?` | `Properties`<`CypressHelperOptions`\> |
 
 ## Properties
 
-### defaultDataAttribute
-
-• `Private` `Readonly` **defaultDataAttribute**: `string` = `"data-cy"`
-
-___
-
-### defaultShadowSlotSuffix
-
-• `Private` `Readonly` **defaultShadowSlotSuffix**: `string` = `"slot"`
-
-___
-
 ### get
 
 • **get**: `Object`
@@ -362,6 +348,12 @@ Replace a function, record its usage and control its behavior.
 
 ___
 
+### options
+
+• `Readonly` **options**: `Properties`<`CypressHelperOptions`\>
+
+___
+
 ### when
 
 • **when**: `Object`

documents/classes/CypressLitComponentHelper.md

@@ -1,4 +1,4 @@
-[@shellygo/cypress-test-utils - v1.0.34](../README.md) / [Modules](../modules.md) / CypressLitComponentHelper
+[@shellygo/cypress-test-utils - v1.0.36](../README.md) / [Modules](../modules.md) / CypressLitComponentHelper
 
 # Class: CypressLitComponentHelper
 

documents/classes/CypressReactComponentHelper.md

@@ -1,4 +1,4 @@
-[@shellygo/cypress-test-utils - v1.0.34](../README.md) / [Modules](../modules.md) / CypressReactComponentHelper
+[@shellygo/cypress-test-utils - v1.0.36](../README.md) / [Modules](../modules.md) / CypressReactComponentHelper
 
 # Class: CypressReactComponentHelper
 

documents/modules.md

@@ -1,6 +1,6 @@
-[@shellygo/cypress-test-utils - v1.0.34](README.md) / Modules
+[@shellygo/cypress-test-utils - v1.0.36](README.md) / Modules
 
-# @shellygo/cypress-test-utils - v1.0.34
+# @shellygo/cypress-test-utils - v1.0.36
 
 ## Table of contents
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shellygo/cypress-test-utils",
   "description": "Test Automation Utilities",
-  "version": "1.0.35",
+  "version": "1.0.36",
   "author": "Shelly Goldblit",
   "private": false,
   "license": "MIT",

src/cypress-helper-spec.cy.ts

@@ -1,10 +1,14 @@
 import { CypressHelper } from "./cypress-helper";
 
 describe("cypress helper tests", () => {
-  let { beforeAndAfter, given, when, get } = new CypressHelper("data-hook");
+  let { beforeAndAfter, given, when, get } = new CypressHelper({
+    defaultDataAttribute: "data-hook"
+  });
   beforeAndAfter();
   beforeEach(() => {
-    ({ given, when, get } = new CypressHelper("data-hook"));
+    ({ given, when, get } = new CypressHelper({
+      defaultDataAttribute: "data-hook"
+    }));
 
     when.visit(
       "https://htmlpreview.github.io/?https://raw.githubusercontent.com/ShellyDCMS/cypress-test-utils/main/index.html"

src/cypress-helper.ts

@@ -8,6 +8,17 @@ import "cypress-wait-if-happens";
 import "cypress-wait-until";
 
 import { StringMatcher } from "cypress/types/net-stubbing";
+
+type Properties<T> = Pick<
+  T,
+  { [K in keyof T]: T[K] extends Function ? never : K }[keyof T]
+>;
+
+class CypressHelperOptions {
+  defaultDataAttribute?: string = "data-cy";
+  defaultShadowSlotSuffix?: string = "slot";
+  handleSlotShadowDOM?: boolean = true;
+}
 /**
  * @class CypressHelper was designed to help you develop cypress tests faster.
  * @classdes CypressHelper exposes the following public properties:
@@ -19,13 +30,12 @@ import { StringMatcher } from "cypress/types/net-stubbing";
 export class CypressHelper {
   /**
    *
-   * @param [defaultDataAttribute = "data-cy"]
-   * @param [defaultShadowSlotSuffix = "slot]
+   * @param [options = {
+   * defaultDataAttribute : "data-cy" ,
+   * defaultShadowSlotSuffix : "slot",
+   * handleSlotShadowDOM : true}]
    */
-  constructor(
-    private readonly defaultDataAttribute: string = "data-cy",
-    private readonly defaultShadowSlotSuffix: string = "slot"
-  ) {}
+  constructor(public readonly options: Properties<CypressHelperOptions>) {}
 
   beforeAndAfter = () => {
     before(() => {
@@ -358,7 +368,7 @@ export class CypressHelper {
      */
     bySelector: (
       selector: string,
-      attribute: string = this.defaultDataAttribute
+      attribute: string = this.options.defaultDataAttribute!
     ) => cy.get(`[${attribute}="${selector}"]`),
     /**
      * Get A DOM element at a specific index from elements.
@@ -374,7 +384,7 @@ export class CypressHelper {
     nthBySelector: (
       selector: string,
       index: number,
-      attribute: string = this.defaultDataAttribute
+      attribute: string = this.options.defaultDataAttribute!
     ) => this.get.bySelector(selector, attribute).eq(index),
     /**
      * Returns specific environment variable or undefined
@@ -474,7 +484,8 @@ export class CypressHelper {
      * @param [index = 0]
      */
     elementByTestId: (selector: string, index: number = 0) =>
-      selector.endsWith(`-${this.defaultShadowSlotSuffix}`)
+      this.options.handleSlotShadowDOM &&
+      selector.endsWith(`-${this.options.defaultShadowSlotSuffix}`)
         ? this.get.nthBySelector(selector, index).then(slot =>
             cy.wrap(
               Cypress.$(slot as JQuery<HTMLSlotElement>)