get started component test

app/components/sign-up/button.hbs

@@ -1,4 +1,5 @@
 <button
+  data-test-button
   type="button"
   class="{{if @disabled 'btn-disabled'}}"
   disabled={{@disabled}}

app/components/sign-up/get-started.hbs

@@ -1,15 +1,15 @@
 
 <div class="landing">
-  <h2 class="landing__main-heading">
+  <h2 class="landing__main-heading" data-test-mainHeading>
     {{this.mainHeading}}
   </h2>
-  <h3 class="landing__sub-heading">
+  <h3 class="landing__sub-heading" data-test-subHeading>
     {{this.subHeading}}
   </h3>
   {{#if (eq @state "get-started")}}
     <ul class="landing__features-lists">
-      <li class="landing__features-list">Use Features</li>
-      <li class="landing__features-list">Display yourself on the (members) page</li>
+      <li class="landing__features-list" data-test-li1>Use Features</li>
+      <li class="landing__features-list" data-test-li2>Display yourself on the (members) page</li>
     </ul>
   {{/if}}
 

tests/integration/components/sign-up/get-started-test.js

@@ -0,0 +1,67 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { hbs } from 'ember-cli-htmlbars';
+import { render } from '@ember/test-helpers';
+
+module('Integration | Component | sign-up/get-started', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders in get-started state', async function (assert) {
+    assert.expect(5);
+
+    this.set('state', 'get-started');
+
+    await render(hbs`<SignUp::GetStarted @state={{this.state}} />`);
+
+    assert.equal(
+      this.element.querySelector('[data-test-mainHeading]').textContent.trim(),
+      'Thank you for connecting your GitHub!',
+      'Correct Heading'
+    );
+    assert.equal(
+      this.element.querySelector('[data-test-subHeading]').textContent.trim(),
+      'Please complete the signup in order to:',
+      'Correct Subheading'
+    );
+    assert.equal(
+      this.element.querySelector('[data-test-li1]').textContent.trim(),
+      'Use Features',
+      'Correct list item'
+    );
+    assert.equal(
+      this.element.querySelector('[data-test-li2]').textContent.trim(),
+      'Display yourself on the (members) page',
+      'Correct list item'
+    );
+    assert.equal(
+      this.element.querySelector('[data-test-button]').textContent.trim(),
+      'Get Started',
+      'Correct button title'
+    );
+  });
+
+  test('it renders in thankyou state', async function (assert) {
+    assert.expect(3);
+
+    this.set('state', 'thank-you');
+
+    await render(hbs`<SignUp::GetStarted @state={{this.state}} />`);
+
+    assert.equal(
+      this.element.querySelector('[data-test-mainHeading]').textContent.trim(),
+      'Congratulations!',
+      'Correct Heading'
+    );
+    assert.equal(
+      this.element.querySelector('[data-test-subHeading]').textContent.trim(),
+      'Lets get you started on your journey',
+      'Correct Subheading'
+    );
+
+    assert.equal(
+      this.element.querySelector('[data-test-button]').textContent.trim(),
+      "Let's Go",
+      'Correct button title'
+    );
+  });
+});