ant-design-vue/components/affix/__tests__/index.test.js

import Affix from '..'
import Button from '../../button'
import { mount } from '@vue/test-utils'
const events = {}

const AffixMounter = {
  props: ['offsetBottom', 'offsetTop'],
  mounted () {
    this.$refs.container.addEventListener = jest.fn().mockImplementation((event, cb) => {
      events[event] = cb
    })
  },
  methods: {
    getTarget () {
      return this.$refs.container
    },
  },

  render () {
    return (
      <div
        style={{
          height: '100px',
          overflowY: 'scroll',
        }}
        ref='container'
      >
        <div
          className='background'
          style={{
            paddingTop: '60px',
            height: '300px',
          }}
        >
          <Affix
            target={() => this.$refs.container}
            ref='affix'
            {...{ props: this.$props }}
          >
            <Button type='primary' >
              Fixed at the top of container
            </Button>
          </Affix>
        </div>
      </div>
    )
  },
}
describe('Affix Render', () => {
  let wrapper
  beforeAll(() => {
    document.body.innerHTML = ''
    jest.useFakeTimers()
  })

  afterAll(() => {
    jest.useRealTimers()
  })
  const scrollTo = (top) => {
    wrapper.vm.$refs.affix.$refs.fixedNode.parentNode.getBoundingClientRect = jest.fn(() => {
      return {
        bottom: 100, height: 28, left: 0, right: 0, top: 50 - top, width: 195,
      }
    })
    wrapper.vm.$refs.container.scrollTop = top
    events.scroll({
      type: 'scroll',
    })
    jest.runAllTimers()
  }
  it('Anchor render perfectly', () => {
    wrapper = mount(AffixMounter, { attachToDocument: true })
    jest.runAllTimers()

    scrollTo(0)
    expect(wrapper.vm.$refs.affix.affixStyle).toBe(null)

    scrollTo(100)
    expect(wrapper.vm.$refs.affix.affixStyle).not.toBe(null)

    scrollTo(0)
    expect(wrapper.vm.$refs.affix.affixStyle).toBe(null)
  })
  it('support offsetBottom', () => {
    wrapper = mount(AffixMounter, { attachToDocument: true, propsData: {
      offsetBottom: 0,
    }})

    jest.runAllTimers()

    scrollTo(0)
    expect(wrapper.vm.$refs.affix.affixStyle).not.toBe(null)

    scrollTo(100)
    expect(wrapper.vm.$refs.affix.affixStyle).toBe(null)

    scrollTo(0)
    expect(wrapper.vm.$refs.affix.affixStyle).not.toBe(null)
  })

  it('updatePosition when offsetTop changed', () => {
    wrapper = mount(AffixMounter, { attachToDocument: true, propsData: {
      offsetTop: 0,
    }})

    jest.runAllTimers()

    scrollTo(100)
    expect(wrapper.vm.$refs.affix.affixStyle.top).toBe('0px')
    wrapper.setProps({
      offsetTop: 10,
    })
    jest.runAllTimers()
    expect(wrapper.vm.$refs.affix.affixStyle.top).toBe('10px')
  })
})