accountDetails.spec.tsx 2.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. import {UserDetailsFixture} from 'sentry-fixture/userDetails';
  2. import {render, screen, userEvent, waitFor} from 'sentry-test/reactTestingLibrary';
  3. import AccountDetails from 'sentry/views/settings/account/accountDetails';
  4. jest.mock('scroll-to-element', () => 'scroll-to-element');
  5. function mockUserDetails(params?: any) {
  6. MockApiClient.clearMockResponses();
  7. MockApiClient.addMockResponse({
  8. url: '/users/me/',
  9. method: 'GET',
  10. body: UserDetailsFixture(params),
  11. });
  12. }
  13. describe('AccountDetails', () => {
  14. beforeEach(() => {
  15. mockUserDetails();
  16. });
  17. it('renders', async () => {
  18. render(<AccountDetails />);
  19. expect(await screen.findByRole('textbox', {name: 'Name'})).toBeEnabled();
  20. expect(screen.getByRole('checkbox', {name: 'Use a 24-hour clock'})).toBeEnabled();
  21. expect(screen.getByRole('radiogroup', {name: 'Avatar Type'})).toBeEnabled();
  22. });
  23. it('has username field if it is different than email', async () => {
  24. mockUserDetails({username: 'different@example.com'});
  25. render(<AccountDetails />);
  26. expect(await screen.findByRole('textbox', {name: 'Username'})).toBeEnabled();
  27. });
  28. describe('Managed User', () => {
  29. it('does not have password fields', async () => {
  30. mockUserDetails({isManaged: true});
  31. render(<AccountDetails />);
  32. expect(await screen.findByRole('textbox', {name: 'Name'})).toBeEnabled();
  33. expect(screen.queryByRole('textbox', {name: 'Password'})).not.toBeInTheDocument();
  34. });
  35. it('has disabled username field if it is different than email', async () => {
  36. mockUserDetails({isManaged: true, username: 'different@example.com'});
  37. render(<AccountDetails />);
  38. expect(await screen.findByRole('textbox', {name: 'Username'})).toBeDisabled();
  39. });
  40. });
  41. describe('Theme', () => {
  42. it('toggles between light and dark and removes the theme class from body', async () => {
  43. const mockUserUpdate = MockApiClient.addMockResponse({
  44. url: '/users/me/',
  45. method: 'PUT',
  46. body: UserDetailsFixture(),
  47. });
  48. render(<AccountDetails />);
  49. expect(await screen.findByLabelText('Theme')).toBeInTheDocument();
  50. // Emulate the page being loaded with a light theme
  51. document.body.classList.add('theme-light');
  52. await userEvent.click(screen.getByText('Light'));
  53. await userEvent.click(await screen.findByRole('menuitemradio', {name: 'Dark'}));
  54. await waitFor(() => {
  55. expect(mockUserUpdate).toHaveBeenCalledWith(
  56. '/users/me/',
  57. expect.objectContaining({data: {options: {theme: 'dark'}}})
  58. );
  59. });
  60. expect(document.body).not.toHaveClass('theme-light');
  61. });
  62. });
  63. });