DEV Community: obedNuertey1

Environment Setup For TypeScript Development Crash Course🚀🚀

obedNuertey1 — Thu, 07 Sep 2023 13:15:48 +0000

Overview
- Introduction
- Setting up the Environment
- The tsconfig file
- The package.json file
- Starting the environment
- Conclusion

Introduction

In the ever-evolving landscape of Software development, staying at the forefront of technology is paramount. As such TypeScript, a statically-typed superset of JavaScript, has emerged as a powerful tool to enhance the development process, providing developers with cool modern language features. If you are ready to embark on a journey into the world of development with TypeScript, you've come to the right place!💪💪

In this comprehensive guide, we will walk through the essential steps of setting up a development environment for TypeScript, ensuring you're equipped with the right setup to dive headfirst into this exciting realm of programming.

Whether you're a seasoned JavaScript developer looking to add TypeScript to your skill set or a newbie to web development, this course will provide you with all you need to get started with TypeScript. We'll cover everything from installing TypeScript and configuring your development environment.

So, fasten your seatbelts, as we embark on a journey to supercharge your software development skills with TypeScript! Let's get started. 🚀🚀

Setting up the Environment

npm init -y
add the following to package.json: "type":"module"
Install typescript as dev dependency with the command: npm install typescript --save-dev
Add the following to the "scripts" property in package.json: "build": "tsc --watch", "dev":"node ./dist/index.js --watch ./dist"
Create an "src" directory in the root of the folder. This is where all your ".ts" files and other folders related to typescript will go.
Install the following by typing the following in the root directory's command line: npm i -D @types/node.
next type npm install --save-dev ts-node to install ts-node as dev dependency.
Create a tsconfig.json file. You could type this command npx tsc --init Or create a concise tsconfig.json file like the one below.

The tsconfig file

Your tsconfig.json file should look like the following

{
    "compilerOptions":{
        "module":"NodeNext",
        "moduleResolution": "NodeNext",
        "target": "ES2020", // Could be any ES<Year> but shouldn't exceed current year
        "sourceMap": true,
        "outDir": "dist" 
    },
    "include":["src/**/*"]
}

Code Explanation:

"compilerOptions": Specifies various compiler options that affect how TypeScript compiles the code.
- "module": "NodeNext": Specifies the module system to use. In this case, it's set to "NodeNext".
- "moduleResolution": "NodeNext": Specifies the module resolution strategy. Similar to the module option, this is set to "NodeNext".
- "target": "ES2020": This part specifies the version of ECMAScript that the TypeScript code should target. In our case, it is targeting ES2020, which means that the generated JavaScript code will be compatible with ECMAScript 2020 features.
- "sourceMap": true: Generates source map files alongside the compiled JavaScript. ".map" files allows us to debug the TypeScript code in the original TypeScript source files, even after they have been compiled to JavaScript.
- "outDir": "dist": This part Specifies the folder where the compiled JavaScript files should be output. In this case the compiled files will be placed in a folder called "dist".
- include: This part specifies which files should be included in the TypeScript compilation. Our configuration makes include include all files within the "src" directory and its subdirectories that match the pattern "src/*/". This means TypeScript will compile all TypeScript files found in the "src" directory and its subdirectories.

The package.json file

Your package.json file should look like the following

{
  "name": "typescripttutorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "tsc --watch",
    "dev": "node --watch ./dist/index.js ./dist"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^20.5.7",
    "ts-node": "^10.9.1",
    "typescript": "^5.2.2"
  }
}

Starting the environment

TypeScript is a compiled language as such we need to compile our source code to javascript first before we can see the result in nodejs CLI.
To do this we open two terminals and in one we do a npm run build and in the other we do a npm run dev.

If you followed the method very well, you should see something like this in the npm run build terminal

and this in the npm run dev terminal

Now create an index.ts file in the src folder and type console.log("Hello World"). You'll see it compile and show "Hello World" in the npm run dev command line.

Conclusion

🎉 Congratulations! You've completed this step-by-step guide in TypeScript environment setup. You armed with the right TypeScript environment. 🚀 Remember, practice and exploration are your best allies in software development. Stay curious and keep coding 💻🌟.

😎🤯Zoom Feature You Might Not Know About As A Newbie Developer

obedNuertey1 — Sun, 20 Aug 2023 12:07:35 +0000

Overview

Introduction
Downloading Zoom on your Local Machine
The Virtual Background Feature
Conclusion

Hi Guys👋😄! Obed here.

I am back with another topic which I need to share with my fellow developers.

Let's delve right into it then.

Shall we🚀🚀...

Introduction

As a new developer, the very first job you might get could be remote in nature. And as such, companies which employs remote developers use tools like Microsoft teams and Zoom to have meetings with their remote workers.

Today we are going to have a tutorial on a feature I discovered just recently in Zoom that - in my opinion, could help developers who are working remotely. This feature is called "Virtual Background".

Although this feature is also present in Microsoft teams, today our primary focus is going to be on the Zoom Virtual Background.

Whilst working remotely as a developer, sometimes when about to have a meeting with your coworkers or clients, you might most likely be in a situation where your room is disorganized or you are in a place where you might feel uncomfortable letting people seeing and as such, this Zoom Virtual Background feature - as the name suggests - helps you virtualize your background by placing an image behind you. We are going to have a small tutorial on how to do that.

Downloading Zoom on your Local Machine

The Virtual Background Feature

Now that you have successfully installed zoom on your machine, let's see how we can explore this new tool by following these steps.

Step 1: Open your zoom app and click on the settings icon on the top right corner as shown in the below image;
Step 2: After Step 1, you should see the screen below popped up. Click on the Backgrounds & Effects section;
Step 3: After Step 2, you should see the screen below popped up with the labelled sections A and B;
- Section A: As for you, you should see yourself with your normal background in the video. The reason why my screen is blank is because I did it on purpose.
- Section B: This is the part which contains all your virtual backgrounds. You can change the background of your video by simply clicking on any background you want. And to revert back to your original background you just have to locate and click on the background with None centered in the middle.
Bonus Step: You can also add your own background by clicking the + sign circled in the image below and choose any image you want to be background from your local machine;

Conclusion

Finally, my concluding thought is that, as a beginner in the field of software development, it's crucial to become acquainted with the numerous tools and features that might improve your work and communication experience.💪💪👍

The Zoom platform for example, is well-known for its video conferencing capabilities, and includes a number of features that might be quite useful to developers.

While the platform is commonly used for meetings and debates, it has possibilities that go beyond face-to-face interactions. You may optimize your development workflow, connect more efficiently with team members, and display your work by utilizing lesser-known capabilities such as screen sharing, breakout rooms, and integrations with code collaboration tools.

As you progress in your career as a developer, keep in mind that technology is continuously improving, and remaining updated about the tools at your disposal may help you in the long run.🚀🚀💪

Thanks for your time💪😊

Jest testing for React Crash Course ⚛️🚀

obedNuertey1 — Sat, 12 Aug 2023 13:09:48 +0000

Overview:

Jest testing for React Crash Course - Overview:
- Creating our React Application
- Installing required dependencies
- Setting up folder structure and file content
- Now Lets start Writing Some tests 🚀🚀💪
  - Code Explanation 📔:
- Writing the rest of the tests code
  - Code Explanation for the last test 📔:
- Back to our application
- Rerunning our tests

Hi! everyone! ✋😄

My name is Obed and I'm quite new in software engineering. This will be the very first article I write as a software engineer and also as a member of this community.🥳🥳

I am just so excited!🚀😅

Okay Let's dive right into it. Today we will learn about jest a popular react testing framework.

In a test-driven environment, the process of development is that you write test before writing the code and Jest is one powerful tool to have under your sleeve as a react developer for testing your components. This proactive approach, ensures that your code meets requirements and functions correctly, enhancing software reliability and the overall software efficiency.

If you're new to coding or testing, fear not - this article wil be your friendly guide. Whether you are a curious coder or just a tech enthusiast, this simple steps will introduce you to TDD(Test driven development) and teach you how to use Jest for testing with confidence. Let's jump in and learn how to build awesome React apps together!

Shall we...🚀🚀

Creating our React Application

First what we will do is open our vscode editor and in the terminal we create a new folder on the desktop called "react-testing-with-jest" and move to it as so

mkdir react-testing-with-jest; cd react-testing-with-jest; code .

next we'll type the following into the command line.

npx create-react-app ./ to create a new react application with the name "react-testing-with-jest"

This will be our folder structure:

Installing required dependencies

The only dependency we are going to install will be "react-test-runner" and "@testing-library/react". Type the following into the command line:

npm i --save-dev @testing-library/react react-test-renderer

by doing this we install "@testing-library/react" and "react-test-renderer" devDependencies as such in our package.json folder

  {
    there are other properties here
    -------------------------------
    "devDependencies": {
        "@testing-library/react": "^14.0.0",
        "react-test-renderer": "^18.2.0"
      }
  }

Next add the --watchAll flag to your "test" field inside the script field:

    {
        there are other properties here
        -------------------------------
        "scripts": {
          "start": "react-scripts start",
          "build": "react-scripts build",
          "test": "react-scripts test --watchAll", //Here
          "eject": "react-scripts eject"
        },
        -------------------------------
        there are other properties here
   }

Setting up folder structure and file content

Open the App.js file in the src folder and type the following into the folder:

    import React from "react";

    function App() {
      return (
        <div className="App"></div>
      );
    }

    export default App;

Now we create a new folder called components folder within the src and within the components folder we create a folder called __tests__ and a file called todoList.js as follows:

Inside todoList.js type the following:


    import React from "react";

    function TodoList(){
        return ();
    };


    export default TodoList;

Now Lets start Writing Some tests 🚀🚀💪

Within the __tests__ folder create a file called todo.test.js.
Inside todo.test.js type the following code:

    import {render, screen, cleanup} from '@testing-library/react';
    import renderer from 'react-test-renderer';
    import TodoList from '../todoList';

    afterEach(()=>{
        cleanup();
    });

    test('should render not completed todo', ()=>{
        const todo = {id: 1, title: 'wash dishes 🍽🍽', complteted: false,};

        //We render a simulated version of the react component
        render(<TodoList todo={todo} />);

        //get the value of the testId stored on the Todo component
        const todoElement = screen.getByTestId('todo-1');

        //get a child within the testId with the class mytodo
        const childElement1 = todoElement.querySelector('.mytodo');


        //We test todoElement and childElement1 to see whether their in the DOM

        expect(todoElement).toBeInTheDocument(); //Passes if the Todo component is present in the DOM

        expect(childElement1).toBeInTheDocument(); //passes if the .myTodo is present in the DOM

        //checks 'wash dishes' is in todoElement
        expect(todoElement).toHaveTextContent('wash dishes');

        //checks #todo is an attribute
        expect(childElement1).toHaveAttribute('id', 'todo');
    });

### Code Explanation 📔:

Our Imports:
- In the above code we are importing render, screen, cleanup from @testing-library/react
- We also import renderer from react-test-renderer this will be used for creating snapshot. I will explain what snapshots are later
- And finally we import our TodoList component from the todoList.js file.
The afterEach function call:
- we use the afterEach() function call to perform an action after each test. In this case we are clearing the testing console by passing a callback function as argument to afterEach() and calling the cleanup() function.
Creating Tests:
- How do we create tests? It is as simple as typing the function call test().
- test() takes two arguments. the first is a string which desribes what you as the developer is testing for the next argument is a callback function. Inside it is where your assertions are made to pass the tests.
- The todo variable is a prop we specify which will be passed to the <TodoList /> component specially for testing purposes.
- Using the render() method we create an instance of the TodoList component parsing the content of the todo variable as props to the TodoList with the prop name todo.
- todoElement variable gets the DOM element with the testid todo-1
- We create childElement1 variable which gets a child element nested within the todoElement with the class .mytodo by chaining a querySelector() with .mytodo passed as argument.
- ##### The expect api: The expect() api is chained with other methods called matchers for running assertions.
  - For example expect(todoElement).toBeInTheDocument() checks whether the component with the testId todo-1 is in the document. If this is true the test passes for this particular assertion.
  - This is the same for the next expect() api. Just Like the .toBeInTheDocument() chained method, there are other methods like .toHaveTextContent() which checks whether the text content passed to the method is within the component or jsx. Also there are other methods like .toHaveAttribute() which takes two arguments "an attribute as the first" and "its the value" as the second. > For More Information about Jest matchers checkout the Jest Documentation

Writing the rest of the tests code

  test('should render completed todo', ()=>{
    const todo = {id: 2, title: 'wash car', completed:true};

    render(<TodoList todo={todo} />);
    const todoElement = screen.getByTestId('todo-2');

    expect(todoElement).toBeInTheDocument();
    expect(todoElement).not.toContainHTML('<strike>');
    expect(todoElement).toHaveTextContent('wash car');
  });

  test('matches snapshot', ()=>{
    const todo = {id: 1, title: 'wash dishes', completed: false,};

    const tree = renderer.create(<TodoList todo={todo} />).toJSON();
    expect(tree).toMatchSnapshot();
  });

Code Explanation for the last test 📔:

### test('matches snapshot', ()=>{...}):
- Remember we imported some renderer method from react-test-renderer. Yeah! this is where it is put to use.
- It is used to get the DOM elements and its properties in the form of JSON by chaining it with create() method which takes in the TodoList component as argument and we chain the method toJSON() which converts everything to JSON. The value is then stored in tree.
- We make an assertion by creating a snap shot with the line expect(tree).toMatchSnapshot().
  - A snapshot is a way to capture a rendered component's output and save it as a serialized representation of the component's structure and content. This snapshot serves as a baseline to compare against in subsequent test runs. unintended changes in your component's output, which could result from code changes.The snapShot is stored in a folder called __snapshots__ inside a file called todo.test.js.snap.
  - To Run the test type npm test in the new console. Initially all the tests will fail except for the snapshot part.

Back to our application

Now we are ready to write code to pass our test.

App.js:

Open the App.js file and complete the code by typing the following:

    import React from "react";
    import TodoList from "./components/todoList";

    function App() {
        const todos = [
            {id: 1, title: 'wash dishes', completed: false,},
            {id: 2, title: 'make dinner', completed: true,},
            {id: 3, title: 'wash dishes', completed: false,},
        ];
      return (
        <div className="App" data-testid="myApp">
            {
                todos.map((todo)=>(<TodoList todo={todo} />))
            }
        </div>
      );
    }

    export default App;

#### Code Explanation:
- We are creating an array of objects and assigning it to the variable todos.
- Inside our return function we nest the div jsx with a line of code to map over the objects stored in todos and pass each element as prop to TodoList component.

### todoList.js:
- Open the todoList.js file and complete the code by typing the following:

     function TodoList({todo}){
        const {id, title, completed} = todo;
        const h1 = <h1 className="mytodo">{title}</h1>;
        const text = completed ? <strike>{h1}</strike> : h1;

        return (
            <div id="todo" data-testid={`todo-${id}`}>
                {text}
            </div>
        );
      };


      export default TodoList;

Code Explanation:

The first line inside the TodoList component gets the fields in the "todo" prop.
We wrap the title variable around an h1 tag with a className of 'mytodo' and store it in an h1 variable.
On the next line we check if is completed is true we store the 'h1' variable wrapped in a strike tag to the text variable else we just store the original 'h1' variable to the text variable.
Inside our return statement we create a div tag with the attributes id="todo" and data-testid={'todo-${id}'} and nest the text variable within it.

Rerunning our tests

Now when we save our code and rerun our test with npm test, we get every other test passing but the snapshot failing. This is because, the jsx within the TodoList has changed as such the snapshot doesn't match the TodoList component's jsx. So this is what we get in our console:

As you can see we have two of our test passing and one failing and this one is the snapshot. We can reset the snapshot by pressing "w to show more options".

To solve this problem we press "u" to update our snapshot.

So as you can see our snapshot has been updated and all our tests pass now.

The final folder structure should look something like this:

So there you have it "Jest testing for React crash course" step by step tutorial. Thanks for your time guys. I am opened to reply to any comments. So feel free to! 😎

Get the code from github

DEV Community: obedNuertey1

Environment Setup For TypeScript Development Crash Course🚀🚀

Introduction

Setting up the Environment

The tsconfig file

Code Explanation:

The package.json file

Starting the environment

Conclusion

😎🤯Zoom Feature You Might Not Know About As A Newbie Developer

Overview

Introduction

Downloading Zoom on your Local Machine

The Virtual Background Feature

Conclusion

Jest testing for React Crash Course ⚛️🚀

Overview:

Creating our React Application

Installing required dependencies

Setting up folder structure and file content

Now Lets start Writing Some tests 🚀🚀💪

Our Imports:

The afterEach function call:

Creating Tests:

Writing the rest of the tests code

Code Explanation for the last test 📔:

Back to our application

App.js:

Code Explanation:

Rerunning our tests