...two separate packs Since we do not want to mix Jasmine into our regular Javascript, we will create two additional packs. The first only contains Jasmine and the test runner...
.../lib/jasmine-core/boot0.js' import 'jasmine-core/lib/jasmine-core/boot1.js' import 'jasmine-core/images/jasmine_favicon.png' // app/webpack/packs/specs.js // First load your regular JavaScript (copy all the JavaScript imports from your main pack). // For example: let webpackContext = require.context('../javascripts...
To check if a method has been called in Jasmine, you first need to spy on it: let spy = spyOn...
...you might be looking for an event emitter library. Today I learned that vanilla JavaScript comes with a native event emitter, which I've been indirectly using forever. There's...
While we are used to run our JavaScript tests on a test page within our Browser, it's also possible to run them on the command line with NodeJS. I...
If you want to move an element inside an array, neither JavaScript/ES6+ nor libraries like LoDash offet that natively. Here is a simple function instead that modifies the input array...
One really simple way to check whether JavaScript Sentry integration was successful (raven-js or @sentry/browser), is to create an erroneous event handler like this: My Website … and clicking on...
...the Webpack Bundle Analyzer, Chrome's new Lighthouse feature … … shows a visualisation of your JavaScript bundles. It's compatible with sourcemaps and is great for understanding large JavaScript modules used...
...your page. It can also visualise unused bytes. This is very helpful to visualize Javascript files in development. It also works on production code, where its usefulness depends on the...
tl;dr: Use the URLSearchParams API to make your live easier if you want to get or manipulate query parameters...
Native promises have no methods to inspect their state. You can use the promiseState function below to check whether a...
Webfonts are not always available when your JavaScript runs on first page load. Since fonts may affect element sizes, you may want to know when fonts have been loaded to...
...trigger some kind of recalculation. Vanilla JavaScript / Modern DOM API In modern browsers (all but IE and legacy Edge) you can use document.fonts. Use load to request a font and...
Jasmine has spyOnProperty(), but it only works if the property is implemented using getter and setter functions. This is a...
...After trying jQuery's trigger to no avail, I had success by using native Javascript methods to create and dispatch an event. For instance, to trigger a mousedown event:
You can use JavaScript to get or set cookie values on the client. Using the vanilla JavaScript API In JavaScript, document.cookie is an accessor to all cookies on the current...
Using a library If you are regularly working with cookies in JavaScript, you may want to use a library that simplifies this. Cookies.js is small and works nicely...
Here is some JavaScript code that allows you to click the screen and get the clicked element's text contents (or value, in case of inputs). The approach is simple...
...as a bookmark. Place it in your bookmarks bar and click it to activate. javascript:(function(){var overlay=document.createElement('div');Object.assign(overlay.style,{position:'fixed',top:0,left:0,width:'100vw...
jQuery is still a useful and pragmatic library, but chances are increasingly that you’re not dependent on using it...
Let's say you want to merge the properties of two JavaScript objects: let a = { foo: 1, bar: 2 } let b = { bar: 3, baz: 4 } let merged = merge(a, b...
This is a very general introduction to MV* Javascript frameworks. This card won't tell you anything new if you are already familiar with the products mentioned in the title...
...As web applications move farther into the client, Javascript frameworks have sprung up that operate on a higher level of abstraction than DOM manipulation frameworks like jQuery and Prototype. Such...
Most of the JavaScript snippets have code that manipulates the DOM. For that reason dom manipulating javascript code should have been executed after the DOM has loaded completely. That means...
...are fully loaded. The following snippets show how you can do this with plain JavaScript, jquery or prototype (dom ready event binding in other frameworks). Plain JavaScript document.addEventListener("DOMContentLoaded", function...
...the Sass that goes along with it, providing a fallback case for visitors without JavaScript that does regular text-overflow magic: .overflow_container white-space: nowrap overflow: hidden text-overflow...
...up with nsbp + space, causing 2 spaces width. Wrap the code in our unobtrusive JavaScript helper or another way it's run once the DOM is loaded...
Under the same origin policy, a web page served from server1.example.com cannot normally connect to or communicate with a server...
Imagine all the syntactical delights of Ruby and Haml for your JavaScript. You write in a nice language, but get normal JavaScript at runtime. All whilst having full access to...
...3rd-party JavaScript libraries (jQuery, PrototypeJS), debugging support (it becomes pure, readable JavaScript), existing support from test suites (it’s normal JavaScript) and growing support from various text editors (TextMate...
You can say: $(element).is(':visible') and $(element).is(':hidden') jQuery considers an element to be visible if it...
Ask before leaving an unsaved CKEditor Vanilla JavaScript way, but removes any other onbeforeunload handlers: $(function(){ document.body.onbeforeunload = function() { for(editorName in CKEDITOR.instances) { if (CKEDITOR.instances[editorName].checkDirty()) { return "Unsaved changes present...
Use the click method on the DOM element: let link = document.querySelector('a') link.click()