[Bug] Render multiple cards successfully

- Add integration test covering two card sections in one mobiledoc
- Ensure all afterRender mutations use schedule instead of scheduleOnce

Author: lukemelia

addon/components/render-mobiledoc.gts

@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import { scheduleOnce } from '@ember/runloop';
+import { schedule, scheduleOnce } from '@ember/runloop';
 import Renderer from 'ember-mobiledoc-dom-renderer';
 import { getDocument } from 'ember-mobiledoc-dom-renderer/utils/document';
 import { guidFor } from '@ember/object/internals';
@@ -324,7 +324,7 @@ export default class RenderMobiledocComponent extends Component<Signature> {
 
   private addCard(card: CardRegistration): void {
     // Defer mutation to after the current render to avoid updating a value during computation
-    scheduleOnce('afterRender', this, this._addCard, card);
+    schedule('afterRender', this, this._addCard, card);
   }
 
   private _addCard(card: CardRegistration): void {
@@ -333,7 +333,7 @@ export default class RenderMobiledocComponent extends Component<Signature> {
 
   private removeCard(card: CardRegistration): void {
     // Defer mutation to after the current render to avoid updating a value during computation
-    scheduleOnce('afterRender', this, this._removeCard, card);
+    schedule('afterRender', this, this._removeCard, card);
   }
 
   private _removeCard(card: CardRegistration): void {
@@ -344,7 +344,7 @@ export default class RenderMobiledocComponent extends Component<Signature> {
 
   private addAtom(atom: AtomRegistration): void {
     // Defer mutation to after the current render to avoid updating a value during computation
-    scheduleOnce('afterRender', this, this._addAtom, atom);
+    schedule('afterRender', this, this._addAtom, atom);
   }
 
   private _addAtom(atom: AtomRegistration): void {
@@ -353,7 +353,7 @@ export default class RenderMobiledocComponent extends Component<Signature> {
 
   private removeAtom(atom: AtomRegistration): void {
     // Defer mutation to after the current render to avoid updating a value during computation
-    scheduleOnce('afterRender', this, this._removeAtom, atom);
+    schedule('afterRender', this, this._removeAtom, atom);
   }
 
   private _removeAtom(atom: AtomRegistration): void {

tests/integration/components/render-mobiledoc-test.gts

@@ -74,6 +74,44 @@ module('Integration | Component | render-mobiledoc', function (hooks) {
       .exists(`renders card with class ${CARD_ELEMENT_CLASS}-${cardName}`);
   });
 
+  test('it renders multiple cards in a single mobiledoc', async function (this: MobiledocTestContext, assert) {
+    const secondCardName = 'test-card';
+    this.set('mobiledoc', {
+      version: '0.3.1',
+      markups: [],
+      atoms: [],
+      cards: [
+        [cardName, { foo: 'bar' }],
+        [secondCardName, { foo: 'baz' }],
+      ],
+      sections: [
+        [10, 0],
+        [10, 1],
+      ],
+    });
+    this.set('cardNames', [cardName, secondCardName]);
+    const context = this;
+
+    await render(
+      <template>
+        <RenderMobiledoc
+          @mobiledoc={{context.mobiledoc}}
+          @cardNames={{context.cardNames}}
+        />
+      </template>,
+    );
+
+    assert
+      .dom(`.${CARD_ELEMENT_CLASS}`)
+      .exists({ count: 2 }, 'renders a card element for each card section');
+    assert
+      .dom('#sample-test-card')
+      .hasText('foo: bar', 'renders the first card payload');
+    assert
+      .dom('.test-card-component-payload')
+      .hasText('baz', 'renders the second card payload');
+  });
+
   test('it uses `cardNameToComponentName` to allow selecting components (inheritance)', async function (this: MobiledocTestContext, assert) {
     this.set('mobiledoc', createMobiledocWithCard(cardName));
     this.set('cardNames', [cardName]);