import { createHostFactory , SpectatorHost } from '@ngneat/spectator' ; import { DesignTokenHelper } from '@kirbydesign/core' ; import { TestHelper } from '../../../testing/test-helper' ; import { ItemComponent } from '../../item' ; import { InputComponent } from './input.component' ; const size = DesignTokenHelper . size ; describe ( 'InputComponent in Item' , ( ) => { let spectator ; let element ; const createHost = createHostFactory ( { component : InputComponent , declarations : [ ItemComponent ] , imports : [ TestHelper . ionicModuleForTest ] , } ) ; describe ( 'by default' , ( ) => { beforeEach ( ( ) => { spectator = createHost ( `
      <kirby-item>
        <input kirby-input/>
      </kirby-item>` ) ; element = spectator . element as HTMLInputElement ; } ) ; it ( 'should render with correct padding' , ( ) => { expect ( element ) . toHaveComputedStyle ( { padding : '0px' , } ) ; } ) ; it ( 'should render without border-radius' , ( ) => { expect ( element ) . toHaveComputedStyle ( { 'border-radius' : '0px' , } ) ; } ) ; it ( 'should render without box-shadow' , ( ) => { expect ( element ) . toHaveComputedStyle ( { 'border-shadow' : '' , } ) ; } ) ; it ( 'should render with correct width' , ( ) => { const styleWidth = ( element as any ) . computedStyleMap ( ) . get ( 'width' ) . toString ( ) ; expect ( styleWidth ) . toBe ( '100%' ) ; } ) ; } ) ; describe ( 'slotted end' , ( ) => { beforeEach ( ( ) => { spectator = createHost ( `
      <kirby-item>
        <input slot="end" kirby-input/>
      </kirby-item>` ) ; element = spectator . element as HTMLInputElement ; } ) ; it ( 'should render with default width' , ( ) => { const styleWidth = ( element as any ) . computedStyleMap ( ) . get ( 'width' ) . toString ( ) ; expect ( styleWidth ) . toBe ( 'auto' ) ; } ) ; it ( 'should render with correct margin' , ( ) => { expect ( element ) . toHaveComputedStyle ( { 'margin-inline-start' : size ( 's' ) , } ) ; } ) ; it ( 'should render with text alignment right' , ( ) => { expect ( element ) . toHaveComputedStyle ( { 'text-align' : 'right' , } ) ; } ) ; } ) ; } ) ;