import { mount } from '@vue/test-utils' ; import { CNavGroup as Component } from '../../../index' ; const ComponentName = 'CNavGroup' ; const defaultWrapper = mount ( Component , { propsData : { } , slots : { } , } ) ; const customWrapper = mount ( Component , { propsData : { compact : true , visible : true , } , slots : { togglerContent : 'togglerContent' , } , } ) ; describe ( `Loads and display ${ ComponentName } component` , ( ) => { it ( 'has a name' , ( ) => { expect ( Component . name ) . toMatch ( ComponentName ) ; } ) ; it ( 'renders correctly' , ( ) => { expect ( defaultWrapper . html ( ) ) . toMatchSnapshot ( ) ; } ) ; it ( 'contain slots and classes' , ( ) => { expect ( defaultWrapper . classes ( 'nav-group' ) ) . toBe ( true ) ; } ) ; } ) ; describe ( `Customize ${ ComponentName } component` , ( ) => { it ( 'renders correctly' , ( ) => { expect ( customWrapper . html ( ) ) . toMatchSnapshot ( ) ; } ) ; it ( 'contain slots and classes' , ( ) => { expect ( customWrapper . find ( 'a' ) . text ( ) ) . toContain ( 'togglerContent' ) ; expect ( customWrapper . find ( 'a' ) . classes ( 'nav-link' ) ) . toBe ( true ) ; expect ( customWrapper . find ( 'a' ) . classes ( 'nav-group-toggle' ) ) . toBe ( true ) ; expect ( customWrapper . find ( 'ul' ) . classes ( 'nav-group-items' ) ) . toBe ( true ) ; expect ( customWrapper . find ( 'ul' ) . classes ( 'compact' ) ) . toBe ( true ) ; expect ( customWrapper . classes ( 'nav-group' ) ) . toBe ( true ) ; } ) ; it ( 'emit event visible-change on click nav-group-toggle' , ( ) => { let incrementEvent = customWrapper . emitted ( 'visible-change' ) ; customWrapper . find ( '.nav-group-toggle' ) . trigger ( 'click' ) ; incrementEvent = customWrapper . emitted ( 'visible-change' ) ; expect ( incrementEvent ) . toHaveLength ( 3 ) ; } ) ; } ) ;