0
votes

I'm experiencing problems with the Jasmine (ver. 2.4) JavaScript testing framework.

I'm creating a course on udemy.com, but the online checker won't accept the last part of my code, where I'm using the "expect(variable).toBe(true);" function of Jasmine.

describe('A div with class', function() {
  var parent = document.getElementsByClassName('media')[0];

  it('"media" should exist.', function() {
    expect(parent).toBeDefined();
  });

  var child = document.getElementsByClassName('media-body')[0];

  it('"media-body" should exist.', function() {
    expect(child).toBeDefined();
  });

});

describe('A div with class "media"', function() {
  var parent = document.getElementsByClassName('media')[0];
  var child = document.getElementsByClassName('media-body')[0];

  var answer;

  if (parent.firstChild == child) {
    answer = true;
  } else {
    answer = false;
  }

  it('should have a div with class "media-body" as its child.', function() {
    expect(answer).toBe(true);
  });

});

My test output from the udemy.com page is:

"A div with class "media" should have a div with class "media-body" as its child.

Expected false to be true"

My updated code which now works very well:

describe('A div with the class', function() {

var class1 = 'media';
var failClass1 = '"' + class1 + '"' + ' should exist.'

var class2 = 'media-body';
var failClass2 = '"' + class2 + '"' + ' should exist.'

var element1 = null;
var element2 = null;

var relationship1_2 = null;
var failRelationship = '"' + class2 + '"' + ' should be nested in a div with the class "' + class1 + '".'

beforeEach(function() {
  element1 = document.getElementsByClassName(class1)[0];
  element2 = document.getElementsByClassName(class2)[0];
  relationship1_2 = element1.contains(element2);
})

it(failClass1, function() {
  expect(element1).toBeDefined();
});

it(failClass2, function() {
  expect(element2).toBeDefined();
});

it(failRelationship, function() {
  expect(relationship1_2).toBe(true);
});

});

1
Not sure why, but in any case you might wanna rewrite to expect(parent.firstChild === child).toBe(true); and save yourself 6 lines of code.Omri Aharon

1 Answers

0
votes

I'd recommend re-organize it using beforeEach blocks as the following example:

describe('testing media tag hierarchy', function() {

  var parent = null;

  beforeEach(function() {
    parent = document.getElementsByClassName('media')[0];
  })

  it('"media" should exist.', function() {
    expect(parent).toBeDefined();
  });

  it('should have a div with class "media-body" as its child.', function() {
    expect(parent.firstChild.hasClass('media-body')).toBeTruthy();
  });
});

I'm not sure this will fix your problem but it might... it's easier to read.