DEV Community: Pratik Thapa

NVM Commands Cheat Sheet

Pratik Thapa — Sun, 26 Nov 2023 20:44:34 +0000

I keep forgetting these commands. So, let's put is all together.

Installing

Follow installation steps:

List Available Releases


nvm ls-remote
nvm ls-remote | grep -i "latest"
nvm ls-remote | grep i "<node_version>"

Install a Node Version

nvm install <node_version>

List Installed Versions

nvm ls

Aliasing

Set a specific version as default

nvm alias default <node_version>

Set a user defined alias to a node version

nvm alias <alias_name> <node_version>

Remove the alias name

nvm unalias <alias_name>

Switch to a version (Use)

 # don't have to match exact number. `nvm use 16`
nvm use <node_version>
# or use the latest   
nvm use --lts

Get path to installed node

# /Users/pratikthapa/.nvm/versions/node/v20.10.0/bin/node
nvm which node

Uninstall a Version of NodeJs

nvm uninstall <node_version> # a specific version
nvm uninstall --lts # Uninstall the latest LTS release

Help

nvm --help # get help documents

How to Run Cypress Tests in Parallel in Github Actions

Pratik Thapa — Wed, 17 May 2023 15:57:03 +0000

Recently, I was looking for a way to run all my cypress tests in parallel in GitHub actions. All my tests were running sequentially and it was taking too long.

So, here is what I did to solve that problem.

🔠 Basics

By default, all jobs run in parallel in GitHub Actions unless you put the need statement and make one job dependent on the other. But, if you need to run all tasks of a job in parallel then you need to use matrix feature of GitHub action.

Matrix allows you to run a set of variable values and each combination of those values will result in a different job or step that runs in parallel.

For example,

jobs:
  build:
    strategy:
      matrix:
        os: [ubuntu-latest, windows-latest, macOS-latest]
        node-version: [10.x, 12.x, 14.x]

This would create 9 separate jobs, one for each combination of OS. More information in the Github Action Docs.

⚙️ Creating Parallel Jobs for Each Cypress Test

We need to create a matrix for each spec of Cypress tests so all tests run in parallel. Here, each spec represents all the tests contained in one file.

1️⃣ Create a JS File to Locate All Cypress Specs.

This file is later used in the .github/workflows folder. I created this file inside the cypress/support folder. But, you can choose to put this in the root or anywhere you like.

file name: locateCypressSpecsToRun.js

const fs = require('fs');
const path = require('path');
const getAllFiles = (dirPath, arrayOfFiles = []) => {
  const files = fs.readdirSync(dirPath, { withFileTypes: true });

  files.forEach((file) => {
    if (file.isDirectory()) {
      arrayOfFiles = getAllFiles(`${dirPath}/${file.name}`, arrayOfFiles);
    } else {
      arrayOfFiles.push(`${path.join(dirPath, '/', file.name)}`);
    }
  });
  return arrayOfFiles;
};

const specs = getAllFiles('cypress/e2e');
process.stdout.write(`${JSON.stringify(specs)}\n`);

Pleaes note: You can't use .ts file extension here even if you are using typescript for your cypress because we need to run this file directly with node.

Inside the getAllFiles() I have put cypress/e2e path where all my tests are located. Modify this as needed.
If you run this file with the command node locateCypressSpecsToRun.js you should see,

//pretty version
specs = [
  'cypress/e2e/test1.cy.ts',
  'cypress/e2e/test2.cy.ts',
  'cypress/e2e/test3.cy.ts',
  'cypress/e2e/test4.cy.ts',
  'cypress/e2e/test5.cy.ts',
];

2️⃣ Building the Matrix

After creating the strings of spec locations, it’s time to build a cypress matrix. The cypress matrix needs to be inside the job in yaml file.

jobs:
  build-cypress-matrix:
    runs-on: ubuntu-latest
    steps:
      - name: checkout code
        uses: actions/checkout@v3
      - id: set-matrix
        run: echo "specs=$(node cypress/support/locateCypressSpecsToRun.js)" >> $GITHUB_OUTPUT
    outputs:
      specs: ${{ steps.set-matrix.outputs.specs }}

Explaining: run and specs
- run: echo "specs=$(node cypress/support/locateCypressSpecsToRun.js)" >> $GITHUB_OUTPUT:
  
  This line uses the run key to specify a shell command to run. In this case, the command is echo followed by a string that runs a Node.js script located in cypress/support/locateCypressSpecsToRun.js. The output of the script is captured by surrounding the command with $() and stored in a shell variable called specs. The >> operator appends the output of the command to a file called, $GITHUB_OUTPUT which is a predefined environment variable in GitHub Actions that captures the output of a step.
  
  You can read more about $GITHUB_OUTPUT here.
- outputs: specs: ${{ steps.set-matrix.outputs.specs }}
  
  This line uses the outputs key to define an output for the step called set-matrix. The output is called specs, and its value is set to the value of the specs variable that was set in the run command using the ${{ steps.set-matrix.outputs.specs }} syntax. This allows subsequent steps in the workflow to access the value of the specs variable.
  
  To simplify, we are assigning specs: specs.

3️⃣ Make Matrix Required for Other Jobs.

Make sure build-cypress-matrix job is completed before you run your tests. So, use Action’s needs statement. For example, you can do something like this.

regression:
    needs: [notify-slack-on-start, build-cypress-matrix]
    # rest of the code ......

In this case, notify-slack-on-start is also required to run the regression job

4️⃣ Define Matrix

Inside the job you want to run in parallel, add your pre-built cypress test matrix. See the last specs: line.

regression:
    needs: [notify-slack-on-start, build-cypress-matrix]
    runs-on: ubuntu-latest
    strategy:
      fail-fast: false
      max-parallel: 64
      matrix:
        config:
          [
            {
              type: 'desktop',
              config: 'viewportWidth=1920,viewportHeight=1080',
            },
          ]
        browser: [chrome, firefox, edge, safari]
        specs: ${{ fromJson(needs.build-cypress-matrix.outputs.specs) }}

In this case, I have three matrix defined.
- browser: All the browsers I want test
- One for config: the size of the browser
- finally specs:
  - fromJson: This function converts a JSON string to an object, read more about this github action function here. It is used to convert the output from the build-cypress-matrix job into an object.
  - needs: This function is used to indicate that the current job depends on the output from another job. In this case, it is used to indicate that the regression job needs the output from the build-cypress-matrix job.
  So, ${{fromJson(needs.build-cypress-matrix.outputs.specs).specs}} is first getting the output of the build-cypress-matrix job using needs. The fromJson function then converts this output from a JSON string to an object, which has a property called specs that contains the list of Cypress spec files to run. Finally, the specs property is extracted from the object and used as the value for the specs field in the matrix strategy for the regression job.

5️⃣ Use The Matrix

Finally, use the spec matrix just like you would for browsers or operating systems.

- name: My Awesome Cypress Tests
        uses: cypress-io/github-action@v5
        with:
          browser: ${{ matrix.browser }}
          config: ${{ matrix.config.config }}
          spec: ${{ matrix.specs }}

💡Example

This is what a complete workflow could look like.

# sample document. 
  name: Testing Parallel Runs

on:
  workflow_dispatch:

env:
  SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK_URL_CYPRESS }}
  SLACK_ICON: https://github.githubassets.com/images/modules/site/features/actions-icon-actions.svg
  SLACK_CHANNEL: cypress-notifications

jobs:
  notify-slack-on-start:
    runs-on: ubuntu-latest
    steps:
      - uses: rtCamp/action-slack-notify@v2.0.2
        name: notify slack on run start
        env:
          SLACK_TITLE: My Awesome Cypress Tests
          SLACK_COLOR: good
          SLACK_MESSAGE: 'Automation has started :white_check_mark:'

  build-cypress-matrix:
    runs-on: ubuntu-latest
    steps:
      - name: checkout code
        uses: actions/checkout@v3
      - id: set-matrix
        run: echo "specs=$(node cypress/support/locateCypressSpecsToRun.js)" >> $GITHUB_OUTPUT
    outputs:
      specs: ${{ steps.set-matrix.outputs.specs }}

  regression:
    needs: [notify-slack-on-start, build-cypress-matrix]
    runs-on: ubuntu-latest
    strategy:
      fail-fast: false
      max-parallel: 64
      matrix:
        config:
          [
            {
              type: 'desktop',
              config: 'viewportWidth=1920,viewportHeight=1080',
            },
          ]
        browser: [chrome]
        specs: ${{ fromJson(needs.build-cypress-matrix.outputs.specs) }}
    env:
      NPM_TOKEN: ${{secrets.NPM_TOKEN}}
      CYPRESS_PASSWORD: ${{secrets.CYPRESS_PASSWORD}}
      CYPRESS_configFile: prod
# add other env as necessary

    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: copy npmtoken to npmrc
        run: cp .npmtoken .npmrc
# this step is only necessary if you are using private npm packages and need to provide .npmrc to github runner. 

      - name: My Awesome Cypress Tests
        uses: cypress-io/github-action@v5
        with:
          browser: ${{ matrix.browser }}
          config: ${{ matrix.config.config }}
          spec: ${{ matrix.specs }}

      - name: Generate report
        if: failure()
        uses: actions/upload-artifact@v2
        with:
          name: Failed on ${{matrix.browser}}-${{matrix.config.type}}
          path: |
            cypress/report/*
            cypress/screenshots/*
            cypress/videos/*

      - uses: rtCamp/action-slack-notify@v2.0.2
        name: notify slack on failure
        if: failure()
        env:
          SLACK_TITLE: Test(s) failed while running on ${{matrix.config.type}}
          SLACK_COLOR: danger
          SLACK_MESSAGE: ':failed: :computer-rage: Automation Failure on Prod! <${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}>'

  notify-slack-on-completion:
    needs: regression
    runs-on: ubuntu-latest
    steps:
      - uses: rtCamp/action-slack-notify@v2.0.2
        name: notify slack on run completion
        env:
          SLACK_TITLE: My Awesome Cypress Tests
          SLACK_COLOR: good
          SLACK_MESSAGE: ':pass: :white_check_mark: Automation Successful on Prod! <${{ github.server_url }}/${{ github.repository }}/actions/runs/${{ github.run_id }}>'

🏆 Conclusion

Finally, I want to share that this pattern can be used for any framework like Puppeteer, Jest, and others. The main benefit of this approach is that you don't have to pay for parallel running ability if it is behind the paywall. Also, it helps reduce the time you need to wait for all the jobs to complete.

Art of Array Manipulation in JavaScript.

Pratik Thapa — Sat, 11 Feb 2023 22:13:14 +0000

As a JavaScript developer, you know that working with arrays is a critical component of your skill set. In this article, I'll be sharing time-saving functions that I use on a daily basis.

Array.map()

map takes a callback function to modify/change each item of an array and returns a new array with the changes.

const numbers = [1, 2, 3, 4, 5]

const sqraredNumbers = numbers.map((num)=> num * num )

console.log(sqraredNumbers) // Expected Output: [1, 4, 9, 16, 25]

That means, if each item of the array is an object, we can use object properties on the item if each item of the array is an object. For example,

const person = [{name: "Peter", age: 30}, {name: "John", age: 25}, {name: "Ernest", age: 40}]

// extract names. 
const name = arr.map((obj)=> obj.name) // Output: ['Peter', 'John', 'Ernest']
// extract age
const age = arr.map(obj => obj.age) // Output: [30, 25, 40]

In the above example, we have a person array with objects as items. Each item has name and age property. Using the map function, for each item of the array, we first grabbed the name and then age.

To re-create an array of objects with keys and values you can do the following.

const name = ['Peter', 'John', 'Ernest'];
const age = [30, 25, 40]
const newObject = []; .

// using for loop. 

for (let i = 0; i < name.length; i++) {

const reconstructedObject = {name: name[i], age: age[i]} 
newObject.push(reconstructedObject) // push the array 

}

// using forEach 
name.forEach((element, index) => {
    const reconstructedObject = { name: element, age: age[index]}
newObject.push(reconstructedObject)
})

//Side Note:  if you want to make name key and the age it's value, //then just do this. 

name.forEach((element, index ) => newObject[element] = age[index])
// Output: [Peter: 30, John: 25, Ernest: 40]

Array.filter()

Filters: Returns/Outputs the new array based on the filtering criteria you provide on the callback function.

let arr = ['Kabul', 'Zalalabad', 'Interesting City', 1, 2, 3, 3, 'kabul']

let strArr = arr.filter(item => typeof item === "string") 
console.log(strArr)
// expected output: 
//['Kabul', 'Zalalabad', 'Interesting City', 'kabul']

let numArr = arr.filter(item => typeof item === "number")

// expected output: [1, 2, 3, 3]

In the example above, each array item is checked based on whether the item is a string or a number. Then, the filter property filters out the array based on the callback function provided.

Array.reduce().

As the name suggests, array.reduce() reduces an array to a single value. It is a powerful recursive method (a function that calls itself until the desired result is achieved). It can get complicated quickly but here is my attempt to simplify it.

Reduce takes a callback function with two arguments: sum and currentValue and an optional initial value.
- sum also known as accumulator, accumulates all the values from the previous call. If the array contains numbers, reduce function outputs a single value. If the array contains a string, it will join all the strings together.
- The Initial value is optional. If provided, sum is set to the initial value. If this is not provided, sum is set to the first item of the array.

const message = ["I ", "am", "learning", "JavaScript"];

// No initial Value. So here: sum = "I". 
const reducedMessage = message.reduce((sum, currentValue)=>{
    return sum + currentValue
})
// Expected Output: I am learning Javascript

reduce example with an initial value


const message = ["I ", "am", "learning", "JavaScript"];

// With initial Value. So, sum = "Hello everyone!"
const reducedMessage = message.reduce((sum, currentValue)=>{
    return sum + currentValue
}, "Hello everyone! ")

// Expected Output: Helo everyone! I am learning Javascript

Since the sum is set to the initial value, we can set the sum to an empty array by passing an empty array in place of the initial value.

let arr = ['Kabul', 'Zalalabad', 'Interesting City', 'kabul']

// Here, sum = []. 
let lowerCasedArrays = strArr.reduce((sum, currentValue) => {
    sum.push(currentValue.toLowerCase());
    return sum
}, [])
// expected output. 
//['kabul', 'zalalabad', 'interesting city', 'kabul']

Explainer:
- Above sum is set to an empty array: sum = []. That means, we can use array methods with sum. Therefore, sum.push is a valid method.
- currentValue is each item of the array arr
- toLowerCase() method takes a string and converts all to lower case.
- return sum returns the array.

You could use map, forEach, for or many other methods to achieve this result instead of reduce. That might be desired since reduce can be complicated to understand, especially for beginners.

set()

In Javascript, Set object is a collection of unique values. So, anytime you need to filter out an array based on unique values, you would use, set.

let totallyUniqueArr = [...new Set(lowerCasedArrays)]
console.log(totallyUniqueArr)

// expected output. 
// ['kabul', 'zalalabad', 'interesting city']

new Set outputs the following, which is not a valid javascript object. So, I used the spread operator to spread/distribute the value of this object to the array.

new Set(["kabul", "zalalabad", "interesting city"]). 
// Expected Output: {"kabul", "zalalabad", "interesting city"}

Other simple methods.

There are multiple other methods, that are simple to understand and use.

let arr = ["Denver", "Chicago", "New York", "Houston"]

array.shift(): Get the first item of the array. But, it changes the length of the original array.

arr.shift() // Output: Denver

array.pop(): Get the last item of the array. But, it changes the length of the original array.

arr.pop() // Output: Houston

array.at(): Pass 0 to get the first item and pass -1 to get the last item of the array. This method does not change the length of the array.

arr.at(0) // Output: Denver
arr.at(-1) // Output: Houston

Discovering the World of Programming: Top 3 Insights from an Amateur.

Pratik Thapa — Sun, 29 Jan 2023 00:39:32 +0000

Embarking on the programming journey as a beginner felt like entering a dark and crowded club, with the blaring sound of code snippets and technical jargon overwhelming my senses. But as I navigated the neon-lit lines of code and the flurry of activity, I began to make sense of my surroundings. The once-faint whispers change into a symphony of comprehension, and I found my footing in this exciting and vibrant new world.

As a novice, I am like a newborn calf unsurely trying to stand beside its mother, but with time and determination, I've learned to navigate this thrilling new world. I've discovered hidden gems, and I've come to understand the few underlying principles. Today, I want to share some lessons with you.

It's not all about coding but mostly about breaking the problem into manageable pieces.

From my first timid steps in HTML and CSS to building my first full-stack application, my success has always depended on how I dismantled the monstrous idea into smaller chunks I could tackle.

I still remember the frustration of my first few weeks as I struggled with the navigation bar of the website I was building. The clicking of my black Toshiba Keyboard in my ears and the tension building in my fingers as I struggled to align the elements just right. And the time I pulled my beard out in frustration, as I couldn't get puppeteer to work with AWS ECS, the bitter taste of defeat heavy on my tongue and the stinging sensation on my chin.

These days, I jot down everything my project needs and break the problems I need to solve into smaller pieces, like a master chef breaking down a side of beef. Each piece is carefully examined and dissected until the solution becomes clear. If I fail, it's simply an opportunity to break it down further or a unique chance to learn something new.

Trying to learn everything is an impossible task that overwhelms and is not fruitful.

When I think I have mastered a subject, something new comes into my view: a summit I have yet to conquer. The only thing I have truly learned is HTML... and even that's debatable. My cat managed to break my website just by sitting on the keyboard.

Programming is like navigating a labyrinth, with every turn revealing a new challenge. But through it all, I've realized that it's not about mastering every nuance and detail. It's about learning enough to solve the problem and build the project.

Programming languages are tools we use to make our lives easier by solving problems. And that's it, nothing more, nothing less. It's a tool like any other. I learn enough to do my work, and I move on.

Typing fast does not make you a 10X programmer.

As someone who frantically increased my typing speed from 50 to 80 words per minute, I can attest that my fingers were moving in a blur, and my mind was racing to keep up.

I have explored all the hip ways to increase my speed, like using VIM, different VS Code extensions, different editors, IDEs, and more. It was like a treasure hunt, looking for that elusive shortcut to give me an edge. But as it turns out, shortcuts were like shiny objects that caught my eye, but in the end, they didn't help me become faster at my job.

I was reaching for the summit but falling short. I was fast, but my work was unrefined, and my understanding of the underlying principles was lacking. I've learned that the knowledge of the fundamental concepts has made me a more efficient programmer than the flashy tools and shortcuts.

It has been my humbling experience that the essence of programming lies not in the technologies we use but in the solutions we build.

With that said, don't hesitate to explore and experiment with different typing methods, code editors, and extensions. When starting, every bit of motivation helps to keep you going. I've spent countless hours customizing my VS Code editor to my liking. The process is like decorating your home, with each article filling the void with warmth and personality. The customization didn't make me a better programmer, but it taught me how to sit in front of a computer all day and make my workspace inviting.

It's also important to remember that if you don't enjoy the tools that come with the job, you may want to reevaluate if programming is the right profession for you. It's like a chef not enjoying their knives. It's a fundamental part of the career.

I still don't know what I am doing. I mostly feel like a deer navigating a busy highway, every bright headlight stopping me in my tracks. Lastly, I want to echo comedian Bill Burr's sentiment here: "I am an idiot, don't listen to me."

Import vs Require in JavaScript. CommonJS vs ES modules.

Pratik Thapa — Sun, 01 Jan 2023 17:29:13 +0000

Introduction

If you are new to javascript and/or node and have been confused by keywords like import, export , module.exports and require, then you are not alone. In this short piece, I want to clear that up for you.

CommonJS:

Introduced in 2009, the CommonJS module solved a major problem JavaScript had for a long time. CommonJS made it easy to define and share the modules (or pieces of code) between files. CommonJS is designed to run on the server and uses module.exports to export and require() import the code.

CommonJS modules are synchronous, meaning that the require() function will block the execution of the script until the required module is fully loaded.
CommonJS modules use a pattern called "global leaky bucket", in which variables declared in a CommonJS module is added to the global scope and are therefore accessible to all other modules.
CommonJS is Primarily used in Node projects.

Using Common JS modules.

Exporting single function.


//foo.js 
const greeting = (name)=> console.log(`Hello! ${name}`)

// if you want to share it, export it\
module.exports = greeting

Importing and using the code.


// bar.js

// Importing:  
const greeting = require(./foo.js)

// Using it 
const welcome = (place) => console.log(`${greeting(Pratik)}. Welcome ${place}`)

In the above code: require() takes in file path as argument.

While requiring module from another file, you can exclude .js extension.

require can be used inside other functions.

Exporting multiple functions.


//foo.js
const greeting = (name)=> console.log(`Hello! ${name}`)
const greeting_VIP = () => /*Code Here*/ 

module.exports = {
greeting,
greeting_VIP
}

Importing multiple functions


// bar.js
const {greeting, greeting_VIP} = require('./foo.js')

// then call individual function like: 
greeting('Pratik'); // expected Output: Hello! Pratik
greeting_VIP()

We can also import the above code with const foo = require(./foo.js). But while using it, you need to call them like this: foo.greeting(argument). To make it easy, we destructured it while importing the function. Read more about destructuring here.

An alternate way to export the code.


//foo.js
exports.greeting = () => {/*code here*/}
exports.greeting_VIP = () => {/*code here*/}

ES Modules.

Introduced in ECMAScript 6 (ES6), the JavaScript version released in 2015, ECMAScript (ES) modules are designed to be used in the browser and are optimized for performance. ES modules are the official module system for JavaScript and are designed to be used in the browser and on the server.

ES modules use the export and import statements to define and consume modules. They also use a pattern called "explicit exports", in which variables must be explicitly exported and imported in order to be shared between modules. This helps to prevent the "global leaky bucket" pattern that is used in CommonJS modules, in which variables declared in a module are added to the global scope and are therefore accessible to all other modules.

Using ES6 Modules.

Exporting only one function.


//foo.js

const greeting = (name)=> console.log(`Hello! ${name}`)
const greeting_VIP = (name)=> console.log(`Hello! ${name}. You are VIP`) 


export default greeting // only exports greeting.

Importing


// bar.js
import greeting from './foo.js'

.js extension is required in ES6 import

Import the module in a HTML file like so.


<body> 
<script src='./foo.js' type='module'> </script>
</body>
%% type='module' is required %%

You can export multiple functions/variables like this in ES6


//foo.js
export const greeting = (name)=> console.log(`Hello! ${name}`)
export const greeting_VIP = (name)=> console.log(`Hello! ${name}. You are VIP`)

importing the module into another file


//bar.js
import {greeting, greeting_VIP} from './foo.js' // same destructuring pattern.

import can't be used inside other functions.
It does not matter where you put import in the file, js will sort them at the top anyway.

Conclusion:

If you are starting a new Node.js project, it is generally recommended to use ECMAScript (ES) modules. However, to use ES modules in a Node.js project, you will need to ensure that you are using a version of Node.js that supports ES modules. Node.js 14 and higher supports ES modules natively so that you can use the import and export statements directly in your code.

Suppose you are using an earlier version of Node.js that does not support ES modules natively. In that case, you can still use ES modules in your project by using a tool like Babel to transpile your code to a version of JavaScript that is compatible with the version of Node.js you are using.

In my experience, in a large company, both ECMAScript (ES) modules and CommonJS modules are used. So, you need to know both ways.

Object Oriented Programming: Working With Classes in JavaScript.

Pratik Thapa — Wed, 28 Dec 2022 04:40:32 +0000

Introduction:

This is by no means an exhaustive guide to Object Oriented Programming in Javascript. These notes on OOP in JavaScript are what I mostly use, and come back to them daily for reference.

On this note, I primarily focus on creating objects with class and function keywords. I also talk about inheritance method chaining and some other stuff. For a detailed explanation and examples, please visit the MDN's blog here on classes.

Object Oriented Programming

Object Example

An Object in JavaScript is a collection of properties. Property can be functions (function has an action associated with it) or a simple key :value pair which could just represent a feature of the object it is in. For example: color: red is a property whereas function accelerate(){} is a property of the car that has some action associated with it.
- For example,


const car = {
    color: red,
    type: sedan, 
    accelerate: function(){
        // code here
    }
}

Please Note: I have assigned the object above to a variable called car. If you don't need to refer back to the object, you don't need to assign the object to a variable.

Creating Objects: Object Literal

Also known as object initializers, object literals allow us to create Javascript objects. We need to use curly braces in JavaScript to initialize the object.

// empty object
let obj = {} 

// object with property and value
let user = {
    name: 'John Doe', // property can be identifies
    1000: 'example_1', // or property can be a number 
    "email": 'john.doe@useremail.com', // or it can be a string.    
    login: function(){} 
    logout(){} // ES6 syntax. 
}

In the user the object above, we have encapsulated or gathered all the relevant properties of a user in one place. Think of opening and closing curly braces {} as a capsule that groups all the relevant properties of user.

Accessing and Updating Properties

Accessing Object Properties

To access object properties we can use simple dot notation.


console.log(user.email) 
// expected output: john.doe@useremail.com

However, dot notation only works when the object has an identifier that starts with a letter, $, _ or unicode escape sequence. So, to access the property of type number you need to use the following syntax.


console.log(user[1000]) // expected output: example_1 

// this notation below works for other properties as well. 

console.log(user['email']) // expected output: john.doe@useremail.com

We can access the properties of objects dynamically as well.


let foo = 'email'
console.log(user[foo]) // expected output: john.doe@useremail.com
// changing the variable 
let foo = 'name'
console.log(user[foo]) // expected output: John Doe

Updating Object Properties

To update the property, simply get the property name and set it to new value. For example, for our user object, we can do the following.


user[1000] = "example_2"; 
user.email = "email@johndoe.com";

Setting a property that does not exist on the object:


user.race = 'South Asian' 
console.log(user) // expected output contains: {.... race: "South Asian"}

Class and Constructor Function: Creating Multiple Objects With the Same Property

You might have to create multiple objects with the same property types, just like creating multiple computers or cars with the same features (property).
First, create a constructor class (blueprint) of the object.

class Car {
    constructor(color, type, accelerateFn){
        this.color = color;
        this.type = type;
        this.accelerate = function(){console.log(accelerateFn)};
    }
}

this represents the object it is in. When we create a new object (example: whiteCar) with the blueprint above, this keyword will represent the object just created (whiteCar)

Also, there can only be one method with the name constructor inside the Class.

Now to create a new object with all these properties of the constructor class, do the following.

const whiteCar = new Car('white','hatchback','is a fast car')
console.log(whiteCar.color) // expected output: white

const redCar = new Car('red', 'sedan', 'is slower car')
console.log(redCar.color) // expected output: red

Methods:

For the example above: we can add methods brake and headlights like this


class Car {
    constructor(color, type, accelerateFn){
        this.color = color;
        this.type = type;
        this.accelerate = function(){console.log(accelerateFn)};
    }
    // methods
    brake(){
        console.log(`Brake of this ${this.color} ${this.type} is in            good condition.`)
          return this;
    }

    headLights(){
        console.log(`Lights of this ${this.color} ${this.type} is in        good condition.`)
          return this;
    }

}

If you want the methods or properties to not be shared with another object/instance created from the class, use the word static


class Car {
    constructor(color, type, accelerateFn){
        this.color = color;
        this.type = type;
        this.accelerate = function(){console.log(accelerateFn)};
    }
    // methods
    brake(){
        console.log(`Brake of this ${this.color} ${this.type} is in good condition.`)
          return this;
    }
    headLights(){
        console.log(`Lights of this ${this.color} ${this.type} is in good condition.`)
          return this;
    }
    // static example: 
    static moto = 'Let\'s make the world a better place'
    static hello(){
        console.log(`This method is only available in this Car Object`)
    }
}

Method Chaining.

return this in the above object, methods return the object it is in. What that allows us to do is call all the methods of the object after one another. For example,


const redCar = new Car('red','sedan','is faster')
console.log(redCar.brake().headLights())

Here, we can call headlights() after brake().

Class Inheritance

If you want to create a new object with all the properties of the previous one plus some more properties and methods of its own, you need to inherit the properties of the previous object with class Inheritance.


class SuperCar extends Car {
    launchMode(){
        console.log(`Launch Mode of ${this.color} supercar`)
    }
}

Now when you create a new SuperCar, you need to do this


const ferrari = new SuperCar('red','super-car','is fastest')

Note: The new object that extends on properties of another object expects all the arguments of the previous one. Therefore, in this example above, we need to provide in color, type and accelerateFn

Emulating Class with `function` Keyword

The following code with function keyword is also valid


function Car(color, type, accelerateFn){
    this.color = color;
    this.type = type;
    this.accelerate = function(){console.log(accelerateFn)};
}

// to attach methods, we can use prototype

Car.prototype.brake = function(){
    console.log(/*code here*/)
}

Now, an instance of the object can just call in the method


const ferrari = new SuperCar('red','super-car','is fastest') 
ferrari.brake();  // works. :)

Inheritance of class created with the function keyword

To create a new Object from the original object (with constructor function) created with function() keyword, do this.


function SuperCar(...args) {
    Car.apply(this, arg)
}
// here, ...args is taking arguments of Car and making them an array.

Now, you can create an object like this


new lambo = new SuperCar('red','superCar','is fastest') // with all the same args

To inherit the prototype methods attached to the original object created with function() keyword, use Object.create() like so.


SuperCar.prototype = Object.create(Car.prototype) // now all the prototype functions appear for SuperCar object as well.

Important Note:

An Important difference between funciton decleration and class decleration is that while functions can be called before they are defined but classes can't.


const ferrari = new SuperCar() 
class SuperCar = {}

// Refrence Error because we are calling function before creating it.

How To Setup Cypress Testing Library? A Smarter Way To Select Elements.

Pratik Thapa — Sun, 18 Dec 2022 00:28:12 +0000

What is Cypress Testing Library?

Testing Library is a family of packages that helps you select and test UI components in a user-centric way. Simply put, it helps you select and interact with elements at a high level - without being too granular in selecting elements - with accessible roles instead of using CSS selectors.

Writing tests while keeping the user in mind gives you confidence that you won’t have to rewrite the script on every refactor.

The Problem with Traditional CSS Selectors?

How we select elements should not decide if our test passes. However, using the traditional ways of selecting elements often fails to be dependable. A major refactor or change in CSS selectors can cause our test to fail. Also, the user needs to know how CSS selectors work in the first place, which can get quite complicated.

Let's see an example:

The Sign In button in the picture above can be selected in different ways.

Using Fragile Selector

The first way is to use the selector shown above. You can get this selector by right-clicking on the element you want to select and copying the selector. This selector depends on child divs of #root element. On a website refactor, or for any reason, if a position of one of the divs is changed, you will need to refactor your test code.

Using Good Selector

Another way to select the element is to do something like this. This is what cypress suggests on its selector playground as well.

Basically, we are selecting a parent and its child with a unique value of an attribute. This is more dependable than before because element selection is not relying on a bunch of elements' positions in the document.

With Cypress Testing Library, we can avoid CSS altogether and use accessible properties of elements and select them reliably with the following API.

cy.findByRole()

We will see how to use this later in this article.

Installing Testing Library

Follow this instruction of the official document, but TLDR is below.

yarn add --dev cypress @testing-library/cypress 
# using npm 
npm install --save-dev cypress @testing-library/cypress

If you are using typescript with Cypress, add the following in tsconfig.json

{
  "compilerOptions": {
    "types": ["cypress", "@testing-library/cypress"]
  }
}

The testing library can also be used with other testing tools like Nightwatch, Jasmine, Playwright, Puppeteer, and so on. Although Inspired by the Testing library, Playwright built similar APIs. You can find Testing Library's all repositories on GitHub.

Why should you use the testing library?

The testing library uses the accessible role of an element to query the DOM, so it is much more reliable to create a testing framework since the role of an element does not change on refactoring.

It helps avoid changing your test code on every component refactor.

This means you don't have to mess around with selecting the element with CSS property, which can get very annoying.
Avoiding CSS selectors helps you speed up your work too, especially while selecting elements with similar roles.

A more brilliant way to select elements.

For our example above, we can use the testing library's API to select elements like this.

Here: I am using cy.findAllByRole because the example page has multiple Sign In links.

Testing library also has multiple other APIs. For example

cy.findByRole();
cy.findAllByRole();
cy.findByText();
cy.findByDisplayValue();

How to find the accessible properties of elements.

On google Chrome, right-click and inspect the elements you want to select. Then, Select Accessibility on the CSS section.

In the Computed Properties section, you can find all the information you need.

Use Regular Expressions.

Cypress testing library accepts regular expressions on its name property. So, instead of a passing string as shown above use Regular Expression (RegEx) because it is much faster and easier to parse a string.

Consider the following Example:

with regular expression, you can simply do the following.

Here, I am using regular expression to match certain part of the text, not the whole sentence.

HOT TIP: If you are new to regular expression, use ChatGPT to quickly generate regular expression.

Usage Example

Here is another example of how you can leverage the testing library to efficiently select elements.

To verify all the links of the footer you can do something like this.

In the picture above,

First, I am creating a class Name Called SelectLink
Then, inside I have a method named verifyLik which takes in linkName (a regular expression) as an argument. This method finds the link and verifies it exists in the document.
Next, I have another method verifyNavFooter. Inside the method, there is a regular Expression array with all the links I want to verify.
- I am using Javascript's Array.forEach property to quickly go through all the arrays of regular expressions.

Navigating around Errors:

Although the library is special, you will most likely encounter many errors during the process. When you run the cypress runner, the error spits out by the testing library looks something like this in Cypress runner. It also lists elements that have accessible roles.

Also, just because the element is shown as accessible in the browser, does not mean that the testing library will let you use them. In such case please refer to the list of accessible elements generated by the Testing Library during the test run (as seen in the picture above)

For example, placeholder text is accepted as a name for a button in Chrome but is not supported by @testing-library/cypress. See the pictures below.

Although chrome displays name as It must be 9 digits which is a placeholder text. The element's actual name is phone

// this works 
cy.findByRole('textbox',{name: /phone/i})
// this does not
cy.findByRole('textbox',{name: /it must be 9 digits/i})

Setting up SSH Keys on Mac for Github

Pratik Thapa — Sun, 04 Dec 2022 19:24:51 +0000

This tutorial assumes that you have not set up SSH keys in your machine(mac) before. Right now this tutorial only focuses on mac since that's what I am using.

The first thing to do is to create ssh keys in your machine. In mac, make sure you are on the home directory i.e: /users/pratikthapa. When you run this, it creates a new key that you can now use.

ssh-keygen -t ed25519 -C your.email.address@mail.com

Here:
-t ed25519 is the type of encryption we are using. If you machine is not compatible with this encryption, you can also use rsa. Read full documentation here
-C is the contact email associated with the key we are creating.

Location:
After running the command above, it will ask where do you want to save this. Just hit enter.
Passphrase:
- Hit enter for no passphrase.
- If you enter a passphrase in this step, it provides extra securtiy but github will frequently ask you to enter this exact passphrase during pull/push of repo. You can also save this passphrase in the keychain, so you don't have to enter it every single time.
Now that you've created ssh keys, you need to make sure your system's ssh agent knows about it. It's like a wallet that holds multiple identity cards. To do that, in the same terminal, run

eval "$(ssh-agent -s)"

This should print out something like this in the terminal.

Agent pid 12345

If you see this, it means that the machine's ssh agent was able to read/evaluate the ssh key.

Now, we need to put the key into the system's ssh agent. Think of it as putting the id in the wallet so that we can present it whenever it is necessary.

First make sure if the ssh-agent exists in your mac already. To see it, run

~.ssh/config

Here, ~ represent the home directory.

if the ssh-agent is not present you should see, zsh: no such file or directory: /Users/pratikthapa/.ssh/config

To make sure that the file does not exists visually, run

ls -a

When you are sure that the .ssh/config is not present, run the following commad to create it.

touch ~/.ssh/config

Now the file is created, edit the ssh-agent. Create the wallet to put the id 😉

    vim ~/.ssh/config

To add your private key to the ssh agent type

HOST *
  AddKeysToAgent yes
  IdentityFile ~/.ssh/id_ed25519

Here:
/.ssh/ is the folder name
id_ed25519 is the file that was created in step 1.

If you used the passphrase in passphrase section above do the following to add your passphrase to the keychain.

HOST *
  AddKeysToAgent yes
  IdentityFile ~/.ssh/id_ed2
  UseKeychain yes

Then, save and quit vim

press esc in your keyboard.
type: :wq to write/save and quit out of vim.

Instead of vim you can also use other tools like visual studio code to edit the file.
Open the file using code ~/.ssh/config and follow the same steps above. Or you can simply navigate to the folder, press command + shift + . to see the hideen files and open the config file manually with vs code.

Finally add the id into the wallet. Or Add the ssh key into the file we created.

ssh-add ~/.ssh/id_ed25519

That's it. Now, you need to navigate to github and add your ssh keys there. Basically, presenting your id to github.
- Open github.com and login
- Navigate to settings
- Click on SSH and GPG keys
- Click on New SSH key button.
- On the title, write the machine name or whatever you want to identify where the ssh key is coming from and what kind it is.
- On the key section paste the ssh key from the machine.
  - First you need to read the file. Run, cat ~/.ssh/id_ed25519.pub. ⚠️ Here, .pub means public key.
    - copy the key and paste it.
- Click Add SSH Key.
- Github will likely ask for your account password.
  - Enter your password and you are done.
To test if the ssh key is working, go to the terminal and type

ssh -T git@github.com

You should see something like this in the terminal

The authenticity of host 'github.com ***'......
You have successfully authenticated, but GitHub does not provide shell access.

That's it!

I am new to this process, feel free to critique me in the comments if what I am saying is wrong.