Ways to configure Jasmine tests to disregard tabs within a multiline string

Question

Ways to configure Jasmine tests to disregard tabs within a multiline string

I have a method that produces a multi-line string as shown below:

line 1 of example
line 2 of example
line 3 of example

and I want to be able to write my code like this:

it('should return the correct output', () => {
  expect(service.getData('bar').toEqual(
  `line 1 of example
    line 2 of example
    line 3 of example`);
});

but unfortunately, it results in an error due to extra whitespace before some lines being added by the test:

Expected 'line 1 of example
line 2 of example
line 3 of example' to equal 'line 1 of example
    line 2 of example
    line 3 of example'.

I am aware that I can manually adjust my tests by including newline characters or removing the whitespace, but it is not visually appealing.

It would be great if there was a tool available for stripping out unnecessary indentations like this in a safe and reliable manner. Is there such a utility, do I need to create my own solution, or should I stick with using newline characters?

typescript unit-testing jasmine

Answer 1

Answer №1

It seems like there isn't a ready-made solution available, so you may need to create your own custom approach.

A few options come to mind quickly, with the custom matcher being the most elegant in my opinion.

Using toContain to verify expected content is present in the output string
Using toMatch - to check using regular expressions (RegEx)
Implementing custom matchers - which are highly reusable and easy to understand

For more information, refer to , , and https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions

Function under test:

function getData(x){
    return `
    example line 1
    example line 2
    example line 3
    `
}

Test setup:

function trimmedLines(untrimmed){
    // Trim leading and trailing spaces and newlines, then split at inner newlines
    const lines = untrimmed.trim().replace(/^\n+/, '').replace(/\n+$/, '').split('\n')
    const trimmedLines = []
    lines.forEach(line => {
        // Trim and add each line to a new array
        trimmedLines.push(line.trim())
    });
    // Return a trimmed string
    return trimmedLines.join('\n')
}

const customMatchers = {
    ToEqualTrimmed: function(matchersUtil) {
        return {
            compare: function(actual, expected) {
                if (expected === undefined) expected = '';
                const result = { };
                result.pass = matchersUtil.equals(
                    trimmedLines(actual),
                    trimmedLines(expected)
                )

                if (result.pass) {
                    result.message = "Expected " + actual + " to be trimmed equal to" + expected;
                } else {
                    result.message = "Expected " + actual + " to be trimmed equal to" + expected + ' But was not!';
                }
                return result;
            }
        };
    }
};

beforeEach(function() {
    jasmine.addMatchers(customMatchers);
});

describe("Outer test description", () => {
    it('should retrieve the correct data', () => {
        const output = getData('foo')
        // This assertion fails
        expect(output).toEqual(
          `example line 1
            example line 2
            example line 3`);
        // These three pass
        expect(output).toContain('example line 1')
        expect(output).toContain('example line 2')
        expect(output).toContain('example line 3')
        // This passes as well
        expect(output).toMatch('[ \n]*example line 1[ \n]*example line 2[ \n]*example line 3[ \n]*');
        // Also passes
        expect(output).ToEqualTrimmed(
          `example line 1
            example line 2
            example line 3`);

    });

});

The [ \n]* matches zero or more spaces or newlines.

Answer 2

It seems like there isn't a ready-made solution available, so you may need to create your own custom approach.

A few options come to mind quickly, with the custom matcher being the most elegant in my opinion.

Using toContain to verify expected content is present in the output string
Using toMatch - to check using regular expressions (RegEx)
Implementing custom matchers - which are highly reusable and easy to understand

For more information, refer to , , and https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions

Function under test:

function getData(x){
    return `
    example line 1
    example line 2
    example line 3
    `
}

Test setup:

function trimmedLines(untrimmed){
    // Trim leading and trailing spaces and newlines, then split at inner newlines
    const lines = untrimmed.trim().replace(/^\n+/, '').replace(/\n+$/, '').split('\n')
    const trimmedLines = []
    lines.forEach(line => {
        // Trim and add each line to a new array
        trimmedLines.push(line.trim())
    });
    // Return a trimmed string
    return trimmedLines.join('\n')
}

const customMatchers = {
    ToEqualTrimmed: function(matchersUtil) {
        return {
            compare: function(actual, expected) {
                if (expected === undefined) expected = '';
                const result = { };
                result.pass = matchersUtil.equals(
                    trimmedLines(actual),
                    trimmedLines(expected)
                )

                if (result.pass) {
                    result.message = "Expected " + actual + " to be trimmed equal to" + expected;
                } else {
                    result.message = "Expected " + actual + " to be trimmed equal to" + expected + ' But was not!';
                }
                return result;
            }
        };
    }
};

beforeEach(function() {
    jasmine.addMatchers(customMatchers);
});

describe("Outer test description", () => {
    it('should retrieve the correct data', () => {
        const output = getData('foo')
        // This assertion fails
        expect(output).toEqual(
          `example line 1
            example line 2
            example line 3`);
        // These three pass
        expect(output).toContain('example line 1')
        expect(output).toContain('example line 2')
        expect(output).toContain('example line 3')
        // This passes as well
        expect(output).toMatch('[ \n]*example line 1[ \n]*example line 2[ \n]*example line 3[ \n]*');
        // Also passes
        expect(output).ToEqualTrimmed(
          `example line 1
            example line 2
            example line 3`);

    });

});

The [ \n]* matches zero or more spaces or newlines.

Answer 3

Answer №2

Recalling my involvement in a past project, TSLint, I remembered the existence of a dedent method for assessing strings of TypeScript code as input/output within their linting process. Upon discovering the source code for the dedent method, I came across an example usage with JSON code it operates on.

Naturally, I decided to tweak and simplify this method to suit my needs better, resulting in the following implementation that appears functional:

export function dedent(inputStrings: TemplateStringsArray, ...values: any[]) {
  //Converting template string array into a unified string
  const fullString = inputStrings.reduce(
    (accumulator, str, i) => `${accumulator}${values[i - 1]}${str}`
  );

  //Remove leading whitespace from each line
  return fullString
    .split('\n')
    .map((line) => line.replace(/^[\t\s]*/, ''))
    .join('\n');
}

This modified approach now allows me to utilize the method without the need for enclosing parentheses, offering a more streamlined workflow:

import { dedent } from 'test-utils';

it('should obtain correct data', () => {
  expect(service.getData('foo'))
    .toEqual(dedent`example line 1
                    example line 2
                    example line 3`);
});

At this initial phase of my current project, this tailored solution seems to align well with my testing requirements. Should I continue moving forward with this approach, or is there potentially a pitfall I might overlook down the road?

Answer 4

Recalling my involvement in a past project, TSLint, I remembered the existence of a dedent method for assessing strings of TypeScript code as input/output within their linting process. Upon discovering the source code for the dedent method, I came across an example usage with JSON code it operates on.

Naturally, I decided to tweak and simplify this method to suit my needs better, resulting in the following implementation that appears functional:

export function dedent(inputStrings: TemplateStringsArray, ...values: any[]) {
  //Converting template string array into a unified string
  const fullString = inputStrings.reduce(
    (accumulator, str, i) => `${accumulator}${values[i - 1]}${str}`
  );

  //Remove leading whitespace from each line
  return fullString
    .split('\n')
    .map((line) => line.replace(/^[\t\s]*/, ''))
    .join('\n');
}

This modified approach now allows me to utilize the method without the need for enclosing parentheses, offering a more streamlined workflow:

import { dedent } from 'test-utils';

it('should obtain correct data', () => {
  expect(service.getData('foo'))
    .toEqual(dedent`example line 1
                    example line 2
                    example line 3`);
});

At this initial phase of my current project, this tailored solution seems to align well with my testing requirements. Should I continue moving forward with this approach, or is there potentially a pitfall I might overlook down the road?

Ways to configure Jasmine tests to disregard tabs within a multiline string

Answer №1

Answer №2

Similar questions

typescript import { node } from types

The Tools of the Trade: TypeScript Tooling

Using TypeScript to declare ambient types with imported declarations

Unable to implement new ecmascript decorators within typescript version 2.4.2

Establishing MQTT Connection in Ionic 3

Having trouble compiling Typescript code when attempting to apply material-ui withStyles function

Unsure about Typescript object structures {} and []?

What is the best method for accessing a specific key value in a JSON file?

Is the indigo-pink color scheme fully implemented after installing @angular/material and scss using ng add command?

There is no registered handler for channel - Electron IPC handle/invoke

The types definition for OpenSeadragon is lacking a property

Discovering the versatility of Typescript objects

What is the best way to create a TypeScript interface or type definition for my constant variable?

Struggle to deduce the generic parameter of a superior interface in Typescript

classes_1.Individual is not a callable

When using Express, the node.js application is able to skip over conditional statements and proceed

Expanding the capabilities of button properties in MUI

Adding dynamic values to nested form groups in Angular Form Array

What is the process for ensuring that an object's property values must include specific substrings?

To ensure compatibility with Angular, the data path "/fileReplacements/1/replace" should adhere to the pattern ".(([cm]?j|t)sx?|json)$"