test(e2e): setup coverage (client)

[hi-ogawa]

• a part of test: e2e coverage #58

todo

• try sourcemap: "inline" in client config (via patch-package)
• refactor coverage helper

[hi-ogawa]

playwright and c8 don't work together out-of-box since chrome's coverage output json is:

example.json

    {
      "scriptId": "5",
      "url": "http://localhost:3001/build/_shared/chunk-M5F7E5FR.js",
      "functions": [
        {
          "functionName": "",
          "ranges": [
            {
              "startOffset": 0,
              "endOffset": 6229,
              "count": 1
            }
          ],
          "isBlockCoverage": true
        },
        {
          "functionName": "useModal",
          "ranges": [
            {
              "startOffset": 286,
              "endOffset": 441,
              "count": 0
            }
          ],
          "isBlockCoverage": false
        },
        {
          "functionName": "ModalProvider",
          "ranges": [
            {
              "startOffset": 462,
              "endOffset": 1867,
              "count": 3
            }
          ],
          "isBlockCoverage": true
        },
        {
          "functionName": "openModal",
          "ranges": [
            {
              "startOffset": 588,
              "endOffset": 670,
              "count": 0
            }
          ],
          "isBlockCoverage": false
        },
        {
          "functionName": "closeModal",
          "ranges": [
            {
              "startOffset": 673,
              "endOffset": 725,
              "count": 0
            }
          ],
          "isBlockCoverage": false
        },
        {
          "functionName": "closeModalFinal",
          "ranges": [
            {
              "startOffset": 728,
              "endOffset": 808,
              "count": 0
            }
          ],
          "isBlockCoverage": false
        }
      ],
      "source": "import {\n  Qe\n} from \"/build/_shared/chunk-HW665I5A.js\";\nimport {\n  __toESM,\n  init_react,\n  require_react\n} from \"/build/_shared/chunk-EKQW2SDC.js\";\n\n// app/components/modal.tsx\ninit_react();\nvar React = __toESM(require_react());\nvar DefaultModalContext = React.createContext(void 0);\nfunction useModal() {\n  const value = React.useContext(DefaultModalContext);\n  if (!value)\n    throw new Error(\"ModalContext undefined\");\n  return value;\n}\nvar ModalProvider = ({ children }) => {\n  const [content, setContent] = React.useState();\n  const [state, setState] = React.useState(\"CLOSED\");\n  function openModal(content2) {\n    setContent(content2);\n    setState(\"OPEN\");\n  }\n  function closeModal() {\n    setState(\"CLOSING\");\n  }\n  function closeModalFinal() {\n    setContent(void 0);\n    setState(\"CLOSED\");\n  }\n  return /* @__PURE__ */ React.createElement(DefaultModalContext.Provider, {\n    value: { openModal, closeModal }\n  }, children, /* @__PURE__ */ React.createElement(Qe, {\n    appear: true,\n    show: state === \"OPEN\"\n  }, /* @__PURE__ */ React.createElement(\"div\", {\n    className: \"absolute inset-0 z-50 flex justify-center items-center\"\n  }, /* @__PURE__ */ React.createElement(Qe.Child, {\n    className: \"transition duration-300 absolute inset-0 z-[-1]\",\n    enterFrom: \"opacity-0\",\n    enterTo: \"opacity-100\",\n    leaveFrom: \"opacity-100\",\n    leaveTo: \"opacity-0\"\n  }, /* @__PURE__ */ React.createElement(\"div\", {\n    className: \"absolute inset-0 bg-black/[0.3]\",\n    onClick: closeModal\n  })), /* @__PURE__ */ React.createElement(Qe.Child, {\n    className: \"w-full max-w-xl\",\n    enter: \"transition duration-300\",\n    enterFrom: \"opacity-0 scale-95\",\n    enterTo: \"opacity-100 scale-100\",\n    leave: \"transition duration-300\",\n    leaveFrom: \"opacity-100 scale-100\",\n    leaveTo: \"opacity-0 scale-95\",\n    afterLeave: closeModalFinal\n  }, content))));\n};\n\nexport {\n  useModal,\n  ModalProvider\n};\n//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiLi4vLi4vLi4vLi4vLi4vLi4vYXBwL2NvbXBvbmVudHMvbW9kYWwudHN4Il0sCiAgInNvdXJjZXNDb250ZW50IjogWyJpbXBvcnQgeyBUcmFuc2l0aW9uIH0gZnJvbSBcIkBoZWFkbGVzc3VpL3JlYWN0XCI7XG5pbXBvcnQgKiBhcyBSZWFjdCBmcm9tIFwicmVhY3RcIjtcblxuaW50ZXJmYWNlIE1vZGFsQ29udGV4dCB7XG4gIG9wZW5Nb2RhbDogKGNvbnRlbnQ6IFJlYWN0LlJlYWN0Tm9kZSkgPT4gdm9pZDtcbiAgY2xvc2VNb2RhbDogKCkgPT4gdm9pZDtcbn1cblxuY29uc3QgRGVmYXVsdE1vZGFsQ29udGV4dCA9IFJlYWN0LmNyZWF0ZUNvbnRleHQ8TW9kYWxDb250ZXh0IHwgdW5kZWZpbmVkPihcbiAgdW5kZWZpbmVkXG4pO1xuXG5leHBvcnQgZnVuY3Rpb24gdXNlTW9kYWwoKTogTW9kYWxDb250ZXh0IHtcbiAgY29uc3QgdmFsdWUgPSBSZWFjdC51c2VDb250ZXh0KERlZmF1bHRNb2RhbENvbnRleHQpO1xuICBpZiAoIXZhbHVlKSB0aHJvdyBuZXcgRXJyb3IoXCJNb2RhbENvbnRleHQgdW5kZWZpbmVkXCIpO1xuICByZXR1cm4gdmFsdWU7XG59XG5cbnR5cGUgTW9kYWxTdGF0ZSA9IFwiT1BFTlwiIHwgXCJDTE9TSU5HXCIgfCBcIkNMT1NFRFwiO1xuXG5leHBvcnQgY29uc3QgTW9kYWxQcm92aWRlcjogUmVhY3QuRkMgPSAoeyBjaGlsZHJlbiB9KSA9PiB7XG4gIGNvbnN0IFtjb250ZW50LCBzZXRDb250ZW50XSA9IFJlYWN0LnVzZVN0YXRlPFJlYWN0LlJlYWN0Tm9kZT4oKTtcbiAgY29uc3QgW3N0YXRlLCBzZXRTdGF0ZV0gPSBSZWFjdC51c2VTdGF0ZTxNb2RhbFN0YXRlPihcIkNMT1NFRFwiKTtcblxuICBmdW5jdGlvbiBvcGVuTW9kYWwoY29udGVudDogUmVhY3QuUmVhY3ROb2RlKSB7XG4gICAgc2V0Q29udGVudChjb250ZW50KTtcbiAgICBzZXRTdGF0ZShcIk9QRU5cIik7XG4gIH1cblxuICBmdW5jdGlvbiBjbG9zZU1vZGFsKCkge1xuICAgIHNldFN0YXRlKFwiQ0xPU0lOR1wiKTtcbiAgfVxuXG4gIGZ1bmN0aW9uIGNsb3NlTW9kYWxGaW5hbCgpIHtcbiAgICBzZXRDb250ZW50KHVuZGVmaW5lZCk7XG4gICAgc2V0U3RhdGUoXCJDTE9TRURcIik7XG4gIH1cblxuICByZXR1cm4gKFxuICAgIDxEZWZhdWx0TW9kYWxDb250ZXh0LlByb3ZpZGVyIHZhbHVlPXt7IG9wZW5Nb2RhbCwgY2xvc2VNb2RhbCB9fT5cbiAgICAgIHtjaGlsZHJlbn1cbiAgICAgIDxUcmFuc2l0aW9uIGFwcGVhciBzaG93PXtzdGF0ZSA9PT0gXCJPUEVOXCJ9PlxuICAgICAgICA8ZGl2IGNsYXNzTmFtZT1cImFic29sdXRlIGluc2V0LTAgei01MCBmbGV4IGp1c3RpZnktY2VudGVyIGl0ZW1zLWNlbnRlclwiPlxuICAgICAgICAgIDxUcmFuc2l0aW9uLkNoaWxkXG4gICAgICAgICAgICBjbGFzc05hbWU9XCJ0cmFuc2l0aW9uIGR1cmF0aW9uLTMwMCBhYnNvbHV0ZSBpbnNldC0wIHotWy0xXVwiXG4gICAgICAgICAgICBlbnRlckZyb209XCJvcGFjaXR5LTBcIlxuICAgICAgICAgICAgZW50ZXJUbz1cIm9wYWNpdHktMTAwXCJcbiAgICAgICAgICAgIGxlYXZlRnJvbT1cIm9wYWNpdHktMTAwXCJcbiAgICAgICAgICAgIGxlYXZlVG89XCJvcGFjaXR5LTBcIlxuICAgICAgICAgID5cbiAgICAgICAgICAgIDxkaXZcbiAgICAgICAgICAgICAgY2xhc3NOYW1lPVwiYWJzb2x1dGUgaW5zZXQtMCBiZy1ibGFjay9bMC4zXVwiXG4gICAgICAgICAgICAgIG9uQ2xpY2s9e2Nsb3NlTW9kYWx9XG4gICAgICAgICAgICAvPlxuICAgICAgICAgIDwvVHJhbnNpdGlvbi5DaGlsZD5cbiAgICAgICAgICA8VHJhbnNpdGlvbi5DaGlsZFxuICAgICAgICAgICAgY2xhc3NOYW1lPVwidy1mdWxsIG1heC13LXhsXCIgLy8gVE9ETzogb3B0aW9ucyBmb3IgYG9wZW5Nb2RhbGBcbiAgICAgICAgICAgIGVudGVyPVwidHJhbnNpdGlvbiBkdXJhdGlvbi0zMDBcIlxuICAgICAgICAgICAgZW50ZXJGcm9tPVwib3BhY2l0eS0wIHNjYWxlLTk1XCJcbiAgICAgICAgICAgIGVudGVyVG89XCJvcGFjaXR5LTEwMCBzY2FsZS0xMDBcIlxuICAgICAgICAgICAgbGVhdmU9XCJ0cmFuc2l0aW9uIGR1cmF0aW9uLTMwMFwiXG4gICAgICAgICAgICBsZWF2ZUZyb209XCJvcGFjaXR5LTEwMCBzY2FsZS0xMDBcIlxuICAgICAgICAgICAgbGVhdmVUbz1cIm9wYWNpdHktMCBzY2FsZS05NVwiXG4gICAgICAgICAgICBhZnRlckxlYXZlPXtjbG9zZU1vZGFsRmluYWx9XG4gICAgICAgICAgPlxuICAgICAgICAgICAge2NvbnRlbnR9XG4gICAgICAgICAgPC9UcmFuc2l0aW9uLkNoaWxkPlxuICAgICAgICA8L2Rpdj5cbiAgICAgIDwvVHJhbnNpdGlvbj5cbiAgICA8L0RlZmF1bHRNb2RhbENvbnRleHQuUHJvdmlkZXI+XG4gICk7XG59O1xuIl0sCiAgIm1hcHBpbmdzIjogIjs7Ozs7Ozs7OztBQUFBO0FBQ0EsWUFBdUI7QUFPdkIsSUFBTSxzQkFBc0IsQUFBTSxvQkFDaEM7QUFHSyxvQkFBa0M7QUFDdkMsUUFBTSxRQUFRLEFBQU0saUJBQVc7QUFDL0IsTUFBSSxDQUFDO0FBQU8sVUFBTSxJQUFJLE1BQU07QUFDNUIsU0FBTztBQUFBO0FBS0YsSUFBTSxnQkFBMEIsQ0FBQyxFQUFFLGVBQWU7QUFDdkQsUUFBTSxDQUFDLFNBQVMsY0FBYyxBQUFNO0FBQ3BDLFFBQU0sQ0FBQyxPQUFPLFlBQVksQUFBTSxlQUFxQjtBQUVyRCxxQkFBbUIsVUFBMEI7QUFDM0MsZUFBVztBQUNYLGFBQVM7QUFBQTtBQUdYLHdCQUFzQjtBQUNwQixhQUFTO0FBQUE7QUFHWCw2QkFBMkI7QUFDekIsZUFBVztBQUNYLGFBQVM7QUFBQTtBQUdYLFNBQ0Usb0NBQUMsb0JBQW9CLFVBQXJCO0FBQUEsSUFBOEIsT0FBTyxFQUFFLFdBQVc7QUFBQSxLQUMvQyxVQUNELG9DQUFDLElBQUQ7QUFBQSxJQUFZLFFBQU07QUFBQSxJQUFDLE1BQU0sVUFBVTtBQUFBLEtBQ2pDLG9DQUFDLE9BQUQ7QUFBQSxJQUFLLFdBQVU7QUFBQSxLQUNiLG9DQUFDLEdBQVcsT0FBWjtBQUFBLElBQ0UsV0FBVTtBQUFBLElBQ1YsV0FBVTtBQUFBLElBQ1YsU0FBUTtBQUFBLElBQ1IsV0FBVTtBQUFBLElBQ1YsU0FBUTtBQUFBLEtBRVIsb0NBQUMsT0FBRDtBQUFBLElBQ0UsV0FBVTtBQUFBLElBQ1YsU0FBUztBQUFBLE9BR2Isb0NBQUMsR0FBVyxPQUFaO0FBQUEsSUFDRSxXQUFVO0FBQUEsSUFDVixPQUFNO0FBQUEsSUFDTixXQUFVO0FBQUEsSUFDVixTQUFRO0FBQUEsSUFDUixPQUFNO0FBQUEsSUFDTixXQUFVO0FBQUEsSUFDVixTQUFRO0FBQUEsSUFDUixZQUFZO0FBQUEsS0FFWDtBQUFBOyIsCiAgIm5hbWVzIjogW10KfQo=\n"
    },
...

But, probably it would work fine if we preprocess this json file to replace "url" to be the local path in stead of localhost url.
For example, remix's client output is always under http://localshot:3001/build/..., so it would be easy to transform.

references

• c8
  • normalizing source file path https://github.com/bcoe/c8/blob/49c45b3395e3354c2463cf40247c6c8eab4bbe1c/lib/report.js#L257-L297
  • reading the original file and extracting sourcemap https://github.com/bcoe/c8/blob/49c45b3395e3354c2463cf40247c6c8eab4bbe1c/lib/source-map-from-file.js#L32-L50

[hi-ogawa]

After a few hacks, this seems to work already:

E2E_COVERAGE=1 npm run test-e2e app/__e2e__/basic.test.ts
npx c8 report -r text -r html --all --src app --exclude build --exclude packages --exclude-after-remap --temp-directory coverage/tmp-client

[hi-ogawa]

will work on merging all coverage information in the separate PR