wrapito 0.0.0 → 1.3.0-beta

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Mercadona
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,20 +1,48 @@
 # 🌯 wrapito
+
 Wrap you tests so that you can test both behaviour and components with less effort.
 
+## IMPORTANT
+
+This version is agnostic and compatible with both [jest](https://jestjs.io/) and [vitest](https://vitest.dev/).
+
+### Note:
+
+From the version 13 wrapito is compatible with the new version of React and requires such versions of dependencies:
+
+```
+"peerDependencies": {
+    "@testing-library/jest-dom": ">=5.16.4",
+    "@testing-library/react": ">=14.0.0",
+    "react-dom": ">=18.0.0",
+    "react": ">=18.0.0"
+  }
+```
+
+If your project uses React <=18.0.0, you can use wrapito <=12, but we extremely recommend to migrate to newest versions, because we are not maintaining legacy dependencies.
+
 ## 🎯 Motivation
-As we are more focused on user interactions than implementation details. In order to test all the user interactions that can be done at a certain point of our app, the upper the component we render in the test, the better.
+
+As we are more focused on user interactions than implementation details. In order to test all the user interactions that
+can be done at a certain point of our app, the upper the component we render in the test, the better.
 
 ## 💡 The idea
+
 As we test our app we will be in two different scenarios where:
-- We will need to test that the user interactions cause the proper side effects such as making http calls or refreshing the UI.
-- In case we have a components library, we will need to test these by passing the needed props and checking that it returns (renders) the expected result.
+
+- We will need to test that the user interactions cause the proper side effects such as making http calls or refreshing
+  the UI.
+- In case we have a components library, we will need to test these by passing the needed props and checking that it
+  returns (renders) the expected result.
 
 In general, if you want to test behaviour, you need to simulate external actions from user or from http responses.
-Most of the existing testing libraries give you control of the user actions and thats why we just ask you to set in the config what is the `render` function of your testing library.
 Unfortunately, there aren't so many options when it comes to manage http requests and responses in the tests.
-To give the mounted component context about which path is the current path where the app should be mounted, what props does the component receive, what http requests will respond with which results or where should the portal be mounted we have used the builder pattern that makes tests much more semantic.
+To give the mounted component context about which path is the current path where the app should be mounted, what props
+does the component receive, what http requests will respond with which results or where should the portal be mounted we
+have used the builder pattern that makes tests much more semantic.
 
 ## 🔧 Installing
+
 Using npm:
 
 ```sh
@@ -22,6 +50,7 @@ $ npm install wrapito
 ```
 
 ## 👩‍💻 Basic usage
+
 ```js
 const MyComponent = () => <span>Just a component</span>
 
@@ -29,45 +58,43 @@ const myWrappedComponent = wrap(MyComponent).mount()
 ```
 
 ## 👣 Initial setup
-Because 🌯 `wrapito` doesn't want to know anything about how the components are mounted in the project that uses it, we can specify how we will `mount` our components by passing the rendering/mounting function of our library of preference. This way we make `wrapito` a little bit more agnostic. For example `setup.wrapito.js`
 
-```js
-import { render } from '@testing-library/react'
-import { configure } from 'wrapito'
+In the latest version of 🌯 `wrapito` passing the rendering/mounting function is optional, because we use `render` from `@testing-library/react` by default.
 
-configure({
-  mount: render,
-})
-```
+If one or more of your components use a `react portal` in any way, you will need to specify the `id` of the node where
+it will be added.
 
-and add the previous file in `jest.config.json`
+To configure wrapito we recommend adding a setupTests.tsx file and adding there all your custom configs and extensions.
 
 ```js
-  "setupFiles": [
-    "<rootDir>/config/jest/setup.wrapito.js"
-  ],
-```
-
-If one or more of your components use a `react portal` in any way, you will need to specify the `id` of the node where it will be added:
-
-```js
-import { render } from '@testing-library/react'
 import { configure } from 'wrapito'
 
 configure({
-  mount: render,
+  defaultHost: 'your-host-path',
   portal: 'modal-root',
+  extend: {
+    /* Here you can group network calls to reuse them in your tests */
+  },
 })
 ```
 
+Add this line in your project setup (vite/cra):
+
+```js
+setupFiles: ['./src/setupTests.tsx']
+```
+
 ## 🏰 Builder API
 
 #### withMocks (Deprecated)
 
-It has the same API than the withNetwork builder. The main difference between them is that withMocks will fail if a given request, done by the production code, is not set up in the `responses object`.
+It has the same API than the withNetwork builder. The main difference between them is that withMocks will fail if a
+given request, done by the production code, is not set up in the `responses object`.
 
 #### withNetwork
-By using this feature you can configure the responses for your `http requests`. If your component is making a request that is not set up in the `responses object`, it will not be validated and it will return an empty response with code 200.
+
+By using this feature you can configure the responses for your `http requests`. If your component is making a request
+that is not set up in the `responses object`, it will not be validated and it will return an empty response with code 200.
 
 ```js
 import { wrap } from 'wrapito'
@@ -75,26 +102,28 @@ import { wrap } from 'wrapito'
 const responses = {
   host: 'my-host',
   method: 'get',
-  path: '/path/to/get/a/single/product/,
+  path: '/path/to/get/a/single/product/',
   responseBody: { id: 1, name: 'hummus' },
   status: 200,
   catchParams: true,
   delay: 500,
 }
 
-wrap(MyComponent)
-  .withNetwork(responses)
-  .mount()
+wrap(MyComponent).withNetwork(responses).mount()
 ```
 
 You can specify the default `host` via configuration:
+
 ```js
 import { configure } from 'wrapito'
 
 const { API_HOST, API_VERSION } = process.env
-configure({ defaultHost: `${ API_HOST }${ API_VERSION }` })
+configure({ defaultHost: `${API_HOST}${API_VERSION}` })
 ```
-In addition, `wrapito` defaults the `method` to `'get'` and `status` to `200`. This means one can use `withNetwork` like this:
+
+In addition, `wrapito` defaults the `method` to `'get'` and `status` to `200`. This means one can use `withNetwork` like
+this:
+
 ```js
 import { wrap } from 'wrapito'
 
@@ -107,30 +136,33 @@ wrap(MyComponent)
   .withNetwork(responses)
   .mount()
 ```
-Now, you might need to mock several `http responses` at the same time and that's why you can also pass an array of responses instead if you wish:
+
+Now, you might need to mock several `http responses` at the same time and that's why you can also pass an array of
+responses instead if you wish:
+
 ```js
 import { wrap } from 'wrapito'
 
 const responses = [
   {
-    path: '/path/to/get/the/products/list/,
+    path: '/path/to/get/the/products/list/',
     responseBody: [
       { id: 1, name: 'hummus' },
       { id: 2, name: 'guacamole' },
-    ]
+    ],
   },
   {
-    path: '/path/to/get/a/single/product/,
+    path: '/path/to/get/a/single/product/',
     responseBody: { id: 1, name: 'hummus' },
   },
 ]
 
-wrap(MyComponent)
-  .withNetwork(responses)
-  .mount()
+wrap(MyComponent).withNetwork(responses).mount()
 ```
 
-There might be cases where one request is called several times and we want it to return different responses. An example of this could be an app that shows a list of products that may be updated over time and for this propose the app has a refresh button that will request the list again in order to update its content.
+There might be cases where one request is called several times and we want it to return different responses. An example
+of this could be an app that shows a list of products that may be updated over time and for this propose the app has a
+refresh button that will request the list again in order to update its content.
 
 Well, it can be solved by specifying the response as multiple using `multipleResponse` as follows:
 
@@ -138,31 +170,38 @@ Well, it can be solved by specifying the response as multiple using `multipleRes
 const responses = {
   path: '/path/to/get/the/products/list/,
   multipleResponses: [
-  {
-    responseBody: [
-      { id: 1, name: 'hummus' },
-      { id: 2, name: 'guacamole' },
-    ]
-  },
-  {
-    responseBody: [
-      { id: 1, name: 'hummus' },
-      { id: 2, name: 'guacamole' },
-      { id: 3, name: 'peanut butter' },
-    ]
-   },
+    {
+      responseBody: [
+        { id: 1, name: 'hummus' },
+        { id: 2, name: 'guacamole' },
+      ]
+    },
+    {
+      responseBody: [
+        { id: 1, name: 'hummus' },
+        { id: 2, name: 'guacamole' },
+        { id: 3, name: 'peanut butter' },
+      ]
+    },
   ],
 }
 ```
 
-`multipleResponses` receives an array of responses where one set the `responseBody`, `status` or `headers` for every response.
+`multipleResponses` receives an array of responses where one set the `responseBody`, `status` or `headers` for every
+response.
 
-When `multipleResponses` is present, 🌯 `wrapito` will ignore the `responseBody` at the root of the mock and will return one response per request made at the same time that sets the returned response as `hasBeenReturned`, which means it can be returned again, until all the array of responses is returned. In that case an exception will be raised.
+When `multipleResponses` is present, 🌯 `wrapito` will ignore the `responseBody` at the root of the mock and will return
+one response per request made at the same time that sets the returned response as `hasBeenReturned`, which means it can
+be returned again, until all the array of responses is returned. In that case an exception will be raised.
 
-This behaviour differs from using a single response for a given request as single response for a given request will return the response no matter how many times the request is called.
+This behaviour differs from using a single response for a given request as single response for a given request will
+return the response no matter how many times the request is called.
 
 #### atPath
-When mounting the whole app, it will be done at the default route passing the default path. But a specific route might need to be mounted and for that reason a path to match that route should be pass here.
+
+When mounting the whole app, it will be done at the default route passing the default path. But a specific route might
+need to be mounted and for that reason a path to match that route should be pass here.
+
 ```js
 import { wrap } from 'wrapito'
 
@@ -171,20 +210,36 @@ wrap(MyComponent)
   .mount()
 ```
 
+By default it will use the native javascript history API, but you can provide a method to be called for change the app
+route with [`changeRoute`](#changeRoute):
+
+```js
+import { configure } from 'wrapito'
+import { history } from 'app.js'
+
+configure({
+  ..configuration,
+  changeRoute: (route) => history.push(route)
+})
+```
+
 #### withProps
+
 Pass down the props to the wrapped component:
+
 ```js
 import { wrap } from 'wrapito'
 
 const props = { message: 'MyComponent will receive this as prop' }
 
-wrap(MyComponent)
-  .withProps(props)
-  .mount()
+wrap(MyComponent).withProps(props).mount()
 ```
 
 #### composing
-As it is basically a builder, all the above functions can be used at the same time and these will be composed underneath:
+
+As it is basically a builder, all the above functions can be used at the same time and these will be composed
+underneath:
+
 ```js
 import { wrap } from 'wrapito'
 
@@ -202,25 +257,26 @@ wrap(PreparationContainer)
 ```
 
 ## ✨ Utils
+
 #### toHaveBeenFetched
-Some times checking only the visual side effects in the UI it's not enough. In the case that we want to check if a particular network side effect is happening, this assertion will come in handy.
+
+Some times checking only the visual side effects in the UI it's not enough. In the case that we want to check if a
+particular network side effect is happening, this assertion will come in handy.
 
 ```js
-  wrap(MyComponentMakingHttpCalls)
-  .withNetwork(responses)
-  .mount()
+wrap(MyComponentMakingHttpCalls).withNetwork(responses).mount()
 
-  expect('/some/path').toHaveBeenFetched()
+expect('/some/path').toHaveBeenFetched()
 ```
 
 #### toHaveBeenFetchedWith
+
 This assertion is an extension of `toHaveBeenFetched` but we will use it if we want to check the properties.
+
 ```js
 import { wrap, assertions } from 'wrapito'
 
-wrap(MyComponentMakingHttpCalls)
-    .withNetwork(responses)
-    .mount()
+wrap(MyComponentMakingHttpCalls).withNetwork(responses).mount()
 
 expect('/some/path').toHaveBeenFetchedWith({
   method: 'POST',
@@ -229,19 +285,17 @@ expect('/some/path').toHaveBeenFetchedWith({
 ```
 
 #### toHaveBeenFetchedTimes
+
 This assertion is to check how many times an API url is called.
+
 ```js
 import { wrap, assertions } from 'wrapito'
 
 expect.extend(assertions)
 
-const responses = [
-  { path: '/path/to/get/quantity/' },
-]
+const responses = [{ path: '/path/to/get/quantity/' }]
 
-wrap(MyComponentMakingHttpCalls)
-    .withNetwork(responses)
-    .mount()
+wrap(MyComponentMakingHttpCalls).withNetwork(responses).mount()
 
 expect('/path/to/get/quantity/').toHaveBeenFetchedTimes(1)
 ```
@@ -250,6 +304,30 @@ expect('/path/to/get/quantity/').toHaveBeenFetchedTimes(1)
 
 In order to test the library in a project without releasing the library:
 
-- ```npm run build```
+- `npm run build`
 - This will generate a local build in the `dist` folder
 - Copy the content of that folder in `node_modules/wrapito` in your project
+
+## Deploy new version in npm
+
+You need to create a new tag for the project. E.g:
+
+```
+git tag v1.0.5
+git push origin v1.0.5
+```
+
+This will run a workflow in github that will publish this version for you.
+
+### Release beta versions
+
+WARNING: DO NOT MERGE YOUR PR IF YOU WANT TO DO A BETA RELEASE, SINCE THE CHANGES ARE NOT FULLY TRUSTED THEY SHOULD NOT GO TO MASTER
+
+If you need to release beta versions to test things, you may do so with the -beta tag. E.g:
+
+```
+git tag v1.0.5-beta1
+git push origin v1.0.5-beta1
+```
+
+This will run a workflow in github that will publish this version for you as a pre-release.

package/dist/index.d.cts

@@ -0,0 +1,111 @@
+import React from 'react';
+import { RenderResult as RenderResult$1 } from '@testing-library/react';
+
+type HttpMethod = UpperCaseHttpMethod | Lowercase<UpperCaseHttpMethod>;
+type UpperCaseHttpMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE' | 'OPTIONS' | 'HEAD' | 'CONNECT' | 'TRACE';
+interface WrapRequest extends Partial<Request> {
+    _bodyInit?: string;
+    url: string;
+}
+interface RequestOptions {
+    host?: string;
+    body?: object | string;
+    method?: HttpMethod;
+    headers?: Record<string, string>;
+}
+interface WrapResponse extends Partial<Response> {
+    /** The call's path we want to mock */
+    path: string;
+    /** To which host the call corresponds to */
+    host?: string;
+    /** The HTTP method we should intercept, defaults to GET */
+    method?: HttpMethod;
+    /** The response for this call */
+    responseBody?: object | string;
+    /** The request to match with the responseBody for this call */
+    requestBody?: object;
+    /** Allows to return multiple response for a call */
+    multipleResponses?: Array<Partial<WrapResponse>>;
+    catchParams?: boolean;
+    delay?: number;
+    hasBeenReturned?: boolean;
+}
+type NetworkResponses = WrapResponse | WrapResponse[];
+type DefaultUserLib = unknown;
+type DefaultUserInstance = unknown;
+type DefaultUserSetupOptions = unknown;
+interface InteractionDescriptor<UserLib = DefaultUserLib, UserInstance = DefaultUserInstance, UserSetupOptions = DefaultUserSetupOptions> {
+    UserLib: UserLib;
+    UserInstance: UserInstance;
+    UserSetupOptions: UserSetupOptions;
+}
+interface Wrap<UserInteraction extends InteractionDescriptor = InteractionDescriptor> {
+    withNetwork: (responses?: NetworkResponses) => Wrap<UserInteraction>;
+    atPath: (path: string, historyState?: object) => Wrap<UserInteraction>;
+    withProps: (props: object) => Wrap<UserInteraction>;
+    withInteraction: (config: UserInteraction['UserSetupOptions']) => Wrap<UserInteraction>;
+    debugRequests: () => Wrap<UserInteraction>;
+    mount: () => RenderResult & {
+        user: UserInteraction['UserInstance'];
+    };
+}
+interface WrapOptions<SetupOptions = DefaultUserSetupOptions> {
+    Component: unknown;
+    responses: WrapResponse[];
+    props: object;
+    path: string;
+    historyState?: object;
+    hasPath: boolean;
+    debug: boolean;
+    interactionConfig?: SetupOptions;
+}
+interface WrapExtensionAPI {
+    addResponses: (responses: Array<WrapResponse>) => unknown;
+}
+type Extension<UserInteraction extends InteractionDescriptor = InteractionDescriptor> = <T>(extensionAPI: WrapExtensionAPI, args: T) => Wrap<UserInteraction>;
+type Extensions<UserInteraction extends InteractionDescriptor = InteractionDescriptor> = {
+    [key: string]: Extension<UserInteraction>;
+};
+type Component = React.ReactElement<any, any>;
+type RenderResult = RenderResult$1;
+type Mount = (component: Component) => RenderResult;
+interface InteractionOptions<UserInteraction extends InteractionDescriptor = InteractionDescriptor> {
+    userLib: UserInteraction['UserLib'];
+    setup?: (userLib: UserInteraction['UserLib'], options?: UserInteraction['UserSetupOptions']) => UserInteraction['UserInstance'];
+}
+interface Config<UserInteraction extends InteractionDescriptor = InteractionDescriptor> {
+    defaultHost: string;
+    mount: Mount;
+    extend: Extensions<UserInteraction>;
+    changeRoute: (path: string) => void;
+    history?: BrowserHistory;
+    portal?: string;
+    portals?: string[];
+    handleQueryParams?: boolean;
+    interaction?: InteractionOptions<UserInteraction>;
+}
+interface BrowserHistory extends History {
+    push: (path: string, historyState?: object) => void;
+}
+
+declare const wrap: (component: unknown) => Wrap;
+
+declare function configure(newConfig: Partial<Config>): void;
+declare const getConfig: () => Config;
+
+declare const matchers: {
+    toHaveBeenFetched: (path: string, options?: RequestOptions) => {
+        pass: boolean;
+        message: () => string;
+    };
+    toHaveBeenFetchedWith: (path: string, options?: RequestOptions) => {
+        pass: boolean;
+        message: () => string;
+    };
+    toHaveBeenFetchedTimes: (path: string, expectedLength: number, options?: RequestOptions) => {
+        pass: boolean;
+        message: () => string;
+    };
+};
+
+export { type BrowserHistory, type Component, type Config, type DefaultUserInstance, type DefaultUserLib, type DefaultUserSetupOptions, type Extension, type Extensions, type HttpMethod, type InteractionDescriptor, type InteractionOptions, type Mount, type NetworkResponses, type RenderResult, type RequestOptions, type WrapResponse as Response, type Wrap, type WrapExtensionAPI, type WrapOptions, type WrapRequest, type WrapResponse, matchers as assertions, configure, getConfig, matchers, wrap };

package/dist/index.d.ts

@@ -0,0 +1,111 @@
+import React from 'react';
+import { RenderResult as RenderResult$1 } from '@testing-library/react';
+
+type HttpMethod = UpperCaseHttpMethod | Lowercase<UpperCaseHttpMethod>;
+type UpperCaseHttpMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE' | 'OPTIONS' | 'HEAD' | 'CONNECT' | 'TRACE';
+interface WrapRequest extends Partial<Request> {
+    _bodyInit?: string;
+    url: string;
+}
+interface RequestOptions {
+    host?: string;
+    body?: object | string;
+    method?: HttpMethod;
+    headers?: Record<string, string>;
+}
+interface WrapResponse extends Partial<Response> {
+    /** The call's path we want to mock */
+    path: string;
+    /** To which host the call corresponds to */
+    host?: string;
+    /** The HTTP method we should intercept, defaults to GET */
+    method?: HttpMethod;
+    /** The response for this call */
+    responseBody?: object | string;
+    /** The request to match with the responseBody for this call */
+    requestBody?: object;
+    /** Allows to return multiple response for a call */
+    multipleResponses?: Array<Partial<WrapResponse>>;
+    catchParams?: boolean;
+    delay?: number;
+    hasBeenReturned?: boolean;
+}
+type NetworkResponses = WrapResponse | WrapResponse[];
+type DefaultUserLib = unknown;
+type DefaultUserInstance = unknown;
+type DefaultUserSetupOptions = unknown;
+interface InteractionDescriptor<UserLib = DefaultUserLib, UserInstance = DefaultUserInstance, UserSetupOptions = DefaultUserSetupOptions> {
+    UserLib: UserLib;
+    UserInstance: UserInstance;
+    UserSetupOptions: UserSetupOptions;
+}
+interface Wrap<UserInteraction extends InteractionDescriptor = InteractionDescriptor> {
+    withNetwork: (responses?: NetworkResponses) => Wrap<UserInteraction>;
+    atPath: (path: string, historyState?: object) => Wrap<UserInteraction>;
+    withProps: (props: object) => Wrap<UserInteraction>;
+    withInteraction: (config: UserInteraction['UserSetupOptions']) => Wrap<UserInteraction>;
+    debugRequests: () => Wrap<UserInteraction>;
+    mount: () => RenderResult & {
+        user: UserInteraction['UserInstance'];
+    };
+}
+interface WrapOptions<SetupOptions = DefaultUserSetupOptions> {
+    Component: unknown;
+    responses: WrapResponse[];
+    props: object;
+    path: string;
+    historyState?: object;
+    hasPath: boolean;
+    debug: boolean;
+    interactionConfig?: SetupOptions;
+}
+interface WrapExtensionAPI {
+    addResponses: (responses: Array<WrapResponse>) => unknown;
+}
+type Extension<UserInteraction extends InteractionDescriptor = InteractionDescriptor> = <T>(extensionAPI: WrapExtensionAPI, args: T) => Wrap<UserInteraction>;
+type Extensions<UserInteraction extends InteractionDescriptor = InteractionDescriptor> = {
+    [key: string]: Extension<UserInteraction>;
+};
+type Component = React.ReactElement<any, any>;
+type RenderResult = RenderResult$1;
+type Mount = (component: Component) => RenderResult;
+interface InteractionOptions<UserInteraction extends InteractionDescriptor = InteractionDescriptor> {
+    userLib: UserInteraction['UserLib'];
+    setup?: (userLib: UserInteraction['UserLib'], options?: UserInteraction['UserSetupOptions']) => UserInteraction['UserInstance'];
+}
+interface Config<UserInteraction extends InteractionDescriptor = InteractionDescriptor> {
+    defaultHost: string;
+    mount: Mount;
+    extend: Extensions<UserInteraction>;
+    changeRoute: (path: string) => void;
+    history?: BrowserHistory;
+    portal?: string;
+    portals?: string[];
+    handleQueryParams?: boolean;
+    interaction?: InteractionOptions<UserInteraction>;
+}
+interface BrowserHistory extends History {
+    push: (path: string, historyState?: object) => void;
+}
+
+declare const wrap: (component: unknown) => Wrap;
+
+declare function configure(newConfig: Partial<Config>): void;
+declare const getConfig: () => Config;
+
+declare const matchers: {
+    toHaveBeenFetched: (path: string, options?: RequestOptions) => {
+        pass: boolean;
+        message: () => string;
+    };
+    toHaveBeenFetchedWith: (path: string, options?: RequestOptions) => {
+        pass: boolean;
+        message: () => string;
+    };
+    toHaveBeenFetchedTimes: (path: string, expectedLength: number, options?: RequestOptions) => {
+        pass: boolean;
+        message: () => string;
+    };
+};
+
+export { type BrowserHistory, type Component, type Config, type DefaultUserInstance, type DefaultUserLib, type DefaultUserSetupOptions, type Extension, type Extensions, type HttpMethod, type InteractionDescriptor, type InteractionOptions, type Mount, type NetworkResponses, type RenderResult, type RequestOptions, type WrapResponse as Response, type Wrap, type WrapExtensionAPI, type WrapOptions, type WrapRequest, type WrapResponse, matchers as assertions, configure, getConfig, matchers, wrap };

package/dist/index.js

@@ -0,0 +1,12 @@
+"use strict";var fe=Object.create;var E=Object.defineProperty;var ge=Object.getOwnPropertyDescriptor;var ye=Object.getOwnPropertyNames;var Re=Object.getPrototypeOf,be=Object.prototype.hasOwnProperty;var Ie=(e,t)=>{for(var n in t)E(e,n,{get:t[n],enumerable:!0})},B=(e,t,n,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of ye(t))!be.call(e,r)&&r!==n&&E(e,r,{get:()=>t[r],enumerable:!(s=ge(t,r))||s.enumerable});return e};var T=(e,t,n)=>(n=e!=null?fe(Re(e)):{},B(t||!e||!e.__esModule?E(n,"default",{value:e,enumerable:!0}):n,e)),we=e=>B(E({},"__esModule",{value:!0}),e);var Ze={};Ie(Ze,{assertions:()=>Xe,configure:()=>xe,getConfig:()=>d,matchers:()=>Xe,wrap:()=>De});module.exports=we(Ze);var Y=T(require("react"),1);var b=T(require("chalk"),1);var C=T(require("object-hash"),1);var $=require("@testing-library/react"),W={defaultHost:"",extend:{},mount:$.render,changeRoute:e=>window.history.replaceState(null,"",e)};function xe(e){W={...W,...e}}var d=()=>({...W});var L=e=>t=>{let{method:n="GET",path:s,host:r=d().defaultHost,requestBody:o=void 0,catchParams:i}=t,l=r+s,c=!d().handleQueryParams||i,u=(0,C.default)({url:c?l:l.split("?")[0],method:n.toUpperCase(),requestBody:o}),a;return"_bodyInit"in e&&e._bodyInit!==void 0&&(a=JSON.parse(e._bodyInit)),(0,C.default)({url:c?e.url:e.url.split("?")[0],method:e.method,requestBody:a})===u};function q(e,t){if(!e)throw new Error(t)}function w(e,t){return typeof t===e}function ke(e){return e instanceof Promise}function D(e,t,n){Object.defineProperty(e,t,n)}function x(e,t,n){Object.defineProperty(e,t,{value:n})}var M=Symbol.for("tinyspy:spy"),Me=new Set,Oe=e=>{e.called=!1,e.callCount=0,e.calls=[],e.results=[],e.next=[]},Ee=e=>(D(e,M,{value:{reset:()=>Oe(e[M])}}),e[M]),P=e=>e[M]||Ee(e);function Te(e){q(w("function",e)||w("undefined",e),"cannot spy on a non-function value");let t=function(...s){let r=P(t);r.called=!0,r.callCount++,r.calls.push(s);let o=r.next.shift();if(o){r.results.push(o);let[u,a]=o;if(u==="ok")return a;throw a}let i,l="ok";if(r.impl)try{new.target?i=Reflect.construct(r.impl,s,new.target):i=r.impl.apply(this,s),l="ok"}catch(u){throw i=u,l="error",r.results.push([l,u]),u}let c=[l,i];if(ke(i)){let u=i.then(a=>c[1]=a).catch(a=>{throw c[0]="error",c[1]=a,a});Object.assign(u,i),i=u}return r.results.push(c),i};x(t,"_isMockFunction",!0),x(t,"length",e?e.length:0),x(t,"name",e&&e.name||"spy");let n=P(t);return n.reset(),n.impl=e,t}var F=(e,t)=>Object.getOwnPropertyDescriptor(e,t),_=(e,t)=>{t!=null&&typeof t=="function"&&t.prototype!=null&&Object.setPrototypeOf(e.prototype,t.prototype)};function G(e,t,n){q(!w("undefined",e),"spyOn could not find an object to spy upon"),q(w("object",e)||w("function",e),"cannot spyOn on a primitive value");let[s,r]=(()=>{if(!w("object",t))return[t,"value"];if("getter"in t&&"setter"in t)throw new Error("cannot spy on both getter and setter");if("getter"in t)return[t.getter,"get"];if("setter"in t)return[t.setter,"set"];throw new Error("specify getter or setter to spy on")})(),o=F(e,s),i=Object.getPrototypeOf(e),l=i&&F(i,s),c=o||l;q(c||s in e,`${String(s)} does not exist`);let u=!1;r==="value"&&c&&!c.value&&c.get&&(r="get",u=!0,n=c.get());let a;c?a=c[r]:r!=="value"?a=()=>e[s]:a=e[s],n||(n=a);let m=Te(n);r==="value"&&_(m,a);let p=f=>{let{value:k,...v}=c||{configurable:!0,writable:!0};r!=="value"&&delete v.writable,v[r]=f,D(e,s,v)},g=()=>c?D(e,s,c):p(a),h=m[M];return x(h,"restore",g),x(h,"getOriginal",()=>u?a():a),x(h,"willCall",f=>(h.impl=f,m)),p(u?()=>(_(m,n),m):m),Me.add(m),m}var Pe=new Set,Ue=0;function Ae(e){let t=e,n,s=[],r=[],o=P(e),i={get calls(){return o.calls},get instances(){return s},get invocationCallOrder(){return r},get results(){return o.results.map(([p,g])=>({type:p==="error"?"throw":"return",value:g}))},get lastCall(){return o.calls[o.calls.length-1]}},l=[],c=!1;function u(...p){return s.push(this),r.push(++Ue),(c?n:l.shift()||n||o.getOriginal()||(()=>{})).apply(this,p)}let a=t.name;t.getMockName=()=>a||"vi.fn()",t.mockName=p=>(a=p,t),t.mockClear=()=>(o.reset(),s=[],r=[],t),t.mockReset=()=>(t.mockClear(),n=()=>{},l=[],t),t.mockRestore=()=>(t.mockReset(),o.restore(),n=void 0,t),t.getMockImplementation=()=>n,t.mockImplementation=p=>(n=p,o.willCall(u),t),t.mockImplementationOnce=p=>(l.push(p),t);function m(p,g){let h=n;n=p,o.willCall(u),c=!0;let f=()=>{n=h,c=!1},k=g();return k instanceof Promise?k.then(()=>(f(),t)):(f(),t)}return t.withImplementation=m,t.mockReturnThis=()=>t.mockImplementation(function(){return this}),t.mockReturnValue=p=>t.mockImplementation(()=>p),t.mockReturnValueOnce=p=>t.mockImplementationOnce(()=>p),t.mockResolvedValue=p=>t.mockImplementation(()=>Promise.resolve(p)),t.mockResolvedValueOnce=p=>t.mockImplementationOnce(()=>Promise.resolve(p)),t.mockRejectedValue=p=>t.mockImplementation(()=>Promise.reject(p)),t.mockRejectedValueOnce=p=>t.mockImplementationOnce(()=>Promise.reject(p)),Object.defineProperty(t,"mock",{get:()=>i}),o.willCall(u),Pe.add(t),t}var U=e=>Ae(G({spy:e||(()=>{})},"spy"));beforeEach(()=>{global.window.fetch=U()});afterEach(()=>{global.window.fetch.mockReset()});var ve=async()=>{let e={json:()=>Promise.resolve(),status:200,ok:!0,headers:new Headers({"Content-Type":"application/json"})};return Promise.resolve(e)},V=async e=>{let{responseBody:t,status:n=200,headers:s={},delay:r}=e,o={json:()=>Promise.resolve(t),status:n,ok:n>=200&&n<=299,headers:new Headers({"Content-Type":"application/json",...s})};return r?new Promise(i=>setTimeout(()=>i(o),r)):Promise.resolve(o)},We=e=>console.warn(`
+${b.default.white.bold.bgRed("wrapito")} ${b.default.redBright.bold("cannot find any mock matching:")}
+  ${b.default.greenBright(`URL: ${e.url}`)}
+  ${b.default.greenBright(`METHOD: ${e.method?.toLowerCase()}`)}
+  ${b.default.greenBright(`REQUEST BODY: ${e._bodyInit}`)}
+ `),Q=async(e,t,n)=>{let s=e.find(L(t));if(!s)return n&&We(t),ve();let{multipleResponses:r}=s;if(!r)return V(s);let o=r.find(i=>!i.hasBeenReturned);if(!o){n&&Ce(s);return}return o.hasBeenReturned=!0,V(o)},J=(e=[],t=!1)=>{global.window.fetch.mockImplementation((s,r)=>{if(typeof s=="string"){let i=new Request(s,r);return Q(e,i,t)}return Q(e,s,t)})},Ce=e=>{let t=`\u{1F32F} Wrapito:  Missing response in the multipleResponses array for path ${e.path} and method ${e.method}.`,n=b.default.greenBright(t);console.warn(n)};var H,y=e=>{H={...H,...e}},R=()=>({...H});beforeEach(()=>{global.fetch=U()});afterEach(()=>{global.fetch.mockReset()});var De=e=>(y({Component:e,responses:[],props:{},path:"",hasPath:!1,interactionConfig:void 0,debug:process.env.npm_config_debugRequests==="true"}),I()),I=()=>{let e=Ne();return{withProps:Be,withNetwork:Le,withInteraction:$e,atPath:Fe,debugRequests:_e,mount:Ge,...e}},He=e=>{let t=R(),n=[...t.responses,...e];y({...t,responses:n})},Se=(e,t)=>(t({addResponses:He},e),I()),je=(e,t)=>{let{extend:n}=d(),s=n[t];return{...e,[t]:(...r)=>Se(r,s)}},Ne=()=>{let{extend:e}=d();return Object.keys(e).reduce(je,{})},Be=e=>{let t=R();return y({...t,props:e}),I()},$e=e=>{let t=R();return y({...t,interactionConfig:e}),I()},Le=(e=[])=>{let t=R(),n=Array.isArray(e)?e:[e];return y({...t,responses:[...t.responses,...n]}),I()},Fe=(e,t)=>{let n=R();return y({...n,historyState:t,path:e,hasPath:!0}),I()},_e=()=>{let e=R();return y({...e,debug:!0}),I()},Ge=()=>{let{portal:e,portals:t,changeRoute:n,history:s,mount:r,interaction:o}=d(),{Component:i,props:l,responses:c,path:u,hasPath:a,debug:m,historyState:p,interactionConfig:g}=R(),h=i;e&&z(e),t&&Ve(t),a&&s&&(console.warn("wrapito WARNING: history is DEPRECATED. Pass a changeRoute function to the config instead."),console.warn("Read about changeRoute in: https://github.com/mercadona/wrapito#changeRoute"),s.push(u,p)),a&&!s&&n(u),J(c,m);let f=r(Y.createElement(h,{...l}));if(o){let k=o.setup?o.setup(o.userLib,g):o.userLib;return{...f,user:k}}return{...f,user:void 0}},z=e=>{if(document.getElementById(e))return;let t=document.createElement("div");t.setAttribute("id",e),t.setAttribute("data-testid",e),document.body.appendChild(t)},Ve=e=>{e.forEach(t=>{z(t)})};var S=require("jest-diff"),j=(e,t)=>{let n=t?.host?`\u{1F32F} Wrapito: ${t?.host}${e} ain't got called`:`\u{1F32F} Wrapito: ${e} ain't got called`;return{pass:!1,message:()=>n}},K=(e,t,n)=>({pass:!1,message:()=>`\u{1F32F} Wrapito: ${e} is called ${n} times, you expected ${t} times`}),X=(e,t)=>({pass:!1,message:()=>`\u{1F32F} Wrapito: Fetch method does not match, expected ${e} received ${t??"none"}`}),Z=(e,t)=>{let n=t.map(s=>(0,S.diff)(e,s)).join(`
+
+`);return{pass:!1,message:()=>`\u{1F32F} Wrapito: Fetch body does not match.
+${n}`}},ee=(e,t)=>{let n=t.find(s=>e!==s);return{pass:!1,message:()=>`\u{1F32F} Wrapito: Host request does not match, expected ${e} received ${n}`}},te=(e,t)=>{let n=t.map(s=>(0,S.diff)(e,s)).join(`
+
+`);return{pass:!1,message:()=>`\u{1F32F} Wrapito: Fetch headers do not match.
+${n}`}},ne=()=>({pass:!1,message:()=>"\u{1F32F} Wrapito: Unable to find body."}),N=()=>({pass:!0,message:()=>"Test passing"}),se=(e,t)=>{let n=t?.host?`\u{1F32F} Wrapito: ${t.host}${e} is called`:`\u{1F32F} Wrapito: ${e} is called`;return{pass:!0,message:()=>n}};var re=T(require("deep-equal"),1);var oe=()=>{let e=d().defaultHost;return e?.includes("http")?e:"https://default.com"},Qe=(e="",t,n)=>t.includes(n)?t:e+t,O=e=>e instanceof Request,Je=e=>O(e)?e.url:e,A=(e,t={method:"GET"})=>fetch.mock.calls.filter(([s])=>{let r=Je(s),o=oe(),i=new URL(r,o),l=Qe(t?.host,e,o),c=t?.host||o,u=new URL(l,c),a=i.pathname===u.pathname,m=i.search===u.search,p=i.host===u.host;return u.search?a&&m:t?.host?a&&p:a}),ae=e=>e.flat(1).filter(O).map(t=>t.method),ie=e=>e.flat(1).filter(O).map(t=>t._bodyInit?JSON.parse(t._bodyInit):{}),ce=e=>e.flat(1).filter(O).map(t=>new URL(t.url,oe()).hostname),pe=e=>e.flat(1).filter(O).map(t=>{let n={};return t.headers.forEach((s,r)=>{n[r]=s}),n}),ue=(e,t)=>e&&!t.includes(e),le=(e,t)=>t.map(s=>(0,re.default)(e,s)).every(s=>s===!1),me=(e,t)=>t.every(s=>s!==e),de=(e,t)=>t.every(s=>Object.entries(e).some(([r,o])=>s[r.toLowerCase()]!==o)),he=e=>e.length===0;var Ye=(e,t)=>{let n=A(e);if(he(n))return j(e);let s=ae(n),r=t?.method;if(ue(r,s))return X(r,s);let o=ie(n),i=t?.body;if(!i)return ne();if(le(i,o))return Z(i,o);let l=ce(n),c=t?.host;if(c&&me(c,l))return ee(c,l);let u=pe(n),a=t?.headers;return a&&de(a,u)?te(a,u):N()},ze=(e,t={method:"GET"})=>A(e,t).length?se(e,t):j(e,t),Ke=(e,t,n={method:"GET"})=>{let s=A(e,n);return s.length!==t?K(e,t,s.length):N()},Xe={toHaveBeenFetched:ze,toHaveBeenFetchedWith:Ye,toHaveBeenFetchedTimes:Ke};0&&(module.exports={assertions,configure,getConfig,matchers,wrap});