Freek.dev

An official toolset for testing Vue components will be released soon. In a new series Jover Morales tells you all about it.

vue-test-utils, the official VueJS testing library and based on avoriaz, is just around the corner. @EddYerburgh is indeed doing a very good job creating it. It provides all necessary tooling for making easy to write unit test in a VueJS application.

Jest, on the other side, is the testing framework developed at Facebook, which makes testing a breeze, with awesome features such as:

• Almost no config by default
• Very cool interactive mode
• Run tests in parallel
• Spies, stubs and mocks out of the box
• Built in code coverage
• Snapshot testing
• Module mocking utilities

https://alexjoverm.github.io/series/Unit-Testing-Vue-js-Components-with-the-Official-Vue-Testing-Tools-and-Jest/

Read more

Daniel Coulbourne, an engineer at Tighten Co and co-host of the amazing Twenty Percent Time podcast, recently released Ziggy, a tool to share your Laravel named routes with JavaScript.

Ziggy creates a Blade directive which you can include in your views. This will export a JavaScript object of your application's named routes, keyed by their names (aliases), as well as a global route() helper function which you can use to access your routes in your JavaScript.

https://github.com/tightenco/ziggy

Read more

Sebastian De Deyne, my colleague and all round wizard at Spatie, wrote a new blogpost on how we use Babel.

A lot has been going in in JavaScript the past few years. One of my favorite things has been the usage of babel, which allows us to write future JavaScript syntax today. The babel ecosystem has tons of plugins and configuration options, I'd like to elaborate on our usage at Spatie.

https://sebastiandedeyne.com/posts/2017/whats-in-our-babelrc

Read more

Adam Silver lists a bunch of problems you need to solve if you opt to build a single page application.

Ironically, SPAs are harder to design and harder to build. And yet, they typically produce slow, disagreeable experiences for users. ... Javascript is never going to beat the browser at what it does best—browsing. We can still give users rich and enhanced experiences without cramming an entire site into one document.

We should let the browser manage the browsing experience, and spend our time solving real user problems.

https://adamsilver.io/articles/the-disadvantages-of-single-page-applications/

Read more

Christoper Pitt published another excellent piece over at Sitepoint. This time he describes how he built a watcher to automatically recompile his preprocessed code and rerun the tests.

In order to reduce the burden of invoking the transformation scripts, boilerplate projects have started to include scripts to automatically watch for file changes; and thereafter invoke these scripts.

These projects I’ve worked on have used a similar approach to re-run unit tests. When I change the JavaScript files, these files are transformed and the unit tests are re-run. This way, I can immediately see if I’ve broken anything.

https://www.sitepoint.com/write-javascript-style-test-watchers-php/

Read more

Sean Larkin, core team member of Webpack, will be leaving his current job at Mutual of Omaha for a new position at Microsoft. Because on his team he was the one most familiar with the webpack setup of the project, he looked for a way to transfer his knowledge. He landed on creating a video course on webpack that's free for everyone.

I decided to create Webpack Academy, a training and educational platform for those wanting to learn more about webpack. This was a perfect way to not only allow me to give back to my team — by giving them free access to all of the content — but to also benefit the community by sharing it with everyone.

https://webpack.academy/

Read more

In a new post on his blog Sebastian De Deyne, JavaScript (and all-round) wizard at Spatie, describes a technique to expose Vue components as a plugin.

We recently published a tabs package. Initially, users needed to register two components in order to create a tabular interface: Tabs, which acts as a container, and Tab, which defines a single tab and its contents in the interface.

Since developers are most likely going to use both components together, and there's a fair chance that they'd want to register them globally like in the example, it made sense to provide some sort of auto-install option.

https://sebastiandedeyne.com/posts/2017/exposing-multiple-vue-components-as-a-plugin

Read more

In a new blogpost at Sitepoint Christopher Pitt talks about snapshot testing. He first explains how snapshot testing can help test React components. Then he demonstrates how you can use our home grown package to use snapshot testing in PHP. Finally he shows pretty cool use cases for snapshot tests.

Ah-ha moments are beautiful and rare in programming. Every so often, we’re fortunate enough to discover some trick or facet of a system that forever changes how we think of it.

For me, that’s what snapshot testing is.

You probably write a lot of PHP code, but today I want to talk about something I learned in JavaScript. We’ll learn about what snapshot testing is and then see how it can help us write better PHP applications.

https://www.sitepoint.com/snapshot-testing-viable-php/

If you want know more about snapshot testing, check out this blogpost by my colleague Sebastian, or watch this video where I refactor some tests to use snapshots.

Read more

In a new blogpost André Neves, a React Native engineer at Big Human, introduces the new features that are coming with ES2017.

I think it is a fair assessment to say that a large portion of JavaScript developers seem to appreciate the new, the shiny, the bleeding-edge tools. Whether it is to completely embrace a new technology, or simply to test out a tool's functionality, we like to know what is out there to at least 'dip our toes in the water'.

If you're like me, keen on knowing about all of the new technology this incredible community has to offer, here is a breakdown of what ES2017 has in store.

https://medium.com/komenco/what-to-expect-from-javascript-es2017-the-async-edition-618e28819711

Read more

In this article Kent C. Dodds clearly explains what the downsides are of using Class in JavaScript.

Classes (and prototypes) have their place in JavaScript. But they’re an optimization. They don’t make your code simpler, they make it more complex. It’s better to narrow your focus on things that are not only simple to learn but simple to understand: functions and objects.

https://medium.com/@kentcdodds/classes-complexity-and-functional-programming-a8dd86903747

Read more

Vitaly Gordon explains how the little known comma operator makes it easy to add some debugging statements in short hand array functions.

What if you want to add a console.log call before x + 1 ? With comma operator, adding side-effects to functional expressions is simple:

const fun = x => (console.log (x), x + 1)

https://medium.com/@xpl/javascript-did-you-know-about-the-comma-operator-ff9b511cc33

Read more

Here's a little animation made by Wassim Chegham that shows how async/await can clean up your code.

Read more

Ivan Sieder offers a nice tip on how to write better v-for loops in VueJS component templates.

There is really nothing wrong with the above code, but there is a small aspect, which really bugs me. As you can see, we are repeating the product identifier inside the output twice ({{ product.name }} and {{ product.price }}).

We are modern web developers (at least I hope so) and therefore we are going to use modern ES6 functionality. The feature we are going to use is called destructuring assignment. Basically, what the destructuring assignment allows us to do, is to pull a specific property off of an object and store it in a variable.

https://simedia.tech/blog/vue-js-destructuring-assignment-for-loops/

Read more