test(js): Convert NoteInputWithStorage test to RTL + TS (#39705)

static/app/components/activity/note/inputWithStorage.spec.jsx

@@ -1,56 +0,0 @@
-import changeReactMentionsInput from 'sentry-test/changeReactMentionsInput';
-import {mountWithTheme} from 'sentry-test/enzyme';
-
-import NoteInputWithStorage from 'sentry/components/activity/note/inputWithStorage';
-import localStorage from 'sentry/utils/localStorage';
-
-jest.mock('sentry/utils/localStorage');
-
-describe('NoteInputWithStorage', function () {
-  const defaultProps = {
-    storageKey: 'storage',
-    itemKey: 'item1',
-    group: {project: {}, id: 'groupId'},
-    memberList: [],
-    teams: [],
-  };
-
-  const createWrapper = props =>
-    mountWithTheme(<NoteInputWithStorage {...defaultProps} {...props} />);
-
-  it('loads draft item from local storage when mounting', function () {
-    localStorage.getItem.mockImplementation(() => JSON.stringify({item1: 'saved item'}));
-
-    const wrapper = createWrapper();
-
-    expect(localStorage.getItem).toHaveBeenCalledWith('storage');
-    expect(wrapper.find('textarea').prop('value')).toBe('saved item');
-  });
-
-  it('saves draft when input changes', function () {
-    const wrapper = createWrapper();
-
-    changeReactMentionsInput(wrapper, 'WIP COMMENT');
-
-    expect(localStorage.setItem).toHaveBeenCalledWith(
-      'storage',
-      JSON.stringify({item1: 'WIP COMMENT'})
-    );
-  });
-
-  it('removes draft item after submitting', function () {
-    localStorage.getItem.mockImplementation(() =>
-      JSON.stringify({item1: 'draft item', item2: 'item2', item3: 'item3'})
-    );
-
-    const wrapper = createWrapper();
-
-    changeReactMentionsInput(wrapper, 'new comment');
-
-    wrapper.find('textarea').simulate('keyDown', {key: 'Enter', ctrlKey: true});
-    expect(localStorage.setItem).toHaveBeenLastCalledWith(
-      'storage',
-      JSON.stringify({item2: 'item2', item3: 'item3'})
-    );
-  });
-});

static/app/components/activity/note/inputWithStorage.spec.tsx

@@ -0,0 +1,67 @@
+import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
+
+import NoteInputWithStorage from 'sentry/components/activity/note/inputWithStorage';
+import localStorage from 'sentry/utils/localStorage';
+
+jest.mock('sentry/utils/localStorage');
+
+const changeReactMentionsInput = (value: string) => {
+  const textbox = screen.getByRole('textbox');
+
+  userEvent.clear(textbox);
+  userEvent.type(screen.getByRole('textbox'), value);
+};
+
+describe('NoteInputWithStorage', function () {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const defaultProps = {
+    storageKey: 'storage',
+    itemKey: 'item1',
+    group: {project: {}, id: 'groupId'},
+    memberList: [],
+    teams: [],
+  };
+
+  it('loads draft item from local storage when mounting', function () {
+    (localStorage as jest.Mocked<typeof localStorage>).getItem.mockImplementation(() =>
+      JSON.stringify({item1: 'saved item'})
+    );
+
+    render(<NoteInputWithStorage {...defaultProps} />);
+
+    expect(localStorage.getItem).toHaveBeenCalledWith('storage');
+    expect(screen.getByRole('textbox')).toHaveValue('saved item');
+  });
+
+  it('saves draft when input changes', function () {
+    render(<NoteInputWithStorage {...defaultProps} />);
+
+    changeReactMentionsInput('WIP COMMENT');
+
+    expect(localStorage.setItem).toHaveBeenLastCalledWith(
+      'storage',
+      JSON.stringify({item1: 'WIP COMMENT'})
+    );
+  });
+
+  it('removes draft item after submitting', function () {
+    (localStorage as jest.Mocked<typeof localStorage>).getItem.mockImplementation(() =>
+      JSON.stringify({item1: 'draft item', item2: 'item2', item3: 'item3'})
+    );
+
+    render(<NoteInputWithStorage {...defaultProps} />);
+
+    userEvent.clear(screen.getByRole('textbox'));
+    userEvent.type(screen.getByRole('textbox'), 'new comment');
+
+    userEvent.type(screen.getByRole('textbox'), '{ctrl}{enter}{/ctrl}');
+
+    expect(localStorage.setItem).toHaveBeenLastCalledWith(
+      'storage',
+      JSON.stringify({item2: 'item2', item3: 'item3'})
+    );
+  });
+});

tests/js/sentry-test/changeReactMentionsInput.js

@@ -1,37 +0,0 @@
-const changeReactMentionsInput = (wrapper, value) => {
-  const oldActiveElement = document.activeElement;
-  // Need to do this because of how react-mentions works,
-  // checks that event object is === document.activeElement
-  let el = wrapper.find('textarea').getDOMNode();
-
-  // We need a non-zero width selection for `react-mentions`
-  el.selectionStart = 2;
-  el.selectionEnd = 3;
-  wrapper.find('textarea').simulate('select', {target: el});
-
-  // Finally update element value
-  el = wrapper.find('textarea').getDOMNode();
-  el.value = value;
-  el.selectionEnd = value.length;
-
-  // We need to make document.activeElement == event.target (event being the
-  // change event), otherwise react-mentions will not propagate the change event
-  Object.defineProperty(document, 'activeElement', {
-    get() {
-      return el;
-    },
-    configurable: true,
-  });
-
-  wrapper.find('textarea').simulate('change', {target: el});
-
-  // reset activeElement
-  Object.defineProperty(document, 'activeElement', {
-    get() {
-      return oldActiveElement;
-    },
-    configurable: true,
-  });
-};
-
-export default changeReactMentionsInput;