Merge branch 'develop'

Author: Takashi Kato

README.md

@@ -3,6 +3,14 @@
 This plugin makes it easy to test ES modules with [importmap-rails](https://github.com/rails/importmap-rails) when using Rails 7 or later.
 It integrates the [Mocha](https://mochajs.org/) JavaScript testing library (using [Chai](https://www.chaijs.com/) as the assertion library, [@mswjs/interceptors](https://github.com/mswjs/interceptors) as the mocking library) and runs tests for ES modules delivered with importmap in the browser.
 
+| Library                                   | Version |
+|-------------------------------------------|---------|
+| [Mocha](https://mochajs.org/)             | 11.1.0  |
+| [Chai](https://www.chaijs.com/)           | 5.1.2   |
+| [@mswjs/interceptors](https://github.com/mswjs/interceptors) | 0.37.5 |
+
+[More useful in combination with the rails_live_reload gem](#use-with-rails_live_reload-gem)
+
 # Installation
 
 Assuming you have already installed importmap-rails with Rails 7, add the following to your Gemfile and run `bundle install`.
@@ -85,6 +93,39 @@ describe('clear controller', () => {
 * config.importmap_mocha_path: The location where the test code is stored. Default is `test/javascripts` and `spec/javascripts`.
 * config.importmap_mocha_scripts: The scripts to be loaded globally. e.g. `['jquery.js']`.
 
+# Use with Rails_Live_Reload gem
+
+It is strongly recommended to use with [rails_live_reload](https://github.com/railsjazz/rails_live_reload)
+
+![](./images/screencast01.gif)
+
+Add this line to your application's Gemfile:
+
+```ruby
+group :development do
+  gem "importmap_mocha_rails"
+  gem "rails_live_reload"
+end
+```
+
+And then execute:
+
+```
+bundle install
+rails generate rails_live_reload:install
+```
+
+Edit initializer
+```ruby
+# frozen_string_literal: true
+
+RailsLiveReload.configure do |config|
+  config.watch %r{app/views/.+\.(erb|haml|slim)$}
+  # Monitor JavaScript tests in addition to default paths
+  config.watch %r{(app|vendor|test)/(assets|javascript|javascripts)/\w+/(.+\.(css|js|html|png|jpg|ts|jsx)).*}, reload: :always
+end if defined?(RailsLiveReload)
+```
+
 # Author
 
 Takashi Kato tohosaku@users.osdn.me

app/assets/javascripts/importmap_mocha.js

@@ -0,0 +1,36 @@
+export function changeFavicon(failures) {
+  const links = document.getElementsByTagName('link')
+
+  for (let i=0; i<links.length; i++) {
+    let link = links[i];
+    if (link.rel == 'icon') {
+      const icon = failures > 0 ? favicon('red')
+                                : favicon('green')
+      link.remove()
+      const newlink = document.createElement("link");
+      newlink.rel = 'icon';
+      newlink.href = icon;
+      newlink.type = 'image/svg+xml';
+      const head = document.getElementsByTagName("head")[0];
+      head.appendChild(newlink);
+
+      return;
+    }
+  }
+}
+
+function favicon(color, count) {
+  const icon = `<?xml version="1.0" encoding="UTF-8"?>
+<svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
+  <style>circle {
+      fill: ${color};
+      stroke: ${color};
+      stroke-width: 3px;
+    }
+  </style>
+  <circle cx="50" cy="50" r="47"/>
+</svg>`
+  const base64Svg = btoa(unescape(encodeURIComponent(icon)));
+
+  return `data:image/svg+xml;base64,${base64Svg}`;
+}

app/views/importmap_mocha/test/index.html.erb

@@ -6,7 +6,7 @@
 <% if Rails.application.config.importmap_mocha_scripts.size > 0 %>
   <%= javascript_include_tag *Rails.application.config.importmap_mocha_scripts %>
 <% end %>
-<%= favicon_link_tag %>
+<link rel="icon" href="data:image/png;base64,iVBORw0KGgo=">
 <%= javascript_include_tag 'mocha' %>
 <%= stylesheet_link_tag 'mocha' %>
 <%= javascript_importmap_tags 'importmap_mocha' %>
@@ -25,8 +25,10 @@
       </div>
     </div>
   </div>
-<script type="module">
-  mocha.run();
-</script>
+  <script type="module">
+  import { changeFavicon } from 'importmap_mocha'
+
+  mocha.run(changeFavicon)
+  </script>
 </body>
 </html>

images/screencast01.gif

@@ -20,5 +20,5 @@ Gem::Specification.new do |spec|
     Dir['app/**/*', 'config/**/*', 'lib/**/*', 'vendor/**/*', 'MIT-LICENSE', 'Rakefile', 'README.md']
   end
 
-  spec.add_dependency 'importmap-rails', '~> 2.0.0'
+  spec.add_dependency 'importmap-rails', '>= 2.0.0'
 end

importmap_mocha-rails.gemspec

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ImportmapMocha
-  VERSION = '0.3.5'
+  VERSION = '0.3.6'
 end

lib/importmap_mocha/version.rb

@@ -837,23 +837,6 @@ function isPropertyAccessible(obj, key) {
 }
 
 // src/utils/responseUtils.ts
-var RESPONSE_STATUS_CODES_WITHOUT_BODY = /* @__PURE__ */ new Set([
-  101,
-  103,
-  204,
-  205,
-  304
-]);
-var RESPONSE_STATUS_CODES_WITH_REDIRECT = /* @__PURE__ */ new Set([
-  301,
-  302,
-  303,
-  307,
-  308
-]);
-function isResponseWithoutBody(status) {
-  return RESPONSE_STATUS_CODES_WITHOUT_BODY.has(status);
-}
 function createServerErrorResponse(body) {
   return new Response(
     JSON.stringify(
@@ -922,13 +905,17 @@ async function handleRequest(options) {
   });
   const requestAbortPromise = new DeferredPromise();
   if (options.request.signal) {
-    options.request.signal.addEventListener(
-      "abort",
-      () => {
-        requestAbortPromise.reject(options.request.signal.reason);
-      },
-      { once: true }
-    );
+    if (options.request.signal.aborted) {
+      requestAbortPromise.reject(options.request.signal.reason);
+    } else {
+      options.request.signal.addEventListener(
+        "abort",
+        () => {
+          requestAbortPromise.reject(options.request.signal.reason);
+        },
+        { once: true }
+      );
+    }
   }
   const result = await until(async () => {
     const requestListtenersPromise = emitAsync(options.emitter, "request", {
@@ -1147,6 +1134,12 @@ function hasConfigurableGlobal(propertyName) {
   if (typeof descriptor === "undefined") {
     return false;
   }
+  if (typeof descriptor.get === "function" && typeof descriptor.get() === "undefined") {
+    return false;
+  }
+  if (typeof descriptor.get === "undefined" && descriptor.value == null) {
+    return false;
+  }
   if (typeof descriptor.set === "undefined" && !descriptor.configurable) {
     console.error(
       `[MSW] Failed to apply interceptor: the global \`${propertyName}\` property is non-configurable. This is likely an issue with your environment. If you are using a framework, please open an issue about this in their repository.`
@@ -1156,6 +1149,83 @@ function hasConfigurableGlobal(propertyName) {
   return true;
 }
 
+// src/utils/fetchUtils.ts
+var FetchResponse = class _FetchResponse extends Response {
+  static {
+    /**
+     * Response status codes for responses that cannot have body.
+     * @see https://fetch.spec.whatwg.org/#statuses
+     */
+    this.STATUS_CODES_WITHOUT_BODY = [101, 103, 204, 205, 304];
+  }
+  static {
+    this.STATUS_CODES_WITH_REDIRECT = [301, 302, 303, 307, 308];
+  }
+  static isConfigurableStatusCode(status) {
+    return status >= 200 && status <= 599;
+  }
+  static isRedirectResponse(status) {
+    return _FetchResponse.STATUS_CODES_WITH_REDIRECT.includes(status);
+  }
+  /**
+   * Returns a boolean indicating whether the given response status
+   * code represents a response that can have a body.
+   */
+  static isResponseWithBody(status) {
+    return !_FetchResponse.STATUS_CODES_WITHOUT_BODY.includes(status);
+  }
+  static setUrl(url, response) {
+    if (!url) {
+      return;
+    }
+    if (response.url != "") {
+      return;
+    }
+    Object.defineProperty(response, "url", {
+      value: url,
+      enumerable: true,
+      configurable: true,
+      writable: false
+    });
+  }
+  /**
+   * Parses the given raw HTTP headers into a Fetch API `Headers` instance.
+   */
+  static parseRawHeaders(rawHeaders) {
+    const headers = new Headers();
+    for (let line = 0; line < rawHeaders.length; line += 2) {
+      headers.append(rawHeaders[line], rawHeaders[line + 1]);
+    }
+    return headers;
+  }
+  constructor(body, init = {}) {
+    const status = init.status ?? 200;
+    const safeStatus = _FetchResponse.isConfigurableStatusCode(status) ? status : 200;
+    const finalBody = _FetchResponse.isResponseWithBody(status) ? body : null;
+    super(finalBody, {
+      ...init,
+      status: safeStatus
+    });
+    if (status !== safeStatus) {
+      const stateSymbol = Object.getOwnPropertySymbols(this).find(
+        (symbol) => symbol.description === "state"
+      );
+      if (stateSymbol) {
+        const state = Reflect.get(this, stateSymbol);
+        Reflect.set(state, "status", status);
+      } else {
+        Object.defineProperty(this, "status", {
+          value: status,
+          enumerable: true,
+          configurable: true,
+          writable: false
+        });
+      }
+    }
+    _FetchResponse.setUrl(init.url, this);
+  }
+};
+
 // src/interceptors/fetch/index.ts
 var FetchInterceptor = class _FetchInterceptor extends Interceptor {
   static {
@@ -1195,8 +1265,9 @@ var FetchInterceptor = class _FetchInterceptor extends Interceptor {
             rawResponse
           });
           const decompressedStream = decompressResponse(rawResponse);
-          const response = decompressedStream === null ? rawResponse : new Response(decompressedStream, rawResponse);
-          if (RESPONSE_STATUS_CODES_WITH_REDIRECT.has(response.status)) {
+          const response = decompressedStream === null ? rawResponse : new FetchResponse(decompressedStream, rawResponse);
+          FetchResponse.setUrl(request.url, response);
+          if (FetchResponse.isRedirectResponse(response.status)) {
             if (request.redirect === "error") {
               responsePromise.reject(createNetworkError("unexpected redirect"));
               return;
@@ -1213,12 +1284,6 @@ var FetchInterceptor = class _FetchInterceptor extends Interceptor {
               return;
             }
           }
-          Object.defineProperty(response, "url", {
-            writable: false,
-            enumerable: true,
-            configurable: false,
-            value: request.url
-          });
           if (this.emitter.listenerCount("response") > 0) {
             this.logger.info('emitting the "response" event...');
             await emitAsync(this.emitter, "response", {
@@ -1477,8 +1542,9 @@ function parseJson(data) {
 
 // src/interceptors/XMLHttpRequest/utils/createResponse.ts
 function createResponse(request, body) {
-  const responseBodyOrNull = isResponseWithoutBody(request.status) ? null : body;
-  return new Response(responseBodyOrNull, {
+  const responseBodyOrNull = FetchResponse.isResponseWithBody(request.status) ? body : null;
+  return new FetchResponse(responseBodyOrNull, {
+    url: request.responseURL,
     status: request.status,
     statusText: request.statusText,
     headers: createHeadersFromXMLHttpReqestHeaders(