[Onboarding Flow]- Write test after the "Generate Chaincode" button is clicked

app/components/identity-steps/step-four.hbs

@@ -6,7 +6,7 @@
     A private key that you need to use in your profile service URL and deploy
     for source that you're the source of the URL
   </p>
-  {{#if this.isChaincodeClicked}}
+  {{#if @isChaincodeClicked}}
     <div data-test='chaincode-container' class='chaincode-container'>
       <div
         data-test='chaincode-container__value'
@@ -19,7 +19,7 @@
         {{#if this.hideChaincode}}
           ********************
         {{else}}
-          {{this.Chaincode}}
+          {{@chaincode}}
         {{/if}}
       </div>
       <div
@@ -49,11 +49,11 @@
     </div>
   {{else}}
     <Reusables::Button
-      @text={{this.Chaincode}}
+      @text={{@chaincode}}
       @variant='chaincode'
-      @onClick={{this.handleGenerateChaincode}}
+      @onClick={{@handleGenerateChaincode}}
       @test='chaincode'
-      @isLoading={{this.isLoading}}
+      @isLoading={{@isLoading}}
       @type='button'
     />
   {{/if}}

app/components/identity-steps/step-four.js

@@ -3,58 +3,12 @@ import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { toastNotificationTimeoutOptions } from '../../constants/toast-notification';
-import { APPS } from '../../constants/urls';
 
 export default class IdentityStepsStepFourComponent extends Component {
   @service toast;
-  @tracked Chaincode = 'Generate Chaincode';
-  @tracked isChaincodeClicked = false;
   @tracked hideChaincode = true;
   @tracked isCopyClicked = false;
   @tracked isChaincodePageButtonDisabled = true;
-  @tracked isLoading = false;
-
-  @action async handleGenerateChaincode(e) {
-    e.preventDefault();
-
-    this.isLoading = true;
-
-    try {
-      const response = await fetch(`${APPS.API_BACKEND}/users/chaincode`, {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        credentials: 'include',
-      });
-
-      const { chaincode } = await response.json();
-
-      if (response.ok) {
-        this.Chaincode = chaincode;
-        this.isChaincodeClicked = true;
-        this.toast.info(
-          'Generated New Chaincode!!',
-          '',
-          toastNotificationTimeoutOptions
-        );
-      } else {
-        this.toast.error(
-          'Something went wrong. Please check console errors.',
-          '',
-          toastNotificationTimeoutOptions
-        );
-      }
-    } catch (error) {
-      this.toast.error(
-        'Something went wrong. Please check console errors.',
-        '',
-        toastNotificationTimeoutOptions
-      );
-    } finally {
-      this.isLoading = false;
-    }
-  }
 
   @action toggleEye() {
     this.hideChaincode = !this.hideChaincode;

app/components/stepper-signup.hbs

@@ -56,7 +56,13 @@
       {{else if (eq this.currentStep 9)}}
         <IdentitySteps::StepThree @startHandler={{this.startHandler}} />
       {{else if (eq this.currentStep 10)}}
-        <IdentitySteps::StepFour @startHandler={{this.startHandler}} />
+        <IdentitySteps::StepFour
+          @startHandler={{this.startHandler}}
+          @chaincode={{@chaincode}}
+          @isChaincodeClicked={{@isChaincodeClicked}}
+          @isLoading={{@isLoading}}
+          @handleGenerateChaincode={{@handleGenerateChaincode}}
+        />
       {{else if (eq this.currentStep 11)}}
         <IdentitySteps::StepFive @startHandler={{this.startHandler}} />
       {{else if (eq this.currentStep 12)}}

app/controllers/join.js

@@ -1,14 +1,63 @@
 import Controller from '@ember/controller';
 import { inject as service } from '@ember/service';
+import { APPS } from '../constants/urls';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { toastNotificationTimeoutOptions } from '../constants/toast-notification';
 
 export default class JoinController extends Controller {
   @service router;
   @service login;
   @service featureFlag;
+  @tracked Chaincode = 'Generate Chaincode';
+  @tracked isChaincodeClicked = false;
+  @tracked isLoading = false;
 
   queryParams = ['step', 'dev'];
 
   get isDevMode() {
     return this.featureFlag.isDevMode;
   }
+
+  @action async handleGenerateChaincode(e) {
+    e.preventDefault();
+
+    this.isLoading = true;
+
+    try {
+      const response = await fetch(`${APPS.API_BACKEND}/users/chaincode`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        credentials: 'include',
+      });
+
+      const { chaincode } = await response.json();
+
+      if (response.ok) {
+        this.Chaincode = chaincode;
+        this.isChaincodeClicked = true;
+        this.toast.info(
+          'Generated New Chaincode!!',
+          '',
+          toastNotificationTimeoutOptions
+        );
+      } else {
+        this.toast.error(
+          'Something went wrong. Please check console errors.',
+          '',
+          toastNotificationTimeoutOptions
+        );
+      }
+    } catch (error) {
+      this.toast.error(
+        'Something went wrong. Please check console errors.',
+        '',
+        toastNotificationTimeoutOptions
+      );
+    } finally {
+      this.isLoading = false;
+    }
+  }
 }

app/templates/join.hbs

@@ -11,7 +11,12 @@
       </OnboardingCard>
     {{else}}
       {{#if this.isDevMode}}
-        <StepperSignup />
+        <StepperSignup
+          @chaincode={{this.Chaincode}}
+          @isChaincodeClicked={{this.isChaincodeClicked}}
+          @isLoading={{this.isLoading}}
+          @handleGenerateChaincode={{this.handleGenerateChaincode}}
+        />
       {{else}}
         <Stepper />
       {{/if}}

tests/integration/components/identity-steps/step-four-test.js

@@ -1,4 +1,4 @@
-import { module, skip, test } from 'qunit';
+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';
@@ -9,8 +9,12 @@ module('Integration | Component | identity-steps/step-four', function (hooks) {
   test('render main container div on generate chaincode page', async function (assert) {
     assert.expect(2);
     this.set('startHandler', () => {});
+    this.set('handleGenerateChaincode', () => {});
     await render(
-      hbs`<IdentitySteps::StepFour  @startHandler={{this.startHandler}} />`
+      hbs`<IdentitySteps::StepFour  
+            @startHandler={{this.startHandler}} 
+            @handleGenerateChaincode={{this.handleGenerateChaincode}} 
+        />`
     );
 
     assert.dom('[data-test=chaincode]').exists();
@@ -20,8 +24,12 @@ module('Integration | Component | identity-steps/step-four', function (hooks) {
   test('render heading on generate chaincode page', async function (assert) {
     assert.expect(2);
     this.set('startHandler', () => {});
+    this.set('handleGenerateChaincode', () => {});
     await render(
-      hbs`<IdentitySteps::StepFour  @startHandler={{this.startHandler}} />`
+      hbs`<IdentitySteps::StepFour  
+            @startHandler={{this.startHandler}} 
+            @handleGenerateChaincode={{this.handleGenerateChaincode}} 
+        />`
     );
     assert.dom('[data-test=heading]').hasClass('chaincode-page__heading');
     assert.dom('[data-test=heading]').hasText('Chaincode Generation');
@@ -30,8 +38,12 @@ module('Integration | Component | identity-steps/step-four', function (hooks) {
   test('render description on generate chaincode page', async function (assert) {
     assert.expect(2);
     this.set('startHandler', () => {});
+    this.set('handleGenerateChaincode', () => {});
     await render(
-      hbs`<IdentitySteps::StepFour  @startHandler={{this.startHandler}} />`
+      hbs`<IdentitySteps::StepFour  
+            @startHandler={{this.startHandler}} 
+            @handleGenerateChaincode={{this.handleGenerateChaincode}} 
+        />`
     );
     assert
       .dom('[data-test=description]')
@@ -46,8 +58,16 @@ module('Integration | Component | identity-steps/step-four', function (hooks) {
   test('render Generation Chaincode button on chaincode page', async function (assert) {
     assert.expect(2);
     this.set('startHandler', () => {});
+    this.set('handleGenerateChaincode', () => {});
+    this.set('chaincode', 'Generate Chaincode');
+    this.set('isChaincodeClicked', false);
     await render(
-      hbs`<IdentitySteps::StepFour  @startHandler={{this.startHandler}} />`
+      hbs`<IdentitySteps::StepFour  
+            @startHandler={{this.startHandler}} 
+            @handleGenerateChaincode={{this.handleGenerateChaincode}} 
+            @isChaincodeClicked={{this.isChaincodeClicked}}
+            @chaincode={{this.chaincode}}
+        />`
     );
     assert.dom('[data-test-button=chaincode]').hasText('Generate Chaincode');
     assert.dom('[data-test-button=chaincode]').hasProperty('type', 'button');
@@ -56,28 +76,40 @@ module('Integration | Component | identity-steps/step-four', function (hooks) {
   test('render disabled Next button on chaincode page', async function (assert) {
     assert.expect(2);
     this.set('startHandler', () => {});
+    this.set('handleGenerateChaincode', () => {});
     await render(
-      hbs`<IdentitySteps::StepFour  @startHandler={{this.startHandler}} />`
+      hbs`<IdentitySteps::StepFour  
+            @startHandler={{this.startHandler}} 
+            @handleGenerateChaincode={{this.handleGenerateChaincode}} 
+        />`
     );
     assert.dom('[data-test-button=next]').hasText('Next');
     assert.dom('[data-test-button=next]').hasProperty('disabled', true);
   });
 
-  skip('Clicking "Generate Chaincode" button renders div with text and 2 button with icons on Chaincode page', async function (assert) {
+  test('Clicking "Generate Chaincode" button renders div with text and 2 button with icons on Chaincode page', async function (assert) {
     assert.expect(6);
     this.set('startHandler', () => {});
+    this.set('handleGenerateChaincode', () => {
+      this.set('isChaincodeClicked', true);
+    });
+
     await render(
-      hbs`<IdentitySteps::StepFour  @startHandler={{this.startHandler}} />`
+      hbs`<IdentitySteps::StepFour  
+            @startHandler={{this.startHandler}} 
+            @handleGenerateChaincode={{this.handleGenerateChaincode}} 
+            @isChaincodeClicked={{this.isChaincodeClicked}}
+        />`
     );
     await click('[data-test-button=chaincode]');
 
     assert.dom('[data-test=chaincode-container]').exists();
     assert
       .dom('[data-test=chaincode-container__value]')
-      .hasClass('chaincode-container__value');
+      .hasClass('chaincode-container__value-invisible');
     assert
       .dom('[data-test=chaincode-container__value]')
-      .hasText('**************');
+      .hasText('********************');
 
     assert
       .dom('[data-test=chaincode-container__action]')
@@ -87,13 +119,20 @@ module('Integration | Component | identity-steps/step-four', function (hooks) {
     assert.dom('[data-test-button=copy-icon]').hasClass('chaicode-button-icon');
   });
 
-  skip('Clicking eye-icon button show generated code', async function (assert) {
+  test('Clicking eye-icon button show generated code', async function (assert) {
     assert.expect(1);
     this.set('startHandler', () => {});
+    this.set('handleGenerateChaincode', () => {});
+    this.set('isChaincodeClicked', true);
+    this.set('chaincode', 'hv2hz3xh1h');
     await render(
-      hbs`<IdentitySteps::StepFour  @startHandler={{this.startHandler}} />`
+      hbs`<IdentitySteps::StepFour  
+            @startHandler={{this.startHandler}} 
+            @handleGenerateChaincode={{this.handleGenerateChaincode}} 
+            @isChaincodeClicked={{this.isChaincodeClicked}}
+            @chaincode={{this.chaincode}}
+        />`
     );
-    await click('[data-test-button=chaincode]');
     await click('[data-test-button=eye-icon]');
 
     assert.dom('[data-test=chaincode-container__value]').hasText('hv2hz3xh1h');