Use custom CSS
saulshanabrook opened this issue · comments
Is it possible to replace zuul's CSS with my own? I want to test a whole app and need to have it's CSS included, so that some tests work.
Also would it be possible to serve more a few more files, like an svg and ttf file?
I am looking through the source and found https://github.com/defunctzombie/zuul/blob/master/lib/user-server.js
So could I use that to provide my own server which serves my custom html + css? and execute the tests in that?
The user server can be used to make available any file or route or custom JSON api server you want (and then load it from your tests). See the doc at https://github.com/defunctzombie/zuul/wiki/Zuul.yml#server-optional
To be able to insert a specific CSS into your tests you could either:
- use the
htmloption of zuul.yml: https://github.com/defunctzombie/zuul/wiki/Zuul.yml#html-optional - dynamically insert a CSS file using https://www.npmjs.com/package/insert-stylesheet for example, loading it from your user server
What do you think?
Yeah that makes sense. I'll give the html option a try. Thanks!
For anyone else trying to do this, I build a big index.js file with webpack for testing, that inlines all CSS and images. Then I include that script.
I think that zuul itself has some provision for just serving up files from the current working directory:
https://github.com/defunctzombie/zuul/blob/master/lib/control-app.js#L80
So basically it statically serves up anything from the dir you launch zuul in so you can reference any files in your project as needed by your tests.
For anyone else trying to do this, I build a big index.js file with webpack for testing, that inlines all CSS and images. Then I include that script.
Way to go!