Transformation errors

[knownasilya]

 ▲ ~/sandbox/ember-twiddle ember-native-dom-helpers-codemod --type=acceptance tests/acceptance                             left-panel :: 10d :: ⬡
Processing 20 files... 
Spawning 7 workers...
Sending 3 files to free worker...
Sending 3 files to free worker...
Sending 3 files to free worker...
Sending 3 files to free worker...
Sending 3 files to free worker...
Sending 3 files to free worker...
Sending 2 files to free worker...
 ERR tests/acceptance/dependency-test.js Transformation error
SyntaxError: Unexpected token (86:8)
    at Parser.pp.raise (/usr/local/lib/node_modules/ember-native-dom-helpers-codemod/node_modules/babel-core/node_modules/babylon/lib/parser/location.js:24:13)
    at Parser.pp.unexpected (/usr/local/lib/node_modules/ember-native-dom-helpers-codemod/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:82:8)
    at Parser.pp.semicolon (/usr/local/lib/node_modules/ember-native-dom-helpers-codemod/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:69:81)
    at Parser.pp.parseExpressionStatement (/usr/local/lib/node_modules/ember-native-dom-helpers-codemod/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:427:8)
    at Parser.parseExpressionStatement (/usr/local/lib/node_modules/ember-native-dom-helpers-codemod/node_modules/babel-core/node_modules/babylon/lib/plugins/flow.js:676:20)
    at Parser.pp.parseStatement (/usr/local/lib/node_modules/ember-native-dom-helpers-codemod/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:142:21)
    at Parser.parseStatement (/usr/local/lib/node_modules/ember-native-dom-helpers-codemod/node_modules/babel-core/node_modules/babylon/lib/plugins/flow.js:655:22)
    at Parser.pp.parseBlock (/usr/local/lib/node_modules/ember-native-dom-helpers-codemod/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:442:21)
    at Parser.pp.parseFunctionBody (/usr/local/lib/node_modules/ember-native-dom-helpers-codemod/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:747:22)
    at Parser.parseFunctionBody (/usr/local/lib/node_modules/ember-native-dom-helpers-codemod/node_modules/babel-core/node_modules/babylon/lib/plugins/flow.js:643:20)
 ERR tests/acceptance/twiddles-test.js Transformation error
SyntaxError: Unexpected token (55:8)
    at Parser.pp.raise (/usr/local/lib/node_modules/ember-native-dom-helpers-codemod/node_modules/babel-core/node_modules/babylon/lib/parser/location.js:24:13)
    at Parser.pp.unexpected (/usr/local/lib/node_modules/ember-native-dom-helpers-codemod/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:82:8)
    at Parser.pp.semicolon (/usr/local/lib/node_modules/ember-native-dom-helpers-codemod/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:69:81)
    at Parser.pp.parseExpressionStatement (/usr/local/lib/node_modules/ember-native-dom-helpers-codemod/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:427:8)
    at Parser.parseExpressionStatement (/usr/local/lib/node_modules/ember-native-dom-helpers-codemod/node_modules/babel-core/node_modules/babylon/lib/plugins/flow.js:676:20)
    at Parser.pp.parseStatement (/usr/local/lib/node_modules/ember-native-dom-helpers-codemod/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:142:21)
    at Parser.parseStatement (/usr/local/lib/node_modules/ember-native-dom-helpers-codemod/node_modules/babel-core/node_modules/babylon/lib/plugins/flow.js:655:22)
    at Parser.pp.parseBlock (/usr/local/lib/node_modules/ember-native-dom-helpers-codemod/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:442:21)
    at Parser.pp.parseFunctionBody (/usr/local/lib/node_modules/ember-native-dom-helpers-codemod/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:747:22)
    at Parser.parseFunctionBody (/usr/local/lib/node_modules/ember-native-dom-helpers-codemod/node_modules/babel-core/node_modules/babylon/lib/plugins/flow.js:643:20)
All done. 
Results: 
4 errors
8 unmodified
0 skipped
8 ok
Time elapsed: 4.199seconds 

Tests here https://github.com/knownasilya/ember-twiddle/tree/left-panel/tests

[simonihmig]

Found the problem: this...

test('visiting /twiddles', function(assert) {
  andThen(function() {
    click('.foo');
  });
});

got transformed to this:

test('visiting /twiddles', function(assert) {
  await click('.foo');
});

All following transforms would fail, because the source was left in an unparseable state (use of await without async). Reason was that async was applied to the function within andThen, which was then later removed 😬

Fixed this and added a try/catch with some better error messages. Published as 0.1.1!

[simonihmig]

Btw, it is actually not needed to nest the acceptance helpers like click in andThen, so without that, the error would not have occured. But still better to catch this more intelligently! :)

[cibernox]

This is great. Also, not erroring if a transform fails is a big win for everybody.

[knownasilya]

See another error now:

 ERR tests/acceptance/gist-test.js Transformation error
Error: Transformation visit.js errored on file tests/acceptance/gist-test.js. Reason SyntaxError: Unexpected token (66:10). Please report this in https://github.com/simonihmig/ember-native-dom-helpers-codemod/issues

Stack trace:
SyntaxError: Unexpected token (66:10)
    at Parser.pp.raise (/usr/local/lib/node_modules/ember-native-dom-helpers-codemod/node_modules/babel-core/node_modules/babylon/lib/parser/location.js:24:13)
    at Parser.pp.unexpected (/usr/local/lib/node_modules/ember-native-dom-helpers-codemod/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:82:8)
    at Parser.pp.semicolon (/usr/local/lib/node_modules/ember-native-dom-helpers-codemod/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:69:81)
    at Parser.pp.parseExpressionStatement (/usr/local/lib/node_modules/ember-native-dom-helpers-codemod/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:427:8)
    at Parser.parseExpressionStatement (/usr/local/lib/node_modules/ember-native-dom-helpers-codemod/node_modules/babel-core/node_modules/babylon/lib/plugins/flow.js:676:20)
    at Parser.pp.parseStatement (/usr/local/lib/node_modules/ember-native-dom-helpers-codemod/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:142:21)
    at Parser.parseStatement (/usr/local/lib/node_modules/ember-native-dom-helpers-codemod/node_modules/babel-core/node_modules/babylon/lib/plugins/flow.js:655:22)
    at Parser.pp.parseBlock (/usr/local/lib/node_modules/ember-native-dom-helpers-codemod/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:442:21)
    at Parser.pp.parseFunctionBody (/usr/local/lib/node_modules/ember-native-dom-helpers-codemod/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:747:22)
    at Parser.parseFunctionBody (/usr/local/lib/node_modules/ember-native-dom-helpers-codemod/node_modules/babel-core/node_modules/babylon/lib/plugins/flow.js:643:20)

Source:
import { click } from 'ember-native-dom-helpers';
import { test } from 'qunit';
import moduleForAcceptance from 'ember-twiddle/tests/helpers/module-for-acceptance';
import { findMapText } from 'ember-twiddle/tests/helpers/util';
import ErrorMessages from 'ember-twiddle/utils/error-messages';
import { stubValidSession } from 'ember-twiddle/tests/helpers/torii';

const firstColumn = '.code:eq(0)';
const firstFilePicker = firstColumn + ' .dropdown-toggle';
const secondFile = firstColumn + ' .dropdown-menu li:nth-child(2) a';
const anyFile = firstColumn + ' .dropdown-menu li:nth-child(1) a';
const fileMenu = '.main-menu .dropdown-toggle';
const deleteAction = '.main-menu a:contains(Delete)';
const addTemplateAction = '.test-template-action';
const firstFilePickerFiles = firstColumn + ' .dropdown-menu>li';
const firstColumnTextarea = firstColumn + ' .CodeMirror textarea';
const displayedFiles = '.file-picker > li > a';
const plusGlyph = ".code .glyphicon-plus";

let promptValue = '';

moduleForAcceptance('Acceptance | gist', {
  beforeEach: function() {
    this.cacheConfirm = window.confirm;
    this.cachePrompt = window.prompt;
    this.cacheAlert = window.alert;
    window.confirm = () => true;
    window.prompt = () => promptValue;

    server.create('user', { login: 'octocat' });
  },

  afterEach: function() {
    window.confirm = this.cacheConfirm;
    window.prompt = this.cachePrompt;
    window.alert = this.cacheAlert;
  }
});

test('deleting a gist loaded in two columns', async function(assert) {
  visit('/');

  assert.equal(currentURL(), '/', 'We are on the correct route');
  await click(plusGlyph);
  await click(firstFilePicker);
  await click(secondFile);
  await click(firstFilePicker);
  await click(fileMenu);
  await click(deleteAction);
  andThen(function() {
    assert.equal(find('.code .CodeMirror').length, 0, 'No code mirror editors active');
    assert.equal(find('.dropdown-toggle:contains(No file selected)').length, 2, 'Shows message when no file is selected.');
    assert.equal(find('.main-menu .test-remove-action').length, 0, 'There no longer is a selected file to delete');
  });

  // TODO: Replace brittle for loop test code with "while there are files left..."
  for (var i = 0; i < 2; ++i) {
    await click(firstFilePicker);
    await click(anyFile);
    await click(fileMenu);
    await click(deleteAction);
  }

  andThen(function() {
    await click(firstFilePicker);
    assert.ok(find(anyFile).text().indexOf('twiddle.json')!==-1, 'twiddle.json remains');
  });
});

test('can add two templates with different names', async function(assert) {
  visit('/');
  let origFiles;

  await click(firstFilePicker);
  origFiles = find(firstFilePickerFiles).length;
  promptValue = "foo/template.hbs";
  await click(fileMenu);
  await click(addTemplateAction);
  await click(firstFilePicker);

  let numFiles;

  numFiles = find(firstFilePickerFiles).length;
  assert.equal(numFiles, origFiles + 1, 'Added first file');
  promptValue = "bar/template.hbs";
  await click(fileMenu);
  await click(addTemplateAction);
  await click(firstFilePicker);
  numFiles = find(firstFilePickerFiles).length;
  assert.equal(numFiles, origFiles + 2, 'Added second file');
});

test('can add component (js and hbs)', async function(assert) {
  let origFileCount;
  promptValue = "components/my-comp";
  visit('/');
  origFileCount =  find(firstFilePickerFiles).length;

  await click(plusGlyph);
  await click(fileMenu);
  await click('.add-component-link');
  await click(firstFilePicker);
  let numFiles = find(firstFilePickerFiles).length;
  assert.equal(numFiles, origFileCount + 2, 'Added component files');
  let fileNames = findMapText(`${firstFilePickerFiles}  a`);
  let jsFile = `${promptValue}.js`;
  let hbsFile = `templates/${promptValue}.hbs`;
  assert.equal(fileNames[3], jsFile);
  assert.equal(fileNames[4], hbsFile);
  let columnFiles = findMapText(displayedFiles);
  assert.deepEqual(columnFiles, [jsFile, hbsFile], 'Added files are displayed');
});

test('can add component (js and hbs) using pod format', async function(assert) {
  let origFileCount;
  promptValue = "my-comp";
  visit('/');
  origFileCount =  find(firstFilePickerFiles).length;

  await click(plusGlyph);
  await click(fileMenu);
  await click('.add-component-link');
  await click(firstFilePicker);
  let numFiles = find(firstFilePickerFiles).length;
  assert.equal(numFiles, origFileCount + 2, 'Added component files');
  let fileNames = findMapText(`${firstFilePickerFiles}  a`);
  let jsFile = `${promptValue}/component.js`;
  let hbsFile = `${promptValue}/template.hbs`;
  assert.equal(fileNames[3], jsFile);
  assert.equal(fileNames[4], hbsFile);
  let columnFiles = findMapText(displayedFiles);
  assert.deepEqual(columnFiles, [jsFile, hbsFile], 'Added files are displayed');
});

test('component without hyphen fails', async function(assert) {
  assert.expect(2);

  let called = false;
  window.alert = function(msg){
    called = true;
    assert.equal(msg, ErrorMessages.componentsNeedHyphens);
  };
  promptValue = "components/some-dir/mycomp";

  visit('/');
  await click('.add-component-link');
  await click(firstFilePicker);
  assert.ok(called, "alert was called");
});

test('can add service', async function(assert) {
  assert.expect(3);

  let origFileCount;
  promptValue = "my-service/service.js";
  visit('/');
  origFileCount = find(firstFilePickerFiles).length;

  await click(fileMenu);
  await click('.test-add-service-link');
  await click(firstFilePicker);

  let numFiles = find(firstFilePickerFiles).length;
  assert.equal(numFiles, origFileCount + 1, 'Added service file');

  let fileNames = findMapText(`${firstFilePickerFiles}  a`);
  assert.equal(fileNames[3], promptValue, 'Added the file with the right name');

  let columnFiles = findMapText(displayedFiles);
  assert.ok(columnFiles.includes(promptValue), 'Added file is displayed');
});

test('can add helper', async function(assert) {
  assert.expect(3);

  let origFileCount;
  promptValue = 'helpers/my-helper.js';
  visit('/');
  origFileCount = find(firstFilePickerFiles).length;

  await click(fileMenu);
  await click('.test-add-helper-link');
  await click(firstFilePicker);

  let numFiles = find(firstFilePickerFiles).length;
  assert.equal(numFiles, origFileCount + 1, 'Added helper file');

  let fileNames = findMapText(`${firstFilePickerFiles}  a`);
  assert.equal(fileNames[3], promptValue, 'Added the file with the right name');

  let columnFiles = findMapText(displayedFiles);
  assert.ok(columnFiles.includes(promptValue), 'Added file is displayed');
});

test('can add unit test', async function(assert) {
  assert.expect(3);

  let origFileCount;
  promptValue = 'tests/unit/routes/my-route-test.js';
  visit('/');
  origFileCount = find(firstFilePickerFiles).length;

  await click(fileMenu);
  await click('.test-add-route-test-link');
  await click(firstFilePicker);

  let numFiles = find(firstFilePickerFiles).length;
  assert.equal(numFiles, origFileCount + 3, 'Added 3 test files');

  let fileNames = findMapText(`${firstFilePickerFiles}  a`);
  assert.equal(fileNames[fileNames.length - 1], promptValue, 'Added the file with the right name');

  let columnFiles = findMapText(displayedFiles);
  assert.ok(columnFiles.includes(promptValue), 'Added file is displayed');
});

test('can add integration test', async function(assert) {
  assert.expect(3);

  let origFileCount;
  promptValue = 'tests/integration/components/my-component-test.js';
  visit('/');
  origFileCount = find(firstFilePickerFiles).length;

  await click(fileMenu);
  await click('.test-add-component-test-link');
  await click(firstFilePicker);

  let numFiles = find(firstFilePickerFiles).length;
  assert.equal(numFiles, origFileCount + 3, 'Added 3 test files');

  let fileNames = findMapText(`${firstFilePickerFiles}  a`);
  assert.equal(fileNames[fileNames.length - 1], promptValue, 'Added the file with the right name');

  let columnFiles = findMapText(displayedFiles);
  assert.ok(columnFiles.includes(promptValue), 'Added file is displayed');
});

test('can add acceptance test', async function(assert) {
  assert.expect(3);

  let origFileCount;
  promptValue = 'tests/acceptance/my-acceptance-test.js';
  visit('/');
  origFileCount = find(firstFilePickerFiles).length;

  await click(fileMenu);
  await click('.test-add-acceptance-test-link');
  await click(firstFilePicker);

  let numFiles = find(firstFilePickerFiles).length;
  assert.equal(numFiles, origFileCount + 6, 'Added 6 test files');

  let fileNames = findMapText(`${firstFilePickerFiles}  a`);
  assert.equal(fileNames[fileNames.length - 1], promptValue, 'Added the file with the right name');

  let columnFiles = findMapText(displayedFiles);
  assert.ok(columnFiles.includes(promptValue), 'Added file is displayed');
});

test('unsaved indicator', async function(assert) {
  const indicator = ".test-unsaved-indicator";

  visit('/');

  assert.equal(find(indicator).length, 0, "Unsaved indicator does not appear when first loading");

  // Below doesn't work in phantomjs:
  if (/PhantomJS/.test(window.navigator.userAgent)) {
    return;
  }

  await click(firstColumnTextarea);
  fillIn(firstColumnTextarea, "\"some text\";");
  triggerEvent(firstColumnTextarea, "blur");

  assert.equal(find(indicator).length, 1, "Unsaved indicator reappears after editing");
});

test('editing a file updates gist', async function(assert) {
  const files = [
    {
      filename: "templates.application.hbs",
      content: "{{outlet}}"
    }
  ];

  runGist(files);

  promptValue = "templates/index.hbs";

  await click(fileMenu);
  await click(addTemplateAction);
  await click(firstFilePicker);

  assert.equal(find(firstColumnTextarea).val(), "");

  // Below doesn't work in phantomjs:
  if (/PhantomJS/.test(window.navigator.userAgent)) {
    return;
  }

  await click("#live-reload");
  await click(firstColumnTextarea);
  fillIn(firstColumnTextarea, '<div class="index">some text</div>');
  triggerEvent(firstColumnTextarea, "blur");

  assert.equal(find(firstColumnTextarea).val(), '<div class="index">some text</div>');

  await click(".run-now");
  waitForLoadedIFrame();
  assert.equal(outputContents('.index'), 'some text');
});

test('own gist can be copied into a new one', async function(assert) {
  // set owner of gist as currently logged in user
  stubValidSession(this.application, {
    currentUser: { login: "Gaurav0" },
    "github-oauth2": {}
  });

  runGist([
    {
      filename: 'application.template.hbs',
      content: 'hello world!'
    }
  ]);

  assert.equal(find('.test-unsaved-indicator').length, 0, "No unsaved indicator shown");

  fillIn('.title input', "my twiddle");
  keyEvent('.title input', 'keyup', 13);
  assert.equal(find('.title input').val(), "my twiddle");

  await click("#live-reload");
  await click('.test-copy-action');
  waitForLoadedIFrame();
  assert.equal(find('.title input').val(), "New Twiddle", "Description is reset");
  assert.equal(find('.test-unsaved-indicator').length, 0, "Unsaved indicator does not appear when gist is copied");
  assert.equal(find('.test-copy-action').length, 0, "Menu item to copy gist is not shown anymore");
  assert.equal(outputContents('div'), 'hello world!');
});

test('accessing /:gist/copy creates a new Twiddle with a copy of the gist', async function(assert) {
  runGist([
    {
      filename: 'application.template.hbs',
      content: 'hello world!'
    }
  ]);

  assert.equal(find('.test-unsaved-indicator').length, 0, "No unsaved indicator shown");

  fillIn('.title input', "my twiddle");
  assert.equal(find('.title input').val(), "my twiddle");
  assert.equal(find('.test-unsaved-indicator').length, 1, "Changing title triggers unsaved indicator");

  await click("#live-reload");
  visit('/35de43cb81fc35ddffb2/copy');
  waitForLoadedIFrame();
  assert.equal(currentURL(), '/');
  assert.equal(find('.title input').val(), "New Twiddle", "Description is reset");
  assert.equal(find('.test-unsaved-indicator').length, 0, "Unsaved indicator does not appear when gist is copied");
  assert.equal(outputContents('div'), 'hello world!');
});

    at fs.readdirSync.forEach.e (/usr/local/lib/node_modules/ember-native-dom-helpers-codemod/lib/presets/-preset.js:21:19)
    at Array.forEach (native)
    at /usr/local/lib/node_modules/ember-native-dom-helpers-codemod/lib/presets/-preset.js:13:8
    at module.exports (/usr/local/lib/node_modules/ember-native-dom-helpers-codemod/index.js:7:14)
All done.
Results:
1 errors
8 unmodified
0 skipped
11 ok
Time elapsed: 5.653seconds

[simonihmig]

@knownasilya can you please file a new issue for that error, thanks!