closure action getting nowhere?

Hey,

for the past 2 days I have been trying to migrate to the new set of APIs but cannot figure this out.

A bit of context first:

• just migrated from ember v2.18 to v3.12 with the major changes being:

  • closure actions (used sendAction everywhere)
  • making sure that computed properties don’t get overwritten

• app uses pods structure

• app uses jquery

• node v12.7.0, ember-cli v3.10.1, ember-qunit v4.5.0

• tests were passing fine with v2.18 and with v3.12 (also tried v3.8, v3.10 and v3.11) before I updated ember-qunit to latest.

Now, my issue is with acceptance tests. Not that the tests are not running at all, but fail.

Here’s my code:

login route:

export default Route.extend({
	session: service(),

	actions: {
		login() {
			// login logic here, but it doesn't reach the second time.
		}
	}
});

login template.hbs (simplified):

{{#m-form
	action=(action send "login")
}}
	{{m-input
		type="email"

		name="email"
		value=model.email
		placeholder="login.email"
		autofocus="autofocus"

		disabled=model.freezed
	}}
	<br />
	{{m-input
		type="password"

		name="password"
		value=model.password
		placeholder="login.password"

		disabled=model.freezed
	}}
	<br />
	{{m-button
		type="submit"

		value="login.log_in"
		asBlock=true
		size="superman"
		color="red"

		disabled=model.freezed
		loading=model.freezed
	}}
{{/m-form}}

m-input is using {{input}} under the hood.

m-form/component.js:

export default Component.extend({
	tagName: 'form',

	classNames: ['form'],
	attributeBindings: ['autocomplete'],

	autocomplete: 'off',

	action: null,

	submit(event) {
		event.stopPropagation();
		event.preventDefault();

		if(!this.action) {
			return;
		}
		this.action(); // this is being fired!
	}
});

const user = '[e-mail]';
const password = 'someoneio';

module('Login', (hooks) => {
	setupApplicationAcceptanceTest(hooks); // clears up the `localStorage` afterEach on top of `setupApplicationTest`.

	test('User should not be able to login if email is missing', async (assert) => {
		await visit('/actions/login');

		await fillIn('input[name="email"]', '');
		await fillIn('input[name="password"]', password);
		await click('button[type="submit"]');

		await checkValidationErrorCount('[data-test="field-email"]', 1);

		assert.equal(currentRouteName(), 'login');
	});

	test('User should not be able to login is password is missing', async (assert) => {
		await visit('/actions/login');

		await fillIn('input[name="email"]', user);
		await fillIn('input[name="password"]', '');
		await click('button[type="submit"]');

		await checkValidationErrorCount('[data-test="field-password"]', 1);

		assert.equal(currentRouteName(), 'login');
	});

	test('User should not be able to login if email or password is invalid', async (assert) => {
		await visit('/actions/login');

		await fillIn('input[name="email"]', user)
		await fillIn('input[name="password"]', 'invalid')
		await click('button[type="submit"]');

		assert.equal(currentRouteName(), 'login');
	});

	test('User should be able to login into application', async (assert) => {
		await visit('/actions/login');

		await fillIn('input[name="email"]', user);
		await fillIn('input[name="password"]', password);
		await click('button[type="submit"]');

		assert.equal(currentRouteName(), 'dashboard.index');
	});
});

The tests run properly and as intended up to the firing of action from m-form’s submit event. It gets to this.action() and that is being fired for the first test but it never gets to the route’s login action for the following ones.

No error or warning.

I tried to reproduce this separately but seems to work fine on it’s own. I can put that up if it will help get this somewhere.

Any thoughts?

[rwjblue]

Put a breakpoint on this line:

        return (0, _runloop.join)(self, fn, ...processArgs(args));

That fn will get invoked, and should be the action being ran. Is it what you expect? I would expect fn to basically be the controller’s send method…

[rwjblue]

Glad you figured it out!