Webpack worker paths reset method is disrupting ability to run RSpec tests locally
It looks like the resetServiceWorkersPublicPath method called by the web IDE is causing some issues when running RSpec tests locally. This was noticed by @pburdette in !71687 (merged) and I have confirmed it is happening locally for me as well.
Essentially RSpec capybara tests access webpack-dev-server a bit differently than it is done elsewhere. Normally webpack requests are proxied through rails, but that middleware does not appear to exist in our RSpec tests and we instead access webpack directly. However this resetServiceWorkersPublicPath method which overrides __webpack_public_path__ dynamically is not aware of this setup and it will change webpack's public path to an inaccessible URL which causes chunks to fail to load.
Here's some example output:
$ bundle exec spring rspec ee/spec/features/merge_trains/user_adds_to_merge_train_when_pipeline_succeeds_spec.rb:28
Running via Spring preloader in process 1141
Run options: include {:focus=>true, :locations=>{"./ee/spec/features/merge_trains/user_adds_to_merge_train_when_pipeline_succeeds_spec.rb"=>[28]}}
Test environment set up in 16.740605 seconds
Starting the Capybara driver server...
Capybara starting Puma...
* Version 5.3.2 , codename: Sweetnighter
* Min threads: 0, max threads: 4
* Listening on unix:///var/folders/8h/sshw4p8j3f318qkbjrclmx4m0000gn/T/20211008-1141-xjwdlb
F HTML screenshot: /Users/mike/Projects/gitlab/gitlab/tmp/capybara/user_adds_to_merge_train_when_pipeline_succeeds_shows_start_merge_train_when_pipeline_succeeds_butto.html
Image screenshot: /Users/mike/Projects/gitlab/gitlab/tmp/capybara/user_adds_to_merge_train_when_pipeline_succeeds_shows_start_merge_train_when_pipeline_succeeds_butto.png
Failures:
1) User adds to merge train when pipeline succeeds shows Start merge train when pipeline succeeds button and helper icon
Got 1 failure and 1 other error:
1.1) Failure/Error: expect(page).to have_selector('[data-testid="merge-train-helper-icon"]')
expected to find css "[data-testid=\"merge-train-helper-icon\"]" but there were no matches
# ./ee/spec/features/merge_trains/user_adds_to_merge_train_when_pipeline_succeeds_spec.rb:32:in `block (2 levels) in <main>'
# ./spec/spec_helper.rb:408:in `block (3 levels) in <main>'
# ./spec/support/sidekiq_middleware.rb:9:in `with_sidekiq_server_middleware'
# ./spec/spec_helper.rb:399:in `block (2 levels) in <main>'
# ./spec/spec_helper.rb:395:in `block (3 levels) in <main>'
# ./lib/gitlab/application_context.rb:31:in `with_raw_context'
# ./spec/spec_helper.rb:395:in `block (2 levels) in <main>'
# ./spec/support/database/prevent_cross_joins.rb:107:in `block (2 levels) in <main>'
# -e:1:in `<main>'
1.2) Failure/Error: raise JSConsoleError, message
JSConsoleError:
Unexpected browser console output:
http://127.0.0.1:58963/assets/webpack/20.chunk.js - Failed to load resource: the server responded with a status of 404 (Not Found)
http://127.0.0.1:58963/assets/webpack/vendors-top_nav.chunk.js - Failed to load resource: the server responded with a status of 404 (Not Found)
http://gdk.test:3808/assets/webpack/runtime.bundle.js 126:25 Uncaught Error: Loading chunk vendors-top_nav failed.
(error: http….1:58963/assets/webpack/vendors-top_nav.chunk.js)
http://127.0.0.1:58963/assets/webpack/top_nav.chunk.js - Failed to load resource: the server responded with a status of 404 (Not Found)
http://127.0.0.1:58963/assets/webpack/81.chunk.js - Failed to load resource: the server responded with a status of 404 (Not Found)
http://gdk.test:3808/assets/webpack/dll.85ce17925370/vendor.dll.bundle.js 414475:14 "[Vue warn]: Failed to resolve async component: function () {\n return __webpack_require__.e(/*! import() */ 81).then(__webpack_require__.bind(null, /*! ./components/blocking_merge_requests/blocking_merge_requests_report.vue */ \"kTRZ\"));\n }\nReason: ChunkLoadError: Loading chunk 81 failed.\n(error: http://127.0.0.1:58963/assets/webpack/81.chunk.js)"
http://127.0.0.1:58963/assets/webpack/13.chunk.js - Failed to load resource: the server responded with a status of 404 (Not Found)
http://gdk.test:3808/assets/webpack/dll.85ce17925370/vendor.dll.bundle.js 414475:14 "[Vue warn]: Failed to resolve async component: function () {\n return Promise.all(/*! import() */[__webpack_require__.e(13), __webpack_require__.e(48)]).then(__webpack_require__.bind(null, /*! ~/vue_shared/security_reports/security_reports_app.vue */ \"T5fK\"));\n }\nReason: ChunkLoadError: Loading chunk 13 failed.\n(error: http://127.0.0.1:58963/assets/webpack/13.chunk.js)"
http://127.0.0.1:58963/assets/webpack/48.chunk.js - Failed to load resource: the server responded with a status of 404 (Not Found)
http://127.0.0.1:58963/assets/webpack/82.chunk.js - Failed to load resource: the server responded with a status of 404 (Not Found)
http://gdk.test:3808/assets/webpack/dll.85ce17925370/vendor.dll.bundle.js 414475:14 "[Vue warn]: Failed to resolve async component: function () {\n return __webpack_require__.e(/*! import() */ 82).then(__webpack_require__.bind(null, /*! ee_component/vue_merge_request_widget/components/merge_immediately_confirmation_dialog.vue */ \"1/WV\"));\n }\nReason: ChunkLoadError: Loading chunk 82 failed.\n(error: http://127.0.0.1:58963/assets/webpack/82.chunk.js)"
http://127.0.0.1:58963/assets/webpack/83.chunk.js - Failed to load resource: the server responded with a status of 404 (Not Found)
http://gdk.test:3808/assets/webpack/dll.85ce17925370/vendor.dll.bundle.js 414475:14 "[Vue warn]: Failed to resolve async component: function () {\n return __webpack_require__.e(/*! import() */ 83).then(__webpack_require__.bind(null, /*! ee_component/vue_merge_request_widget/components/merge_train_failed_pipeline_confirmation_dialog.vue */ \"rvjU\"));\n }\nReason: ChunkLoadError: Loading chunk 83 failed.\n(error: http://127.0.0.1:58963/assets/webpack/83.chunk.js)"
http://127.0.0.1:58963/assets/webpack/84.chunk.js - Failed to load resource: the server responded with a status of 404 (Not Found)
http://gdk.test:3808/assets/webpack/dll.85ce17925370/vendor.dll.bundle.js 414475:14 "[Vue warn]: Failed to resolve async component: function () {\n return __webpack_require__.e(/*! import() */ 84).then(__webpack_require__.bind(null, /*! ee_component/vue_merge_request_widget/components/merge_train_helper_icon.vue */ \"Fsbt\"));\n }\nReason: ChunkLoadError: Loading chunk 84 failed.\n(error: http://127.0.0.1:58963/assets/webpack/84.chunk.js)"
http://127.0.0.1:58963/assets/webpack/45.chunk.js - Failed to load resource: the server responded with a status of 404 (Not Found)
http://gdk.test:3808/assets/webpack/dll.85ce17925370/vendor.dll.bundle.js 414475:14 "[Vue warn]: Failed to resolve async component: function () {\n return __webpack_require__.e(/*! import() */ 45).then(__webpack_require__.bind(null, /*! ~/vue_shared/components/file_finder/index.vue */ \"TwKd\"));\n }\nReason: ChunkLoadError: Loading chunk 45 failed.\n(error: http://127.0.0.1:58963/assets/webpack/45.chunk.js)"
# ./spec/support/capybara.rb:198:in `block (2 levels) in <main>'
# ./spec/spec_helper.rb:408:in `block (3 levels) in <main>'
# ./spec/support/sidekiq_middleware.rb:9:in `with_sidekiq_server_middleware'
# ./spec/spec_helper.rb:399:in `block (2 levels) in <main>'
# ./spec/spec_helper.rb:395:in `block (3 levels) in <main>'
# ./lib/gitlab/application_context.rb:31:in `with_raw_context'
# ./spec/spec_helper.rb:395:in `block (2 levels) in <main>'
# ./spec/support/database/prevent_cross_joins.rb:107:in `block (2 levels) in <main>'
# -e:1:in `<main>'
Finished in 1 minute 23.79 seconds (files took 3.32 seconds to load)
1 example, 1 failure
Failed examples:
rspec ./ee/spec/features/merge_trains/user_adds_to_merge_train_when_pipeline_succeeds_spec.rb:28 # User adds to merge train when pipeline succeeds shows Start merge train when pipeline succeeds button and helper icon
Failed to write to log, write log/workhorse-test.log: file already closed