Skip to content

[test-runner] Content-Type header always application/javascript via test-framework virtual path #1523

Open
@rhashimoto

Description

@rhashimoto

Summary

It looks like files served via the virtual path /__web-test-runner__/test-framework always have the response header Content-Type: application/javascript; charset=utf-8, which frustrates fetching resources of a different type.

Background

I'm trying to write my own test framework that uses Jasmine. I want my framework script to load Jasmine standalone assets from a location relative to the framework script, so I'm doing that via import.meta.url. Because the framework script is loaded with a special virtual path, so are the Jasmine assets. The problem is that all these assets are assigned a Content-Type of application/javascript but not all of them are scripts.

Test Case

To reproduce the issue:

  • Clone this project: https://github.com/rhashimoto/framework-mime
  • npm install
  • npx web-test-runner --manual
  • Open a browser on the manual testing URL.
  • Open the browser Dev Tools.
  • Click on the test file link.
  • Look at the Dev Tools Network tab to see the details of the loaded files.

Expected

The custom framework dynamically adds HTML elements to the document, two link elements and two script elements at the bottom of the document head.

The Network tab should show the four files successfully loaded by the framework:

  • jasmine_favicon.png - image/png
  • jasmine.css - text/css
  • jasmine.js - application/javascript
  • jasmine-html - application/javascript

Actual

The PNG file doesn't load at all, with the server returning a 500 status, but if you look at the server response headers it contains Content-Type: application/javascript; charset=utf-8, which isn't correct either for an image or an error message.

The CSS file is returned but it also has the wrong Content-Type, which apparently prevents it from being used in Chrome and Firefox (Safari doesn't seem to care).

Screen Shot 2021-06-14 at 1 51 54 PM

Other Notes

If I change the framework code not to use import.meta.url like this:

--- a/custom-framework.js
+++ b/custom-framework.js
@@ -4,7 +4,7 @@ import {
   sessionFailed,
 } from '@web/test-runner-core/browser/session.js';
 
-const STANDALONE_PATH = new URL('./jasmine-standalone/lib/jasmine-3.7.1', import.meta.url).href;
+const STANDALONE_PATH = './jasmine-standalone/lib/jasmine-3.7.1';

This works so both the PNG and CSS are loaded properly without the virtual path, but this makes it harder to put the custom framework in its own module to share across projects.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions