@telefonica/acceptance-testing 2.9.1 → 2.11.0

package/README.md

@@ -106,3 +106,63 @@ 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.
+
+## Uploading files
+
+Due to a puppeteer bug or limitation, when the chromium is dockerized, the file to upload must exist in the
+host and the container with the same path.
+
+A helper function `prepareFile` is provided to facilitate this:
+
+```js
+await elementHandle.uploadFile(prepareFile('/path/to/file'));
+```

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 {
@@ -812,6 +813,9 @@ var _excluded = ["captureBeyondViewport"],
     _excluded2 = ["userAgent", "isDarkMode", "viewport", "cookies"];
 
 var _pkg$acceptanceTests, _ref;
+
+var execSync = /*#__PURE__*/require('child_process').execSync;
+
 var getGlobalBrowser = function getGlobalBrowser() {
   return global.browser;
 };
@@ -961,6 +965,18 @@ var normalizeSreenshotOptions = function normalizeSreenshotOptions(_temp2) {
   return _extends({}, options, {
     captureBeyondViewport: captureBeyondViewport
   });
+}; // Puppeteer already calls scrollIntoViewIfNeeded before clicking an element. But it doesn't work in all situations
+// For example, when there is a fixed footer in the page and the element to click is under it, the browser won't scroll
+// because the element is already in the viewport (the ifNeeded part is important here). By forcing the scroll to the
+// center, we manage to fix these edge cases.
+
+
+var scrollIntoView = function scrollIntoView(el) {
+  return el.evaluate(function (e) {
+    return e.scrollIntoView({
+      block: 'center'
+    });
+  });
 };
 
 var getPageApi = function getPageApi(page) {
@@ -972,9 +988,13 @@ var getPageApi = function getPageApi(page) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
+              _context2.next = 2;
+              return scrollIntoView(elementHandle);
+
+            case 2:
               return _context2.abrupt("return", elementHandle.type(text, options));
 
-            case 1:
+            case 3:
             case "end":
               return _context2.stop();
           }
@@ -993,9 +1013,13 @@ var getPageApi = function getPageApi(page) {
         while (1) {
           switch (_context3.prev = _context3.next) {
             case 0:
+              _context3.next = 2;
+              return scrollIntoView(elementHandle);
+
+            case 2:
               return _context3.abrupt("return", elementHandle.click(options));
 
-            case 1:
+            case 3:
             case "end":
               return _context3.stop();
           }
@@ -1019,13 +1043,17 @@ var getPageApi = function getPageApi(page) {
         while (1) {
           switch (_context4.prev = _context4.next) {
             case 0:
+              _context4.next = 2;
+              return scrollIntoView(elementHandle);
+
+            case 2:
               for (_len = _args4.length, values = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
                 values[_key - 1] = _args4[_key];
               }
 
               return _context4.abrupt("return", elementHandle.select.apply(elementHandle, values));
 
-            case 2:
+            case 4:
             case "end":
               return _context4.stop();
           }
@@ -1115,14 +1143,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 +1308,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 +1341,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 = {};
 
@@ -1261,7 +1375,7 @@ var buildQueryMethods = function buildQueryMethods(_temp3) {
     var _Object$entries$_i = _Object$entries[_i],
         queryName = _Object$entries$_i[0],
         queryFn = _Object$entries$_i[1];
-    boundQueries[queryName] = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee9() {
+    boundQueries[queryName] = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee12() {
       var doc,
           body,
           _len2,
@@ -1270,25 +1384,25 @@ var buildQueryMethods = function buildQueryMethods(_temp3) {
           queryArgs,
           elementHandle,
           newElementHandle,
-          _args9 = arguments;
+          _args12 = arguments;
 
-      return runtime_1.wrap(function _callee9$(_context9) {
+      return runtime_1.wrap(function _callee12$(_context12) {
         while (1) {
-          switch (_context9.prev = _context9.next) {
+          switch (_context12.prev = _context12.next) {
             case 0:
-              _context9.next = 2;
+              _context12.next = 2;
               return pptrTestingLibrary.getDocument(page != null ? page : getGlobalPage());
 
             case 2:
-              doc = _context9.sent;
-              _context9.next = 5;
+              doc = _context12.sent;
+              _context12.next = 5;
               return doc.$('body');
 
             case 5:
-              body = _context9.sent;
+              body = _context12.sent;
 
-              for (_len2 = _args9.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-                args[_key2] = _args9[_key2];
+              for (_len2 = _args12.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+                args[_key2] = _args12[_key2];
               }
 
               queryArgs = [].concat(args);
@@ -1303,15 +1417,15 @@ var buildQueryMethods = function buildQueryMethods(_temp3) {
                 });
               }
 
-              _context9.next = 11;
+              _context12.next = 11;
               return queryFn.apply(void 0, [element != null ? element : body].concat(queryArgs));
 
             case 11:
-              elementHandle = _context9.sent;
+              elementHandle = _context12.sent;
               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,18 +1456,87 @@ var buildQueryMethods = function buildQueryMethods(_temp3) {
                 }));
 
                 return function (_x12) {
-                  return _ref15.apply(this, arguments);
+                  return _ref18.apply(this, arguments);
+                };
+              }();
+
+              newElementHandle.click = /*#__PURE__*/function () {
+                var _ref19 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee9(options) {
+                  return runtime_1.wrap(function _callee9$(_context9) {
+                    while (1) {
+                      switch (_context9.prev = _context9.next) {
+                        case 0:
+                          _context9.next = 2;
+                          return scrollIntoView(elementHandle);
+
+                        case 2:
+                          return _context9.abrupt("return", elementHandle.click(options));
+
+                        case 3:
+                        case "end":
+                          return _context9.stop();
+                      }
+                    }
+                  }, _callee9);
+                }));
+
+                return function (_x13) {
+                  return _ref19.apply(this, arguments);
+                };
+              }();
+
+              newElementHandle.type = /*#__PURE__*/function () {
+                var _ref20 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee10(text, options) {
+                  return runtime_1.wrap(function _callee10$(_context10) {
+                    while (1) {
+                      switch (_context10.prev = _context10.next) {
+                        case 0:
+                          _context10.next = 2;
+                          return scrollIntoView(elementHandle);
+
+                        case 2:
+                          return _context10.abrupt("return", elementHandle.type(text, options));
+
+                        case 3:
+                        case "end":
+                          return _context10.stop();
+                      }
+                    }
+                  }, _callee10);
+                }));
+
+                return function (_x14, _x15) {
+                  return _ref20.apply(this, arguments);
                 };
               }();
 
-              return _context9.abrupt("return", newElementHandle);
+              newElementHandle.select = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee11() {
+                var _args11 = arguments;
+                return runtime_1.wrap(function _callee11$(_context11) {
+                  while (1) {
+                    switch (_context11.prev = _context11.next) {
+                      case 0:
+                        _context11.next = 2;
+                        return scrollIntoView(elementHandle);
+
+                      case 2:
+                        return _context11.abrupt("return", elementHandle.select.apply(elementHandle, _args11));
+
+                      case 3:
+                      case "end":
+                        return _context11.stop();
+                    }
+                  }
+                }, _callee11);
+              }));
+              return _context12.abrupt("return", newElementHandle);
 
-            case 15:
+            case 18:
             case "end":
-              return _context9.stop();
+              return _context12.stop();
           }
         }
-      }, _callee9);
+      }, _callee12);
     }));
   };
 
@@ -1375,51 +1558,95 @@ var within = function within(element) {
     element: element
   });
 };
-beforeEach( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee10() {
-  return runtime_1.wrap(function _callee10$(_context10) {
+beforeEach( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee13() {
+  return runtime_1.wrap(function _callee13$(_context13) {
     while (1) {
-      switch (_context10.prev = _context10.next) {
+      switch (_context13.prev = _context13.next) {
         case 0:
-          _context10.next = 2;
-          return global.jestPuppeteer.resetPage();
+          _context13.next = 2;
+          return getGlobalPage().setRequestInterception(false);
 
         case 2:
+          _context13.next = 4;
+          return global.jestPuppeteer.resetPage();
+
+        case 4:
         case "end":
-          return _context10.stop();
+          return _context13.stop();
       }
     }
-  }, _callee10);
+  }, _callee13);
 })));
-afterEach( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee11() {
-  return runtime_1.wrap(function _callee11$(_context11) {
+afterEach( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee14() {
+  var page;
+  return runtime_1.wrap(function _callee14$(_context14) {
     while (1) {
-      switch (_context11.prev = _context11.next) {
+      switch (_context14.prev = _context14.next) {
         case 0:
-          _context11.prev = 0;
-          _context11.next = 3;
-          return getGlobalPage()["goto"]('about:blank');
+          _context14.prev = 0;
+          page = getGlobalPage();
+          requestHandlers = [];
+          needsRequestInterception = false;
+          page.off('request', requestInterceptor); // clear tab, this way we clear the DOM and stop js execution or pending requests
+
+          _context14.next = 7;
+          return page["goto"]('about:blank');
 
-        case 3:
-          _context11.next = 7;
+        case 7:
+          _context14.next = 11;
           break;
 
-        case 5:
-          _context11.prev = 5;
-          _context11.t0 = _context11["catch"](0);
+        case 9:
+          _context14.prev = 9;
+          _context14.t0 = _context14["catch"](0);
 
-        case 7:
+        case 11:
         case "end":
-          return _context11.stop();
+          return _context14.stop();
       }
     }
-  }, _callee11, null, [[0, 5]]);
+  }, _callee14, null, [[0, 9]]);
 })));
+/**
+ * Returns a new path to the file that can be used by chromium in acceptance tests
+ *
+ * To be able to use `element.uploadFile()` in a dockerized chromium, the file must exist in the
+ * host and the docker, and both sides must use the same path.
+ *
+ * To workaround this bug or limitation, this function prepares the file by copying it to /tmp in
+ * the host and the container.
+ */
+
+var prepareFile = function prepareFile(filepath) {
+  var isLocal = !isCi;
+  var isHeadless = !!process.env.HEADLESS;
+  var usesDocker = isLocal && isHeadless;
+  var dockerComposeFile = path.join(__dirname, '..', 'docker-compose.yaml');
+
+  if (usesDocker) {
+    var containerId = execSync("docker-compose -f " + dockerComposeFile + " ps -q").toString().trim();
+
+    if (!containerId) {
+      throw Error('acceptance-testing container not found');
+    }
+
+    execSync("docker cp " + filepath + " " + containerId + ":/tmp");
+    var newPath = path.join('/tmp', path.basename(filepath));
+    fs.copyFileSync(filepath, newPath);
+    return newPath;
+  } else {
+    return filepath;
+  }
+};
 
+exports.createApiEndpointMock = createApiEndpointMock;
 exports.getGlobalBrowser = getGlobalBrowser;
 exports.getGlobalPage = getGlobalPage;
 exports.getPageApi = getPageApi;
 exports.getScreen = getScreen;
+exports.interceptRequest = interceptRequest;
 exports.openPage = openPage;
+exports.prepareFile = prepareFile;
 exports.screen = screen;
 exports.serverHostName = serverHostName;
 exports.serverPort = serverPort;