adopted-ember-addons / ember-stripe-elements

A simple Ember wrapper for Stripe Elements
https://ember-stripe-elements.netlify.com
MIT License
19 stars 23 forks source link

The uses of StripeMock seem to be borderline ... #39

Closed BnitoBzh closed 2 years ago

BnitoBzh commented 2 years ago

With ember-stripe-elements@2.0.2

According to the rule from eslint-plugin-ember ember/no-test-support-import The Stripe library mock initializer is not correct, the rule is not fired due to the dynamic import usecase here.

The initialization condition has been changed .. The new condition typeof FastBoot !== 'undefined' || stripeConfig.mock has not the same behavior from the previous typeof FastBoot === 'undefined' && stripeConfig.mock.

Probably independently from this, i have created a iban element (like card element) and the test failed because it does not found the StripeMock. import StripeMock from '@adopted-ember-addons/ember-stripe-elements/test-support';.

Here is the full test :

import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import hbs from 'htmlbars-inline-precompile';
import { render, find, clearRender } from '@ember/test-helpers';
import StripeMock from '@adopted-ember-addons/ember-stripe-elements/test-support';

module('Integration | Component | stripe-iban', function (hooks) {
  setupRenderingTest(hooks);

  hooks.beforeEach(function () {
    window.Stripe = StripeMock;
    this.stripe = this.owner.lookup('service:stripev3');
    this.stripe.configure();
  });

  test('it renders', async function (assert) {
    await render(hbs`<StripeIban />`);

    assert.ok(find('.ember-stripe-element.ember-stripe-iban'));
    assert.ok(find('[role="mount-point"]'));
    assert.strictEqual(this.stripe.getActiveElements().length, 1);
  });

  test('yields out error message', async function (assert) {
    this.set('stripeError', { message: 'oops' });
    await render(hbs`
      <StripeIban @stripeError={{this.stripeError}} as |stripeElement stripeError|>
        {{stripeError.message}}
      </StripeIban>
    `);

    assert.strictEqual(
      this.element.querySelector('.ember-stripe-element').textContent.trim(),
      'oops'
    );

    await clearRender();

    assert.strictEqual(this.stripe.getActiveElements().length, 0);
  });
});
import StripeElement from '@adopted-ember-addons/ember-stripe-elements/components/stripe-element';

export default class StripeIbanComponent extends StripeElement {
  type = 'iban';
}
<div class="ember-stripe-element ember-stripe-card">
  {{! template-lint-disable no-invalid-role }}
  <div
    role="mount-point"
    {{did-insert this.registerListeners}}
    {{did-update this.onOptionsChange}}
  ></div>
  {{#if (has-block)}}
    {{yield this.stripeElement this.stripeError}}
  {{/if}}
</div>
st-h commented 2 years ago

Thanks for reporting this issue. The fasted way to get this issue resolved would be to submit a PR, as at the moment I don't know when I will have time to look at this issue.

Regarding the https://github.com/ember-cli/eslint-plugin-ember/blob/master/docs/rules/no-test-import-export.md rule, it only mentions to not import any file ending in -test.js. I am not sure how this applies here, as the mock does not end in -test.js.

Not sure what is going on with your test support issue, as addon-test-support seems to be the recommended location to place such files.

esbanarango commented 2 years ago

https://github.com/adopted-ember-addons/ember-stripe-elements/pull/41

st-h commented 2 years ago

Fix released in 2.0.3. Please reopen in case you are still having issues.