DEV Community: Reynold Osei Adade

Why you need to unit-test results and not implementation

Reynold Osei Adade — Mon, 07 Feb 2022 12:53:09 +0000

Unit tests are one of the best ways to check for code quality. Irrespective of which part of the stack you find yourself on the principle of unit tests will not change, and that is to test for the output of your code or your unit of code. For backend developers it may be a results of the functions that they write but for frontend developers developers our output is what is presented on the DOM and not the internals of a code. This is because we are responsible for what a user sees when they use our applications and that is what our unit tests should also cover

Let check out a simple counting app

<!--HelloWorld.vue -->
<template>
  <div class="hello">
    <div>
      {{ count }}
    </div>
    <button @click="decrement" data-testid="decreaseButton">Decrease</button>
    <button @click="increment" data-testid="increaseButton">Increase</button>
  </div>
</template>

// HelloWorld.vue
export default {
  name: "Counter",
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },
};

This application just increases or decreases the count

Unit test principles for frontend devs

Always test for outputs
Changing implementation should not fail tests if output has not changed
Your unit tests should follow closely to the users experience

Any test that fails because the implementation has changed is generally not a proper unit test, that sounds absurd, I understand, I thought so too but let me give you an example

//HelloWorld.spec.js
describe("HelloWorld.vue", () => {
  test("increment should increase count", () => {
    const wrapper = mount(HelloWorld);
    wrapper.vm.increment();
    expect(wrapper.vm.count).toBe(1);
  });

  test("decrement should decrease count", () => {
    const wrapper = mount(HelloWorld);
    wrapper.vm.decrement();
    expect(wrapper.vm.count).toBe(-1);
  });
});

The test above is a representation of 90% of the tutorials or example we will see on most dev sites. If we are being truthful that is how most of us would test this but we are forgetting that our components just don't have methods there are buttons and a whole DOM to consider, as frontend devs our output is what the user sees not what goes on in our code so that is what we need to test for.

What this test does

Our implementation of the incrementand decrement functions work correctly
The test will fail if function names are changed

A better test

As frontend developers we should always ensure we write unit tests that test for the output of our code rather that how the output is generated.

 test("increment button should increase count", async () => {
    const wrapper = mount(HelloWorld);
    const button = wrapper.find("[data-testid='incrementButton']");
    button.trigger("click");
    await wrapper.vm.$nextTick();
    expect(wrapper.find("[data-testid='countValue']").text()).toBe("1");
    // expect(wrapper.vm.count).toBe(1);
  });

  test("decrement button should decrease count", async () => {
    const wrapper = mount(HelloWorld);
    const button = wrapper.find("[data-testid='decrementButton']");
    button.trigger("click");
    await wrapper.vm.$nextTick();
    expect(wrapper.find("[data-testid='countValue']").text()).toBe("-1");
  });

What this test does

Button clicks work correctly
Changes are presented correctly in our DOM
It proves to us that our implementation of the increment and decrement functions are correct
If you should change the names of the increment and decrement methods it will not break your test since it did not break your code
If your should swap the methods of the increment and decrement buttons your test will fail ( try changing the name of your methods)

You can read more on this here

You can check out the repo here

reynoldadade / properunittests

properunittests

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

View on GitHub

Dynamic components, a Vue.js superpower

Reynold Osei Adade — Wed, 27 Oct 2021 10:13:03 +0000

If you have ever encountered tabs in your code, then its likely there is one of 3 things that have been implemented

v-if and v-else
Nested routes
Dynamic components

If you are ever in the situation where you have to implement anything that requires you to conditionally show one component at a time, if you are thinking of using v-if and v-else then please consider using dynamic components.

Dynamic components if used well require less code in your template and finer control over the components being displayed, all in all keeping the conditions out of your html and into your JavaScript where it is easier to maintain.

Concepts are best explained in code, so lets start with the code below which is basically a project that illustrates one of the use cases for dynamic components, the code consists of 4 component

index.vue which is just the wrapper for the other components
Personal.vue which contains a form for collecting personal details
Work.vue which contains a form for collecting work details
ViewSubmit.vue for displaying the gathered data

The main point of focus should be

<component />
<keep-alive></keep-alive>

<component /> requires a single prop, is which is just the name of the component you want to display as a string, other than that is behaves just like any other custom component that you build, it takes custom props like any other component

To be able to keep the component in the dom with all its states you can wrap it with keep-alive this ensures that if the component is switched all its data is kept just as it is.

So if you have ever wondered how to split forms into multiple sections but still keep your data, this is one way to do it.

//index.vue
<template>
  <div class="w-full p-10 flex flex-col justify-center items-center">
    <div class="p-2 w-1/2">
      <div class="flex">
        <button
          v-for="button in buttons"
          :key="button.name"
          class="flex-1 p-2 border"
          :class="{
            'bg-white text-blue-500': button.component !== currentComponent,
            'bg-blue-500 text-white': button.component === currentComponent,
          }"
          @click.prevent="setCurrentComponent(button.component)"
        >
          {{ button.name }}
        </button>
      </div>
      <div class="">
 // keep state of components 
        <keep-alive>
          <Component
            :is="currentComponent"
            :personal="personal"
            :work="work"
            :save-personal-details="savePersonalDetails"
            :save-work-details="saveWorkDetails"
            :set-current-component="setCurrentComponent"
          />
        </keep-alive>
      </div>
    </div>
  </div>
</template>

<script>
import Personal from '@/components/Personal.vue'

export default {
  components: {
    Personal,
    Work: () => import('~/components/Work.vue'),
    ViewSubmit: () => import('~/components/ViewSubmit.vue'),
  },
  data() {
    return {
      currentComponent: 'Personal',
      buttons: [
        { name: 'Personal Details', component: 'Personal' },
        { name: 'Work Details', component: 'Work' },
        { name: 'View and Submit', component: 'ViewSubmit' },
      ],

      personal: {},
      work: {},
    }
  },
  methods: {
    setCurrentComponent(component) {
      this.currentComponent = component
    },
    saveWorkDetails(form) {
      this.work = form
      this.currentComponent = 'ViewSubmit'
    },
    savePersonalDetails(form) {
      this.personal = form
      this.currentComponent = 'Work'
    },
  },
}
</script>

As an extra bonus for using dynamic components you get to have the all your props available to all components all the time, this in a way saves you a lot of repetitions. But if you are like me and you want to fine tune which props are available to which components, especially in the scenario where you want the same prop names to contain different data you can use this nifty little trick I picked up

//index.vue optional
<template>
  <div class="w-full p-10 flex flex-col justify-center items-center">
    <div class="p-2 w-1/2">
      <div class="flex">
        <button
          v-for="button in buttons"
          :key="button.name"
          class="flex-1 p-2 border"
          :class="{
            'bg-white text-blue-500': button.component !== currentComponent,
            'bg-blue-500 text-white': button.component === currentComponent,
          }"
          @click.prevent="setCurrentComponent(button.component)"
        >
          {{ button.name }}
        </button>
      </div>
      <div class="">
        <!-- keep state of components  -->
        <keep-alive>
          <Component :is="currentComponent" v-bind="changePropsByComponent" />
        </keep-alive>
      </div>
    </div>
  </div>
</template>

<script>
import Personal from '@/components/Personal.vue'

export default {
  components: {
    Personal,
    Work: () => import('~/components/Work.vue'),
    ViewSubmit: () => import('~/components/ViewSubmit.vue'),
  },
  data() {
    return {
      currentComponent: 'Personal',
      buttons: [
        { name: 'Personal Details', component: 'Personal' },
        { name: 'Work Details', component: 'Work' },
        { name: 'View and Submit', component: 'ViewSubmit' },
      ],

      personal: {},
      work: {},
    }
  },
  // focus here
  computed: {
    changePropsByComponent() {
      switch (this.currentComponent) {
        case 'Personal':
          return {
            savePersonalDetails: this.savePersonalDetails,
          }
        case 'Work':
          return {
            saveWorkDetails: this.saveWorkDetails,
            setCurrentComponent: this.setCurrentComponent,
          }
        case 'ViewSubmit':
          return {
            personal: this.personal,
            work: this.work,
          }

        default:
          return {}
      }
    },
  },
  // end

  methods: {
    setCurrentComponent(component) {
      this.currentComponent = component
    },
    saveWorkDetails(form) {
      this.work = form
      this.currentComponent = 'ViewSubmit'
    },
    savePersonalDetails(form) {
      this.personal = form
      this.currentComponent = 'Work'
    },
  },
}
</script>

What the code below does is to return props based on the current component being shown. You can use this method to gain finer control over your props

//computed value
 changePropsByComponent() {
      switch (this.currentComponent) {
        case 'Personal':
          return {
            savePersonalDetails: this.savePersonalDetails,
          }
        case 'Work':
          return {
            saveWorkDetails: this.saveWorkDetails,
            setCurrentComponent: this.setCurrentComponent,
          }
        case 'ViewSubmit':
          return {
            personal: this.personal,
            work: this.work,
          }

        default:
          return {}
      }
    },

//personal.vue
<template>
  <div class="w-full p-20">
    <form @submit.prevent="savePersonalDetails(form)">
      <div class="grid grid-cols-2">
        <div class="p-2">
          <label for="name">Name</label>
          <input
            id="name"
            v-model="form.name"
            type="text"
            class="p-2 rounded border w-full"
          />
        </div>
        <div class="p-2">
          <label for="date">DOB</label>
          <input
            id="date"
            v-model="form.date"
            type="date"
            class="p-2 rounded border w-full"
          />
        </div>
        <div class="p-2">
          <label for="amount">ID Number</label>
          <input
            id="id"
            v-model="form.id"
            type="text"
            class="p-2 rounded border w-full"
          />
        </div>
        <div class="p-2">
          <label for="email">Email</label>
          <input
            id="email"
            v-model="form.email"
            type="email"
            class="p-2 rounded border w-full"
          />
        </div>
      </div>
      <div class="p-2 m-2">
        <button class="p-2 w-full bg-green-500 text-white" type="submit">
          Save and Continue <i class="fas fa-arrow-right"></i>
        </button>
      </div>
    </form>
  </div>
</template>

<script>
export default {
  props: {
    savePersonalDetails: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    return {
      form: {
        name: '',
        date: '',
        email: '',
        id: '',
      },
    }
  },
}
</script>

// Work.vue
<template>
  <div class="w-full">
    <div class="w-full p-20">
      <form @submit.prevent="saveWorkDetails(form)">
        <div class="grid grid-cols-2">
          <div class="p-2">
            <label for="company_name">Company Name</label>
            <input
              id="company_name"
              v-model="form.companyName"
              type="text"
              class="p-2 rounded border w-full"
            />
          </div>
          <div class="p-2">
            <label for="role">Role</label>
            <input
              id="role"
              v-model="form.role"
              type="text"
              class="p-2 rounded border w-full"
            />
          </div>
          <div class="p-2">
            <label for="work_adresss">Address</label>
            <input
              id="work_adresss"
              v-model="form.address"
              type="text"
              class="p-2 rounded border w-full"
            />
          </div>
          <div class="p-2">
            <label for="work_email">Email</label>
            <input
              id="work_email"
              v-model="form.email"
              type="email"
              class="p-2 rounded border w-full"
            />
          </div>
        </div>
        <div class="p-2 m-2 flex">
          <button
            class="p-2 w-full bg-gray-400 text-white m-1"
            type="button"
            @click.prevent="setCurrentComponent('Personal')"
          >
            Previous <i class="fas fa-arrow-left"></i>
          </button>
          <button class="p-2 w-full bg-green-500 text-white m-1" type="submit">
            Save and continue <i class="fas fa-arrow-right"></i>
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    saveWorkDetails: {
      type: Function,
      default: () => {},
    },
    setCurrentComponent: {
      type: Function,
      default: () => {},
    },
  },
  data() {
    return {
      form: {
        companyName: '',
        role: '',
        email: '',
        address: '',
      },
    }
  },
}
</script>

<style></style>


// ViewSubmit.vue
<template>
  <div class="w-full">
    <div>
      <div class="p-2 border rounded m-1">Name: {{ personal.name }}</div>
      <div class="p-2 border rounded m-1">DOB: {{ personal.date }}</div>
      <div class="p-2 border rounded m-1">Email: {{ personal.email }}</div>
      <div class="p-2 border rounded m-1">ID: {{ personal.id }}</div>
    </div>
    <div>
      <div class="p-2 border rounded m-1">
        Organization: {{ work.companyName }}
      </div>
      <div class="p-2 border rounded m-1">Role: {{ work.role }}</div>
      <div class="p-2 border rounded m-1">Email: {{ work.email }}</div>
      <div class="p-2 border rounded m-1">Address: {{ work.address }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    work: {
      type: Object,
      default: () => {},
    },
    personal: {
      type: Object,
      default: () => {},
    },
  },
}
</script>

I hope this help open up some new and interesting possibilities
Github for this code is attached below

Thanks.😉

reynoldadade / dynamic-components

Getting around prop immutability in Vue.js

Reynold Osei Adade — Wed, 20 Oct 2021 14:40:39 +0000

This article is for beginner and intermediate developers who have problems wrapping their head around why props are immutable and also why you cant just go ahead and edit it without actually having console errors.

The problem

Let say you have a component, in that component there is a method that calls an alert and if the alert is confirmed, then an index is found and then splice is done.

//ChildComponent.vue
export default{
 props: {
    skillsToMerge: {
      required: true,
      type: Array,
      default: () => []
    }
  },
 methods: {
  onRemoveSkill(skill) {
    const confirmRemoval = window.confirm(`Proceed to remove ${skill.name}?`);
    if (confirmRemoval) {
      const index = this.skillsToMerge.findIndex((s) => s.id === skill.id);
      this.skillsToMerge.splice(index, 1);
      }
    },
  }
}

In any other situation, this would have been a perfectly fine activity, but when it comes to vue.js props this will throw a warning in the console, and if you are using ESlint it will highlight that line as an error

Why is this a problem?

Immutability for props means it never changes or should not be changed
Props originate from a single data source, that is why it is by default reactive which means that every action taken on the original data source will affect every other child using that data source or prop, now imagine that your data could be changed midway, it wouldn't make for a very reliable data reference. If every component that used the data was able to edit it error fixing would be a tedious task.

Solution

Think of props are that data you can copy and read but cant edit, or an article on dev.to that someone has written, you could read it, and copy and even share it but you cant edit the post, only the author can. Therefore props should only be edited in the pages or components where they originate from. In other words you can only edit it when it is a data variable and not a prop

This gives us 2 ways of going of editing our props without effectively breaking its immutability

Solution 1: Emitters

Emitters are a way for child components to trigger an action in the parent, they are created by using

this.$emit('myEvent')

then it the parent do this on the child

<child-component v-on:myEvent="doSomething"></child-component>

This will ensure that you can trigger a function in the parent on the data variable without directly editing props

Solution 2: functions

Functions or methods are one of the most useful syntaxes in code, and when you realize that functions could be used as props it effectively opens up unlimited possibilities. Lets look at the code below

//ChildComponent.vue
export default{
 name: 'ChildComponent',
 props: {
    skillsToMerge: {
      required: true,
      type: Array,
      default: () => []
    },
   mergeSkills: {
      type: Function,
      default: () => {},
    },
  },
 methods: {
  onRemoveSkill(skill) {
    const confirmRemoval = window.confirm(`Proceed to remove ${skill.name}?`);
    if (confirmRemoval) {
        this.mergeSkills(skill);
    },
  }
}

//ParentComponent.vue
export default {
name: 'ParentComponent',
data(){
 return {
 skillsToMerge: [],
 }
}
methods: {
 mergeSkills(skill) {
      const index = this.skillsToMerge.findIndex((s) => s.id === skill.id);
      this.skillsToMerge.splice(index, 1);
    },
}

}

Lets explain what is happening in the code above, instead of trying to splice the skillsToMerge prop we create a function inside the parent component where the skillsToMerge variable was created and edit it there

The reason it is better to do it this way is that

It protects your prop by allowing only that function to edit your data outside the parent component. This is quite similar to having private variables.
It makes code refactoring easier since editing the logic of the mergeSkills function in the parent component affects every component it is used in.
If there are a lot of nested child components, emitting events upwards will take much more code to do and it will be quite easy to have an error.
Finally when using inject-provide using methods becomes so much easier as there isn't a need to pushed events upwards and also methods don't need the reactivity that props do, hence it will make your code cleaner

Conclusion

There are surely more ways to deal with the limitations imposed by props due to its immutability but that limitations is also its greatest benefit due to the security it provides as a single source of data.
This method logic is taken from how Vuex manipulates state using actions, keeping that in mind will make the benefits clearer.

I hope this has benefited you. Until next time, happy coding