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.