Merge branch 'link-records' of https://github.com/blackbaud-joshgerde…

…s/skyux2 into link-records

skyux-spa-visual-tests/src/app/vertical-tabs/vertical-tabs-visual.component.html

@@ -47,4 +47,18 @@
       </sky-vertical-tab>
     </sky-vertical-tabset-group>
   </sky-vertical-tabset>
+</div>
+
+<div id="screenshot-vertical-tabs-no-groups">
+  <sky-vertical-tabset>
+    <sky-vertical-tab tabHeading="tab 1">
+      Tab 1 content
+    </sky-vertical-tab>
+    <sky-vertical-tab tabHeading="tab 2" active="true">
+      Tab 2 content
+    </sky-vertical-tab>
+    <sky-vertical-tab tabHeading="tab 3">
+      Tab 3 content
+    </sky-vertical-tab>
+  </sky-vertical-tabset>
 </div>

skyux-spa-visual-tests/src/app/vertical-tabs/vertical-tabs.visual-spec.ts

@@ -86,4 +86,14 @@ describe('Vertical tabSet', () => {
       });
     });
   });
+
+  it('should match previous vertical tabset screenshot without groups', () => {
+    return SkyVisualTest.setupTest('vertical-tabs')
+    .then(() => {
+      return SkyVisualTest.compareScreenshot({
+        screenshotName: 'vertical-tabset-no-groups',
+        selector: '#screenshot-vertical-tabs-no-groups'
+      });
+    });
+  });
 });

src/app/components/vertical-tabs/vertical-tabs-demo.component.html

@@ -18,4 +18,17 @@
       {{ tab.content }}
     </sky-vertical-tab>
   </sky-vertical-tabset-group>
+</sky-vertical-tabset>
+
+<h3>Without groups</h3>
+<sky-vertical-tabset (activeChange)="tabChanged($event)">
+  <sky-vertical-tab tabHeading="tab 1">
+    Tab 1 content
+  </sky-vertical-tab>
+  <sky-vertical-tab tabHeading="tab 2" active="true">
+    Tab 2 content
+  </sky-vertical-tab>
+  <sky-vertical-tab tabHeading="tab 3">
+    Tab 3 content
+  </sky-vertical-tab>
 </sky-vertical-tabset>

src/modules/vertical-tabset/fixtures/vertical-tabs-fixtures.module.ts

@@ -5,11 +5,13 @@ import { FormsModule } from '@angular/forms';
 import { SkyVerticalTabsetModule } from '../';
 import { VerticalTabsetTestComponent } from './vertical-tabset.component.fixture';
 import { VerticalTabsetEmptyGroupTestComponent } from './vertical-tabset-empty-group.component';
+import { VerticalTabsetNoGroupTestComponent } from './vertical-tabset-no-group.component.fixture';
 
 @NgModule({
   declarations: [
     VerticalTabsetTestComponent,
-    VerticalTabsetEmptyGroupTestComponent
+    VerticalTabsetEmptyGroupTestComponent,
+    VerticalTabsetNoGroupTestComponent
   ],
   imports: [
     CommonModule,
@@ -18,7 +20,8 @@ import { VerticalTabsetEmptyGroupTestComponent } from './vertical-tabset-empty-g
   ],
   exports: [
     VerticalTabsetTestComponent,
-    VerticalTabsetEmptyGroupTestComponent
+    VerticalTabsetEmptyGroupTestComponent,
+    VerticalTabsetNoGroupTestComponent
   ]
 })
 export class SkyVerticalTabsFixturesModule { }

src/modules/vertical-tabset/fixtures/vertical-tabset-no-group.component.fixture.html

@@ -0,0 +1,12 @@
+<div class="vertical-tabset-test-indexchange">current index = {{ currentIndex }}</div>
+<sky-vertical-tabset (activeChange)="indexChanged($event)">
+  <sky-vertical-tab tabHeading="tab 1">
+    Tab 1 content
+  </sky-vertical-tab>
+  <sky-vertical-tab tabHeading="tab 2" active="true">
+    Tab 2 content
+  </sky-vertical-tab>
+  <sky-vertical-tab tabHeading="tab 3">
+    Tab 3 content
+  </sky-vertical-tab>
+</sky-vertical-tabset>

src/modules/vertical-tabset/fixtures/vertical-tabset-no-group.component.fixture.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'sky-test-cmp',
+  templateUrl: './vertical-tabset-no-group.component.fixture.html'
+})
+export class VerticalTabsetNoGroupTestComponent {
+  public currentIndex: number = undefined;
+
+  public indexChanged(index: number) {
+    this.currentIndex = index;
+  }
+}

src/modules/vertical-tabset/vertical-tabset.component.html

@@ -5,7 +5,7 @@
     [@tabGroupEnter]="animationVisibleState"
     *ngIf="tabsVisible()"
   >
-    <ng-content select="sky-vertical-tabset-group"></ng-content>
+    <ng-content></ng-content>
   </div> 
   <div 
     class="sky-vertical-tabset-content"
@@ -22,4 +22,4 @@
       {{ showTabsText }}
     </button>
   </div>
-</div> 
+</div> 

src/modules/vertical-tabset/vertical-tabset.component.spec.ts

@@ -7,6 +7,10 @@ import {
   VerticalTabsetEmptyGroupTestComponent
 } from './fixtures/vertical-tabset-empty-group.component';
 
+import {
+  VerticalTabsetNoGroupTestComponent
+} from './fixtures/vertical-tabset-no-group.component.fixture';
+
 import { MockSkyMediaQueryService } from './../testing/mocks/mock-media-query.service';
 import { SkyMediaQueryService, SkyMediaBreakpoints } from '../media-queries';
 
@@ -388,7 +392,7 @@ describe('Vertical tabset component', () => {
 });
 
 // test tab group with no subtabs
-describe('Vertical tabset component', () => {
+describe('Vertical tabset component - no subtabs', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [
@@ -407,3 +411,50 @@ describe('Vertical tabset component', () => {
     expect(visibleTabs.length).toBe(0);
   });
 });
+
+describe('Vertical tabset component - no groups', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        SkyVerticalTabsFixturesModule
+      ]
+    });
+  });
+
+  it('should load tabs without groups', () => {
+    let fixture = TestBed.createComponent(VerticalTabsetNoGroupTestComponent);
+    let el = fixture.nativeElement as HTMLElement;
+
+    fixture.detectChanges();
+
+    let allTabs = el.querySelectorAll('sky-vertical-tab');
+    expect(allTabs.length).toBe(3);
+
+    const visibleTabs = getVisibleVerticalTabs(el);
+    expect(visibleTabs.length).toBe(1);
+    expect(visibleTabs[0].textContent.trim()).toBe('Tab 2 content');
+  });
+
+  it('should switch tabs on clicking without groups', () => {
+    let fixture = TestBed.createComponent(VerticalTabsetNoGroupTestComponent);
+    let el = fixture.nativeElement;
+
+    fixture.detectChanges();
+
+    let indexChangeEl = el.querySelector('.vertical-tabset-test-indexchange');
+    expect(indexChangeEl.textContent.trim()).toBe('current index = 1');
+
+    // open first tab
+    let tabs = el.querySelectorAll('.sky-vertical-tab');
+    tabs[0].click();
+
+    fixture.detectChanges();
+
+    //  check activeChange fires
+    expect(indexChangeEl.textContent.trim()).toBe('current index = 0');
+
+    let visibleTabs = getVisibleVerticalTabs(el);
+    expect(visibleTabs.length).toBe(1);
+    expect(visibleTabs[0].textContent.trim()).toBe('Tab 1 content');
+  });
+});