JavaScript-enabled tests encountering issues (Bootstrap 3, Rails 4, Travis CI)

I'm encountering a strange error that only shows up in my CI environment. This error doesn't occur in development, production, or local test environments.

ActionController::RoutingError: No route matches [GET] "/fonts/bootstrap/glyphicons-halflings-regular.svg"

You can find the full trace here

In development and production environments, successful requests go to 

/assets/bootstrap/glyphicons-halflings-regular.woff
. The difference lies in /fonts/ changing to /assets and the file extension from svg to woff. All errors are being generated by JavaScript-enabled tests (Poltergeist/PhantomJS driver). Regular Capybara tests are passing without issues. Chrome DevTools indicate that the font file request is coming from jquery.js, not the page or CSS file.

javascriptruby-on-railsruby-on-rails-4twitter-bootstrap-3travis-ci

Answer №1

Dealing with the bootstrap-sass gem has been a bit of a challenge for me. I'm currently utilizing version 3.3.4.1 of it within the framework of Rails 4.2.

Although my issue was similar to others, it had its own unique twist. While encountering the same 404 error for 

/fonts/bootstrap/glyphicons-halflings-regular.woff
during CI, the path differed in development as /fonts/glyphicons....

After some troubleshooting, I found success by implementing the following line prior to incorporating the bootstrap JS with SASS:

$icon-font-path: "bootstrap/";
@import 'bootstrap';

The key insight for me actually came from the discussions on this particular problem in the gem's issue tracker: https://github.com/twbs/bootstrap-sass/issues/480#issuecomment-49237119

Answer №2

For those of you who have a setup similar to ours, where Bootstrap was manually installed on Rails and required manual CSS style overrides to properly link the Glyphicon fonts, you may have encountered an issue where PhantomJS is still detecting and using the original styles from bootstrap.css, despite them being overridden. To resolve this, we had to meticulously search for and update all references to glyphicons-halflings in the bootstrap.css file to point to the correct path (/assets/bootstrap... instead of /fonts/bootstrap...). Once this was done, the routing errors magically disappeared.

Wishing you the best of luck if you're facing a similar challenge!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Split a string in Javascript and store the resulting parts in two separate variables

After an extensive search, I haven't come across any informative posts regarding my specific inquiry. I'm currently dealing with a variable that holds a string and my objective is to split it into two separate variables. Consider this example: ...

javascriptjquerystring

What is the best way to divide my Vue.js project into separate sections for development and testing purposes?

I am looking to split my vuejs frontend project into two sections: development and testing. For the development section, I want to work locally and make requests to the example:8010 url, while for the testing section, I need to send requests to the example ...

javascriptvue.js

Unable to view images that have been uploaded through express.js

In my current project with a REST Api, I have been facing an issue while uploading images. The folder structure of the project can be seen here: https://i.sstatic.net/1PN0q.png Under the public folder, there is a subfolder named images where all the image ...

javascriptnode.jsimagerestexpress

The Group Hover feature in Tailwind CSS seems to only affect the initial SVG element and not any subsequent SVG children within the group

I encountered an issue with TailwindCSS (version 3.2.4) regarding group-hover, where hovering over elements with SVG child elements only seems to affect the first element and not the others. For a demonstration, I have set up an example on the TailwindCSS ...

javascripthtmlcsstailwind-css

Employing ng-show and other related features within directive "A"

After browsing through similar inquiries, I am still unable to comprehend the solution. If I have a directive available at this link: http://pastebin.com/QtAzGv62 and now need to incorporate the functionality of "ng-show" (or any other standard angular di ...

javascriptangularjsangularjs-directive

developing an associative object/map in JavaScript

I have a form featuring various groups of checkboxes and I am attempting to gather all the selected values into an array, then pass that data into an Ajax request. $('#accessoriesOptions input').each(function(index, value){ if($(this).prop(& ...

javascriptjqueryajax

Sinon Stub generates varying values with each invocation

I'm pretty new to TypeScript and JavaScript, but I've managed to create a functioning VScode extension that I'm really happy with. However, I'm running into some issues with my Mocha tests. Here's a snippet of the code I'm str ...

javascripttypescriptmocha.jssinon

The content loses functionality once I add an overlay color to the background image div

I'm facing an issue with a div that has a background image, text, and a button in the center. Whenever I add an overlay color on top of the background image, the text and button seem to be disabled or unclickable. My goal is to ensure that the Read M ...

javascriptjqueryhtmlcss

How can one determine the completion of a chunked download request in Angular's HTTP client?

Currently, I am utilizing angular's HttpClient to retrieve an arraybuffer. The server is transmitting the data along with the following headers: *To avoid any confusion, the download route essentially retrieves a chunk file stored in the cloud. Howev ...

javascriptangularexpress

Google App Script - Mapping Error - TypeError: Property 'map' is not defined for this object

Thanks to the amazing insight from the community, I recently discovered this helpful tip on BatchUpdating background colors of a specific google sheet. Excited to apply this to my own sheet, I encountered an error saying: TypeError: Cannot read property & ...

javascriptarraysgoogle-apps-scriptmappinggoogle-sheets-api

Align component within material-ui grid

Looking to center align the same cards but not just the grid component, I need the content itself to be equally distant from the borders and each other. I've searched and tried different solutions without luck. https://i.stack.imgur.com/aZj7H.png htt ...

javascriptcssreactjsmaterial-ui

Neglecting to automatically align text

My goal is to automatically align text based on the language, so that Arabic text starts from the right and English text starts from the left. After some online research, I discovered that I need to use dir="auto" in the tag and text-align: auto; in the CS ...

javascriptcssreactjstext-alignment

Change the language of the website using JavaScript/JSON

Creating a website and aiming to utilize JavaScript for the following: If the browser language is set to French, retrieve the text from languageFr.json, otherwise, retrieve the text from languageEn.json. Here is a snippet of the code I have so far: JSON ...

javascriptjsonparsingundefinedmultilingual

"Could you please provide me with further details on how to use sequelize

I recently started working with node js and I used sequelize-auto to generate the models. However, I encountered an error when following the guidance provided in this link https://github.com/sequelize/sequelize-auto. If you need further clarification on th ...

javascriptmysqlnode.jsexpresssequelize.js

Verify the presence of a GET parameter in the URL

Working on a simple log in form for my website using Jade and ExpressJS. Everything is functioning correctly, except for one issue - handling incorrect log in details. When users input wrong information, they are redirected back to the log in page with a p ...

javascriptnode.jsexpresspug

Add new data to an existing array in Angular 7 without overwriting it

After clicking a button, I'm retrieving data from the WordPress API: <a (click)="initGetComments()">Get comments</a> This is the code snippet: export class AppComponent { commentsResults: CommentsItem[] = []; ...

javascriptarraysgetangular7

Display a loading message before fetching remote data in the Bootstrap modal box

Here is the code I am using to load remote PHP data into a Bootstrap modal box: $(function() { $(window).bind("resize", function() { if ($(this).width() < 400) { $('#tabs-content').removeClass('col-xs-10').ad ...

phpjquerycsstwitter-bootstrap-3bootstrap-modal

Guide on moving elements to a different list with the help of the Angular DragDrop CDK Service

I encountered a unique situation while working on my project where I needed to implement a drag and drop feature for multiple lists using Angular CDK's DragDrop service. While I was able to successfully move items within a single list, transferring an ...

javascriptangularangular-materialangular-cdk

What could be causing the error "insertOne is not a valid function" in my MongoDB database?

When the code attempts to connect to the mongodb database: const dbConnect = async () => { try { await client.connect(); const db = client.db('smile-tracker'); const users = db.collection('users'); retu ...

javascriptnode.jsdatabasemongodb

Tips for assigning a Custom Formik Component's value to the Formik value

I'm currently integrating Formik into my form alongside Google Places auto-complete feature. My goal is to display the places auto-complete functionality as a custom component within the Formik field. form.js <Formik initialValues={location:" ...

javascriptreactjsformsformikgoogle-places-autocomplete