Skip to main content

21 posts tagged with "frontend"

View All Tags

· 2 min read
D Balaji

What are the Date methods?

I have worked with a bunch of web apps and all of them have date-related code in common. The Date utils are written in plain Javascript using the Date constructor.

var date = new Date()

// Sample date methods
date.getMonth()
date.getFullYear()
date.getDate()

I have also worked on issues where the test suite would pass correctly on the day the tests were authored but they would fail on the other day or in the server. This is because the dates are getting dynamically generated in the test but the matcher value is static.

Why is testing Dates tricky?

You cannot assert a dynamically generated date. For instance, if your date until returns a new date by applying some logic. You cannot put a test that looks like this.

// WRONG code, don't use without mocking date.getDate

expect(add2DaysToCurrentDate()).toBe("Some hard coded date")

If you want to use a hardcoded date, you should be able to control the output of the add2DaysToCurrentDate method.

How to make dynamic date logic predictable?

The short answer is JEST mocks. Whenever we want to add 2 days to the current date, we need to ensure the date.getDate() method returns the same value, then we can write a test to assert the returned value.

it("should return new Date which is two days ahead of today", function() {
jest.spyOn(Date, "getDate").mockImplementation(() => 14) // Mocks the getDate method until this test block
expect(add2DaysToCurrentDate()).toBe("Some hard coded date")
})

Downsides to this approach

As I mentioned in the comment, till the end of the test block, we cannot use date.getDate() as if it's a real function. The mock will replace the actual function call in the test block. This might hinder your assertion logic. We need to plan accordingly.

References

https://stackoverflow.com/questions/29719631/how-do-i-set-a-mock-date-in-jest

· 3 min read
D Balaji

From the title it sounds like a lot of cool technologies working side by side isn't it. Let me list them once again

  • Turborepo - managing monorepo
  • NPM - package manager
  • NPM workspaces - also provided by npm, assists in monorepo
  • vite - frontend tooling, rollup wrapper
  • vite react - template for vite

Use case scenario

I have a cool monorepo on github which holds all my sample projects, experimental works and code sample which I play around with.

The monorepo is build with npm workspaces & turborepo. I must admit that I hardly use any turbo repo features yet. Its mostly npm workspaces and npm commands at scale.

I encountered vite for frontend tooling and wanted to give it a try. Without a second thought, I created a directory called tooling and started working with vite.

Glitches and resolutions

  1. The first glitch was the node version requirement of vite. I opened a new terminal and used nvm to set the node version to latest. Thats expected bug while working with latest nodeJS tools.

  2. The vite module was installed locally within the workspace. However the same vite module was referenced in vite.config.js. npm would try to resolve vite by checking in the global node_modules but it would not be there.

To understand why npm installed vite locally instead of global node_modules was easy. vite was used in npm scripts and if vite were to be installed globally then the npm scripts would fail mercilessly.

"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},

But the same module being used in JS modules was not expected by npm, so we need to instruct npm to install vite in both local and global node_modules.

Resolution

At this step I found 2 ways to solve the problem.

  1. The first way is something hinted by turborepo scaffold itself. I had to add vite as dev dependency at the root of the monorepo. This would ensure that vite is installed into the global node_modules.

  2. The second way is to use an alias for vite within the workspace. You can do this with the below command

npm i my-vite@npm:vite -P

This command would ensure that the package vite is alias as my-vite. While checking the global node_modules folder, I noticed a folder with the name my-vite.

The flipside is that, I need to reference the vite package as my-vite within the code.

import { defineConfig } from "my-vite";

· 2 min read
D Balaji

React forward ref

The best thing about React props is the ability to send different data structures from parent to child without any code configuration like @input etc. But why do we need an extra construct React.forwardRef for passing ref? let us find out.

· 4 min read
D Balaji

Do npm update

As a senior developer or an architect, one of the job demands would be to update the npm-packages of your application. Ironically there is no one single command which would start the update and end the update with all finesse and grace the application would need. here are a few lessons from my job on updating npm packages.

· 4 min read
D Balaji

Javascript bundle

I moved into a design tech team that takes care of enterprise design language. It's completely a front-end job. It has been more than 90 days since I moved into this job and here is my learning experiences. Here are my top 10 learning experiences from my new job role as "Lead design technologist".

· 2 min read
D Balaji

Ecmascript and JavaScript

Let us say you drop a cheque at the local bank, it goes through several stages and finally, you get your money. Similarly in JavaScript, the working committee throws in an idea that goes through several stages before it becomes a language feature. Let's find out more.

· 3 min read
D Balaji

reading old updates

Staying up to date with relevant updates from the frontend community is an art rather than a science. I am a big fan of the Feedly app which is an awesome RSS feed reader. My blog updates can be subscribed to on Feedly for updates. Analyzing the data points, I am in favor of Twitter over subscribing to blogs for keeping you updated on the tools, libraries, processes, and APIs in the frontend.