Category: JavaScript

Categories
React Answers

How to test a className with the Jest and React testing library?

Labrador retriever puppy walking on green grass

Sometimes, we want to test a className with the Jest and React testing library.

In this article, we’ll look at how to test a className with the Jest and React testing library.

How to test a className with the Jest and React testing library?

To test a className with the Jest and React testing library, we can check if any element with the given class name exists with getElementsByClassName.

For instance, we write

it("Renders with a className equal to the variant", () => {
  const { container } = render(<Button variant="default" />);
  expect(container.getElementsByClassName("default").length).toBe(1);
});

to call render to render the Button component.

Then we get the container element and call getElementsByClassName with the class name to check if any element with class name default exists in the container element.

We check if the length is bigger than 0 to see if any element with the class name exists.

Conclusion

To test a className with the Jest and React testing library, we can check if any element with the given class name exists with getElementsByClassName.

Categories
Vue Answers

How to fire an event when v-model changes with Vue.js?

Labrador retriever puppy walking on green grass

Sometimes, we want to fire an event when v-model changes with Vue.js.

In this article, we’ll look at how to fire an event when v-model changes with Vue.js.

How to fire an event when v-model changes with Vue.js?

To fire an event when v-model changes with Vue.js, we an listen for the change event.

For instance, we write

<template>
  <input
    type="radio"
    name="optionsRadios"
    id="optionsRadios2"
    value=""
    v-model="srStatus"
    @change="foo"
  />
</template>

to listen for the change event with @change.

If the event is emitted, then we run the foo method.

Conclusion

To fire an event when v-model changes with Vue.js, we an listen for the change event.

Categories
JavaScript Answers

How to filter array by multiple conditions with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to filter array by multiple conditions with JavaScript.

In this article, we’ll look at how to filter array by multiple conditions with JavaScript.

How to filter array by multiple conditions with JavaScript?

To filter array by multiple conditions with JavaScript, we can use the array filter method.

For instance, we write

const filter = {
  address: "England",
  name: "Mark",
};
const users = [
  {
    name: "John",
    email: "johnson@mail.com",
    age: 25,
    address: "USA",
  },
  {
    name: "Tom",
    email: "tom@mail.com",
    age: 35,
    address: "England",
  },
  {
    name: "Mark",
    email: "mark@mail.com",
    age: 28,
    address: "England",
  },
];

const filteredUsers = users.filter((item) => {
  for (const key of Object.keys(filter)) {
    if (item[key] === undefined || item[key] !== filter[key]) {
      return false;
    }
  }
  return true;
});

console.log(users);

to call users.filter with a callback.

In the callback, we loop through the filter object’s keys we get from Object.keys.

In the loop, we check the value of each filter value to see if they’re what we’re looking for.

If they’re not, we return false.

Otherwise, we return true to include it in the filtered array returned.

Conclusion

To filter array by multiple conditions with JavaScript, we can use the array filter method.

Categories
JavaScript Answers

How to increment letters with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to increment letters with JavaScript.

In this article, we’ll look at how to increment letters with JavaScript.

How to increment letters with JavaScript?

To increment letters with JavaScript, we can use the String.fromCharCode method.

For instance, we write

const c = String.fromCharCode("A".charCodeAt() + 1);

to call String.fromCharCode with "A".charCodeAt() + 1 to return 'B'.

We get the character code of 'A' with charCodeAt.

Then we add 1 to it and use the sum as the argument of fromCharCode to get the letter after 'A'.

Conclusion

To increment letters with JavaScript, we can use the String.fromCharCode method.

Categories
JavaScript Answers

How to convert blob from DataURL with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to convert blob from DataURL with JavaScript.

In this article, we’ll look at how to convert blob from DataURL with JavaScript.

How to convert blob from DataURL with JavaScript?

To convert blob from DataURL with JavaScript, we can use fetch.

For instance, we write

const url =
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";

const res = await fetch(url);
const blob = await res.blob();

to call fetch with url to return a promise with the response.

Then we call res.blob to return a promise with the blob from the response object.

Conclusion

To convert blob from DataURL with JavaScript, we can use fetch.