[Changed] Update readme for with network builder (#77)

* [Changed] include how to use withNetwork builder

* [Changed] remove withMocks references

* [Added] warning console for drepecated withMocks feature

* [Changed] improve readme content

Author: SalvaCarsi

README.md

@@ -49,8 +49,14 @@ and add the previous file in `jest.config.json`
 ```
 
 ## 🏰 Builder API
-#### withMocks
-By using this you let your components know what `http requests` will respond. It works matching the request url which is `host` + `path`, the request `method` and the `requestBody`. All three need to match, otherwise it will raise an exception to let you know that one of your components is doing an `http request` that is not being handled.
+
+#### 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`.
+
+#### 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.
+
 ```
 import { wrap } from '@mercadona/mo.library.burrito'
 
@@ -64,35 +70,18 @@ const responses = {
 }
 
 wrap(MyComponent)
-  .withMocks(responses)
+  .withNetwork(responses)
   .mount()
 ```
-`host`, `method` and `status` will be the same most of the cases, we don't want to specify them every single time.
-
-By default 🌯 burrito is testing the query params in your responses, but if you want to ignore it you must add the `handleQueryParams` param in the config and to test it you can use the `catchParams` property in the request, like this:
-
-```
-import { configure } from '@mercadona/mo.library.burrito'
-
-configure({ handleQueryParams: true })
 
-wrap(MyComponentUsingQueryParams)
-    .withMocks({
-        path: '/path/with/query/params/?myAwesome=param',
-        responseBody: '15',
-        catchParams: true,
-      })
-    .mount()
-```
-
-While `host` has a default value specified by using the `configure`:
+You can specify the default `host` via configuration:
 ```
 import { configure } from '@mercadona/mo.library.burrito'
 
 const { API_HOST, API_VERSION } = process.env
 configure({ defaultHost: `${ API_HOST }${ API_VERSION }` })
 ```
-`method` as a default value of `'get'` and `status` is `200`. This means one can use `withMocks` like this:
+In addition, Burrito defaults the `method` to `'get'` and `status` to `200`. This means one can use `withNetwork` like this:
 ```
 import { wrap } from '@mercadona/mo.library.burrito'
 
@@ -102,7 +91,7 @@ const responses = {
 }
 
 wrap(MyComponent)
-  .withMocks(responses)
+  .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:
@@ -124,7 +113,7 @@ const responses = [
 ]
 
 wrap(MyComponent)
-  .withMocks(responses)
+  .withNetwork(responses)
   .mount()
 ```
 
@@ -204,7 +193,7 @@ const responses = {
 
 wrap(PreparationContainer)
   .atPath('/products/1')
-  .withMocks(responses)
+  .withNetwork(responses)
   .withProps()
   .withPortalAt('modal-root')
   .mount()
@@ -220,7 +209,7 @@ import { wrap, assertions } from '@mercadona/mo.library.burrito'
 expect.extend(assertions)
 
 wrap(MyComponentMakingHttpCalls)
-    .withMocks(responses)
+    .withNetwork(responses)
     .mount()
 
 expect('/some/path').toHaveBeenFetchedWith({
@@ -242,7 +231,7 @@ const responses = [
 ]
 
 wrap(MyComponentMakingHttpCalls)
-    .withMocks(responses)
+    .withNetwork(responses)
     .mount()
 
 expect(responses).toMatchNetworkRequests()

src/wrap.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import { yellow } from 'chalk'
 
 import { mockFetch } from './mockFetch'
 import { mockNetwork } from './mockNetwork'
@@ -56,7 +57,10 @@ const wrap = options => {
     withProps: props => wrap({ ...options, props }),
     withPortalAt: portalRootId =>
       wrap({ ...options, portalRootId, hasPortal: true }),
-    withMocks: responses => wrap({ ...options, responses, hasMocks: true }),
+    withMocks: responses => {
+      console.warn(yellow('withMocks is deprecated. Use withNetwork instead.'))
+      return wrap({ ...options, responses, hasMocks: true })
+    },
     withNetwork: (responses = []) => {
       const listOfResponses = Array.isArray(responses) ? responses : [responses]
       return wrap({

tests/notUtilizedResponses.test.js

@@ -85,7 +85,9 @@ it('should not warn when all the responses are being used', async () => {
 
   await wait(() => {
     highlightNotUtilizedResponses()
-    expect(consoleWarn).not.toHaveBeenCalled()
+    expect(consoleWarn).not.toHaveBeenCalledWith(
+      expect.stringContaining('the following responses are not being used')
+    )
   })
 })
 
@@ -103,6 +105,8 @@ it('should not warn when all the multiple responses are being used', async () =>
 
   await wait(() => {
     highlightNotUtilizedResponses()
-    expect(consoleWarn).not.toHaveBeenCalled()
+    expect(consoleWarn).not.toHaveBeenCalledWith(
+      expect.stringContaining('the following responses are not being used')
+    )
   })
-})
+})

tests/withMocks.test.js

@@ -88,6 +88,22 @@ it('should mock different responses given the same request', async () => {
   )
 })
 
+it('should show the deprecated feature warning', async() => {
+  console.warn = jest.fn()
+  configure({ mount: render })
+  const { container } = wrap(MyComponentMakingHttpCalls)
+    .withMocks({ method: 'get', path: '/path/to/get/quantity/', host: 'my-host', responseBody: '15', status: 200 })
+    .mount()
+
+    expect(container).toHaveTextContent('quantity: 0')
+
+    await wait(() =>
+    expect(console.warn).toHaveBeenCalledWith(
+      expect.stringContaining('withMocks is deprecated. Use withNetwork instead.')
+    )
+  )
+})
+
 it('should not have enough responses specified', async () => {
   configure({ defaultHost: 'my-host', mount: render })
   console.warn = jest.fn()