update to latest test utils

examples/angular/pokemon-catalog/package.json

@@ -43,7 +43,7 @@
     "@cypress/webpack-dev-server": "^3.4.1",
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
     "@jsdevtools/coverage-istanbul-loader": "^3.0.5",
-    "@shellygo/cypress-test-utils": "^2.0.37",
+    "@shellygo/cypress-test-utils": "^2.0.54",
     "@types/chance": "^1.1.3",
     "@types/jasmine": "~4.0.0",
     "builder-pattern": "^2.2.0",

examples/angular/pokemon-catalog/src/app/components/pokemon-catalog/pokemon-catalog.component.driver.ts

@@ -12,10 +12,7 @@ export class PokemonCatalogComponentDriver {
   private pokemonImageDriver: PokemonImageComponentDriver = new PokemonImageComponentDriver();
 
   private componentProperties: Partial<PokemonCatalog> = {};
-  private pokemonServiceMock: Partial<PokemonService> = {
-    getPokemon: url => Promise.reject(),
-    getPokemonByOffset: offset => Promise.reject()
-  };
+  private pokemonServiceMock = this.helper.given.stubbedInstance(PokemonService);
 
   beforeAndAfter = () => {
     this.helper.beforeAndAfter();
@@ -25,22 +22,15 @@ export class PokemonCatalogComponentDriver {
   given = {
     image: this.pokemonImageDriver.given,
     pokemon: (value: PokemonList) => {
-      this.pokemonServiceMock.getPokemon = this.helper.given
-        .stub()
-        .as(this.pokemonServiceMock.getPokemon!.name)
-        .returns(value);
-
-      this.pokemonServiceMock.getPokemonByOffset = this.helper.given
-        .stub()
-        .as(this.pokemonServiceMock.getPokemonByOffset!.name)
-        .returns(value);
+      this.pokemonServiceMock.getPokemon.returns(value);
+      this.pokemonServiceMock.getPokemonByOffset.returns(value);
     }
   };
 
   when = {
     image: this.pokemonImageDriver.when,
     render: (type: Type<PokemonCatalog>, config: MountConfig<PokemonCatalog>) => {
-      this.angularComponentHelper.when.mount(type, config, {
+      return this.angularComponentHelper.when.mount(type, config, {
         ...this.componentProperties
       });
     },
@@ -56,8 +46,6 @@ export class PokemonCatalogComponentDriver {
     nameText: () => this.helper.get.elementsText("pokemon-name"),
     nextButton: () => this.helper.get.elementByTestId("next"),
     prevButton: () => this.helper.get.elementByTestId("prev"),
-    getPokemonSpy: () => this.helper.get.spyFromFunction(this.pokemonServiceMock.getPokemon!),
-    getPokemonByOffsetSpy: () => this.helper.get.spyFromFunction(this.pokemonServiceMock.getPokemonByOffset!),
-    pokemonServiceMock: () => this.pokemonServiceMock
+    mock: { pokemonService: () => this.pokemonServiceMock }
   };
 }

examples/angular/pokemon-catalog/src/app/components/pokemon-catalog/pokemon-catalog.component.spec.cy.ts

@@ -15,7 +15,7 @@ describe("PokemonCatalogComponent Tests", () => {
     providers: [
       {
         provide: PokemonService,
-        useValue: get.pokemonServiceMock()
+        useValue: get.mock.pokemonService()
       }
     ]
   };
@@ -32,10 +32,10 @@ describe("PokemonCatalogComponent Tests", () => {
       .previous(chance.url())
       .build();
 
-    beforeEach(() => {
+    beforeEach(async () => {
       given.pokemon(pokemon);
       given.image.mockImageResponse("default.png");
-      when.render(PokemonCatalog, testConfig);
+      const fixture = (await when.render(PokemonCatalog, testConfig)).componentInstance;
     });
 
     it("should show picture given pokemon provided as input", () => {
@@ -59,7 +59,7 @@ describe("PokemonCatalogComponent Tests", () => {
       });
 
       it("should call getPokemon with the next pokemon's url", () => {
-        then(get.getPokemonSpy()).shouldHaveBeenCalledWith(pokemon.next);
+        then(get.mock.pokemonService().getPokemon).shouldHaveBeenCalledWith(pokemon.next);
       });
     });
 
@@ -73,7 +73,7 @@ describe("PokemonCatalogComponent Tests", () => {
       });
 
       it("should call getPokemon with the prev pokemon's url", () => {
-        then(get.getPokemonSpy()).shouldHaveBeenCalledWith(pokemon.previous);
+        then(get.mock.pokemonService().getPokemon).shouldHaveBeenCalledWith(pokemon.previous);
       });
     });
   });

examples/angular/pokemon-catalog/yarn.lock

@@ -1268,7 +1268,7 @@
   resolved "https://registry.yarnpkg.com/@cypress/mount-utils/-/mount-utils-4.0.0.tgz#647c24158caddc656741648291c77dfa1b6b1621"
   integrity sha512-4w8WZpOALz5+vhJmPfh2HkT4NMsRP2DgVqSXxXu46GR5yUGfqJ0+WgUrmVuujtKKY6n1mDiO1L4AfZ+4bsEYGQ==
 
-"@cypress/[email protected].12":
+"@cypress/request@^2.88.11":
   version "2.88.12"
   resolved "https://registry.yarnpkg.com/@cypress/request/-/request-2.88.12.tgz#ba4911431738494a85e93fb04498cb38bc55d590"
   integrity sha512-tOn+0mDZxASFM+cuAP9szGUGPI1HwWVSvdzm7V4cCsPdFTx6qMj29CwaQmRAMIEhORIUBFBsYROYJcveK4uOjA==
@@ -1794,19 +1794,20 @@
     "@angular-devkit/schematics" "16.2.9"
     jsonc-parser "3.2.0"
 
-"@shellygo/cypress-test-utils@^2.0.37":
-  version "2.0.37"
-  resolved "https://registry.yarnpkg.com/@shellygo/cypress-test-utils/-/cypress-test-utils-2.0.37.tgz#5147ce0e7f3a6c83a0cb002ce2f0b823c91a4904"
-  integrity sha512-EkrI6laP7xmme1BpvEPvWx0BUgfg9eO83h6ztn8DLWsYKZUVHH6uKH60PweaBWE+GsIpUqEKx/vFPIYu7u/48g==
+"@shellygo/cypress-test-utils@^2.0.54":
+  version "2.0.54"
+  resolved "https://registry.yarnpkg.com/@shellygo/cypress-test-utils/-/cypress-test-utils-2.0.54.tgz#d8a3777d1682d436e3b3723091f8b22a85766772"
+  integrity sha512-xQiWrqbwTV1538AIUAlGCuPMecCoUztfghy0JmPYjAFrfsYjCRfePMB59551NVYqW41QHOoEA4bhEdD3ltE/1w==
   dependencies:
     "@cypress/mount-utils" "^4.0.0"
     "@types/chai-subset" "^1.3.3"
     chai-subset "^1.6.0"
-    cypress "^12.17.3"
+    cypress "12.17.3"
     cypress-pipe "^2.0.0"
     cypress-real-events "^1.7.6"
     cypress-wait-if-happens "^1.3.3"
     cypress-wait-until "^1.7.2"
+    ts-stubber "^1.0.2"
 
 "@sigstore/bundle@^1.1.0":
   version "1.1.0"
@@ -3468,12 +3469,12 @@ cypress-wait-until@^1.7.2:
   resolved "https://registry.yarnpkg.com/cypress-wait-until/-/cypress-wait-until-1.7.2.tgz#7f534dd5a11c89b65359e7a0210f20d3dfc22107"
   integrity sha512-uZ+M8/MqRcpf+FII/UZrU7g1qYZ4aVlHcgyVopnladyoBrpoaMJ4PKZDrdOJ05H5RHbr7s9Tid635X3E+ZLU/Q==
 
-cypress@^12.17.3:
-  version "12.17.4"
-  resolved "https://registry.yarnpkg.com/cypress/-/cypress-12.17.4.tgz#b4dadf41673058493fa0d2362faa3da1f6ae2e6c"
-  integrity sha512-gAN8Pmns9MA5eCDFSDJXWKUpaL3IDd89N9TtIupjYnzLSmlpVr+ZR+vb4U/qaMp+lB6tBvAmt7504c3Z4RU5KQ==
+[email protected]:
+  version "12.17.3"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-12.17.3.tgz#1e2b19037236fc60e4a4b3a14f0846be17a1fc0e"
+  integrity sha512-/R4+xdIDjUSLYkiQfwJd630S81KIgicmQOLXotFxVXkl+eTeVO+3bHXxdi5KBh/OgC33HWN33kHX+0tQR/ZWpg==
   dependencies:
-    "@cypress/request" "2.88.12"
+    "@cypress/request" "^2.88.11"
     "@cypress/xvfb" "^1.2.4"
     "@types/node" "^16.18.39"
     "@types/sinonjs__fake-timers" "8.1.1"
@@ -3508,7 +3509,6 @@ cypress@^12.17.3:
     minimist "^1.2.8"
     ospath "^1.2.2"
     pretty-bytes "^5.6.0"
-    process "^0.11.10"
     proxy-from-env "1.0.0"
     request-progress "^3.0.0"
     semver "^7.5.3"
@@ -8353,6 +8353,11 @@ ts-node@^10.0.0:
     v8-compile-cache-lib "^3.0.1"
     yn "3.1.1"
 
+ts-stubber@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/ts-stubber/-/ts-stubber-1.0.2.tgz#0ec63772c24ab50b7fe4f5ecda18f045ed82d237"
+  integrity sha512-co88e8mQaXB7dyxU0Df9ZmhE8YV5FXpj1x+tAX1+CDB+SND1SKLNIOLMxWE5xze/UvCuE8J0B3tvTJVO0kOe9w==
+
 tsconfig-paths@^4.1.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz#ef78e19039133446d244beac0fd6a1632e2d107c"

examples/lit/pokemon-catalog/package.json

@@ -28,7 +28,7 @@
     "@babel/core": "7.22.5",
     "@babel/preset-env": "7.22.5",
     "@cypress/code-coverage": "^3.12.1",
-    "@shellygo/cypress-test-utils": "^2.0.37",
+    "@shellygo/cypress-test-utils": "^2.0.54",
     "babel-loader": "9.1.2",
     "builder-pattern": "^2.2.0",
     "chance": "^1.1.11",

examples/lit/pokemon-catalog/src/components/pokemon-catalog/pokemon-catalog.component.driver.ts

@@ -4,18 +4,18 @@ import { CypressHelper } from "@shellygo/cypress-test-utils";
 import { CypressLitComponentHelper } from "@shellygo/cypress-test-utils/lit";
 import { LitElement, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import { PokemonInternalService, PokemonList, PokemonServiceContext } from "../../services/pokemon.service";
+import { PokemonList, PokemonService, PokemonServiceContext } from "../../services/pokemon.service";
 import { PokemonCatalog } from "./pokemon-catalog.component";
 @customElement("pokemon-service-provider")
 export class PokemonServiceProvider extends LitElement {
-  @property({ type: Object, reflect: true })
-  private pokemonService: PokemonInternalService;
+  @property()
+  private getPokemonService: () => PokemonService;
 
   override connectedCallback() {
     super.connectedCallback();
     new ContextProvider(this, PokemonServiceContext, {
-      pokemonService: () => {
-        return this.pokemonService;
+      getPokemonService: () => {
+        return this.getPokemonService;
       }
     });
   }
@@ -32,10 +32,7 @@ export class PokemonCatalogComponentDriver {
     onNext: () => {}
   };
 
-  private pokemonServiceMock: Partial<PokemonInternalService> = {
-    getPokemon: url => Promise.reject(),
-    getPokemonByOffset: offset => Promise.reject()
-  };
+  private pokemonServiceMock = this.helper.given.stubbedInstance(PokemonService);
   private pokemonImageDriver: PokemonImageComponentDriver = new PokemonImageComponentDriver();
 
   beforeAndAfter = () => {
@@ -46,15 +43,8 @@ export class PokemonCatalogComponentDriver {
   given = {
     image: this.pokemonImageDriver.given,
     pokemon: (value: PokemonList) => {
-      this.pokemonServiceMock.getPokemon = this.helper.given
-        .stub()
-        .as(this.pokemonServiceMock.getPokemon!.name)
-        .returns(value);
-
-      this.pokemonServiceMock.getPokemonByOffset = this.helper.given
-        .stub()
-        .as(this.pokemonServiceMock.getPokemonByOffset!.name)
-        .returns(value);
+      this.pokemonServiceMock.getPokemon.returns(value);
+      this.pokemonServiceMock.getPokemonByOffset.returns(value);
     },
     onNextSpy: (): Cypress.Agent<sinon.SinonSpy<any[], any>> => (this.props.onNext = this.helper.given.spy("onNext")),
     onPrevSpy: (): Cypress.Agent<sinon.SinonSpy<any[], any>> => (this.props.onPrev = this.helper.given.spy("onPrev"))
@@ -66,9 +56,13 @@ export class PokemonCatalogComponentDriver {
       this.litComponentHelper.when.unmount(element);
       this.litComponentHelper.when.mount(
         element,
-        html`<pokemon-service-provider
-          .pokemonService="${this.pokemonServiceMock}" }
-        ><pokemon-catalog .onPrev="${this.props.onPrev}" .onNext="${this.props.onNext}"></pokemon-catalog ></pokemon-catalog></pokemon-service-provider>`
+        html`<pokemon-service-provider .getPokemonService="${() => this.pokemonServiceMock}" }
+          ><pokemon-catalog
+            .onPrev="${this.props.onPrev}"
+            .onNext="${this.props.onNext}"
+            .getPokemonService="${() => this.get.mock.pokemonService()}"
+          ></pokemon-catalog
+        ></pokemon-service-provider>`
       );
     },
     clickNext: () => this.helper.when.click("next"),
@@ -83,7 +77,6 @@ export class PokemonCatalogComponentDriver {
     nameText: () => this.helper.get.elementsText("pokemon-name"),
     nextButton: () => this.helper.get.elementByTestId("next"),
     prevButton: () => this.helper.get.elementByTestId("prev"),
-    getPokemonSpy: () => this.helper.get.spyFromFunction(this.pokemonServiceMock.getPokemon!),
-    getPokemonByOffsetSpy: () => this.helper.get.spyFromFunction(this.pokemonServiceMock.getPokemonByOffset!)
+    mock: { pokemonService: () => this.pokemonServiceMock }
   };
 }

examples/lit/pokemon-catalog/src/components/pokemon-catalog/pokemon-catalog.component.spec.cy.ts

@@ -50,7 +50,7 @@ describe("PokemonCatalogComponent Tests", () => {
       });
 
       it("should call getPokemon with the next pokemon's url", () => {
-        then(get.getPokemonSpy()).shouldHaveBeenCalledWith(pokemon.next);
+        then(get.mock.pokemonService().getPokemon).shouldHaveBeenCalledWith(pokemon.next);
       });
     });
 
@@ -64,7 +64,7 @@ describe("PokemonCatalogComponent Tests", () => {
       });
 
       it("should call getPokemon with the prev pokemon's url", () => {
-        then(get.getPokemonSpy()).shouldHaveBeenCalledWith(pokemon.previous);
+        then(get.mock.pokemonService().getPokemon).shouldHaveBeenCalledWith(pokemon.previous);
       });
     });
   });

examples/lit/pokemon-catalog/src/components/pokemon-catalog/pokemon-catalog.component.ts

@@ -1,6 +1,6 @@
 import { PokemonImageComponent } from "@components/pokemon-image/pokemon-image.component";
 import { ContextConsumer } from "@lit-labs/context";
-import { PokemonInternalService, PokemonList, PokemonServiceContext } from "@services/pokemon.service";
+import { PokemonList, PokemonService, PokemonServiceContext } from "@services/pokemon.service";
 import { LitElement, html } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import styles from "./pokemon-catalog.component.scss";
@@ -17,7 +17,9 @@ export class PokemonCatalog extends LitElement {
   pokemon!: PokemonList;
 
   @state()
-  pokemonService!: PokemonInternalService;
+  getPokemonService!: () => PokemonService;
+
+  private pokemonService;
 
   static override get styles() {
     return styles;
@@ -29,11 +31,12 @@ export class PokemonCatalog extends LitElement {
 
   override connectedCallback() {
     super.connectedCallback();
+
     new ContextConsumer(
       this,
       PokemonServiceContext,
       context => {
-        this.pokemonService = context.pokemonService();
+        this.pokemonService = context.getPokemonService()();
       },
       true
     );

examples/lit/pokemon-catalog/src/main.ts

@@ -1,27 +1,24 @@
 import { html, LitElement } from "lit";
 import { customElement } from "lit/decorators.js";
 import "./components/pokemon-catalog/pokemon-catalog.component";
-import {
-  PokemonInternalService,
-  PokemonServiceContext
-} from "./services/pokemon.service";
+import { PokemonService, PokemonServiceContext } from "./services/pokemon.service";
 
 import { ContextProvider } from "@lit-labs/context";
 import styles from "./styles.scss";
 @customElement("pokemon-app")
 export class PokemonApp extends LitElement {
   static override styles = styles;
 
-  public pokemonService: PokemonInternalService;
+  public pokemonService: PokemonService;
 
   override connectedCallback() {
     super.connectedCallback();
     new ContextProvider(this, PokemonServiceContext, {
-      pokemonService: () => {
+      getPokemonService: () => {
         if (!this.pokemonService) {
-          this.pokemonService = new PokemonInternalService();
+          this.pokemonService = new PokemonService();
         }
-        return this.pokemonService;
+        return () => this.pokemonService;
       }
     });
   }

examples/lit/pokemon-catalog/src/services/pokemon.service.ts

@@ -1,11 +1,9 @@
 import { createContext } from "@lit-labs/context";
 
-export const PokemonServiceContext = createContext<PokemonService>(
-  "__pokemon_context__"
-);
+export const PokemonServiceContext = createContext<PokemonServicePovider>("__pokemon_context__");
 
-export interface PokemonService {
-  pokemonService: () => PokemonInternalService;
+export interface PokemonServicePovider {
+  getPokemonService: () => () => PokemonService;
 }
 export interface Pokemon {
   name: string;
@@ -19,10 +17,9 @@ export interface PokemonList {
   results: Pokemon[];
 }
 
-export class PokemonInternalService {
+export class PokemonService {
   private baseUrl = "https://pokeapi.co/api/v2/pokemon";
-  getPokemon = async (url: string | URL): Promise<PokemonList> =>
-    await (await fetch(url)).json();
+  getPokemon = async (url: string | URL): Promise<PokemonList> => await (await fetch(url)).json();
 
   getPokemonByOffset = async (offset: string = "0"): Promise<PokemonList> => {
     const params = new URLSearchParams({ limit: "1", offset });