@telefonica/acceptance-testing 2.9.1 → 2.10.0

package/README.md

@@ -106,3 +106,52 @@ you need a different jest config file name you can manually setup some scripts i
 
 Just take into account that the `jest-environment-puppeteer` must always be configured in your jest config
 file. Also note that tests run in UI mode by default, unless you set the `HEADLESS=1` env var.
+
+## Intercepting requests
+
+If you can intercept and mock requests in your acceptance tests you can use the `interceptRequest` function:
+
+```ts
+import {openPage, screen, interceptRequest} from '@telefonica/acceptance-testing';
+
+test('example screenshot test', async () => {
+  const imageSpy = interceptRequest((req) => req.url().endsWith('.jpg'));
+
+  imageSpy.mockReturnValue({
+    status: 200,
+    contentType: 'image/jpeg',
+    body: myMockedJpeg,
+  });
+
+  const page = await openPage({path: '/foo'});
+
+  expect(imageSpy).toHaveBeenCalled();
+});
+```
+
+To mock JSON api endpoints you can use `interceptRequest` too, but we also provide a more conveninent api
+wrapper over `interceptRequest`: `createApiEndpointMock`
+
+```ts
+import {openPage, screen, createApiEndpointMock} from '@telefonica/acceptance-testing';
+
+test('example screenshot test', async () => {
+  const api = createApiEndpointMock({basePath: 'https://my-api-endpoint.com'});
+
+  const getSpy = api.spyOn('/some-path').mockReturnValue({a: 1, b: 2});
+  const postSpy = api.spyOn('/other-path', 'POST').mockReturnValue({c: 3});
+
+  const page = await openPage({path: '/foo'});
+
+  expect(getSpy).toHaveBeenCalled();
+
+  await page.click(await screen.findByRole('button', {name: 'Send'}));
+
+  expect(postSpy).toHaveBeenCalled();
+});
+```
+
+`createApiEndpointMock` automatically mocks CORS response headers and preflight (`OPTIONS`) requests for you.
+
+You can also use globs for paths if you need: `api.spyOn('/some/*/path')`. We use the
+[`glob-to-regexp`](https://www.npmjs.com/package/glob-to-regexp) lib internally.

package/dist/acceptance-testing.cjs.development.js

@@ -9,6 +9,7 @@ var fs = _interopDefault(require('fs'));
 var findRoot = _interopDefault(require('find-root'));
 var pptrTestingLibrary = require('pptr-testing-library');
 var jestImageSnapshot = require('jest-image-snapshot');
+var globToRegExp = _interopDefault(require('glob-to-regexp'));
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   try {
@@ -1115,14 +1116,88 @@ var getPageApi = function getPageApi(page) {
 
   return api;
 };
+var needsRequestInterception = false;
+var requestHandlers = [];
+
+var requestInterceptor = function requestInterceptor(req) {
+  var _requestHandlers$find;
+
+  var _ref11 = (_requestHandlers$find = requestHandlers.find(function (_ref12) {
+    var matcher = _ref12.matcher;
+    return matcher(req);
+  })) != null ? _requestHandlers$find : {
+    handler: null
+  },
+      handler = _ref11.handler;
+
+  if (!handler) {
+    req["continue"]();
+    return;
+  }
+
+  var response = handler(req);
+  req.respond(response);
+};
+
+var interceptRequest = function interceptRequest(matcher) {
+  needsRequestInterception = true;
+  var spy = jest.fn();
+  requestHandlers.push({
+    matcher: matcher,
+    handler: spy
+  });
+  return spy;
+};
+var createApiEndpointMock = function createApiEndpointMock(_ref13) {
+  var baseUrl = _ref13.baseUrl;
+  interceptRequest(function (req) {
+    return req.method() === 'OPTIONS' && req.url().startsWith(baseUrl);
+  }).mockImplementation(function () {
+    return {
+      status: 204,
+      headers: {
+        'Access-Control-Allow-Origin': '*',
+        'Access-Control-Allow-Methods': 'POST,PATCH,PUT,GET,OPTIONS',
+        'Access-Control-Allow-Headers': 'Content-Type,Authorization'
+      }
+    };
+  });
+  return {
+    spyOn: function spyOn(path, method) {
+      if (method === void 0) {
+        method = 'GET';
+      }
+
+      var matcher = function matcher(req) {
+        var url = req.url();
+        var urlPath = url.substring(baseUrl.length);
+        return req.method() === method && url.startsWith(baseUrl) && !!urlPath.match(globToRegExp(path));
+      };
+
+      var spy = jest.fn();
+      interceptRequest(matcher).mockImplementation(function (req) {
+        var resBody = spy(req);
+        return {
+          status: 200,
+          headers: {
+            'Access-Control-Allow-Origin': '*'
+          },
+          contentType: 'application/json',
+          body: JSON.stringify(resBody)
+        };
+      });
+      return spy;
+    }
+  };
+};
 var openPage = /*#__PURE__*/function () {
-  var _ref12 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee7(_ref11) {
+  var _ref15 = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee7(_ref14) {
     var userAgent, isDarkMode, viewport, cookies, urlConfig, url, currentUserAgent, page, connectionError;
     return runtime_1.wrap(function _callee7$(_context7) {
       while (1) {
         switch (_context7.prev = _context7.next) {
           case 0:
-            userAgent = _ref11.userAgent, isDarkMode = _ref11.isDarkMode, viewport = _ref11.viewport, cookies = _ref11.cookies, urlConfig = /*#__PURE__*/_objectWithoutPropertiesLoose(_ref11, _excluded2);
+            userAgent = _ref14.userAgent, isDarkMode = _ref14.isDarkMode, viewport = _ref14.viewport, cookies = _ref14.cookies, urlConfig = /*#__PURE__*/_objectWithoutPropertiesLoose(_ref14, _excluded2);
 
             url = function () {
               if (urlConfig.url !== undefined) {
@@ -1206,20 +1281,32 @@ var openPage = /*#__PURE__*/function () {
             });
 
           case 23:
-            _context7.prev = 23;
+            if (!needsRequestInterception) {
+              _context7.next = 27;
+              break;
+            }
+
             _context7.next = 26;
-            return page["goto"](url);
+            return page.setRequestInterception(true);
 
           case 26:
-            _context7.next = 37;
+            page.on('request', requestInterceptor);
+
+          case 27:
+            _context7.prev = 27;
+            _context7.next = 30;
+            return page["goto"](url);
+
+          case 30:
+            _context7.next = 41;
             break;
 
-          case 28:
-            _context7.prev = 28;
-            _context7.t1 = _context7["catch"](23);
+          case 32:
+            _context7.prev = 32;
+            _context7.t1 = _context7["catch"](27);
 
             if (!_context7.t1.message.includes('net::ERR_CONNECTION_REFUSED')) {
-              _context7.next = 36;
+              _context7.next = 40;
               break;
             }
 
@@ -1227,33 +1314,33 @@ var openPage = /*#__PURE__*/function () {
             Error.captureStackTrace(connectionError, openPage);
             throw connectionError;
 
-          case 36:
+          case 40:
             throw _context7.t1;
 
-          case 37:
-            _context7.next = 39;
+          case 41:
+            _context7.next = 43;
             return page.waitForFunction('document.fonts.status === "loaded"');
 
-          case 39:
+          case 43:
             return _context7.abrupt("return", getPageApi(page));
 
-          case 40:
+          case 44:
           case "end":
             return _context7.stop();
         }
       }
-    }, _callee7, null, [[23, 28]]);
+    }, _callee7, null, [[27, 32]]);
   }));
 
   return function openPage(_x11) {
-    return _ref12.apply(this, arguments);
+    return _ref15.apply(this, arguments);
   };
 }();
 
 var buildQueryMethods = function buildQueryMethods(_temp3) {
-  var _ref13 = _temp3 === void 0 ? {} : _temp3,
-      page = _ref13.page,
-      element = _ref13.element;
+  var _ref16 = _temp3 === void 0 ? {} : _temp3,
+      page = _ref16.page,
+      element = _ref16.element;
 
   var boundQueries = {};
 
@@ -1311,7 +1398,7 @@ var buildQueryMethods = function buildQueryMethods(_temp3) {
               newElementHandle = Object.create(elementHandle);
 
               newElementHandle.screenshot = /*#__PURE__*/function () {
-                var _ref15 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee8(options) {
+                var _ref18 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee8(options) {
                   return runtime_1.wrap(function _callee8$(_context8) {
                     while (1) {
                       switch (_context8.prev = _context8.next) {
@@ -1342,7 +1429,7 @@ var buildQueryMethods = function buildQueryMethods(_temp3) {
                 }));
 
                 return function (_x12) {
-                  return _ref15.apply(this, arguments);
+                  return _ref18.apply(this, arguments);
                 };
               }();
 
@@ -1381,9 +1468,13 @@ beforeEach( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function
       switch (_context10.prev = _context10.next) {
         case 0:
           _context10.next = 2;
-          return global.jestPuppeteer.resetPage();
+          return getGlobalPage().setRequestInterception(false);
 
         case 2:
+          _context10.next = 4;
+          return global.jestPuppeteer.resetPage();
+
+        case 4:
         case "end":
           return _context10.stop();
       }
@@ -1391,34 +1482,42 @@ beforeEach( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function
   }, _callee10);
 })));
 afterEach( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee11() {
+  var page;
   return runtime_1.wrap(function _callee11$(_context11) {
     while (1) {
       switch (_context11.prev = _context11.next) {
         case 0:
           _context11.prev = 0;
-          _context11.next = 3;
-          return getGlobalPage()["goto"]('about:blank');
+          page = getGlobalPage();
+          requestHandlers = [];
+          needsRequestInterception = false;
+          page.off('request', requestInterceptor); // clear tab, this way we clear the DOM and stop js execution or pending requests
 
-        case 3:
           _context11.next = 7;
+          return page["goto"]('about:blank');
+
+        case 7:
+          _context11.next = 11;
           break;
 
-        case 5:
-          _context11.prev = 5;
+        case 9:
+          _context11.prev = 9;
           _context11.t0 = _context11["catch"](0);
 
-        case 7:
+        case 11:
         case "end":
           return _context11.stop();
       }
     }
-  }, _callee11, null, [[0, 5]]);
+  }, _callee11, null, [[0, 9]]);
 })));
 
+exports.createApiEndpointMock = createApiEndpointMock;
 exports.getGlobalBrowser = getGlobalBrowser;
 exports.getGlobalPage = getGlobalPage;
 exports.getPageApi = getPageApi;
 exports.getScreen = getScreen;
+exports.interceptRequest = interceptRequest;
 exports.openPage = openPage;
 exports.screen = screen;
 exports.serverHostName = serverHostName;