hook.spec.jsx 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. import {mountWithTheme, screen} from 'sentry-test/reactTestingLibrary';
  2. import Hook from 'sentry/components/hook';
  3. import HookStore from 'sentry/stores/hookStore';
  4. describe('Hook', function () {
  5. const Wrapper = function Wrapper(props) {
  6. return <div data-test-id="wrapper" {...props} />;
  7. };
  8. beforeEach(function () {
  9. HookStore.add('footer', ({organization} = {}) => (
  10. <Wrapper key="initial" organization={organization}>
  11. {organization.slug}
  12. </Wrapper>
  13. ));
  14. });
  15. afterEach(function () {
  16. // Clear HookStore
  17. HookStore.init();
  18. });
  19. it('renders component from a hook', function () {
  20. mountWithTheme(
  21. <div>
  22. <Hook name="footer" organization={TestStubs.Organization()} />
  23. </div>
  24. );
  25. expect(HookStore.hooks.footer).toHaveLength(1);
  26. expect(screen.getByTestId('wrapper')).toBeInTheDocument();
  27. expect(screen.getByTestId('wrapper')).toHaveTextContent('org-slug');
  28. });
  29. it('renders an invalid hook', function () {
  30. mountWithTheme(
  31. <div>
  32. <Hook name="invalid-hook" organization={TestStubs.Organization()} />
  33. invalid
  34. </div>
  35. );
  36. expect(screen.queryByText('org-slug')).not.toBeInTheDocument();
  37. expect(screen.getByText('invalid')).toBeInTheDocument();
  38. });
  39. it('can re-render when hooks get after initial render', function () {
  40. mountWithTheme(
  41. <div>
  42. <Hook name="footer" organization={TestStubs.Organization()} />
  43. </div>
  44. );
  45. expect(screen.getByTestId('wrapper')).toBeInTheDocument();
  46. HookStore.add('footer', () => (
  47. <Wrapper key="new" organization={null}>
  48. New Hook
  49. </Wrapper>
  50. ));
  51. expect(HookStore.hooks.footer).toHaveLength(2);
  52. expect(screen.getAllByTestId('wrapper')).toHaveLength(2);
  53. expect(screen.getAllByTestId('wrapper')[1]).toHaveTextContent('New Hook');
  54. });
  55. it('can use children as a render prop', function () {
  56. mountWithTheme(
  57. <div>
  58. <Hook name="footer" organization={TestStubs.Organization()}>
  59. {({hooks}) => hooks.map((hook, i) => <Wrapper key={i}>{hook}</Wrapper>)}
  60. </Hook>
  61. </div>
  62. );
  63. HookStore.add('footer', () => (
  64. <Wrapper key="new" organization={null}>
  65. New Hook
  66. </Wrapper>
  67. ));
  68. // Has 2 Wrappers from store, and each is wrapped by another Wrapper
  69. expect(screen.getAllByTestId('wrapper')).toHaveLength(4);
  70. });
  71. });