DEV Community: Danijela.js🛸

Unit testing with react-testing-library

Danijela.js🛸 — Tue, 13 Apr 2021 11:57:30 +0000

This is a simple example but it will explain how the testing library works.

You can install react-testing-library by running

 npm i @testing-library/react

or you can just run

npx create-react-app

to create a new React project, and you will have the library already installed.

This is our Button component:

import React, { useState } from "react";

export default function Button(){
    const [clicked,isClicked]= useState(false);

    return(
        <>
        <button style={{background: clicked ? 'red' : 'green'}} onClick={e => isClicked(true)} data-testid="btn">
         {clicked ? 'Clicked' : 'Click'}
        </button>
        </>
    )
}

Give the button a data-testid="btn", so we can access it later from the test file.

Now the test file:

First we have to import render and fireEvent.

render - to render into a container which is appended to document.body.

fireEvent- fire a DOM event.

Then we import the component we want to render.

import { render, fireEvent } from "@testing-library/react";
import Button from "./Button.js";

We use the beforeEach method to render components, elements, methods or something else before each test.

First we render the Button component, then we get the btn element by data-test-id.

let btn;
beforeEach(()=>{  //execute before each test
    const component = render(<Button />); // render Button component
    btn = component.queryByTestId('btn'); // get the btn element from Button 
});

Each test has two arguments, a description of the test and a function.

1.Test
We are checking if the element btn exists.

test('Check if btn is rendering correctly',()=>{
   expect(btn).toBeTruthy(); //check if btn exists in the component
});

2.Test
We are checking if the button is changing it's background color on click. First we check if button has 'background: green' on render, then we fire a click event , and expect the button to have 'background: red';

test("Check if btn is changing it's color from green to red on click",()=>{
    expect(btn).toHaveStyle('background: green'); // btn has the style of 'background:green'
    fireEvent.click(btn); // btn is clicked
    expect(btn).toHaveStyle('background: red'); //btn has the style of 'background:red'
 })

3. Test
We are checking if the text in button is changing on click.
First we check if the button's text-content is 'Click', then we fire a click event, and we expect the text-content to be 'Clicked'.

test("Check if btn says Clicked after it's clicked",()=>{
    expect(btn.textContent).toBe('Click'); 
    fireEvent.click(btn); 
    expect(btn.textContent).toBe('Clicked'); 
 })

Then we run

npm test

And if everything works fine, and all the test pass, we will see this:

How to build a FREE Contact form without a server

Danijela.js🛸 — Thu, 14 Jan 2021 14:36:56 +0000

Formspree has a FREE plan for 50 submissions a month. Which is great, if you own a small business. So I made a YouTube tutorial to show you how to do it. It's very simple. Check it out 😁

P.S. This is my first YouTube tutorial. It's not great, but it's okay. 🤪

JavaScript Instagram Bot P2

Danijela.js🛸 — Fri, 20 Nov 2020 09:48:48 +0000

Hi, This my second JavaScript Instagram "bot", but not actually a bot 😝, just a useful piece of code used in a smart way.

The best way to gain followers on Instagram is by following others who already follow people with similar content as yours.

BTW check out my previous article about my Instagram bot for likes for better clarification

Let's begin!
Like last time, you need to log in to your Instagram account on your computer, search for the account with similar content as yours, and click on their followers. Inspect the Follow button, and see which class the button has. Now, click on the browser console, and paste this code, don't forget to add the classes of the button.



var followed = 0;

  setInterval(function() {

    const button = document.querySelector('button.classes');

    //change classes with classes you got when inspecting the button

    if(button) {

        button.click();

        followed++;

        console.log(`You followed ${followed} people`);

    }

  }, 10000);

-Keep in mind Instagram has the tendency to change the classes frequently.

P. S. Be careful, set the setInterval to at least 10-15 seconds so your account doesn't get banned 😁

You are welcome 😁

How I do Git version control - locally (List of commands)

Danijela.js🛸 — Tue, 15 Sep 2020 12:26:43 +0000

Hi guys, I wanted to share with you how I do version control locally.

Git can help you track the changes on your project. At anytime you can go back and check out a previous version. It allows you to create new branches of your app so you can try out new things, and if you don't like how the new features turned out, you don't have to commit those changes to the master branch.

First install Git on your computer. Create a project folder. Open Git Bash, type the path to the project folder. (I'm sure there are other ways to do it, this is just how I like to do it)

$ cd Desktop/tutorial/

To initialize an empty Git repo in that folder

$ git init

Create a file in the repo

$ touch index.html

Add a file that should be tracked

$ git add index.html

You can also add multiple files, just type

$ git add .

And it will start tracking all the files in the folder.

To check the files in the folder

$ ls -a

Check the status of the files in the repo. To see which files have been modified

$ git status

Commit the changes

$ git commit-m "Commit message"

To see all the commits(previous versions of the app).

$ git log

You'll see something like this

commit f65881c0e1a7866b15da23576ccf176a184561234 (HEAD -> master)

Author:Your name

Date: Date of the commit

    commit message

You see this long "number"? It's called hash

To go back to a previous version type

$ git checkout f65881c0e1a7866b15da23576ccf176a184561234

Now if we want to create a new branch to see how pink background would look like in our app. We can just create a new branch.

$ git branch pinkbg

Switch to the pinkbg branch and start coding

$ git checkout pinkbg

See all the branches

$ git branch

Merge branch with master

$ git merge pinkbg

And that's it for now! :)

useEffect()-React Hooks(P2)

Danijela.js🛸 — Fri, 06 Mar 2020 08:31:23 +0000

useEffect()

It's similar to componentDidMount(), componentDidUpdate() and componentWillUnmount().
It's called everytime the component is rendered or re-rendered.
You can have as many useEffects as you want.
Multiple useEffect() will fire off in order, one after the other
Some side effects require a cleanup, some don't.

Now, lets take a look at an example:

Explanation:

As you can see, we have a variable called button, and a function getFact, that updates that variable.

We are using the useEffect() hook to fetch date from some random API.

First we are fetching the data, then we have a cleanup function. It's "cleaning up" the previous function by displaying "Loading..." in an h2 tag.

-As I mentioned, not every side effect needs a cleanup

We have an array [button] as the second argument, so the useEffect() will be called just when the variable button is changed.

And at the end we have a button with a onClick event, where getFact function updates the state of the button variable. Which triggers the useEffect() hook.

Here is the end result:

I hope you enjoyed this little tutorial :)

useState() React Hooks(P1)

Danijela.js🛸 — Sat, 29 Feb 2020 22:05:50 +0000

Hooks are special functions that let you “hook into” React features. They don’t work inside classes, just in functional components.
useState() lets you add state to a functional component.

Always use hooks at the beginning of a React function.
Don't call hooks inside loops, conditions or nested functions.
You can use multiple useStates and variables.
The only argument we pass to useState() is the initial value.
useState() is returning the variable and the function that updates it.

Now, a basic counter example:

Explanation:

We have to import the useState() hook.

As you can see, we have a variable called count, and a function that updates that variable, setCount(). The initial value of the count is 0.

We are displaying the count in a h1 tag.

The first button has a click event that fires the setCount() function, which will add 1 on every click.

The second button is using the same function on click, but this time, it's going to subtract 1.

And this is the end result:

I hope I helped at least one person :)

React Bootstrap frameworks - Review

Danijela.js🛸 — Wed, 31 Jul 2019 19:38:26 +0000

Let's talk about some Bootstrap frameworks for React.
For a long time I've been avoiding Bootstrap, 'cause I didn't feel like I could be creative as much as I can when I'm writing my own CSS code. But then, when I started working more and more with React, I decided it's time to try a few React Booststrap frameworks, and find the perfect one!

React-Booststrap

This framework is good, but not great. 😔
The website, usually, doesn't work. The instructions weren't very clear and the whole experience wasn't that satisfying. I've used it for 2 days, and I was more frustrated than satisfied with the overall result.

Rating: ⭐⭐⭐

Reactstrap

This one was better then the previous one. It was easier to set up, the instructions were clearer. Basic little Bootstrap framework. Overall experience was satisfying. But, nothing special. It wasn't the one! 🤔

Rating: ⭐⭐⭐⭐

MDBootstrap

Guys... I think this is THE ONE...! 🤗 The instructions are very clear, they even have a video tutorial, to show you how to set it up. The website is very clean. I like the look of the components and I don't feel limited. You can be creative and you have so many different choices. Colors, animations, transitions, buttons, etc. Whatever your heart desires. You can make it unique as much as you want, but spend less time than you would writing CSS code.
I'm very satisfied. (Until I find a better one 😝)

Rating: ⭐⭐⭐⭐⭐

P.S. This is just my opinion and experience, doesn't mean it's true.😝

JavaScript INSTAGRAM bot

Danijela.js🛸 — Sat, 20 Jul 2019 15:04:51 +0000

You know a little bit of JavaScript, and you want to build your following on Instagram, but don't want to share your password with some app, and you don't know BackEnd?! Don't worry, I got you fam! 😁

I'm gonna show you how to build your personal instagram "bot" 😁

First, open Instagram in a new tab, log in, then type the hashtag you want, open the first image.
Now you are gonna inspect the ❤️ button, the browser console will open, and you will see the class of the button. Usually you have to use the second or third class.
Open the console. Create a variable by the name like, and do the same for the arrow pagination ➡️, calling the variable next. Access the button element and the pagination with querySelector.
Now use the setInterval method.
Using the if statement, if there is a like button add a click event for the button. Then add another click event for the pagination.
Because Instagram likes to ban accounts with "strange" activities, set the interval to 15-20 seconds. And Voilà!

You now have your personal bot without "sharing" your password. You can use this for following people on instagram, or maybe on some other social media. It's up to you!

Btw I'm not sure if this classifies as a BOT, but it will help 😁

7 easy steps to learning Web development #fornewbies

Danijela.js🛸 — Tue, 16 Jul 2019 00:53:09 +0000

I'm writing this article to help my fellow newbies. I want to share a few things, I wish I knew when I started coding.

1.Learn with passion

Don't learn how to code just because you heard from someone that some John Doe is a programmer and he's living the dream. People usually see just the success. They don't see the struggles to get there. Programming can be "boring" if you are not passionate and excited about every little detail. Even if you are, it can be a struggle sometimes. For me personally, coding is life. I can't imagine a day without coding. Whatever you do in life do it because you want to, and because it makes you happy. My motto in life is :"Do it 100%, or don't do it at all".

2.Take notes

Taking notes is very important. It helped me, personally very much. When you are learning something new, you are acknowledging it by writing it down. You will memorize more. Try writing it down the way you understood the lesson, with your own words. Because when you go back to it, it will trigger your memory, and you won't have to repeat the whole lesson.

3.Join a programming community

One of the most important steps is this one. Try to find a good programming community online, or even better, find one in your area. Connecting with like-minded people will help you a lot. You can try a coding challenge like #100daysofcode or #301DaysOfCode on Twitter. You will learn new things and maybe meet new friends! Plus whenever you need help, you will find someone willing to help you!

4.You don't have to memorize everything

When I started coding I would always stress about memorizing every little detail. I would struggle with one lesson for 2 days. Later I realized that practice makes it perfect. The more things you build, you will become better and better. So don't stress too much! Just practice.

5.Learn from different resources

It's very important to learn from different resources. You are not done with learning when you finish a 3 hours YouTube tutorial. One person won't tell you all the "secrets", and probably doesn't know every little detail about some programming language. But someone else knows those missing "pieces", and maybe he's/she's a better teacher.

6.Consistency is the key.

Programming is a skill that requires practice, and consistency. You can't learn how to code by coding 2 days a week. It's too much information, and you won't remember where you left off. It would be like going one step forward and two steps back. It's best to join some coding challenge. That way you will build a habit of coding everyday, and you won't think about it too much.

7.The hard way, is the best way

Did I say in the title "7 easy steps"? Oh I lied, sort of, sorry 😜 Sometimes the best way to learn something is the hard way. Because the hard way makes the information to stick. I wouldn't recommend that, when you learn HTML and a little bit of CSS, right away start exploring Bootstrap. Because you'll have problems later, when applying for jobs, you won't know how to do some basic things, like how to build a fixed Navbar and how to fix some basic bugs. Also don't try learning 2-3 programming languages at once. Maybe it's possible, but I don't recommend it. :D

DEV Community: Danijela.js🛸

Unit testing with react-testing-library

This is a simple example but it will explain how the testing library works.

Now the test file:

Each test has two arguments, a description of the test and a function.

How to build a FREE Contact form without a server

Formspree has a FREE plan for 50 submissions a month. Which is great, if you own a small business. So I made a YouTube tutorial to show you how to do it. It's very simple. Check it out 😁

P.S. This is my first YouTube tutorial. It's not great, but it's okay. 🤪

JavaScript Instagram Bot P2

Hi, This my second JavaScript Instagram "bot", but not actually a bot 😝, just a useful piece of code used in a smart way.

The best way to gain followers on Instagram is by following others who already follow people with similar content as yours.

How I do Git version control - locally (List of commands)

Hi guys, I wanted to share with you how I do version control locally.

And that's it for now! :)

useEffect()-React Hooks(P2)

useEffect()

Now, lets take a look at an example:

Explanation:

Here is the end result:

useState() React Hooks(P1)

Explanation:

And this is the end result:

React Bootstrap frameworks - Review

React-Booststrap

Rating: ⭐⭐⭐

Reactstrap

Rating: ⭐⭐⭐⭐

MDBootstrap

Rating: ⭐⭐⭐⭐⭐

JavaScript INSTAGRAM bot

7 easy steps to learning Web development #fornewbies

1.Learn with passion

2.Take notes

3.Join a programming community

4.You don't have to memorize everything

5.Learn from different resources

6.Consistency is the key.

7.The hard way, is the best way

I hope I helped at least one person. Good luck!