anchor.test.js 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. import Anchor from '../index';
  2. import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
  3. import { mount } from 'enzyme';
  4. const {Link} = Anchor;
  5. function mountAnchor(props = {}) {
  6. return mount(
  7. <Anchor {...props}>
  8. <Link href="#welcome" title="welcome" />
  9. <Link href="#api" title="api too much to show">
  10. <Link href="#docs" title="docs">
  11. <Link href="#doc1" title="doc1" />
  12. <Link href="#doc2" title="doc2" />
  13. </Link>
  14. </Link>
  15. <Link href="#contact" title="contact" />
  16. </Anchor>
  17. );
  18. }
  19. describe('Anchor', () => {
  20. it('anchor small size', () => {
  21. const smallAnchor = mount(<Anchor size="small" />);
  22. expect(smallAnchor.find(`.${BASE_CLASS_PREFIX}-anchor-size-small`)).toHaveLength(1);
  23. smallAnchor.unmount();
  24. });
  25. it('anchor rail theme', () => {
  26. const smallAnchor = mount(<Anchor railTheme="primary" />);
  27. expect(smallAnchor.find(`.${BASE_CLASS_PREFIX}-anchor-slide-bar-primary`)).toHaveLength(1);
  28. });
  29. it('anchor with custom className & style', () => {
  30. const wrapper = mount(<Anchor className="test" style={{ color: 'red' }} />);
  31. expect(wrapper.hasClass('test')).toEqual(true);
  32. expect(wrapper.find('div.test')).toHaveStyle('color', 'red');
  33. });
  34. it('simulate click event', () => {
  35. const wrapper = mountAnchor({autoCollapse: true})
  36. const links = wrapper.find('.semi-anchor-link-title');
  37. expect(wrapper.find('.semi-anchor-link-title-active').length).toEqual(0)
  38. expect(wrapper.exists('.semi-anchor-link .semi-anchor-link')).toEqual(false);
  39. const secondLink = links.at(1);
  40. secondLink.simulate('click')
  41. expect(wrapper.find('.semi-anchor-link-title-active').length).toEqual(1)
  42. expect(wrapper.exists('.semi-anchor-link .semi-anchor-link')).toEqual(true);
  43. const firstLink = links.at(0);
  44. firstLink.simulate('click')
  45. expect(wrapper.find('.semi-anchor-link-title-active').length).toEqual(1)
  46. expect(wrapper.exists('.semi-anchor-link .semi-anchor-link')).toEqual(false);
  47. });
  48. it('anchor max height and max width', () => {
  49. const wrapper = mountAnchor({maxHeight: 50, maxWidth: 100})
  50. expect(wrapper.find('.semi-anchor').instance().style.maxHeight).toBe('50px')
  51. expect(wrapper.find('.semi-anchor').instance().style.maxWidth).toBe('100px')
  52. })
  53. });