creevey 0.9.0-non-webpack.2.fix-capture-element → 0.9.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (535) hide show
  1. package/.yarnrc.yml +1 -0
  2. package/CHANGELOG.md +51 -0
  3. package/README.md +4 -3
  4. package/dist/cli.d.ts +2 -0
  5. package/dist/cli.js +5 -0
  6. package/dist/cli.js.map +1 -0
  7. package/dist/client/addon/components/Addon.d.ts +8 -0
  8. package/dist/client/addon/components/Addon.js +57 -0
  9. package/dist/client/addon/components/Addon.js.map +1 -0
  10. package/{lib/types → dist}/client/addon/components/Icons.d.ts +7 -7
  11. package/dist/client/addon/components/Icons.js +18 -0
  12. package/dist/client/addon/components/Icons.js.map +1 -0
  13. package/{lib/types → dist}/client/addon/components/Panel.d.ts +9 -9
  14. package/dist/client/addon/components/Panel.js +35 -0
  15. package/dist/client/addon/components/Panel.js.map +1 -0
  16. package/{lib/types → dist}/client/addon/components/TestSelect.d.ts +8 -8
  17. package/dist/client/addon/components/TestSelect.js +33 -0
  18. package/dist/client/addon/components/TestSelect.js.map +1 -0
  19. package/dist/client/addon/components/Tools.d.ts +6 -0
  20. package/dist/client/addon/components/Tools.js +89 -0
  21. package/dist/client/addon/components/Tools.js.map +1 -0
  22. package/{lib/types/client/addon/Manager.d.ts → dist/client/addon/controller.d.ts} +38 -37
  23. package/dist/client/addon/controller.js +208 -0
  24. package/dist/client/addon/controller.js.map +1 -0
  25. package/dist/client/addon/decorator.d.ts +1 -0
  26. package/dist/client/addon/decorator.js +6 -0
  27. package/dist/client/addon/decorator.js.map +1 -0
  28. package/dist/client/addon/index.d.ts +2 -0
  29. package/dist/client/addon/index.js +19 -0
  30. package/dist/client/addon/index.js.map +1 -0
  31. package/dist/client/addon/manager.d.ts +1 -0
  32. package/dist/client/addon/manager.js +41 -0
  33. package/dist/client/addon/manager.js.map +1 -0
  34. package/dist/client/addon/preset.d.ts +2 -0
  35. package/dist/client/addon/preset.js +6 -0
  36. package/dist/client/addon/preset.js.map +1 -0
  37. package/dist/client/addon/preview.d.ts +4 -0
  38. package/dist/client/addon/preview.js +8 -0
  39. package/dist/client/addon/preview.js.map +1 -0
  40. package/{lib/types → dist}/client/addon/readyForCapture.d.ts +6 -6
  41. package/dist/client/addon/readyForCapture.js +7 -0
  42. package/dist/client/addon/readyForCapture.js.map +1 -0
  43. package/{lib/types → dist}/client/addon/utils.d.ts +3 -2
  44. package/dist/client/addon/utils.js +27 -0
  45. package/dist/client/addon/utils.js.map +1 -0
  46. package/{lib/types → dist}/client/addon/withCreevey.d.ts +25 -24
  47. package/dist/client/addon/withCreevey.js +286 -0
  48. package/dist/client/addon/withCreevey.js.map +1 -0
  49. package/dist/client/shared/components/ImagesView/BlendView.d.ts +5 -0
  50. package/dist/client/shared/components/ImagesView/BlendView.js +74 -0
  51. package/dist/client/shared/components/ImagesView/BlendView.js.map +1 -0
  52. package/dist/client/shared/components/ImagesView/ImagesView.d.ts +9 -0
  53. package/dist/client/shared/components/ImagesView/ImagesView.js +46 -0
  54. package/dist/client/shared/components/ImagesView/ImagesView.js.map +1 -0
  55. package/dist/client/shared/components/ImagesView/SideBySideView.d.ts +5 -0
  56. package/dist/client/shared/components/ImagesView/SideBySideView.js +121 -0
  57. package/dist/client/shared/components/ImagesView/SideBySideView.js.map +1 -0
  58. package/dist/client/shared/components/ImagesView/SlideView.d.ts +5 -0
  59. package/dist/client/shared/components/ImagesView/SlideView.js +136 -0
  60. package/dist/client/shared/components/ImagesView/SlideView.js.map +1 -0
  61. package/dist/client/shared/components/ImagesView/SwapView.d.ts +5 -0
  62. package/dist/client/shared/components/ImagesView/SwapView.js +72 -0
  63. package/dist/client/shared/components/ImagesView/SwapView.js.map +1 -0
  64. package/{lib/types/client/shared/components/ImagesView/ImagesView.d.ts → dist/client/shared/components/ImagesView/common.d.ts} +15 -24
  65. package/dist/client/shared/components/ImagesView/common.js +14 -0
  66. package/dist/client/shared/components/ImagesView/common.js.map +1 -0
  67. package/dist/client/shared/components/ImagesView/index.d.ts +5 -0
  68. package/dist/client/shared/components/ImagesView/index.js +14 -0
  69. package/dist/client/shared/components/ImagesView/index.js.map +1 -0
  70. package/dist/client/shared/components/PageFooter/PageFooter.d.ts +6 -0
  71. package/dist/client/shared/components/PageFooter/PageFooter.js +20 -0
  72. package/dist/client/shared/components/PageFooter/PageFooter.js.map +1 -0
  73. package/{lib/types → dist}/client/shared/components/PageFooter/Paging.d.ts +7 -7
  74. package/dist/client/shared/components/PageFooter/Paging.js +51 -0
  75. package/dist/client/shared/components/PageFooter/Paging.js.map +1 -0
  76. package/{lib/types → dist}/client/shared/components/PageHeader/ImagePreview.d.ts +14 -12
  77. package/dist/client/shared/components/PageHeader/ImagePreview.js +61 -0
  78. package/dist/client/shared/components/PageHeader/ImagePreview.js.map +1 -0
  79. package/{lib/types → dist}/client/shared/components/PageHeader/PageHeader.d.ts +14 -16
  80. package/dist/client/shared/components/PageHeader/PageHeader.js +93 -0
  81. package/dist/client/shared/components/PageHeader/PageHeader.js.map +1 -0
  82. package/dist/client/shared/components/ResultsPage.d.ts +20 -0
  83. package/dist/client/shared/components/ResultsPage.js +87 -0
  84. package/dist/client/shared/components/ResultsPage.js.map +1 -0
  85. package/{lib/types → dist}/client/shared/creeveyClientApi.d.ts +10 -9
  86. package/dist/client/shared/creeveyClientApi.js +56 -0
  87. package/dist/client/shared/creeveyClientApi.js.map +1 -0
  88. package/{lib/types → dist}/client/shared/helpers.d.ts +47 -46
  89. package/dist/client/shared/helpers.js +396 -0
  90. package/dist/client/shared/helpers.js.map +1 -0
  91. package/{lib/types → dist}/client/shared/viewMode.d.ts +4 -4
  92. package/dist/client/shared/viewMode.js +11 -0
  93. package/dist/client/shared/viewMode.js.map +1 -0
  94. package/dist/client/web/202.js +1 -0
  95. package/dist/client/web/270.js +43 -0
  96. package/dist/client/web/752.js +1 -0
  97. package/{lib/types → dist}/client/web/CreeveyApp.d.ts +11 -11
  98. package/dist/client/web/CreeveyApp.js +167 -0
  99. package/dist/client/web/CreeveyApp.js.map +1 -0
  100. package/{lib/types → dist}/client/web/CreeveyContext.d.ts +14 -11
  101. package/dist/client/web/CreeveyContext.js +41 -0
  102. package/dist/client/web/CreeveyContext.js.map +1 -0
  103. package/dist/client/web/CreeveyLoader.d.ts +3 -0
  104. package/dist/client/web/CreeveyLoader.js +52 -0
  105. package/dist/client/web/CreeveyLoader.js.map +1 -0
  106. package/{lib/types → dist}/client/web/CreeveyView/SideBar/Checkbox.d.ts +22 -19
  107. package/dist/client/web/CreeveyView/SideBar/Checkbox.js +86 -0
  108. package/dist/client/web/CreeveyView/SideBar/Checkbox.js.map +1 -0
  109. package/{lib/types → dist}/client/web/CreeveyView/SideBar/Search.d.ts +6 -6
  110. package/dist/client/web/CreeveyView/SideBar/Search.js +125 -0
  111. package/dist/client/web/CreeveyView/SideBar/Search.js.map +1 -0
  112. package/{lib/types → dist}/client/web/CreeveyView/SideBar/SideBar.d.ts +14 -14
  113. package/dist/client/web/CreeveyView/SideBar/SideBar.js +111 -0
  114. package/dist/client/web/CreeveyView/SideBar/SideBar.js.map +1 -0
  115. package/dist/client/web/CreeveyView/SideBar/SideBarFooter.d.ts +1 -0
  116. package/dist/client/web/CreeveyView/SideBar/SideBarFooter.js +32 -0
  117. package/dist/client/web/CreeveyView/SideBar/SideBarFooter.js.map +1 -0
  118. package/{lib/types → dist}/client/web/CreeveyView/SideBar/SideBarHeader.d.ts +12 -12
  119. package/dist/client/web/CreeveyView/SideBar/SideBarHeader.js +113 -0
  120. package/dist/client/web/CreeveyView/SideBar/SideBarHeader.js.map +1 -0
  121. package/dist/client/web/CreeveyView/SideBar/SuiteLink.d.ts +43 -0
  122. package/dist/client/web/CreeveyView/SideBar/SuiteLink.js +123 -0
  123. package/dist/client/web/CreeveyView/SideBar/SuiteLink.js.map +1 -0
  124. package/{lib/types → dist}/client/web/CreeveyView/SideBar/TestLink.d.ts +7 -7
  125. package/dist/client/web/CreeveyView/SideBar/TestLink.js +64 -0
  126. package/dist/client/web/CreeveyView/SideBar/TestLink.js.map +1 -0
  127. package/{lib/types → dist}/client/web/CreeveyView/SideBar/TestStatusIcon.d.ts +12 -10
  128. package/dist/client/web/CreeveyView/SideBar/TestStatusIcon.js +59 -0
  129. package/dist/client/web/CreeveyView/SideBar/TestStatusIcon.js.map +1 -0
  130. package/dist/client/web/CreeveyView/SideBar/TestsStatus.d.ts +11 -0
  131. package/dist/client/web/CreeveyView/SideBar/TestsStatus.js +76 -0
  132. package/dist/client/web/CreeveyView/SideBar/TestsStatus.js.map +1 -0
  133. package/{lib/types → dist}/client/web/CreeveyView/SideBar/Toggle.d.ts +6 -6
  134. package/dist/client/web/CreeveyView/SideBar/Toggle.js +69 -0
  135. package/dist/client/web/CreeveyView/SideBar/Toggle.js.map +1 -0
  136. package/dist/client/web/CreeveyView/SideBar/index.d.ts +1 -0
  137. package/dist/client/web/CreeveyView/SideBar/index.js +6 -0
  138. package/dist/client/web/CreeveyView/SideBar/index.js.map +1 -0
  139. package/{lib/types → dist}/client/web/KeyboardEventsContext.d.ts +15 -13
  140. package/dist/client/web/KeyboardEventsContext.js +116 -0
  141. package/dist/client/web/KeyboardEventsContext.js.map +1 -0
  142. package/{lib/types → dist}/client/web/index.d.ts +4 -4
  143. package/{lib/cjs → dist}/client/web/index.html +12 -3
  144. package/dist/client/web/index.js +75 -0
  145. package/dist/client/web/index.js.map +1 -0
  146. package/dist/client/web/main.js +79 -0
  147. package/{lib/cjs → dist}/client/web/main.js.LICENSE.txt +0 -15
  148. package/{lib/types → dist}/creevey.d.ts +1 -1
  149. package/dist/creevey.js +52 -0
  150. package/dist/creevey.js.map +1 -0
  151. package/dist/index.d.ts +5 -0
  152. package/dist/index.js +24 -0
  153. package/dist/index.js.map +1 -0
  154. package/{lib/types → dist}/server/config.d.ts +4 -4
  155. package/dist/server/config.js +86 -0
  156. package/dist/server/config.js.map +1 -0
  157. package/{lib/types → dist}/server/docker.d.ts +7 -7
  158. package/dist/server/docker.js +122 -0
  159. package/dist/server/docker.js.map +1 -0
  160. package/{lib/types → dist}/server/index.d.ts +2 -2
  161. package/dist/server/index.js +47 -0
  162. package/dist/server/index.js.map +1 -0
  163. package/{lib/types → dist}/server/logger.d.ts +10 -10
  164. package/dist/server/logger.js +25 -0
  165. package/dist/server/logger.js.map +1 -0
  166. package/{lib/types → dist}/server/master/api.d.ts +7 -7
  167. package/dist/server/master/api.js +54 -0
  168. package/dist/server/master/api.js.map +1 -0
  169. package/dist/server/master/index.d.ts +3 -0
  170. package/dist/server/master/index.js +110 -0
  171. package/dist/server/master/index.js.map +1 -0
  172. package/{lib/types → dist}/server/master/master.d.ts +7 -7
  173. package/dist/server/master/master.js +40 -0
  174. package/dist/server/master/master.js.map +1 -0
  175. package/{lib/types → dist}/server/master/pool.d.ts +30 -31
  176. package/dist/server/master/pool.js +186 -0
  177. package/dist/server/master/pool.js.map +1 -0
  178. package/{lib/types → dist}/server/master/runner.d.ts +23 -26
  179. package/dist/server/master/runner.js +222 -0
  180. package/dist/server/master/runner.js.map +1 -0
  181. package/dist/server/master/server.d.ts +2 -0
  182. package/dist/server/master/server.js +114 -0
  183. package/dist/server/master/server.js.map +1 -0
  184. package/{lib/types → dist}/server/messages.d.ts +26 -27
  185. package/dist/server/messages.js +222 -0
  186. package/dist/server/messages.js.map +1 -0
  187. package/{lib/types → dist}/server/selenium/browser.d.ts +19 -17
  188. package/dist/server/selenium/browser.js +640 -0
  189. package/dist/server/selenium/browser.js.map +1 -0
  190. package/dist/server/selenium/index.d.ts +2 -0
  191. package/dist/server/selenium/index.js +19 -0
  192. package/dist/server/selenium/index.js.map +1 -0
  193. package/{lib/types → dist}/server/selenium/selenoid.d.ts +3 -3
  194. package/dist/server/selenium/selenoid.js +120 -0
  195. package/dist/server/selenium/selenoid.js.map +1 -0
  196. package/dist/server/stories.d.ts +3 -0
  197. package/dist/server/stories.js +92 -0
  198. package/dist/server/stories.js.map +1 -0
  199. package/dist/server/storybook/providers/browser.d.ts +2 -0
  200. package/dist/server/storybook/providers/browser.js +60 -0
  201. package/dist/server/storybook/providers/browser.js.map +1 -0
  202. package/dist/server/storybook/providers/hybrid.d.ts +2 -0
  203. package/dist/server/storybook/providers/hybrid.js +59 -0
  204. package/dist/server/storybook/providers/hybrid.js.map +1 -0
  205. package/dist/server/telemetry.d.ts +2 -0
  206. package/dist/server/telemetry.js +196 -0
  207. package/dist/server/telemetry.js.map +1 -0
  208. package/{lib/types → dist}/server/testsFiles/parser.d.ts +8 -12
  209. package/dist/server/testsFiles/parser.js +50 -0
  210. package/dist/server/testsFiles/parser.js.map +1 -0
  211. package/dist/server/update.d.ts +2 -0
  212. package/dist/server/update.js +53 -0
  213. package/dist/server/update.js.map +1 -0
  214. package/dist/server/utils.d.ts +25 -0
  215. package/dist/server/utils.js +157 -0
  216. package/dist/server/utils.js.map +1 -0
  217. package/{lib/types → dist}/server/worker/chai-image.d.ts +5 -6
  218. package/dist/server/worker/chai-image.js +113 -0
  219. package/dist/server/worker/chai-image.js.map +1 -0
  220. package/{lib/types → dist}/server/worker/helpers.d.ts +8 -8
  221. package/dist/server/worker/helpers.js +57 -0
  222. package/dist/server/worker/helpers.js.map +1 -0
  223. package/dist/server/worker/index.d.ts +1 -0
  224. package/dist/server/worker/index.js +6 -0
  225. package/dist/server/worker/index.js.map +1 -0
  226. package/{lib/types → dist}/server/worker/reporter.d.ts +8 -8
  227. package/dist/server/worker/reporter.js +130 -0
  228. package/dist/server/worker/reporter.js.map +1 -0
  229. package/dist/server/worker/worker.d.ts +4 -0
  230. package/dist/server/worker/worker.js +212 -0
  231. package/dist/server/worker/worker.js.map +1 -0
  232. package/{lib/types → dist}/shared/index.d.ts +7 -7
  233. package/dist/shared/index.js +77 -0
  234. package/dist/shared/index.js.map +1 -0
  235. package/{lib/types → dist}/shared/serializeRegExp.d.ts +9 -9
  236. package/dist/shared/serializeRegExp.js +25 -0
  237. package/dist/shared/serializeRegExp.js.map +1 -0
  238. package/{lib/types → dist}/types.d.ts +461 -490
  239. package/dist/types.js +61 -0
  240. package/dist/types.js.map +1 -0
  241. package/docs/config.md +30 -30
  242. package/docs/tests.md +3 -3
  243. package/manager/package.json +3 -0
  244. package/package.json +116 -156
  245. package/preset/README.md +3 -0
  246. package/preset/package.json +3 -0
  247. package/preview/README.md +3 -0
  248. package/preview/package.json +3 -0
  249. package/src/cli.ts +3 -0
  250. package/src/client/addon/components/Addon.tsx +53 -0
  251. package/src/client/addon/components/Icons.tsx +28 -0
  252. package/src/client/addon/components/Panel.tsx +57 -0
  253. package/src/client/addon/components/TestSelect.tsx +48 -0
  254. package/src/client/addon/components/Tools.tsx +93 -0
  255. package/src/client/addon/controller.ts +224 -0
  256. package/src/client/addon/decorator.ts +3 -0
  257. package/src/client/addon/index.ts +2 -0
  258. package/src/client/addon/manager.ts +44 -0
  259. package/src/client/addon/preset.ts +3 -0
  260. package/src/client/addon/preview.ts +7 -0
  261. package/src/client/addon/readyForCapture.ts +9 -0
  262. package/src/client/addon/utils.tsx +24 -0
  263. package/src/client/addon/withCreevey.ts +326 -0
  264. package/src/client/shared/components/ImagesView/BlendView.tsx +71 -0
  265. package/src/client/shared/components/ImagesView/ImagesView.tsx +70 -0
  266. package/src/client/shared/components/ImagesView/SideBySideView.tsx +139 -0
  267. package/src/client/shared/components/ImagesView/SlideView.tsx +146 -0
  268. package/src/client/shared/components/ImagesView/SwapView.tsx +81 -0
  269. package/src/client/shared/components/ImagesView/common.ts +23 -0
  270. package/src/client/shared/components/ImagesView/index.ts +5 -0
  271. package/src/client/shared/components/PageFooter/PageFooter.tsx +26 -0
  272. package/src/client/shared/components/PageFooter/Paging.tsx +90 -0
  273. package/src/client/shared/components/PageHeader/ImagePreview.tsx +82 -0
  274. package/src/client/shared/components/PageHeader/PageHeader.tsx +129 -0
  275. package/src/client/shared/components/ResultsPage.tsx +122 -0
  276. package/src/client/shared/creeveyClientApi.ts +68 -0
  277. package/src/client/shared/helpers.ts +436 -0
  278. package/src/client/shared/viewMode.ts +10 -0
  279. package/src/client/web/CreeveyApp.tsx +230 -0
  280. package/src/client/web/CreeveyContext.tsx +26 -0
  281. package/src/client/web/CreeveyLoader.tsx +56 -0
  282. package/src/client/web/CreeveyView/SideBar/Checkbox.tsx +118 -0
  283. package/src/client/web/CreeveyView/SideBar/Search.tsx +140 -0
  284. package/src/client/web/CreeveyView/SideBar/SideBar.tsx +136 -0
  285. package/src/client/web/CreeveyView/SideBar/SideBarFooter.tsx +38 -0
  286. package/src/client/web/CreeveyView/SideBar/SideBarHeader.tsx +138 -0
  287. package/src/client/web/CreeveyView/SideBar/SuiteLink.tsx +137 -0
  288. package/src/client/web/CreeveyView/SideBar/TestLink.tsx +69 -0
  289. package/src/client/web/CreeveyView/SideBar/TestStatusIcon.tsx +64 -0
  290. package/src/client/web/CreeveyView/SideBar/TestsStatus.tsx +109 -0
  291. package/src/client/web/CreeveyView/SideBar/Toggle.tsx +85 -0
  292. package/src/client/web/CreeveyView/SideBar/index.ts +1 -0
  293. package/src/client/web/KeyboardEventsContext.tsx +121 -0
  294. package/src/client/web/index.html +28 -0
  295. package/src/client/web/index.tsx +63 -0
  296. package/src/creevey.ts +47 -0
  297. package/src/index.ts +4 -0
  298. package/src/server/config.ts +83 -0
  299. package/src/server/docker.ts +136 -0
  300. package/src/server/index.ts +51 -0
  301. package/{lib/esm/server/logger.js → src/server/logger.ts} +8 -7
  302. package/src/server/master/api.ts +59 -0
  303. package/src/server/master/index.ts +111 -0
  304. package/src/server/master/master.ts +47 -0
  305. package/src/server/master/pool.ts +203 -0
  306. package/src/server/master/runner.ts +245 -0
  307. package/src/server/master/server.ts +124 -0
  308. package/src/server/messages.ts +273 -0
  309. package/src/server/selenium/browser.ts +840 -0
  310. package/src/server/selenium/index.ts +2 -0
  311. package/src/server/selenium/selenoid.ts +154 -0
  312. package/src/server/stories.ts +133 -0
  313. package/src/server/storybook/providers/browser.ts +58 -0
  314. package/src/server/storybook/providers/hybrid.ts +70 -0
  315. package/src/server/telemetry.ts +212 -0
  316. package/src/server/testsFiles/parser.ts +62 -0
  317. package/src/server/update.ts +74 -0
  318. package/src/server/utils.ts +206 -0
  319. package/src/server/worker/chai-image.ts +147 -0
  320. package/src/server/worker/helpers.ts +61 -0
  321. package/src/server/worker/index.ts +1 -0
  322. package/src/server/worker/reporter.ts +170 -0
  323. package/src/server/worker/worker.ts +240 -0
  324. package/src/shared/index.ts +76 -0
  325. package/src/shared/serializeRegExp.ts +26 -0
  326. package/src/types.ts +501 -0
  327. package/types/chai.d.ts +0 -1
  328. package/types/global.d.ts +5 -0
  329. package/types/mocha.d.ts +1 -1
  330. package/addon/package.json +0 -4
  331. package/jest.config.js +0 -6
  332. package/lib/cjs/cli.js +0 -5
  333. package/lib/cjs/client/addon/Manager.js +0 -264
  334. package/lib/cjs/client/addon/components/Addon.js +0 -55
  335. package/lib/cjs/client/addon/components/Icons.js +0 -46
  336. package/lib/cjs/client/addon/components/Panel.js +0 -72
  337. package/lib/cjs/client/addon/components/TestSelect.js +0 -65
  338. package/lib/cjs/client/addon/components/Tools.js +0 -95
  339. package/lib/cjs/client/addon/decorator.js +0 -11
  340. package/lib/cjs/client/addon/index.js +0 -31
  341. package/lib/cjs/client/addon/preset.js +0 -62
  342. package/lib/cjs/client/addon/readyForCapture.js +0 -12
  343. package/lib/cjs/client/addon/register.js +0 -72
  344. package/lib/cjs/client/addon/utils.js +0 -38
  345. package/lib/cjs/client/addon/withCreevey.js +0 -346
  346. package/lib/cjs/client/shared/components/ImagesView/BlendView.js +0 -87
  347. package/lib/cjs/client/shared/components/ImagesView/ImagesView.js +0 -92
  348. package/lib/cjs/client/shared/components/ImagesView/SideBySideView.js +0 -154
  349. package/lib/cjs/client/shared/components/ImagesView/SlideView.js +0 -166
  350. package/lib/cjs/client/shared/components/ImagesView/SwapView.js +0 -91
  351. package/lib/cjs/client/shared/components/ImagesView/index.js +0 -45
  352. package/lib/cjs/client/shared/components/PageFooter/PageFooter.js +0 -50
  353. package/lib/cjs/client/shared/components/PageFooter/Paging.js +0 -94
  354. package/lib/cjs/client/shared/components/PageHeader/ImagePreview.js +0 -82
  355. package/lib/cjs/client/shared/components/PageHeader/PageHeader.js +0 -119
  356. package/lib/cjs/client/shared/components/ResultsPage.js +0 -143
  357. package/lib/cjs/client/shared/creeveyClientApi.js +0 -76
  358. package/lib/cjs/client/shared/helpers.js +0 -411
  359. package/lib/cjs/client/shared/viewMode.js +0 -17
  360. package/lib/cjs/client/web/142.js +0 -2
  361. package/lib/cjs/client/web/142.js.LICENSE.txt +0 -12
  362. package/lib/cjs/client/web/32.js +0 -1
  363. package/lib/cjs/client/web/551.js +0 -1
  364. package/lib/cjs/client/web/566.js +0 -2
  365. package/lib/cjs/client/web/566.js.LICENSE.txt +0 -31
  366. package/lib/cjs/client/web/691.js +0 -2
  367. package/lib/cjs/client/web/691.js.LICENSE.txt +0 -8
  368. package/lib/cjs/client/web/725.js +0 -1
  369. package/lib/cjs/client/web/main.js +0 -2
  370. package/lib/cjs/creevey.js +0 -69
  371. package/lib/cjs/index.js +0 -62
  372. package/lib/cjs/server/config.js +0 -96
  373. package/lib/cjs/server/docker.js +0 -146
  374. package/lib/cjs/server/extract.js +0 -50
  375. package/lib/cjs/server/index.js +0 -83
  376. package/lib/cjs/server/loaders/babel/creevey-plugin.js +0 -86
  377. package/lib/cjs/server/loaders/babel/helpers.js +0 -469
  378. package/lib/cjs/server/loaders/babel/register.js +0 -124
  379. package/lib/cjs/server/loaders/hooks/mdx.js +0 -30
  380. package/lib/cjs/server/loaders/hooks/svelte.js +0 -65
  381. package/lib/cjs/server/loaders/webpack/compile.js +0 -293
  382. package/lib/cjs/server/loaders/webpack/creevey-loader.js +0 -179
  383. package/lib/cjs/server/loaders/webpack/dummy-hmr.js +0 -39
  384. package/lib/cjs/server/loaders/webpack/mdx-loader.js +0 -72
  385. package/lib/cjs/server/loaders/webpack/start.js +0 -41
  386. package/lib/cjs/server/logger.js +0 -48
  387. package/lib/cjs/server/master/api.js +0 -75
  388. package/lib/cjs/server/master/index.js +0 -146
  389. package/lib/cjs/server/master/master.js +0 -57
  390. package/lib/cjs/server/master/pool.js +0 -197
  391. package/lib/cjs/server/master/runner.js +0 -281
  392. package/lib/cjs/server/master/server.js +0 -129
  393. package/lib/cjs/server/messages.js +0 -264
  394. package/lib/cjs/server/selenium/browser.js +0 -672
  395. package/lib/cjs/server/selenium/index.js +0 -31
  396. package/lib/cjs/server/selenium/selenoid.js +0 -172
  397. package/lib/cjs/server/stories.js +0 -159
  398. package/lib/cjs/server/storybook/entry.js +0 -70
  399. package/lib/cjs/server/storybook/helpers.js +0 -159
  400. package/lib/cjs/server/storybook/providers/browser.js +0 -74
  401. package/lib/cjs/server/storybook/providers/hybrid.js +0 -84
  402. package/lib/cjs/server/storybook/providers/nodejs.js +0 -239
  403. package/lib/cjs/server/testsFiles/parser.js +0 -72
  404. package/lib/cjs/server/testsFiles/register.js +0 -48
  405. package/lib/cjs/server/update.js +0 -79
  406. package/lib/cjs/server/utils.js +0 -183
  407. package/lib/cjs/server/worker/chai-image.js +0 -142
  408. package/lib/cjs/server/worker/helpers.js +0 -69
  409. package/lib/cjs/server/worker/index.js +0 -15
  410. package/lib/cjs/server/worker/reporter.js +0 -108
  411. package/lib/cjs/server/worker/worker.js +0 -268
  412. package/lib/cjs/shared/index.js +0 -101
  413. package/lib/cjs/shared/serializeRegExp.js +0 -42
  414. package/lib/cjs/types.js +0 -74
  415. package/lib/esm/cli.js +0 -4
  416. package/lib/esm/client/addon/Manager.js +0 -248
  417. package/lib/esm/client/addon/components/Addon.js +0 -39
  418. package/lib/esm/client/addon/components/Icons.js +0 -31
  419. package/lib/esm/client/addon/components/Panel.js +0 -53
  420. package/lib/esm/client/addon/components/TestSelect.js +0 -51
  421. package/lib/esm/client/addon/components/Tools.js +0 -74
  422. package/lib/esm/client/addon/decorator.js +0 -2
  423. package/lib/esm/client/addon/index.js +0 -2
  424. package/lib/esm/client/addon/preset.js +0 -41
  425. package/lib/esm/client/addon/readyForCapture.js +0 -5
  426. package/lib/esm/client/addon/register.js +0 -51
  427. package/lib/esm/client/addon/utils.js +0 -31
  428. package/lib/esm/client/addon/withCreevey.js +0 -322
  429. package/lib/esm/client/shared/components/ImagesView/BlendView.js +0 -67
  430. package/lib/esm/client/shared/components/ImagesView/ImagesView.js +0 -69
  431. package/lib/esm/client/shared/components/ImagesView/SideBySideView.js +0 -131
  432. package/lib/esm/client/shared/components/ImagesView/SlideView.js +0 -143
  433. package/lib/esm/client/shared/components/ImagesView/SwapView.js +0 -71
  434. package/lib/esm/client/shared/components/ImagesView/index.js +0 -5
  435. package/lib/esm/client/shared/components/PageFooter/PageFooter.js +0 -36
  436. package/lib/esm/client/shared/components/PageFooter/Paging.js +0 -80
  437. package/lib/esm/client/shared/components/PageHeader/ImagePreview.js +0 -68
  438. package/lib/esm/client/shared/components/PageHeader/PageHeader.js +0 -97
  439. package/lib/esm/client/shared/components/ResultsPage.js +0 -115
  440. package/lib/esm/client/shared/creeveyClientApi.js +0 -67
  441. package/lib/esm/client/shared/helpers.js +0 -353
  442. package/lib/esm/client/shared/viewMode.js +0 -6
  443. package/lib/esm/creevey.js +0 -54
  444. package/lib/esm/index.js +0 -5
  445. package/lib/esm/server/config.js +0 -73
  446. package/lib/esm/server/docker.js +0 -123
  447. package/lib/esm/server/extract.js +0 -34
  448. package/lib/esm/server/index.js +0 -64
  449. package/lib/esm/server/loaders/babel/creevey-plugin.js +0 -72
  450. package/lib/esm/server/loaders/babel/helpers.js +0 -452
  451. package/lib/esm/server/loaders/babel/register.js +0 -103
  452. package/lib/esm/server/loaders/hooks/mdx.js +0 -15
  453. package/lib/esm/server/loaders/hooks/svelte.js +0 -49
  454. package/lib/esm/server/loaders/webpack/compile.js +0 -270
  455. package/lib/esm/server/loaders/webpack/creevey-loader.js +0 -158
  456. package/lib/esm/server/loaders/webpack/dummy-hmr.js +0 -32
  457. package/lib/esm/server/loaders/webpack/mdx-loader.js +0 -58
  458. package/lib/esm/server/loaders/webpack/start.js +0 -27
  459. package/lib/esm/server/master/api.js +0 -64
  460. package/lib/esm/server/master/index.js +0 -125
  461. package/lib/esm/server/master/master.js +0 -38
  462. package/lib/esm/server/master/pool.js +0 -176
  463. package/lib/esm/server/master/runner.js +0 -259
  464. package/lib/esm/server/master/server.js +0 -105
  465. package/lib/esm/server/messages.js +0 -232
  466. package/lib/esm/server/selenium/browser.js +0 -639
  467. package/lib/esm/server/selenium/index.js +0 -2
  468. package/lib/esm/server/selenium/selenoid.js +0 -149
  469. package/lib/esm/server/stories.js +0 -140
  470. package/lib/esm/server/storybook/entry.js +0 -46
  471. package/lib/esm/server/storybook/helpers.js +0 -98
  472. package/lib/esm/server/storybook/providers/browser.js +0 -60
  473. package/lib/esm/server/storybook/providers/hybrid.js +0 -64
  474. package/lib/esm/server/storybook/providers/nodejs.js +0 -217
  475. package/lib/esm/server/testsFiles/parser.js +0 -50
  476. package/lib/esm/server/testsFiles/register.js +0 -35
  477. package/lib/esm/server/update.js +0 -61
  478. package/lib/esm/server/utils.js +0 -142
  479. package/lib/esm/server/worker/chai-image.js +0 -130
  480. package/lib/esm/server/worker/helpers.js +0 -60
  481. package/lib/esm/server/worker/index.js +0 -1
  482. package/lib/esm/server/worker/reporter.js +0 -86
  483. package/lib/esm/server/worker/worker.js +0 -238
  484. package/lib/esm/shared/index.js +0 -78
  485. package/lib/esm/shared/serializeRegExp.js +0 -24
  486. package/lib/esm/types.js +0 -43
  487. package/lib/types/cli.d.ts +0 -1
  488. package/lib/types/client/addon/components/Addon.d.ts +0 -8
  489. package/lib/types/client/addon/components/Tools.d.ts +0 -6
  490. package/lib/types/client/addon/decorator.d.ts +0 -1
  491. package/lib/types/client/addon/index.d.ts +0 -2
  492. package/lib/types/client/addon/preset.d.ts +0 -23
  493. package/lib/types/client/addon/register.d.ts +0 -3
  494. package/lib/types/client/shared/components/ImagesView/BlendView.d.ts +0 -3
  495. package/lib/types/client/shared/components/ImagesView/SideBySideView.d.ts +0 -3
  496. package/lib/types/client/shared/components/ImagesView/SlideView.d.ts +0 -3
  497. package/lib/types/client/shared/components/ImagesView/SwapView.d.ts +0 -3
  498. package/lib/types/client/shared/components/ImagesView/index.d.ts +0 -5
  499. package/lib/types/client/shared/components/PageFooter/PageFooter.d.ts +0 -8
  500. package/lib/types/client/shared/components/ResultsPage.d.ts +0 -18
  501. package/lib/types/client/web/CreeveyLoader.d.ts +0 -2
  502. package/lib/types/client/web/CreeveyView/SideBar/SuiteLink.d.ts +0 -33
  503. package/lib/types/client/web/CreeveyView/SideBar/TestsStatus.d.ts +0 -9
  504. package/lib/types/client/web/CreeveyView/SideBar/index.d.ts +0 -1
  505. package/lib/types/index.d.ts +0 -2
  506. package/lib/types/server/extract.d.ts +0 -2
  507. package/lib/types/server/loaders/babel/creevey-plugin.d.ts +0 -1
  508. package/lib/types/server/loaders/babel/helpers.d.ts +0 -19
  509. package/lib/types/server/loaders/babel/register.d.ts +0 -5
  510. package/lib/types/server/loaders/hooks/mdx.d.ts +0 -1
  511. package/lib/types/server/loaders/hooks/svelte.d.ts +0 -1
  512. package/lib/types/server/loaders/webpack/compile.d.ts +0 -2
  513. package/lib/types/server/loaders/webpack/creevey-loader.d.ts +0 -4
  514. package/lib/types/server/loaders/webpack/dummy-hmr.d.ts +0 -10
  515. package/lib/types/server/loaders/webpack/mdx-loader.d.ts +0 -6
  516. package/lib/types/server/loaders/webpack/start.d.ts +0 -1
  517. package/lib/types/server/master/index.d.ts +0 -3
  518. package/lib/types/server/master/server.d.ts +0 -2
  519. package/lib/types/server/selenium/index.d.ts +0 -2
  520. package/lib/types/server/stories.d.ts +0 -8
  521. package/lib/types/server/storybook/entry.d.ts +0 -18
  522. package/lib/types/server/storybook/helpers.d.ts +0 -24
  523. package/lib/types/server/storybook/providers/browser.d.ts +0 -4
  524. package/lib/types/server/storybook/providers/hybrid.d.ts +0 -4
  525. package/lib/types/server/storybook/providers/nodejs.d.ts +0 -9
  526. package/lib/types/server/testsFiles/register.d.ts +0 -2
  527. package/lib/types/server/update.d.ts +0 -2
  528. package/lib/types/server/utils.d.ts +0 -20
  529. package/lib/types/server/worker/index.d.ts +0 -1
  530. package/lib/types/server/worker/worker.d.ts +0 -4
  531. package/preset.js +0 -9
  532. package/types/babel__register.d.ts +0 -1
  533. package/types/event-source-polyfill.d.ts +0 -6
  534. package/types/mdx.d.ts +0 -7
  535. /package/{addon → manager}/README.md +0 -0
@@ -0,0 +1,326 @@
1
+ import * as Events from '@storybook/core-events';
2
+ import type { PreviewWeb } from '@storybook/preview-web';
3
+ import type { AnyFramework, StoryContextForEnhancers } from '@storybook/csf';
4
+ import type { StoryStore } from '@storybook/client-api';
5
+ import { makeDecorator } from '@storybook/preview-api';
6
+ import { Channel } from '@storybook/channels';
7
+ import { CaptureOptions, CreeveyStoryParams, isObject, noop, StoriesRaw, StorybookGlobals } from '../../types.js';
8
+ import { serializeRawStories } from '../../shared/index.js';
9
+ import { getConnectionUrl } from '../shared/helpers.js';
10
+
11
+ declare global {
12
+ interface Window {
13
+ __CREEVEY_SERVER_HOST__: string;
14
+ __CREEVEY_SERVER_PORT__: number;
15
+ __CREEVEY_WORKER_ID__: number;
16
+ __CREEVEY_GET_STORIES__: () => Promise<StoriesRaw | undefined>;
17
+ __CREEVEY_SELECT_STORY__: (
18
+ storyId: string,
19
+ shouldWaitForReady: boolean,
20
+ callback: (response: [error?: string | null, isCaptureCalled?: boolean]) => void,
21
+ ) => Promise<void>;
22
+ __CREEVEY_UPDATE_GLOBALS__: (globals: StorybookGlobals) => void;
23
+ __CREEVEY_INSERT_IGNORE_STYLES__: (ignoreElements: string[]) => HTMLStyleElement;
24
+ __CREEVEY_REMOVE_IGNORE_STYLES__: (ignoreStyles: HTMLStyleElement) => void;
25
+ __CREEVEY_HAS_PLAY_COMPLETED_YET__: (callback: (isPlayCompleted: boolean) => void) => void;
26
+ __CREEVEY_SET_READY_FOR_CAPTURE__?: () => void;
27
+ __STORYBOOK_ADDONS_CHANNEL__: Channel;
28
+ __STORYBOOK_STORY_STORE__: StoryStore<AnyFramework>;
29
+ __STORYBOOK_PREVIEW__: PreviewWeb<AnyFramework>;
30
+ }
31
+ }
32
+
33
+ interface CreeveyTestsState {
34
+ setStoriesCounter?: number;
35
+ creeveyHost?: string;
36
+ creeveyPort?: number;
37
+ isTestBrowser?: boolean;
38
+ }
39
+
40
+ const disableAnimationsStyles = `
41
+ *,
42
+ *:hover,
43
+ *::before,
44
+ *::after {
45
+ animation-delay: -0.0001ms !important;
46
+ animation-duration: 0s !important;
47
+ animation-play-state: paused !important;
48
+ cursor: none !important;
49
+ caret-color: transparent !important;
50
+ transition: 0s !important;
51
+ }
52
+ `;
53
+
54
+ function catchRenderError(channel: Channel): Promise<void> & { cancel: () => void } {
55
+ let rejectCallback: (reason?: unknown) => void;
56
+ const promise = new Promise<void>((_resolve, reject) => (rejectCallback = reject));
57
+
58
+ function errorHandler({ title, description }: { title: string; description: string }): void {
59
+ rejectCallback({
60
+ message: title,
61
+ stack: description,
62
+ });
63
+ }
64
+ function exceptionHandler(exception: Error): void {
65
+ rejectCallback(exception);
66
+ }
67
+ function removeHandlers(): void {
68
+ channel.off(Events.STORY_ERRORED, errorHandler);
69
+ channel.off(Events.STORY_THREW_EXCEPTION, errorHandler);
70
+ }
71
+
72
+ channel.once(Events.STORY_ERRORED, errorHandler);
73
+ channel.once(Events.STORY_THREW_EXCEPTION, exceptionHandler);
74
+
75
+ return Object.assign(promise, { cancel: removeHandlers });
76
+ }
77
+
78
+ function waitForStoryRendered(channel: Channel): Promise<void> & { cancel: () => void } {
79
+ let resolveCallback: () => void;
80
+ const promise = new Promise<void>((resolve) => (resolveCallback = resolve));
81
+ function renderHandler(): void {
82
+ resolveCallback();
83
+ }
84
+ function removeHandlers(): void {
85
+ channel.off(Events.STORY_RENDERED, renderHandler);
86
+ }
87
+
88
+ channel.once(Events.STORY_RENDERED, renderHandler);
89
+
90
+ return Object.assign(promise, { cancel: removeHandlers });
91
+ }
92
+
93
+ function waitForFontsLoaded(): Promise<void> | void {
94
+ // TODO Use document.fonts.ready instead
95
+ const areFontsLoading = Array.from(document.fonts).some((font) => font.status == 'loading');
96
+
97
+ if (areFontsLoading) {
98
+ return new Promise((resolve) => {
99
+ const fontsLoadedHandler = (): void => {
100
+ document.fonts.removeEventListener('loadingdone', fontsLoadedHandler);
101
+ resolve();
102
+ };
103
+ document.fonts.addEventListener('loadingdone', fontsLoadedHandler);
104
+ });
105
+ }
106
+ }
107
+
108
+ function waitForCaptureCall(): Promise<void> {
109
+ return new Promise((resolve) => (captureResolver = resolve));
110
+ }
111
+
112
+ function initCreeveyState(): void {
113
+ const prevState = JSON.parse(window.localStorage.getItem('Creevey_Tests') ?? '{}') as CreeveyTestsState;
114
+
115
+ if (prevState.creeveyHost) window.__CREEVEY_SERVER_HOST__ = prevState.creeveyHost;
116
+ if (prevState.creeveyPort) window.__CREEVEY_SERVER_PORT__ = prevState.creeveyPort;
117
+ if (prevState.setStoriesCounter) setStoriesCounter = prevState.setStoriesCounter;
118
+ if (prevState.isTestBrowser) isTestBrowser = prevState.isTestBrowser;
119
+
120
+ window.addEventListener('beforeunload', () => {
121
+ window.localStorage.setItem(
122
+ 'Creevey_Tests',
123
+ JSON.stringify({
124
+ creeveyHost: window.__CREEVEY_SERVER_HOST__,
125
+ creeveyPort: window.__CREEVEY_SERVER_PORT__,
126
+ setStoriesCounter,
127
+ isTestBrowser,
128
+ } as CreeveyTestsState),
129
+ );
130
+ });
131
+ }
132
+
133
+ let isTestBrowser = false;
134
+ let captureResolver: () => void;
135
+ let waitForCreevey: Promise<void>;
136
+ let creeveyReady: () => void;
137
+ let setStoriesCounter = 0;
138
+
139
+ export function withCreevey(): ReturnType<typeof makeDecorator> {
140
+ const addonsChannel = (): Channel => window.__STORYBOOK_ADDONS_CHANNEL__;
141
+
142
+ let isAnimationDisabled = false;
143
+
144
+ initCreeveyState();
145
+
146
+ function disableAnimation(): void {
147
+ isAnimationDisabled = true;
148
+ const style = document.createElement('style');
149
+ const textNode = document.createTextNode(disableAnimationsStyles);
150
+ style.setAttribute('type', 'text/css');
151
+ style.appendChild(textNode);
152
+ document.head.appendChild(style);
153
+ }
154
+
155
+ async function getStories(): Promise<StoriesRaw | undefined> {
156
+ const stories = serializeRawStories(await window.__STORYBOOK_PREVIEW__.extract());
157
+ const storiesByFiles = new Map<string, StoryContextForEnhancers[]>();
158
+ Object.values(stories).forEach((story) => {
159
+ const fileName = story.parameters.fileName as string;
160
+ const storiesFromFile = storiesByFiles.get(fileName);
161
+ if (storiesFromFile) storiesFromFile.push(story);
162
+ else storiesByFiles.set(fileName, [story]);
163
+ });
164
+ void fetch(`http://${getConnectionUrl()}/stories`, {
165
+ method: 'POST',
166
+ headers: { 'Content-Type': 'application/json' },
167
+ body: JSON.stringify({ setStoriesCounter, stories: [...storiesByFiles.entries()] }),
168
+ });
169
+ return stories;
170
+ }
171
+
172
+ // TODO Use Events.STORY_RENDER_PHASE_CHANGED: `loading/rendering/completed` with storyId
173
+ // TODO Check other statuses and statuses with play function
174
+ async function selectStory(
175
+ storyId: string,
176
+ shouldWaitForReady: boolean,
177
+ callback: (response: [error?: string | null, isCaptureCalled?: boolean]) => void,
178
+ ): Promise<void> {
179
+ const currentStory = window.__STORYBOOK_PREVIEW__.currentSelection?.storyId ?? '';
180
+
181
+ if (!isAnimationDisabled) disableAnimation();
182
+
183
+ isTestBrowser = true;
184
+ const channel = addonsChannel();
185
+ const waitForReady = shouldWaitForReady
186
+ ? new Promise<void>((resolve) => (window.__CREEVEY_SET_READY_FOR_CAPTURE__ = resolve))
187
+ : Promise.resolve();
188
+
189
+ let isCaptureCalled = false;
190
+ const renderPromise = waitForStoryRendered(channel);
191
+ const errorPromise = catchRenderError(channel);
192
+ const capturePromise = waitForCaptureCall().then(() => (isCaptureCalled = true));
193
+
194
+ setTimeout(() => {
195
+ if (storyId == currentStory) channel.emit(Events.FORCE_REMOUNT, { storyId });
196
+ else channel.emit(Events.SET_CURRENT_STORY, { storyId });
197
+ }, 0);
198
+
199
+ try {
200
+ await Promise.race([
201
+ (async () => {
202
+ await Promise.race([renderPromise, capturePromise]);
203
+ await waitForFontsLoaded();
204
+ await waitForReady;
205
+ })(),
206
+ errorPromise,
207
+ ]);
208
+ callback([null, isCaptureCalled]);
209
+ } catch (reason) {
210
+ // NOTE Event `STORY_THREW_EXCEPTION` triggered only in react and vue frameworks and return Error instance
211
+ // NOTE Event `STORY_ERRORED` return error-like object without `name` field
212
+ const errorMessage =
213
+ reason instanceof Error
214
+ ? (reason.stack ?? reason.message)
215
+ : isObject(reason)
216
+ ? `${reason.message as string}\n ${reason.stack as string}`
217
+ : (reason as string);
218
+ callback([errorMessage]);
219
+ } finally {
220
+ renderPromise.cancel();
221
+ errorPromise.cancel();
222
+ }
223
+ }
224
+
225
+ function updateGlobals(globals: StorybookGlobals): void {
226
+ addonsChannel().emit(Events.UPDATE_GLOBALS, { globals });
227
+ }
228
+
229
+ function insertIgnoreStyles(ignoreSelectors: string[]): HTMLStyleElement {
230
+ const stylesElement = document.createElement('style');
231
+ stylesElement.setAttribute('type', 'text/css');
232
+ document.head.appendChild(stylesElement);
233
+ ignoreSelectors.forEach((selector) => {
234
+ stylesElement.innerHTML += `
235
+ ${selector} {
236
+ background: #000 !important;
237
+ box-shadow: none !important;
238
+ text-shadow: none !important;
239
+ outline: 0 !important;
240
+ color: rgba(0,0,0,0) !important;
241
+ }
242
+ ${selector} *, ${selector}::before, ${selector}::after {
243
+ visibility: hidden !important;
244
+ }
245
+ `;
246
+ });
247
+ return stylesElement;
248
+ }
249
+
250
+ function removeIgnoreStyles(ignoreStyles: HTMLStyleElement): void {
251
+ ignoreStyles.parentNode?.removeChild(ignoreStyles);
252
+ }
253
+
254
+ function hasPlayCompletedYet(callback: (isPlayCompleted: boolean) => void): void {
255
+ creeveyReady();
256
+ let isCaptureCalled = false;
257
+ let isPlayCompleted = false;
258
+
259
+ const channel = addonsChannel();
260
+ void waitForStoryRendered(channel).then(() => {
261
+ if (isCaptureCalled) return;
262
+ isPlayCompleted = true;
263
+ callback(true);
264
+ });
265
+ void waitForCaptureCall().then(() => {
266
+ if (isPlayCompleted) return;
267
+ isCaptureCalled = true;
268
+ callback(false);
269
+ });
270
+ }
271
+
272
+ window.__CREEVEY_GET_STORIES__ = getStories;
273
+ window.__CREEVEY_SELECT_STORY__ = selectStory;
274
+ window.__CREEVEY_UPDATE_GLOBALS__ = updateGlobals;
275
+ window.__CREEVEY_INSERT_IGNORE_STYLES__ = insertIgnoreStyles;
276
+ window.__CREEVEY_REMOVE_IGNORE_STYLES__ = removeIgnoreStyles;
277
+ window.__CREEVEY_HAS_PLAY_COMPLETED_YET__ = hasPlayCompletedYet;
278
+ window.__CREEVEY_SET_READY_FOR_CAPTURE__ = noop;
279
+
280
+ return makeDecorator({
281
+ name: 'withCreevey',
282
+ parameterName: 'creevey',
283
+
284
+ wrapper: (getStory, context) => {
285
+ // TODO Define proper types, like captureElement is a promise
286
+ const { captureElement } = (context.parameters.creevey = (context.parameters.creevey ??
287
+ {}) as CreeveyStoryParams);
288
+ Object.defineProperty(context.parameters.creevey, 'captureElement', {
289
+ get() {
290
+ switch (true) {
291
+ case captureElement === undefined:
292
+ return Promise.resolve(context.canvasElement);
293
+ case captureElement === null:
294
+ return Promise.resolve(document.documentElement);
295
+ case typeof captureElement == 'string':
296
+ return Promise.resolve((context.canvasElement as Element).querySelector(captureElement));
297
+ case typeof captureElement == 'function':
298
+ // TODO Define type for it
299
+ return Promise.resolve(
300
+ (captureElement as unknown as (ctx: typeof context) => Promise<HTMLElement> | HTMLElement)(context),
301
+ );
302
+ }
303
+ },
304
+ enumerable: true,
305
+ configurable: true,
306
+ });
307
+
308
+ return getStory(context);
309
+ },
310
+ });
311
+ }
312
+
313
+ export async function capture(options?: CaptureOptions): Promise<void> {
314
+ if (!isTestBrowser) return;
315
+
316
+ captureResolver();
317
+ waitForCreevey = new Promise((resolve) => (creeveyReady = resolve));
318
+
319
+ void fetch(`http://${getConnectionUrl()}/capture`, {
320
+ method: 'POST',
321
+ headers: { 'Content-Type': 'application/json' },
322
+ body: JSON.stringify({ workerId: window.__CREEVEY_WORKER_ID__, options }),
323
+ });
324
+
325
+ await waitForCreevey;
326
+ }
@@ -0,0 +1,71 @@
1
+ import React, { useEffect, useRef } from 'react';
2
+ import { styled, withTheme } from '@storybook/theming';
3
+ import { ViewPropsWithTheme, getBorderColor, themeBorderColors } from './common.js';
4
+ import { useApplyScale, useCalcScale, useLoadImages } from '../../helpers.js';
5
+ import { readyForCapture } from '../../../addon/readyForCapture.js';
6
+
7
+ const Container = styled.div({
8
+ position: 'relative',
9
+ display: 'flex',
10
+ filter: 'invert(100%)',
11
+ });
12
+
13
+ const ImageContainer = styled.div({
14
+ position: 'absolute',
15
+ width: '100%',
16
+ height: '100%',
17
+ display: 'flex',
18
+ });
19
+
20
+ const Image = styled.img<{ borderColor: string }>(({ borderColor }) => ({
21
+ boxSizing: 'border-box',
22
+ border: `1px solid ${borderColor}`,
23
+ maxWidth: '100%',
24
+ filter: 'invert(100%)',
25
+ }));
26
+
27
+ const ActualImage = styled(Image)({
28
+ mixBlendMode: 'difference',
29
+ });
30
+
31
+ const DiffImage = styled(Image)({
32
+ opacity: '0',
33
+ });
34
+
35
+ export const BlendView = withTheme(({ actual, diff, expect, theme }: ViewPropsWithTheme): JSX.Element => {
36
+ const expectImageRef = useRef<HTMLImageElement | null>(null);
37
+ const diffImageRef = useRef<HTMLImageElement | null>(null);
38
+ const actualImageRef = useRef<HTMLImageElement | null>(null);
39
+
40
+ const loaded = useLoadImages(expect, diff, actual);
41
+ const scale = useCalcScale(diffImageRef, loaded);
42
+
43
+ useApplyScale(expectImageRef, scale, loaded);
44
+ useApplyScale(actualImageRef, scale, loaded);
45
+
46
+ useEffect(() => {
47
+ if (loaded) readyForCapture();
48
+ }, [loaded]);
49
+
50
+ return (
51
+ <Container>
52
+ <ImageContainer>
53
+ <Image
54
+ ref={expectImageRef}
55
+ borderColor={getBorderColor(theme, themeBorderColors.expect)}
56
+ alt="expect"
57
+ src={expect}
58
+ />
59
+ </ImageContainer>
60
+ <DiffImage ref={diffImageRef} borderColor={'transparent'} alt="diff" src={diff} />
61
+ <ImageContainer>
62
+ <ActualImage
63
+ ref={actualImageRef}
64
+ borderColor={getBorderColor(theme, themeBorderColors.actual)}
65
+ alt="actual"
66
+ src={actual}
67
+ />
68
+ </ImageContainer>
69
+ </Container>
70
+ );
71
+ });
@@ -0,0 +1,70 @@
1
+ import React, { FunctionComponent } from 'react';
2
+ import { styled, withTheme } from '@storybook/theming';
3
+ import { SideBySideView } from './SideBySideView.js';
4
+ import { SwapView } from './SwapView.js';
5
+ import { SlideView } from './SlideView.js';
6
+ import { BlendView } from './BlendView.js';
7
+ import { Images, ImagesViewMode } from '../../../../types.js';
8
+ import { getBorderColor, themeBorderColors, ViewProps } from './common.js';
9
+
10
+ interface ImagesViewProps {
11
+ url?: string;
12
+ image: Images;
13
+ canApprove: boolean;
14
+ mode: ImagesViewMode;
15
+ }
16
+
17
+ const views: { [mode in ImagesViewMode]: FunctionComponent<ViewProps> } = {
18
+ 'side-by-side': SideBySideView,
19
+ swap: SwapView,
20
+ slide: SlideView,
21
+ blend: BlendView,
22
+ };
23
+
24
+ const Container = styled.div({
25
+ height: '100%',
26
+ display: 'flex',
27
+ textAlign: 'center',
28
+ alignItems: 'center',
29
+ justifyContent: 'center',
30
+ padding: '0 20px',
31
+ });
32
+
33
+ const ImageLink = styled.a({
34
+ lineHeight: 0,
35
+ });
36
+
37
+ const ActualImage = withTheme(
38
+ styled.img(({ theme }) => {
39
+ return {
40
+ border: `1px solid ${getBorderColor(theme, themeBorderColors.expect)}`,
41
+ maxWidth: '100%',
42
+ };
43
+ }),
44
+ );
45
+
46
+ function normalizeUrl(image: string, url?: string): string {
47
+ return url ? `${url}/${image}` : image;
48
+ }
49
+
50
+ export function ImagesView({ url, image, canApprove, mode }: ImagesViewProps): JSX.Element {
51
+ const ViewComponent = views[mode];
52
+
53
+ const { actual, diff, expect } = image;
54
+
55
+ return (
56
+ <Container>
57
+ {canApprove && diff && expect ? (
58
+ <ViewComponent
59
+ actual={normalizeUrl(actual, url)}
60
+ diff={normalizeUrl(diff, url)}
61
+ expect={normalizeUrl(expect, url)}
62
+ />
63
+ ) : (
64
+ <ImageLink href={normalizeUrl(actual, url)} target="_blank" rel="noopener noreferrer">
65
+ <ActualImage alt="actual" src={normalizeUrl(actual, url)} />
66
+ </ImageLink>
67
+ )}
68
+ </Container>
69
+ );
70
+ }
@@ -0,0 +1,139 @@
1
+ import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
2
+ import { Loader } from '@storybook/components';
3
+ import { styled, withTheme } from '@storybook/theming';
4
+ import { ViewPropsWithTheme, getBorderColor, themeBorderColors } from './common.js';
5
+ import { useApplyScale, useLoadImages, useResizeObserver, getBorderSize } from '../../helpers.js';
6
+ import { readyForCapture } from '../../../addon/readyForCapture.js';
7
+
8
+ type LayoutDirection = 'horizontal' | 'vertical';
9
+
10
+ const Container = styled.div({
11
+ display: 'flex',
12
+ flexWrap: 'nowrap',
13
+ alignItems: 'center',
14
+ justifyContent: 'center',
15
+ height: '100%',
16
+ width: '100%',
17
+ });
18
+
19
+ const ImagesLayout = styled.div<{ layout: LayoutDirection }>(({ layout }) => ({
20
+ display: 'flex',
21
+ alignItems: 'flex-start',
22
+ justifyContent: 'flex-start',
23
+ flexDirection: layout == 'horizontal' ? 'row' : 'column',
24
+
25
+ '& > :not(:first-of-type)': {
26
+ marginLeft: layout == 'horizontal' ? '20px' : 0,
27
+ marginTop: layout == 'horizontal' ? 0 : '20px',
28
+ },
29
+ }));
30
+
31
+ const ImageLink = styled.a({
32
+ lineHeight: 0,
33
+ flexShrink: 0,
34
+ });
35
+
36
+ const ImageDiffLink = styled.a({
37
+ lineHeight: 0,
38
+ });
39
+
40
+ const Image = styled.img<{ borderColor: string }>(({ borderColor }) => ({
41
+ boxSizing: 'border-box',
42
+ border: `1px solid ${borderColor}`,
43
+ maxWidth: '100%',
44
+ flexShrink: 0,
45
+ }));
46
+
47
+ const DiffImage = styled(Image)({
48
+ flexShrink: 1,
49
+ });
50
+
51
+ export const SideBySideView = withTheme(({ actual, diff, expect, theme }: ViewPropsWithTheme): JSX.Element => {
52
+ const [layout, setLayout] = useState<LayoutDirection>('horizontal');
53
+ const [scale, setScale] = useState(1);
54
+
55
+ const containerRef = useRef<HTMLDivElement | null>(null);
56
+ const expectImageRef = useRef<HTMLImageElement | null>(null);
57
+ const diffImageRef = useRef<HTMLImageElement | null>(null);
58
+ const actualImageRef = useRef<HTMLImageElement | null>(null);
59
+
60
+ const loaded = useLoadImages(expect, diff, actual);
61
+
62
+ const calcScale = useCallback(() => {
63
+ const containerElement = containerRef.current;
64
+ const expectImage = expectImageRef.current;
65
+ const diffImage = diffImageRef.current;
66
+ const actualImage = actualImageRef.current;
67
+
68
+ if (!containerElement || !expectImage || !actualImage || !diffImage || !loaded) {
69
+ setScale(1);
70
+ return;
71
+ }
72
+
73
+ const borderSize = getBorderSize(diffImage);
74
+
75
+ if (layout == 'vertical') {
76
+ const ratio = (diffImage.getBoundingClientRect().width - borderSize * 2) / diffImage.naturalWidth;
77
+ setScale(Math.min(1, ratio));
78
+ }
79
+ if (layout == 'horizontal') {
80
+ const ratio =
81
+ // NOTE: 40px because we have two margins by 20px and 6px for borders
82
+ (containerElement.getBoundingClientRect().width - 40 - borderSize * 6) /
83
+ [expectImage, diffImage, actualImage].map((image) => image.naturalWidth).reduce((a, b) => a + b, 0);
84
+ setScale(Math.min(1, ratio));
85
+ }
86
+ }, [loaded, layout]);
87
+
88
+ useResizeObserver(containerRef, calcScale);
89
+ useLayoutEffect(calcScale, [calcScale]);
90
+ useLayoutEffect(() => {
91
+ // TODO Check image height and viewport
92
+ const diffImage = diffImageRef.current;
93
+ if (!diffImage || !loaded) return;
94
+ const ratio = diffImage.naturalWidth / diffImage.naturalHeight;
95
+ setLayout(ratio >= 2 ? 'vertical' : 'horizontal');
96
+ }, [loaded]);
97
+
98
+ useApplyScale(expectImageRef, scale);
99
+ useApplyScale(actualImageRef, scale);
100
+
101
+ useEffect(() => {
102
+ if (loaded) readyForCapture();
103
+ }, [loaded]);
104
+
105
+ return (
106
+ <Container ref={containerRef}>
107
+ {loaded ? (
108
+ <ImagesLayout layout={layout}>
109
+ <ImageLink href={expect} target="_blank" rel="noopener noreferrer">
110
+ <Image
111
+ ref={expectImageRef}
112
+ borderColor={getBorderColor(theme, themeBorderColors.expect)}
113
+ alt="expect"
114
+ src={expect}
115
+ />
116
+ </ImageLink>
117
+ <ImageDiffLink href={diff} target="_blank" rel="noopener noreferrer">
118
+ <DiffImage
119
+ ref={diffImageRef}
120
+ borderColor={getBorderColor(theme, themeBorderColors.diff)}
121
+ alt="diff"
122
+ src={diff}
123
+ />
124
+ </ImageDiffLink>
125
+ <ImageLink href={actual} target="_blank" rel="noopener noreferrer">
126
+ <Image
127
+ ref={actualImageRef}
128
+ borderColor={getBorderColor(theme, themeBorderColors.actual)}
129
+ alt="actual"
130
+ src={actual}
131
+ />
132
+ </ImageLink>
133
+ </ImagesLayout>
134
+ ) : (
135
+ <Loader size={64} />
136
+ )}
137
+ </Container>
138
+ );
139
+ });