DEV Community: Raphaël Badia

A stupid reason why cy.intercept() doesn't work when you reload Cypress tests

Raphaël Badia — Wed, 28 Apr 2021 13:13:47 +0000

When trying to intercept a search api of my website, a strange bug almost drove me crazy : the first time I ran the test, it worked, but then failed once I tried to reload the test !

It turned out that there was a cache on the api side, so the browser is not doing an actual request once it's cached in the disk :

So from now on, I know that when I want to work with intercepted api responses that are cached, I must tick the "disable cache" checkbox.

Simulate slow responses with Cypress using cy.intercept()

Raphaël Badia — Wed, 28 Apr 2021 11:51:32 +0000

Today I was trying to debug a flaky test that regularly breaks our jenkins pipeline. The fault appeared to be due to a randomly slow api response.

What I usually do is that I add a delay in my server to simulate the slow response and break the test, work my way to fix it and remove the delay in the server code.

But today, I didn't have any control over the server. I had to find out another way to do that.

Turns out it's quite easy with the Cypress intercept command.
You can pass a req as an argument to intercept the request, and from there use req.continue(response) to change the response.

cy.intercept(
  {
    method: 'GET',
    pathname: `_search`,
    query: {
      q: 'genera',
    },
  },
  req => {
    // do nothing with the req, only call the response with a 10s delay.
    req.continue(res => {
      res.delay = 10000;
      res.send();
    });
  },
).as('practitioner')

How to change electron forge's renderer port

Raphaël Badia — Sun, 14 Jun 2020 17:51:23 +0000

I just started using electron-forge and I stumbled across a problem : when trying to change the renderer's port (that runs by default on port 3000), my changes to the webpack file were ignored...

I found out on their github that they override the webpack config in their custom webpack (@electron-forge/plugin-webpack) package. But they still gave us two options (port and loggerPort) to achieve our needs and you can write them in the package.json like so :

{
    "config": {
        "forge": {
             "plugins": {
                 [
                      "@electron-forge/plugin-webpack",
                      {
                           "port": 3001, // default is 3000
                           "loggerPort": 9001,  // default is 9000
                      }
                  ]
             }
        }
    }
}

A bit too nested and undocumented if you want my opinion.

How I read react websites unminified source code through source maps

Raphaël Badia — Sun, 14 Jun 2020 17:49:34 +0000

Have you ever heard about source maps ?

They are the files that link minified js files to the original source file, allowing the browser to show you where the error is in the debugger.
It’s very useful for development purpose but can also be used in production to track bugs down.
And as this article says, it can also expose the source code of some websites, enabling other developers to learn by reading your codebase !

So, can we find some source map file available on google ? Google dorks makes it easy to find out. Let’s type ext:map. A lot of false positives… ext:map intext:webpack intext:react is way better but it returns a lot of results from git hosts such as GitHub and gitlab.



ext:map intext:webpack intext:react -site:github.com -intitle:GitLab -inurl:(git|blob|repo|browse)

Better. That leaves us with a lot of sourcemaps to explore ! Let’s download a random on, I chose this one :
To download a sourcemap file, you only need to click on it and save it as a .map.

To extract the source code from the source map, we are going to use a package called source-map-unpack. Unfortunately, some dependencies are outdated so we need to either install it with and old nodes version. You can do that with nvm : nvm use v10.20.1. If you don't have nvm, you can clone the repository, remove the ascii-progress dependency just like this and npm install. Then, running npx source-map-unpack ancestry ~/Downloads/landing-bundle.js-485a22ea.map (or npm start ancestry ./path/to/source/file.map if you cloned the repository) will create a folder ancestry containing the source code !

A preview of the folder created by source-map-unpack

We can see actions, reducers, components... It's an app using redux !
This doesn't seems like a full app, and the sourcemap filename (landing-bundle.js-485a22ea.map) made me think it was a single page. After some digging, I found I was reading the source code for https://www.ancestry.com/learn/facts :

A demonstration of the /learn/facts page behavior next to the extracted source code

When things get serious

Later, I stumbled on an interesting bundle name: app.js.map. It was 4 mb large, which I thought could be a more complete app. And gosh, what I got was way more interesting than the previous source map : I was looking at the source of the whole client dashboard of an energy company !

I learned some interesting things and saw good practices by skimming through their code, but also some weird things (they were abusively using refs and document.querySelector). And they had two useState() in total. The rest was class component.

Learning from others code is really interesting and you should definitely go take a look. There are a lot of US government open data sourcemap out there.

As for me, I'm going to try to forget the raw SQL queries I've seen on data.nasa.gov...

Thanks for reading !

How to avoid and debug most of timezone problems in production

Raphaël Badia — Sun, 14 Jun 2020 17:48:07 +0000

Have you ever been struggling to reproduce a weird bug happening only on production?
Some offset between what you have in local (that obviously works perfectly) and what your clients see on this evil, inaccessible server?

If you're using anything other than Windows Server, there are chances your server is using the UTC timezone, which is not - unless you live in England - the same timezone than your computer.

The simplest solution to reproduce what's happening on your server is to set your timezone to UTC. And there is a way to run node in UTC without changing your computer timezone!

To use UTC as your node timezone, you can simply set it in the env before running node, like so :

TZ=utc node index.js

It also works with other timezones, for instance this would set the timezone to Amsterdam's one:

TZ='Europe/Amsterdam' node server/index.js

I recommand setting it in your package.json to always develop to stay as close as possible to production's conditions. In my package.json it looks like this :

{
    "scripts": {
        "dev": "TZ=utc nodemon --max_old_space_size=8192 server/index.js",
    }
}

And if you're not using UTC on production, you should definitely read The worst Server Setup Mistake You Can Make.

Good luck debugging your timezone issues !

Fixing class-validator issues in a new Nest js project

Raphaël Badia — Sun, 14 Jun 2020 17:46:24 +0000

This weekend, I played a bit with this express-based node.js framework called Nest.

Let's remind first what is a DTO :

A DTO (Data Transfer Object) is an object that defines how the data will be sent over the network.

It defines the shape of data for a specific case, such as creating an user:

CreateuserDto {
name: 'john',
password: 'isthissecureENOUGH??123'
}

 Or updating the status of a shipping:

UpdateShippingStatusDto {
status: 'ON_HOLD'
}

So, I love the concept of DTO and I was trying to validate it using ValidationPipe, just like the doc says. It quickly went wrong:

The "class-validator" package is missing. Please, make sure to install this library ($ npm install class-validator) to take advantage of ValidationPipe.

Oh. I thought it would work out of the box since ValidationPipe comes from @nest/common, but nevermind, the fix is easy :



npm install class-validator

No more errors in my console ! I carried on and sent a POST request on my endpoint...

Nest: No metadata found. There is more than once class-validator version installed probably. You need to flatten your dependencies.

This one made me crazy. Should I install class-validator as a peer dependency ? Is it a problem in the yarn.lock or in package.json ?

Not at all ! It turned out that my DTO had zero validation rules !

It's that simple : if you get a No metadata found. There is more than once class-validator version installed probably. You need to flatten your dependencies. when using ValidationPipe, triple-check that you have at least one validation rule.

For example:



import { IsNotEmpty } from "class-validator";

export class CreateUserDto {
    @IsNotEmpty()
    firstName: string;
    lastName: string;
}

This stackoverflow comment saved the day. Thanks !

How to create an electron-forge project with React, Typescript and HMR

Raphaël Badia — Sun, 14 Jun 2020 17:44:09 +0000

introduction

This post has been transferred to my blog. You can read the latest version here:
How to create an electron-forge project with React, Typescript and HMR

As a react developer, I've always been used to magic CLIs that scaffold projects with everything included, such as Next.js or create-react-app. I don't think I ever setup react from scratch, but there is no electron-forge template for that, so I had to dig in...

What we want

A buildable electron project that includes :

react
typescript
hot module reloading on the react part

Getting started with the webpack-typescript template

electron-forge provides us a convenient webpack-typescript that generates a boilerplate configured with typescript and webpack support (who would have guessed ?).
Create the project using the following command :
yarn create electron-app my-new-app --template=typescript-webpack

Once the project has been created, enter it and run the project to ensure it works:
cd my-new-app
yarn start

The default app should open and display "Hello World"

Adding react

Now that our app opens properly, we need to add react dependencies.
In the terminal, run: yarn add react react-dom @types/react @types/react-dom

That done, replace the content of the body by the div that will contain the react app in src/index.html :

@@ -6,7 +6,6 @@

   </head>
   <body>
-    <h1>💖 Hello World!</h1>
-    <p>Welcome to your Electron application.</p>
+    <div id="root"></div>
   </body>
 </html>

Create a file in src called App.tsx and paste the following code into it :

import * as React from 'react';

const App = () => <div>Hi from react !</div>;

export default App;

To make sure typescript understands jsx, add "jsx": "react" in your tsconfig.json file like so:

@@ -12,7 +12,8 @@
     "resolveJsonModule": true,
     "paths": {
       "*": ["node_modules/*"]
-    }
+    },
+    "jsx": "react"
   },
   "include": [
     "src/**/*"

Now we need to update the renderer to bind react to the div we created earlier.
First, rename it from src/renderer.ts to src/renderer.tsx then replace the content by the following:

import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

Now update the js entryPoint in package.json with the correct name:

@@ -52,7 +52,7 @@
               "entryPoints": [
                 {
                   "html": "./src/index.html",
-                  "js": "./src/renderer.ts",
+                  "js": "./src/renderer.tsx",
                   "name": "main_window"
                 }
               ]

You can now run yarn start. The application should open and the react app should appear !

However, if you try to change some code in the App.tsx, the changes won't appear on your App. We need to manually install a module to hot reload changes.

Adding hot-reload

We're almost there ! Run yarn add react-hot-loader, then head over srx/App.tsx and add the following lines:

@@ -1,5 +1,6 @@
+import { hot } from 'react-hot-loader';
 import * as React from 'react';

 const App = () => <div>Hi from react!</div>;

-export default App;
\ No newline at end of file
+export default hot(module)(App);
\ No newline at end of file

Now, we need to configure babel to use the react-hot-loader package that will enable hot reloading by creating a .babelrc file at the root of the repository and putting only one line into it :

#.babelrc
{ "plugins": ["react-hot-loader/babel"] }

Finally, run yarn start, change the message, hit save and it should work !

Hope it helps !