Creating your calculator and Testing with Jasmine

Sometimes we need to test various codes. Obviously, testing framework is needed for that. A smart framework, Jasmine can help to do the job pretty good, especially using it's functions. 💫

 

 

In Jasmine, all the steps of testing are quite nice because the functionality is already made for us in the framework.

 

I am learning from Udemy. It's really simple, but it's pretty good for beginners to deal with Jasmine. ⚡️

 

💭 How to create an calculator base code?

---

1. Create methods in prototype

function Calculator() {
    this.total = 0;
}

Calculator.prototype.add = function(number) {
    return this.total += number;
}

Calculator.prototype.subtract = function(number) {
    return this.total -= number;
}

Calculator.prototype.multiply = function(number) {
    return this.total *= number;
}

Calculator.prototype.divide = function(number) {
    if (number === 0) {
        throw new Error('Cannot divide by zero')
    }
    return this.total /= number;
}

 

2. Create main function

function calculate(inputValue) {
    const expression = /\+|\-|\*|\//;
    const numbers = inputValue.split(expression);

    const numberA = parseInt(numbers[0]);
    const numberB = parseInt(numbers[1]);

    const operation = inputValue.match(expression);

    if (Number.isNaN(numberA) || Number.isNaN(numberB) || operation === null) {
        updateResult('Operation not recognized');
        return;
    }
    const calculator = new Calculator();
    calculator.add(numberA);

    let result;
    switch(operation[0]) {
        case '+':
            result = calculator.add(numberB);
            break;
        case '-':
            result = calculator.subtract(numberB);
            break;
        case '*':
            result = calculator.multiply(numberB);
            break;
        case '/':
            result = calculator.divide(numberB);
            break;
    }
    updateResult(result);
}

function updateResult(result) {
    const element = document.getElementById('result');
    if (element) {
        element.innerText = result;
    }
}

 

3. Write test code using Jasmine 

describe('calculator.js', function () {
    it('should add numbers to total', function () {
        const calculator = new Calculator();
        calculator.add(5);

        expect(calculator.total).toBe(5);
    });

    it('should subtract numbers from total', function () {
        const calculator = new Calculator();
        calculator.total = 30;
        calculator.subtract(5);

        expect(calculator.total).toBe(25);
    });

    it('should multiply total by number', function () {
        const calculator = new Calculator();
        calculator.total = 100;
        calculator.multiply(2);

        expect(calculator.total).toBe(200);  
    });

    it('should divide total by number', function () {
        const calculator = new Calculator();
        calculator.total = 200;
        calculator.divide(2);

        expect(calculator.total).toBe(100);  
    });
});

 

💭 What is Suite? Spec? Expectation?

---

 

📃 Suite: Groups related specs

The describe function is for grouping related specs, typically each test file has one at the top level. The string parameter is for naming the collection of specs, and will be concatenated with specs to make a spec's full name. This aids in finding specs in a large suite. If you name them well, your specs read as full sentences in traditional BDD style.

🎩 Spec : Groups expectations

Specs are defined by calling the global Jasmine function it, which, like describe 

takes a string and a function. The string is the title of the spec and the function is the spec, or test. A spec contains one or more expectations that test the state of the code. An expectation in Jasmine is an assertion that is either true or false. A spec with all true expectations is a passing spec. A spec with one or more false expectations is a failing spec.

💫 Expectations : Test the state of the code

Expectations are built with the function expect which takes a value,

called the actual. It is chained with a Matcher function, which takes the expected value. 

Disabled suite: xdiscribe

Any specs inside the disabled suite are skipped

Pending spec: xit

A pending spec does not run, but it will show up in the results as pending.

 

🎓 Things I learned

---

 

Do test. Optimize things as much as I can. Create things to help me to optimize things. Happy Testing! 🎉

 

This content is written after watching the Udemy course: Here is how you can learn it