What I have learned from the Kent C. Dodds testing JavaScript course

Strange thing is happening when one is gaining more experience – it is harder to identify or to find what new to learn. It definitely depends on the width of the area, as some things can be learned in few hours, and for some even a few years are not enough. And with this more broad areas it is easier to experience this phenomena, when even though you do know that you do not know everything, it is hard to identify what you do not know.

I have no idea what is the magic recipe to cure this. One of the ideas, that I try to cultivate it my mindset, is that even source is explaining some sort of the things, that I already knew still can learn something new and interesting, if I am attentive and curious enough.

At the end of previous year, all engineers in company where I work were “attending” (as it is all was happening online and async it is in quotation marks) JavaScripts testing course created by Kent C. Dodds.

Below are some my notes from this course. Due to the phenomena, that I have described above, they are quite fragmental, as contain only things that were new to me, or about which I got curious.

  • Why we have .eslintrc and .prettierrc?

https://stackoverflow.com/questions/36212256/what-are-rc-files-in-nodejs
https://stackoverflow.com/questions/11030552/what-does-rc-mean-in-dot-files

  • Why npm run prettier -- --write – what is staying for -- ?

https://stackoverflow.com/questions/44743626/whats-mean-of-npm-scripts-two-dahses. Used with npm only

  • “Make flow happy” :TM: Before taking this course, I thought that this phrase is popular only inside our company, when we referring to adding some code only “to make flow happy” ūüôā
  • Husky needs to be installed to run git hooks? Is it necessary, aren’t this from the box with git?

Doesn’t look like it is necessary one https://github.com/typicode/husky, https://git-scm.com/docs/githooks. It actually doesn’t. I would love to here this more specifically in the video

  • Lint-staged package to run linter only over files that have changed
  • What is monkey patching?
    https://en.wikipedia.org/wiki/Monkey_patch
  • jest.fn. Used to validate something specific about function, for example, like with how many arguments it was called, or how many times it was called
  • The .spyOn method will replace the getWinner on utils with an empty mock function.
  • with jest it is possible to mock whole module, that was imported in the test file
  • jest allows to eternalise mocking for utils __mocks/{name of the file that you want to mock}.js
  • You can run npm run test or nom test or npm t it is all the same?

I haven’t known, that tree shaking is not only the idea, and is already actively utilized

  • if you do not need jest to use browser env, you can set up it not to use JSDOM, it will bring better performance to your tests by flag --end=node or in jest.config.
  • we are mocking CSS imports with empty js file in node? https://testingjavascript.com/lessons/egghead-support-importing-css-files-with-jest-s-modulenamemapper????
  • identity-obj-proxy – to import CSS for example properly
  • git diff HEAD^ HEAD in the terminal will give the difference between current commit and previous commit in terminal
  • I should use more snapshot functionality that is included in Jest
  • Jest has built in the capability of serializing and formatting DOM nodes, this will allow better identify the difference between outcome value and snapshots.
  • There is a possibility to write custom serializers for Jest
  • We can start debugging from jest test env, and debug from Google Chrome. For this, we will need to have a special script for node to run jest
  • not every line in our program is equal :TM:
  • there is possibility to configure watch mode (examples:

What I liked in courses:

  • help with setting best practice in project and making it to automation level
  • explain not only how test libraries can be used, but also logic inside the functions and methods in the test libraries, with recreating it small analogies – can help a lot, if you want to get familiar with it, for example, to start contributing to some library

What can be improved in courses:

  • We end-up with understanding, that courses better to be done in reverse order to which they were present on the page
  • There was some flash of other screen every time I was accessing new course – no idea what was on it, as it was to fast
  • Would be nice to have some tasks that can be done, and are related to what was explained in the course, so one can have their hands dirty easily, and end up with more practical knowledge
  • I would love some overview on the start of the course – like to understand what this course will be about – yes, I can check the list, but would be lovely to have like 30 sec video recap, of what I will learn
  • I would love more encouraging failing first approach, so to see that we are actually testing something

General conclusions

If you are planning to watch this course, define your purpose before going though this course. What can be purpose – create action plan how to improve testing in your codebase, introduce new types of tests to your project etc.

How to add flow type definition for raw-loader

Recently I have encountered a quite odd problem. I was trying to load *.html¬†file as a string in my React component using¬†raw-loader¬†, but have obtained flow error that flow can’t recognize this type of import. And here fun starts ūüėČ As I haven’t found anything straightforward about flow typing raw-loader¬†I took a look at how this problem was solved for a much more common use case – CSS Modules.¬†There are quite a few googlable ways how to fix this error for CSS Modules, so let’s see what they are, and what are¬†downfalls of each way:Continue reading →

How to write better (code) review

As a software engineer, I do or receive code review¬†nearly on daily basis (except probably Saturday’s and Sunday’s ūüėā). On the beginning of my career, I haven’t paid a lot of attention to the exact way how code reviews were provided. If they contain any clues to what can be improved – it was¬†ok for me. After spending some time on this side of the software development process, I have made conclusions¬†from my own reactions about what, in my opinion, makes good review even better. And under these, I not only mean emotional reaction to the feedback but more willingness level to¬†make changes and make this PR be merged. You probably know what I am talking about here. A moment, when you have finished reading code review, and you are still smiling, and it is clear for you what needs to be changed, or where you should look in for better ideas how to make this task be done.¬†Continue reading →

Playgrounds for React patterns: compound components and render as a props

During my preparation to talk in Verona on ReactJSDay I have tried to dive deep in some patterns in React that have been broadly¬†discussed (at least in my twitter feed ūüôā¬† ). For me, one of the best ways to understand the code better is by playing with it a little bit, so I have created a few simple codepen¬†playgrounds that were based on the existing code samples. Maybe you will find them useful as well.Continue reading →

Accessibility practical guide

permanent temporary situational accessibility

Recently in many front-end conferences, the accessibility topic appears very often and in some way, it reminds me the endless discussion about how styles should be done using the CSS-preprocessors/CSS or some CSS-Modules solutions etc. Hot topic? So how to make our own sites more accessible?

Why actually should we care about accessibility? I think everyone has their own different answer to this question. And there are a lot of possible ones:Continue reading →

How not to miss updates in React Documentation

React is the “instrument” that I am using on a daily base, and for this reasons, I am trying not to miss any updates that are happening in this framework. And is really hard to miss something, as I am active twitter user, and am following a lot of other React¬†funs. But somehow it happened that I have missed when the PureComponent appear. So I decided to find some more reliable method to track what changes are happening in the React.Continue reading →

How to make smart chaining of custom pure functions

I love the concept of the functional programming. Lately, in addition to my work with React + Redux +JS etc. I have worked also a lot with the ClojureScript (I was warned that after I will start writing in any dialect of Clojure I will start thinking slightly different about functional programming, not I see that this is true).

Last weekends I was enjoying by doing some training tasks on JavaScript, and to solve one of the problems in it with the love of functional programming¬†I came up with 4 pure functions (let’s name them function1, function2, function3, function4) that I wanted to apply to my data step by step to obtain the expected result. If it were a ClojureScript, the expected code should be something like this:

Continue reading →

How to convert icons from fonts to separate svg files

Recently I have moved out rich text editor from the TinyMCE to the Draft.js. I wanted to make this transfer as less noticeable as possible for our end users in terms of the UI. One of the interesting points was to create buttons in the editor toolbar similar to the ones that were in the TinyMCE editor. Icons that are used in the on the button in the TinyMCE editor are done using the specific TinyMCE font that is part of the TinyMCE package. I will go through some ideas how this can be done.Continue reading →

8 Playgrounds for Examples from Official Draft.js Repository (v.0.10.0)

Draft.js

Last four working days were quite interesting, as I was moving rich editor that we used in our application from the TinyMCE to Draft.js. There were many reasons why I decided to do this. The most general was to have more ownership over editor in our app and be possible to customize it quite easily, so it would reflect our needs (yeah, and make it possible to fix any bugs in the editor on your side). Moreover, I think that I will be able to reuse created rich editor, that it based on the draft-js in the re-frame project, on which I will be working in next month.

Working with Draft.js is quite challenging and interesting at the same time. Challenging as this pretty new tool, so there is some lack of the documentation and enough examples of the documentation (you can fin documentation on the official web-site: https://facebook.github.io/draft-js/docs/overview.html#content ¬†+ check the issues on the Github: https://github.com/facebook/draft-js/issues; links to a quite a lot of examples of the usage are available in the Awesome Draft.js¬†) ¬†At the same time, it was interesting as give very deep understanding what basic concepts are used in the editors.Continue reading →