Tab-Panel Unit Testing

Tab-Panel Unit Testing

Posted by: it on 10 September 2018, 11:15 am EST

• 

  it

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 10 September 2018, 11:15 am EST

  Hi There,

  Tab-Panels are used at few placed in our Angular 5 (VS Code) application.

  Now needing to have unit tests setup to check if some tabs within tab-panel are disabled. Somehow unable to access these tabs from spec file. Found some demos for FlexGrid and how to access components in test file but not able to locate any for Tab-Panel testing.

  HTML is like this,

  <wj-tab-panel class="wj-statefocused" tabindex="1" wj-directive-id="1" >
      <wj-tab tabindex="1" [isDisabled]="true">
          <a class="wj-tabheader" role="tab">General</a>
          <div class="wj-tabpane" role="tabpanel">
              General Options
          </div>
      </wj-tab>
      <wj-tab tabindex="2">
          <a class="wj-tabheader wj-state-active" role="tab" aria-selected="true">Column Options
          </a>
          <div class="wj-tabpane" role="tabpanel">
              <child-comp></child-comp>
         </div>
      </wj-tab>
      <wj-tab tabindex="3" [isDisabled]="true">
          <a class="wj-tabheader" role="tab">User Preferences</a>
          <div class="wj-tabpane" role="tabpanel">
              User Preferences 
          </div>
      </wj-tab>
      <wj-tab tabindex="4" [isDisabled]="true">
          <a class="wj-tabheader" role="tab">Smart Authorisation</a>
          <div class="wj-tabpane" role="tabpanel">
              Configuration
          </div>
      </wj-tab>
  </wj-tab-panel>
  <div class="modal-footer">
      <button type="button" class="btn btn-default wj-hide">Close</button>
  </div>  
      
  

  so in Unit testing I just want to make sure only tab with tab index 2 is enabled.

  Thank you in advance.

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 11 September 2018, 12:02 am EST

  Hi,

  Please refer to attached sample which shows how you can unit test TabPanel in angular 5 using karma.
  
  •Download and unzip the sample
  
  •Install required packages using ‘npm i’ command
  
  •Run unit test via ‘npm run test’ command

  ~Sharad
  
  testing-tab-panel.zip

• 

  it

  • Post Options:
  • Link
    Copy

  Posted 11 September 2018, 9:18 am EST

  Hi Sharad,

  Thank you for sample. Its failing on a test where expects 4 tabs in Panel and when I check length for tabs thats 0. This is the issue I had in my early tries as well, somehow its not having correct tabs initiated in the tabPanel.tabs object and the length is 0 and so its not looping through any tabs and so other tests in the loop always passes regardless of tab being disabled or enabled.

  Thanks.

• 

  it

  • Post Options:
  • Link
    Copy

  Posted 11 September 2018, 10:01 am EST

  Ohk so fixed now, my bad! moved the fixture detectChanges() from beforeEach() method to async method. And I am able to do these TabPanel tests now.

  Thanks again!

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 11 September 2018, 3:16 pm EST

  Hi,

  We are glad to hear that you were able to solve your problem and thanks for reporting.

  Regards
  
  Sharad