DEV Community: Arafat Iqbal

Intro to Testing in Ember.js

Arafat Iqbal — Sun, 11 Dec 2022 05:47:03 +0000

Ember.js is a popular JavaScript framework for building ambitious web applications. It provides a robust set of tools for testing and ensuring the reliability of your code. In this blog post, we will explore the different types of tests that you can write in Ember.js and how to set up your testing environment.

Types of tests in Ember.js

Ember.js uses QUnit as its testing library, which provides several types of tests that you can write for your application. The most common types are:

Unit tests: These tests focus on a single unit of code, such as a function or a service. They are usually small and fast, and they test the individual components of your application in isolation.
Integration tests: These tests focus on the interactions between multiple components of your application. They are typically longer and more complex than unit tests, and they test how the different parts of your application work together.
Acceptance tests: These tests focus on simulating the behavior of a user using your application. They are typically written in a natural language, such as English, and they test the end-to-end functionality of your application.

Setting up the testing environment

To get started with testing in Ember.js, you will need to set up the testing environment in your project. This typically involves installing the necessary dependencies, configuring the test runner, and creating the necessary files and folders for your tests.

To install the necessary dependencies, run the following command in your terminal:

npm install --save-dev ember-qunit ember-cli-qunit

This will install the ember-qunit and ember-cli-qunit packages, which provide the necessary tools for running tests in Ember.js.

Next, you will need to configure the test runner by creating a testem.js file in the root of your project. This file should look something like this:

module.exports = {
  test_page: 'tests/index.html?hidepassed',
  disable_watching: true,
  launch_in_ci: [
    'Chrome'
  ],
  launch_in_dev: [
    'Chrome'
  ]
};

This configuration specifies that the test runner should use the tests/index.html file as the entry point for running tests, and it should launch the tests in Chrome. You can customize this configuration to suit your specific needs.

Finally, you will need to create the necessary files and folders for your tests. In Ember.js, tests are typically organized into the following folders:

unit: This folder contains unit tests for your application.
integration: This folder contains integration tests for your application.
acceptance: This folder contains acceptance tests for your application.

Each of these folders should contain a tests subfolder, where you will place the individual test files for your application. For example, if you want to write a unit test for a user-service service, you would create a user-service-test.js file in the unit/tests folder.

Writing tests in Ember.js

Once you have set up your testing environment, you can start writing tests for your Ember.js application. In this section, we will go over the basics of how to write tests in Ember.js using QUnit.

The basic structure of a test in Ember.js is as follows:

import { module, test } from 'qunit';

module('Unit | Service | user service', function(hooks) {
  hooks.beforeEach(function() {
    // Runs before each test in this module
  });

  hooks.afterEach(function() {
    // Runs after each test in this module
  });

  test('it exists', function(assert) {
    let service = this.owner.lookup('service:user-service');
    assert.ok(service);
  });

  test('it does something', function(assert) {
    let service = this.owner.lookup('service:user-service');
    assert.equal(service.doSomething(), 42);
  });
});

In this example, we are writing a unit test for a user-service service. We have defined two tests: it exists and it does something. The it exists test simply checks that the service exists and is properly registered with Ember's dependency injection system. The it does something test calls a method on the service and checks that it returns the expected result.

Each test consists of a call to the test function, which takes a description of the test and a callback function that contains the actual test code. The callback function is provided with an assert object, which contains a number of helper methods for making assertions about the state of your application. In the example above, we are using the ok and equal methods to make assertions about the service.

In addition to the test function, you can also use the module function to group related tests together. The module function takes a description of the module and a callback function that contains the setup and teardown code for the tests in the module. In the example above, we are using the hooks.beforeEach and hooks.afterEach hooks to run some code before and after each test in the module.

Running tests in Ember.js

Once you have written some tests for your Ember.js application, you can run them using the ember test command. This command will launch the test runner and execute all of the tests in your application. You can specify which types of tests you want to run by using the --filter option, for example:

ember test --filter=unit

This command will only run the unit tests in your application. You can also run the tests in a specific module by using the --module option, for example:

ember test --filter=unit --module=user service

This command will only run the unit tests in the user service module.

Ember.js also provides a few other options for running tests, such as the ability to run the tests in watch mode or to generate a code coverage report. You can learn more about these options by running the ember help test command.

In conclusion, testing is an important part of building reliable and maintainable applications with Ember.js. By using the tools provided by QUnit and Ember.js, you can easily write and run tests for your application to ensure that it behaves as expected. Happy testing!

Top 5 Must Have Mac Apps

Arafat Iqbal — Thu, 17 Nov 2022 06:38:01 +0000

Here are some of my favorite apps on the Mac that make my life as a developer easier.

Let's get started

1. Rectangle

Mac window management is trash. This helps you organize your windows on your desktop. There are paid versions of this exact app like magnet, but why would you want to pay...

Install Rectangle

2. Gifox

Do you ever need to show something to someone, but screen recording is too much and a screenshot wouldn't show everything? Why not send a gif instead!

Install Gifox

3. Notion

Notion has to be one of the best note apps. There are things I don't like about it, but for the most part, it does what you tell it to, and your notes stay oragnized.

Install Notion

4. iTerm2

The default terminal for mac is okay. It will get the job done. iTerm2 gives you a few more customizations + features.

Install iTerm2

5. Boop

If you work with a lot of text often, Boop will help you modify it based on pre-existing scripts. For example, you have a super messy unformated json file. Paste it into boop, and run the format json script! Done!
Install Boop

First 5 Months, as a Jr. Dev

Arafat Iqbal — Thu, 17 Nov 2022 01:52:03 +0000

Background

In the spring of 2022, I graduated with my computer science degree. Through out my time in college I did not get any professional software engineering experience. 0 SWE internships, 0 Co-Ops, nothing. After graduation, the next most logical step for me was to start looking at internships/ jobs. I landed an internship which eventually turned into a full-time position. For me, the transition from Student -> Software Engineer, was a bit rough, especially coming in with 0 professional experience. I want to share somethings that I wish I knew before started my first job, as well as how it's been going the past 5 months.

Things I wish I knew before starting

Git/ Github: Using git was one of the hardest things I had to learn when coming into the professional world. I did not get much team experience working on projects in school, that might not be the case for you. But I struggled a lot with understanding how to...

Branching and Merging: For the most part you will learn these concepts just by doing them. The main thing I will say is, if you don't have an internship, or have never worked with a team of people before, look into open source projects. Open source projects are a great way to step your foot into the "professional" world. In addition to this, I will attach a few resources down below that helped me out a ton.

Creating PRs: You will do this a lot, and I mean A LOT. Make sure that when you create a pull request, that it's easy to review. Someone who has never touched this piece of code previously, should be able to read what you are trying to do in your PR.

Add comments to explain findings, or ask questions
Make sure the description explains what you are trying to do.
Don't spam commit. Make your commits tell a story. It makes reviewing the PR a lot easier.

Reviewing PRs: When reviewing PRs, there are a few things that I started doing. If I don't understand something at all, I would leave questions (don't be embarrassed about asking stupid questions). Checkout the branch, and run the code yourself. Run tests. If you see something odd, point it out (ex: commented out code, random debuggers, etc).

You won't learn or understand a lot of git commands, unless you do them. Sure, it's important to read about them, and understand what they do, but make sure you practice and use them. Here are a few things I used to make my learning experience easier.

Did you mess something up, and want a quick fix? https://ohshitgit.com/
Struggling with understanding branching? https://learngitbranching.js.org
If you can't use the command line, find a GUI that you enjoy, and use that. Here are a couple good ones.
- GitHub Desktop https://desktop.github.com/
- Built in VsCode GUI https://code.visualstudio.com/
Make a sandbox project, make branches, mess something up, try to fix it.

Testing: Testing is something that isn't talked a lot about in most computer science programs, but is almost always present in the professional world. Code without tests, is trash. Your tests should fail, if your code doesn't work correctly. Make sure to keep that in mind when writing them. In one of my first tests, I had to assert a DOM element existed. I used a class, that another DOM element also had, so even if my element wasn't present, the test would pass. This is bad. Tests were not on my priority list when I first started, but are definitely something I look to add now.

Communication: If you are ever stuck, or don't even know where to start with a problem/ task. Ask. Everyone knows that you are new. Nobody expects you to know everything. Ask for help. A lot of people take this a bit too far though. I wouldn't want to be spammed questions every second. Try to figure it out on your own first. Chances are, the first task you are given might be fairly simple. Look at your organizations GitHub, and find similar PRs of someone else doing the same task. Try to do it on your own, before reaching out. When you reach out, explain what you have tried, and where you currently are with this problem. Overall, just be descriptive about your findings.

It's okay to not know: Every person at one point did not know. But as you progress, and experience different problems, solutions, tasks, you will start to pick things up quick. The first time you do something is very challenging, but the more you experience it, the easier it gets. Coming in, you might be thinking about learning everything, but it's okay to not know. Focus on specific things that interest you, and learn about them. You don't have to learn about every single thing.

Conclusion
I have only been working for about 5 months now, and I can proudly say that I have learned so much, and am excited to keep expanding my knowledge. There are certain things that I still need to improve upon, such as communication, but I'm actively setting goals for myself. Being a software engineer is fun, and a lot different than what I expected, but I'm happy to be here, and super excited for the future. I really hope this helps someone who also recently started, and is in a similar boat as me.