Question:Error in sample step-by-step

[vrathnayake]

Followed the step-by-step tutorial
https://github.com/garris/ember-backstop-tutorial/
added "await backstop(assert);" to the last four tests and the tests failed as mentioned. Then I approved the screenshots(backstop-approve). BackstopJs Report shows all passing. But the four tests fail when run with following error;

1. Promise rejected during "should link to contact information": Unexpected end of JSON input
   Source: SyntaxError: Unexpected end of JSON input
   at parse ()

[garris]

Hi @vrathnayake, What version of ember-backstop & backstopjs are you using?

[vrathnayake]

ember-backstop 1.2.1
backstopjs 4.3.2

[shankarsridhar]

@vrathnayake Can you share a link to a sample repo that reproduces this problem ?

[garris]

@shankarsridhar looks like she was following this... https://github.com/garris/ember-backstop/issues/tutorial

Does that work for you?

[shankarsridhar]

@shankarsridhar looks like she was following this... https://github.com/garris/ember-backstop/issues/tutorial

Does that work for you?

Yes it does. I was able to generate screenshots, approve them to baseline, and then make the failing backstop tests pass again.

On a separate note, maybe we should upgrade the ember-backstop dependency to latest.

@vrathnayake
Here is the list-rentals-test.js test file after I added the assertions:

import Service from '@ember/service';
import { module, test } from 'qunit';
import { setupApplicationTest } from 'ember-qunit';
import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
import backstop from 'ember-backstop/test-support/backstop';
import { resolve } from 'rsvp';
import {
  click,
  currentURL,
  visit,
  fillIn,
  triggerKeyEvent
} from '@ember/test-helpers'

let StubMapsService = Service.extend({
  getMapElement() {
    return resolve(document.createElement('div'));
  }
});

module('Acceptance | list rentals', function(hooks) {
  setupApplicationTest(hooks);
  setupMirage(hooks);

  hooks.beforeEach(function() {
    this.owner.register('service:map-element', StubMapsService);
  });

  test('should redirect to rentals route', async function(assert) {
    await visit('/');
    assert.equal(currentURL(), '/rentals', 'should redirect automatically');
  });

  test('should link to information about the company', async function(assert) {
    await visit('/');
    await click(".menu-about");
    assert.equal(currentURL(), '/about', 'should navigate to about');
  });

  test('should link to contact information', async function(assert) {
    await visit('/');
    await backstop(assert);
    await click(".menu-contact");
    assert.equal(currentURL(), '/contact', 'should navigate to contact');
  });

  test('should list available rentals', async function(assert) {
    await visit('/');
    await backstop(assert);
    assert.equal(this.element.querySelectorAll('.results .listing').length, 3, 'should display 3 listings');
  });

  test('should filter the list of rentals by city', async function(assert) {
    await visit('/');
    await backstop(assert);
    await fillIn('.list-filter input', 'seattle');
    await triggerKeyEvent('.list-filter input', 'keyup', 69);
    assert.ok(this.element.querySelectorAll('.results .listing').length, 1, 'should display 1 listing');
    assert.ok(this.element.querySelector('.listing .location').textContent.includes('Seattle'), 'should contain 1 listing with location Seattle');
  });

  test('should show details for a specific rental', async function(assert) {
    await visit('/rentals');
    await backstop(assert);
    await click(".grand-old-mansion");
    assert.equal(currentURL(), '/rentals/grand-old-mansion', "should navigate to show route");
    assert.ok(this.element.querySelector('.show-listing h2').textContent.includes("Grand Old Mansion"), 'should list rental title');
    assert.ok(this.element.querySelector('.show-listing .description'), 'should list a description of the property');
  });
});

[shankarsridhar]

Followed the step-by-step tutorial
https://github.com/garris/ember-backstop-tutorial/

On a side note,
Looks like https://github.com/garris/ember-backstop-tutorial/ is linking to something else other than https://github.com/garris/ember-backstop-tutorial/ which is misleading 👀

[Neeraj222]

Hi @shankarsridhar, I am facing the same issue as @vrathnayake. Has there been a fix for this problem ?