[My Site Migration] Test Cases for identity linking page

app/components/identity/blocked.hbs

@@ -0,0 +1,8 @@
+<div class='identity-box-heading' data-test-blocked-heading>Status Blocked</div>
+<div class='identity-box-desc' data-test-blocked-desc>The system failed to link
+  your profile service with the Identity service,
+  <span class='identity-box-desc-bold'>Please try again!</span></div>
+<button
+  class='identity-box-button'
+  data-test-blocked-button type="button" {{on 'click' (fn @setState 'step1')}}
+>Retry</button>

app/components/identity/verified.hbs

@@ -0,0 +1,6 @@
+<div class='identity-box-heading' data-test-verified-heading>Verified</div>
+<div class='identity-box-desc' data-test-verified-desc><span
+    class='identity-box-desc-bold'
+  >Congratulations!!!</span>
+  You did it, go ahead and tell in the community that you verified your profile
+  service.</div>

app/templates/identity.hbs

@@ -25,6 +25,8 @@
       <Identity::Step3 @setState={{this.setState}} />
      {{else if (eq this.state 'reload')}}
       <Identity::Reload />
+       {{else if (eq this.state 'verified')}}
+      <Identity::Verified />
     {{/if}}
   </div>
 

tests/integration/components/identity/blocked.js

@@ -0,0 +1,26 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'website-www/tests/helpers';
+import { render, click } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | identity/blocked', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders the initial state correctly', async function (assert) {
+    await render(hbs`<Identity::Blocked />`);
+
+    assert.dom('[data-test-blocked-heading]').hasText('Status Blocked');
+    assert.dom('[data-test-blocked-desc]').exists();
+    assert.dom('[data-test-blocked-button]').hasText('Retry');
+  });
+
+  test('it handles retry button click', async function (assert) {
+    let retryClicked = false;
+    this.set('setState', () => (retryClicked = true));
+    await render(hbs`<Identity::Blocked @setState={{this.setState}} />`);
+
+    await click('[data-test-blocked-button]');
+
+    assert.true(retryClicked, 'Retry button should trigger setState');
+  });
+});

tests/integration/components/identity/get-started.js

@@ -0,0 +1,52 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'website-www/tests/helpers';
+import { render, click } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | identity/get-started', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders the get started component correctly', async function (assert) {
+    this.set('setState', () => {});
+    await render(hbs`
+      <Identity::GetStarted @setState={{this.setState}}/>
+    `);
+
+    assert.dom('[data-test-getStarted-heading]').exists();
+    assert
+      .dom('[data-test-getStarted-heading]')
+      .hasText('Qualification Criteria');
+
+    assert.dom('[data-test-getStarted-desc]').exists();
+    assert
+      .dom('[data-test-getStarted-desc]')
+      .containsText('To update your profile details');
+    assert
+      .dom('[data-test-getStarted-desc] a')
+      .hasAttribute(
+        'href',
+        'https://github.com/Real-Dev-Squad/sample-profile-service',
+      );
+
+    assert.dom('[data-test-getStarted-button]').exists();
+    assert.dom('[data-test-getStarted-button]').hasText('Get Started');
+  });
+
+  test('clicking get started button triggers setState action with step1', async function (assert) {
+    assert.expect(1);
+
+    this.set('setState', (state) => {
+      assert.strictEqual(
+        state,
+        'step1',
+        'setState action is called with step1',
+      );
+    });
+
+    await render(hbs`
+      <Identity::GetStarted @setState={{this.setState}}/>
+    `);
+
+    await click('[data-test-getStarted-button]');
+  });
+});

tests/integration/components/identity/step1.js

@@ -0,0 +1,71 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'website-www/tests/helpers';
+import { render, click, waitFor } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | identity/step1', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders the initial state correctly', async function (assert) {
+    this.set('setState', () => {});
+    await render(hbs`<Identity::Step1 @setState={{this.setState}}/>`);
+
+    assert
+      .dom('[data-test-step1-heading]')
+      .hasText('Step 1: Chaincode Generation');
+    assert.dom('[data-test-step1-desc]').exists();
+    assert.dom('[data-test-step1-button]').hasText('Generate Chaincode');
+    assert.dom('[data-test-step1-next-button]').doesNotExist();
+  });
+
+  test('it handles chaincode generation', async function (assert) {
+    this.set('setState', () => {});
+    await render(hbs`<Identity::Step1 @setState={{this.setState}}/>`);
+
+    await click('[data-test-step1-button]');
+    await waitFor('.identity-chaincode-box');
+
+    assert.dom('[data-test-step1-chaincode]').hasText('********************');
+    assert.dom('[data-test-step1-next-button]').exists();
+    assert.dom('[data-test-step1-button]').doesNotExist();
+  });
+
+  test('it toggles chaincode visibility', async function (assert) {
+    this.set('setState', () => {});
+    await render(hbs`<Identity::Step1 @setState={{this.setState}}/>`);
+
+    await click('[data-test-step1-button]');
+    await waitFor('.identity-chaincode-box');
+
+    const initialText = await document
+      .querySelector('[data-test-step1-chaincode]')
+      .textContent.trim();
+    await click('[data-test-step1-eye]');
+    const visibleText = await document
+      .querySelector('[data-test-step1-chaincode]')
+      .textContent.trim();
+
+    assert.notEqual(
+      initialText,
+      visibleText,
+      'Chaincode visibility should toggle',
+    );
+    assert.notEqual(
+      visibleText,
+      '********************',
+      'Chaincode should be visible',
+    );
+  });
+
+  test('it handles next button click', async function (assert) {
+    let nextClicked = false;
+    this.set('setState', () => (nextClicked = true));
+    await render(hbs`<Identity::Step1 @setState={{this.setState}}/>`);
+
+    await click('[data-test-step1-button]');
+    await waitFor('[data-test-step1-next-button]');
+    await click('[data-test-step1-next-button]');
+
+    assert.true(nextClicked, 'Next button should trigger setState');
+  });
+});

tests/integration/components/identity/step2.js

@@ -0,0 +1,74 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'website-www/tests/helpers';
+import { render, click, fillIn } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | identity/step2', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders the initial state correctly', async function (assert) {
+    this.set('setState', () => {});
+    this.set('profileURL', '');
+    await render(
+      hbs`<Identity::Step2 @setState={{this.setState}} @profileURL={{this.profileURL}} />`,
+    );
+
+    assert
+      .dom('[data-test-step2-heading]')
+      .hasText('Step 2: Profile Service URL');
+    assert.dom('[data-test-step2-desc]').exists();
+    assert.dom('[data-test-step2-input]').exists();
+    assert.dom('[data-test-step2-next-button]').doesNotExist();
+  });
+
+  test('it shows next button when URL is entered', async function (assert) {
+    this.set('setState', () => {});
+    this.set('profileURL', '');
+    await render(
+      hbs`<Identity::Step2 @setState={{this.setState}} @profileURL={{this.profileURL}} />`,
+    );
+
+    assert.dom('[data-test-step2-next-button]').doesNotExist();
+
+    await fillIn('[data-test-step2-input]', 'https://my-profile-service.com');
+
+    assert.dom('[data-test-step2-next-button]').exists();
+    assert.dom('[data-test-step2-next-button]').hasText('Next');
+  });
+
+  test('it handles next button click and shows loader', async function (assert) {
+    let nextClicked = false;
+    this.set('setState', () => (nextClicked = true));
+    this.set('profileURL', '');
+    await render(
+      hbs`<Identity::Step2 @setState={{this.setState}} @profileURL={{this.profileURL}} />`,
+    );
+
+    await fillIn('[data-test-step2-input]', 'https://my-profile-service.com');
+    await click('[data-test-step2-next-button]');
+
+    assert.true(nextClicked, 'Next button should trigger setState');
+  });
+
+  test('it shows loader while saving URL', async function (assert) {
+    this.set('setState', () => {});
+    this.set('savingURL', true);
+    this.set('profileURL', '');
+    await render(hbs`
+      <Identity::Step2 
+        @setState={{this.setState}}
+        @savingURL={{this.savingURL}}
+        @profileURL={{this.profileURL}}
+      />`);
+
+    await fillIn('[data-test-step2-input]', 'https://my-profile-service.com');
+
+    assert.dom('.loader').exists('Loader should be visible when saving');
+    assert
+      .dom('[data-test-step2-next-button]')
+      .doesNotContainText(
+        'Next',
+        'Next text should not be visible while loading',
+      );
+  });
+});

tests/integration/components/identity/step3.js

@@ -0,0 +1,41 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'website-www/tests/helpers';
+import { render, click } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | identity/step3', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders the initial state correctly', async function (assert) {
+    await render(hbs`<Identity::Step3 />`);
+
+    assert
+      .dom('[data-test-step3-heading]')
+      .hasText('Step 3: Link Profile Service');
+    assert.dom('[data-test-step3-desc]').exists();
+    assert.dom('[data-test-step3-button]').hasText('Link');
+  });
+
+  test('it shows loader while linking', async function (assert) {
+    this.set('linking', true);
+    await render(hbs`<Identity::Step3 @linking={{this.linking}} />`);
+
+    assert.dom('.loader').exists('Loader should be visible when linking');
+    assert
+      .dom('[data-test-step3-button]')
+      .doesNotContainText(
+        'Link',
+        'Link text should not be visible while loading',
+      );
+  });
+
+  test('it handles link button click', async function (assert) {
+    let linkClicked = false;
+    this.set('handleLink', () => (linkClicked = true));
+    await render(hbs`<Identity::Step3 @handleLink={{this.handleLink}} />`);
+
+    await click('[data-test-step3-button]');
+
+    assert.true(linkClicked, 'Link button should trigger handleLink action');
+  });
+});

tests/integration/components/identity/verified.js

@@ -0,0 +1,19 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'website-www/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Component | identity/verified', function (hooks) {
+  setupRenderingTest(hooks);
+
+  test('it renders the success message correctly', async function (assert) {
+    await render(hbs`<Identity::Verified />`);
+
+    assert.dom('[data-test-verified-heading]').hasText('Verified');
+    assert.dom('[data-test-verified-desc]').exists();
+    assert
+      .dom('[data-test-verified-desc] span')
+      .hasClass('identity-box-desc-bold');
+    assert.dom('[data-test-verified-desc] span').hasText('Congratulations!!!');
+  });
+});