Highlight component

Highlight.spec.ts

import { mount } from '@vue/test-utils'
import Highlight from './Highlight.vue'

let wrapper: any

describe('ui/Highlight', () => {
  beforeEach(() => {
    wrapper = mount(Highlight, {
      propsData: {
        search: '',
        message: ''
      },
      attachToDocument: true
    })
  })

  it('should render correct contents', () => {
    wrapper.setProps({
      message: 'search'
    })
    expect(wrapper.findAll('span > span')).toHaveLength(11)
  })

  it('should correct computed "parsedMsg"', () => {
    wrapper.setProps({
      message: 'search'
    })
    expect(wrapper.vm.parsedMsg.length).toEqual(11)
    expect(wrapper.vm.parsedMsg).toEqual(['s', '', 'e', '', 'a', '', 'r', '', 'c', '', 'h'])
  })

  it('should correct method "getClass(i: number)"', () => {
    expect(wrapper.vm.getClass(0)).toEqual({ highlight: false })
    expect(wrapper.vm.getClass(1)).toEqual({ highlight: true })
  })

  it('should correct computed "parsedSearch"', () => {
    wrapper.setProps({
      search: 'sea'
    })
    expect(wrapper.vm.parsedSearch).toEqual('(sea)')
  })

  it('should render correct search result', () => {
    wrapper.setProps({
      search: 'sea',
      message: 'search'
    })
    const result = wrapper.findAll('span > span')
    expect(result.at(0).html()).toEqual('<span class=""></span>')
    expect(result.at(1).html()).toEqual('<span class="highlight">sea</span>')
    expect(result.at(2).html()).toEqual('<span class="">rch</span>')
  })
})

Highlight.vue

<template>
  <span>
    <span v-for="(search, i) in parsedMsg"
          :key="i"
          :class="getClass(i%2)"
          v-html="search"></span>
  </span>
</template>

<script lang="ts">
  import script from './script'
  export default script
</script>

<style lang="scss" scoped>
  .highlight {
    background-color: #fff5ac;
  }
</style>

script.ts

import { Vue, Component, Prop } from 'vue-property-decorator'

@Component({})
export default class Highlight extends Vue {
  @Prop({ type: String, default: '' })
  search: string
  @Prop({ type: String, default: '' })
  message: string

  get parsedSearch(): string {
    return `(${this.search.trim().replace(/ +/g, ' |')})`
  }

  get parsedMsg(): Array<string> {
    return this.message.split(new RegExp(this.parsedSearch, 'gi'))
  }

  getClass(i: number): object {
    const myClass = {
      highlight: !!i
    }
    return myClass
  }
}