fix: update data-testid to new format

appfolio · Sep 13, 2023 · d52b506 · d52b506
1 parent 1de10bf
commit d52b506
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 53 deletions.
diff --git a/src/components/Combobox/Combobox.spec.js b/src/components/Combobox/Combobox.spec.js
@@ -22,43 +22,43 @@ describe('<Combobox />', () => {
 
   it('should render with empty options array', () => {
     const combobox = render(<Combobox options={[]} />);
-    combobox.getByTestId('combobox-input');
+    combobox.getByTestId('react-gears-combobox-input');
   });
 
   it('should show options when focused', () => {
     const combobox = render(<Combobox options={OPTIONS} />);
-    assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'true');
+    assert.equal(combobox.getByTestId('react-gears-combobox-menu').getAttribute('aria-hidden'), 'true');
 
-    const input = combobox.getByTestId('combobox-input');
+    const input = combobox.getByTestId('react-gears-combobox-input');
     fireEvent.focus(input);
 
-    assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'false');
+    assert.equal(combobox.getByTestId('react-gears-combobox-menu').getAttribute('aria-hidden'), 'false');
   });
 
   it('should pass inputClassName to Input', () => {
     const innerClassName = 'js-no-autofocus';
     const combobox = render(<Combobox options={OPTIONS} inputClassName={innerClassName} />);
 
-    assert(combobox.getByTestId('combobox-input').classList.contains(innerClassName));
+    assert(combobox.getByTestId('react-gears-combobox-input').classList.contains(innerClassName));
   });
 
   it('should have "search" as default Input type', () => {
     const combobox = render(<Combobox options={[]} />);
-    const input = combobox.getByTestId('combobox-input');
+    const input = combobox.getByTestId('react-gears-combobox-input');
 
     assert.strictEqual(input.type, 'search');
   });
 
   it('should pass type to Input', () => {
     const combobox = render(<Combobox options={[]} type="text" />);
-    const input = combobox.getByTestId('combobox-input');
+    const input = combobox.getByTestId('react-gears-combobox-input');
 
     assert.strictEqual(input.type, 'text');
   });
 
   it('should show all options when there is a selected option', () => {
     const combobox = render(<Combobox options={OPTIONS} value={OPTIONS[0]} />);
-    const input = combobox.getByTestId('combobox-input');
+    const input = combobox.getByTestId('react-gears-combobox-input');
     fireEvent.focus(input);
 
     OPTIONS.forEach((o) => {
@@ -70,7 +70,7 @@ describe('<Combobox />', () => {
     const mockOnChange = sinon.spy();
     const combobox = render(<Combobox options={OPTIONS} onChange={mockOnChange} />);
 
-    const input = combobox.getByTestId('combobox-input');
+    const input = combobox.getByTestId('react-gears-combobox-input');
     fireEvent.focus(input);
 
     const option = combobox.getByText('D-O');
@@ -83,43 +83,43 @@ describe('<Combobox />', () => {
   it('should close menu on blur', () => {
     const combobox = render(<Combobox options={OPTIONS} />);
 
-    const input = combobox.getByTestId('combobox-input');
+    const input = combobox.getByTestId('react-gears-combobox-input');
     fireEvent.focus(input);
 
-    assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'false');
+    assert.equal(combobox.getByTestId('react-gears-combobox-menu').getAttribute('aria-hidden'), 'false');
 
     fireEvent.blur(input);
 
-    assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'true');
+    assert.equal(combobox.getByTestId('react-gears-combobox-menu').getAttribute('aria-hidden'), 'true');
   });
 
   it('should not close menu when menu container is focused', () => {
     const combobox = render(<Combobox options={OPTIONS} />);
-    const input = combobox.getByTestId('combobox-input');
+    const input = combobox.getByTestId('react-gears-combobox-input');
     fireEvent.focus(input);
-    const dropdown = combobox.getByTestId('combobox-dropdown');
-    const menu = combobox.getByTestId('combobox-menu');
+    const dropdown = combobox.getByTestId('react-gears-combobox-dropdown');
+    const menu = combobox.getByTestId('react-gears-combobox-menu');
     fireEvent.blur(dropdown, { relatedTarget: menu });
 
-    expect(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden')).toEqual('false');
+    expect(combobox.getByTestId('react-gears-combobox-menu').getAttribute('aria-hidden')).toEqual('false');
   });
 
   it('should close menu on blur of caret button', () => {
     const combobox = render(<Combobox options={OPTIONS} />);
 
-    const caret = combobox.getByTestId('combobox-caret');
+    const caret = combobox.getByTestId('react-gears-combobox-caret');
     fireEvent.mouseDown(caret);
 
-    assert.strictEqual(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'false');
+    assert.strictEqual(combobox.getByTestId('react-gears-combobox-menu').getAttribute('aria-hidden'), 'false');
 
     fireEvent.blur(caret);
 
-    assert.strictEqual(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'true');
+    assert.strictEqual(combobox.getByTestId('react-gears-combobox-menu').getAttribute('aria-hidden'), 'true');
   });
 
   it('should blur input on close', () => {
     const combobox = render(<Combobox options={OPTIONS} />);
-    const input = combobox.getByTestId('combobox-input');
+    const input = combobox.getByTestId('react-gears-combobox-input');
     input.focus();
 
     let option = combobox.getByText('D-O');
@@ -141,7 +141,7 @@ describe('<Combobox />', () => {
   it('should navigate options by up/down keys', () => {
     const combobox = render(<Combobox options={OPTIONS} />);
 
-    const input = combobox.getByTestId('combobox-input');
+    const input = combobox.getByTestId('react-gears-combobox-input');
     fireEvent.focus(input);
 
     assert(combobox.getByText('R2-D2').classList.contains('active'));
@@ -168,7 +168,7 @@ describe('<Combobox />', () => {
       />
     );
 
-    const input = combobox.getByTestId('combobox-input');
+    const input = combobox.getByTestId('react-gears-combobox-input');
     fireEvent.click(input);
 
     assert.strictEqual(input.value, 'bar');
@@ -178,15 +178,15 @@ describe('<Combobox />', () => {
     const mockOnChange = sinon.spy();
     const combobox = render(<Combobox options={OPTIONS} onChange={mockOnChange} />);
 
-    const input = combobox.getByTestId('combobox-input');
+    const input = combobox.getByTestId('react-gears-combobox-input');
     fireEvent.focus(input);
     fireEvent.keyDown(input, { key: 'ArrowDown', code: 40 });
 
     assert(combobox.getByText('BB8').classList.contains('active'));
 
     fireEvent.keyDown(input, { key: 'Enter', code: 13 });
 
-    assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'true');
+    assert.equal(combobox.getByTestId('react-gears-combobox-menu').getAttribute('aria-hidden'), 'true');
     sinon.assert.called(mockOnChange);
     sinon.assert.calledWith(mockOnChange, OPTIONS[1].value);
   });
@@ -197,7 +197,7 @@ describe('<Combobox />', () => {
       value = v;
     };
     let combobox = render(<Combobox options={OPTIONS} onChange={mockOnChange} value={value} />);
-    let input = combobox.getByTestId('combobox-input');
+    let input = combobox.getByTestId('react-gears-combobox-input');
     fireEvent.focus(input);
 
     const option = combobox.getByText('D-O');
@@ -207,7 +207,7 @@ describe('<Combobox />', () => {
 
     cleanup();
     combobox = render(<Combobox options={OPTIONS} onChange={mockOnChange} value={value} />);
-    input = combobox.getByTestId('combobox-input');
+    input = combobox.getByTestId('react-gears-combobox-input');
 
     fireEvent.mouseDown(input);
     fireEvent.keyDown(input, { key: 'Backspace', code: 8 });
@@ -218,55 +218,55 @@ describe('<Combobox />', () => {
   it('should open options with down key', () => {
     const combobox = render(<Combobox options={OPTIONS} />);
 
-    const input = combobox.getByTestId('combobox-input');
+    const input = combobox.getByTestId('react-gears-combobox-input');
     fireEvent.focus(input);
 
-    assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'false');
+    assert.equal(combobox.getByTestId('react-gears-combobox-menu').getAttribute('aria-hidden'), 'false');
 
-    const caret = combobox.getByTestId('combobox-caret');
+    const caret = combobox.getByTestId('react-gears-combobox-caret');
     fireEvent.mouseDown(caret);
 
-    assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'true');
+    assert.equal(combobox.getByTestId('react-gears-combobox-menu').getAttribute('aria-hidden'), 'true');
 
     fireEvent.keyDown(input, { key: 'ArrowDown', code: 40 });
 
-    assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'false');
+    assert.equal(combobox.getByTestId('react-gears-combobox-menu').getAttribute('aria-hidden'), 'false');
   });
 
   it('should open options if input is clicked', async () => {
     const combobox = render(<Combobox options={OPTIONS} value={3} />);
 
-    assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'true');
+    assert.equal(combobox.getByTestId('react-gears-combobox-menu').getAttribute('aria-hidden'), 'true');
 
-    const input = combobox.getByTestId('combobox-input');
+    const input = combobox.getByTestId('react-gears-combobox-input');
     fireEvent.mouseDown(input);
 
-    assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'false');
+    assert.equal(combobox.getByTestId('react-gears-combobox-menu').getAttribute('aria-hidden'), 'false');
   });
 
   it('should open/close options with dropdown toggle', () => {
     const combobox = render(<Combobox options={OPTIONS} />);
 
-    const input = combobox.getByTestId('combobox-input');
+    const input = combobox.getByTestId('react-gears-combobox-input');
     fireEvent.focus(input);
 
-    assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'false');
+    assert.equal(combobox.getByTestId('react-gears-combobox-menu').getAttribute('aria-hidden'), 'false');
 
-    const caret = combobox.getByTestId('combobox-caret');
+    const caret = combobox.getByTestId('react-gears-combobox-caret');
     fireEvent.mouseDown(caret);
 
-    assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'true');
+    assert.equal(combobox.getByTestId('react-gears-combobox-menu').getAttribute('aria-hidden'), 'true');
 
     fireEvent.mouseDown(caret);
 
-    assert.equal(combobox.getByTestId('combobox-menu').getAttribute('aria-hidden'), 'false');
+    assert.equal(combobox.getByTestId('react-gears-combobox-menu').getAttribute('aria-hidden'), 'false');
   });
 
   describe('default filterOptions ', () => {
     it('should filter by input (case insensitive)', () => {
       const combobox = render(<Combobox options={OPTIONS} />);
 
-      const input = combobox.getByTestId('combobox-input');
+      const input = combobox.getByTestId('react-gears-combobox-input');
       fireEvent.focus(input);
 
       fireEvent.change(input, { target: { value: 'bb8' } });
@@ -278,7 +278,7 @@ describe('<Combobox />', () => {
     it('should update filtered options when input is updated', () => {
       const combobox = render(<Combobox options={OPTIONS} />);
 
-      const input = combobox.getByTestId('combobox-input');
+      const input = combobox.getByTestId('react-gears-combobox-input');
       fireEvent.focus(input);
       fireEvent.change(input, { target: { value: 'd2' } });
 
@@ -306,7 +306,7 @@ describe('<Combobox />', () => {
 
     const combobox = render(<Combobox options={groupedOptions} />);
 
-    const input = combobox.getByTestId('combobox-input');
+    const input = combobox.getByTestId('react-gears-combobox-input');
     fireEvent.focus(input);
 
     const droidLabel = combobox.getByText('Droids');
@@ -335,7 +335,7 @@ describe('<Combobox />', () => {
         <Combobox options={OPTIONS} onChange={mockOnChange} onCreate={mockOnCreate} />
       );
 
-      const input = combobox.getByTestId('combobox-input');
+      const input = combobox.getByTestId('react-gears-combobox-input');
       fireEvent.focus(input);
 
       userEvent.type(input, 'new option');
@@ -360,18 +360,18 @@ describe('<Combobox />', () => {
         />
       );
 
-      const input = combobox.getByTestId('combobox-input');
+      const input = combobox.getByTestId('react-gears-combobox-input');
 
       userEvent.type(input, 'new option');
 
-      let newOptionButton = combobox.getByTestId('create-new-option');
+      let newOptionButton = combobox.getByTestId('react-gears-combobox-create-new-option');
 
       assert(newOptionButton.hasAttribute('disabled'));
 
       input.setSelectionRange(0, 'new option'.length);
       userEvent.type(input, 'foobar');
 
-      newOptionButton = combobox.getByTestId('create-new-option');
+      newOptionButton = combobox.getByTestId('react-gears-combobox-create-new-option');
 
       assert(!newOptionButton.hasAttribute('disabled'));
     });
@@ -393,7 +393,7 @@ describe('<Combobox />', () => {
       let combobox = render(
         <Combobox options={OPTIONS} onChange={mockOnChange} value={value} multi />
       );
-      let input = combobox.getByTestId('combobox-input');
+      let input = combobox.getByTestId('react-gears-combobox-input');
       fireEvent.focus(input);
 
       const option1 = combobox.getByText('D-O');
@@ -409,7 +409,7 @@ describe('<Combobox />', () => {
 
       cleanup();
       combobox = render(<Combobox options={OPTIONS} onChange={mockOnChange} value={value} multi />);
-      input = combobox.getByTestId('combobox-input');
+      input = combobox.getByTestId('react-gears-combobox-input');
 
       fireEvent.keyDown(input, { key: 'Backspace', code: 8 });
 

diff --git a/src/components/Combobox/Combobox.tsx b/src/components/Combobox/Combobox.tsx
@@ -305,7 +305,7 @@ function Combobox<T>({
       return (
         <DropdownItem
           active={noMatches}
-          data-testid="create-new-option"
+          data-testid="react-gears-combobox-create-new-option"
           disabled={!isValidNewOption(inputValue)}
           onMouseDown={(ev) => {
             ev.preventDefault();
@@ -353,7 +353,7 @@ function Combobox<T>({
         </div>
       )}
       <Dropdown
-        data-testid="combobox-dropdown"
+        data-testid="react-gears-combobox-dropdown"
         direction={direction}
         isOpen={!disabled && open}
         toggle={() => {}}
@@ -368,7 +368,7 @@ function Combobox<T>({
           <InputGroup className={className}>
             <Input
               innerRef={inputElement}
-              data-testid="combobox-input"
+              data-testid="react-gears-combobox-input"
               disabled={disabled}
               className={inputClassName}
               placeholder={selected ? undefined : placeholder}
@@ -408,7 +408,7 @@ function Combobox<T>({
             />
             <Button
               className="px-2"
-              data-testid="combobox-caret"
+              data-testid="react-gears-combobox-caret"
               disabled={disabled}
               active={open}
               onMouseDown={(ev) => {
@@ -423,7 +423,7 @@ function Combobox<T>({
           </InputGroup>
         </DropdownToggle>
         <DropdownMenu
-          data-testid="combobox-menu"
+          data-testid="react-gears-combobox-menu"
           className="p-0 w-100"
           style={{ maxHeight: menuMaxHeight || '12rem', overflowY: 'auto' }}
           {...dropdownProps}