STCOM-880 focus-related tests

lib/Popover/tests/Popover-test.js

@@ -3,17 +3,25 @@
  */
 
 import React, { useState } from 'react';
-import { Interactor } from '@bigtest/interactor';
+import { HTML, Button as ButtonInteractor } from '@folio/stripes-testing';
 import { describe, beforeEach, it } from '@bigtest/mocha';
 import { expect } from 'chai';
 
 import { mount } from '../../../tests/helpers';
 
 import Button from '../../Button';
-import ButtonInteractor from '../../Button/tests/interactor';
 
 import Popover from '../Popover';
-import PopoverInteractor from './interactor';
+
+const PopoverInteractor = HTML.extend('popover')
+  .selector('[data-test-popover-overlay]')
+  .actions({
+    pressEscape: ({ perform }) => {
+      return perform((el) => {
+        return el.dispatchEvent(new KeyboardEvent('keyup', { bubbles: true, cancelable: true, keyCode: 27 }));
+      });
+    }
+  });
 
 const ControlledPopoverHarness = () => {
   const [open, setOpen] = useState(true);
@@ -34,9 +42,9 @@ const ControlledPopoverHarness = () => {
 };
 
 describe('Popover', () => {
-  const popover = new PopoverInteractor();
-  const button = new ButtonInteractor('#trigger-button');
-  const content = new Interactor('#content');
+  const popover = PopoverInteractor();
+  const button = ButtonInteractor('Toggle');
+  const content = HTML('Hello world');
 
   beforeEach(async () => {
     await mount(
@@ -55,11 +63,11 @@ describe('Popover', () => {
   });
 
   it('Renders a trigger button', () => {
-    expect(button.isPresent).to.be.true;
+    button.exists();
   });
 
   it('Renders the popover overlay when the trigger is clicked', () => {
-    expect(popover.isOpen).to.be.true;
+    popover.exists();
   });
 
   describe('Pressing the escape key', () => {
@@ -68,11 +76,11 @@ describe('Popover', () => {
     });
 
     it('closes the popover', () => {
-      expect(popover.isOpen).to.be.false;
+      popover.exists();
     });
 
     it('focuses the trigger', () => {
-      expect(button.isFocused).to.be.true;
+      button.is({ focused: true });
     });
   });
 
@@ -98,15 +106,15 @@ describe('Popover', () => {
     });
 
     it('Renders the content when trigger is clicked', () => {
-      expect(content.isPresent).to.be.true;
+      content.exists();
     });
 
     it('Has render props passed to the render-prop function', () => {
       expect(hasRenderProps).to.be.true;
     });
   });
 
-  describe.skip('If the popover is controlled', () => {
+  describe('If the popover is controlled', () => {
     beforeEach(async () => {
       await mount(
         <ControlledPopoverHarness />
@@ -116,15 +124,16 @@ describe('Popover', () => {
     });
 
     it('Renders the popover overlay by default', () => {
-      expect(popover.isOpen).to.be.true;
+      popover.exists();
     });
 
     it('Closes the popover overlay when the trigger is clicked', () => {
-      expect(popover.isOpen).to.be.false;
+      popover.absent();
     });
   });
 
   describe('If the legacy component API is used', () => {
+    const button2 = ButtonInteractor('Top Popover3');
     beforeEach(async () => {
       await mount(
         <>
@@ -136,20 +145,20 @@ describe('Popover', () => {
         </>
       );
 
-      await button.click();
+      await button2.click();
     });
 
     it('Renders the legacy popover and opens the overlay when the toggle is clicked', () => {
-      expect(popover.isOpen).to.be.true;
+      popover.exists();
     });
 
     describe('When the toggle is clicked again', () => {
       beforeEach(async () => {
-        button.click();
+        await button2.click();
       });
 
       it('Hides the popover overlay', () => {
-        expect(popover.isOpen).to.be.true;
+        popover.absent();
       });
     });
   });

lib/RadioButton/tests/RadioButton-ReduxForm-test.js

@@ -3,7 +3,7 @@ import { describe, beforeEach, it } from 'mocha';
 import { expect } from 'chai';
 
 import { Field } from 'redux-form';
-import { RadioButton as Interactor } from '@folio/stripes-testing';
+import { RadioButton as Interactor, converge } from '@folio/stripes-testing';
 import { mountWithContext } from '../../../tests/helpers';
 import TestForm from '../../../tests/TestForm';
 
@@ -25,8 +25,10 @@ describe('RadioButton with Redux Form', () => {
             onChange={(event) => {
               output = event.target.checked;
             }}
+            validate={value => (value === 'green' ? 'Not ready to eat' : undefined)}
             type="radio"
             value="green"
+            warn={value => (value === 'ripe' ? 'Warning: may be mushy' : undefined)}
           />
         </div>
         <div id="radio-button-2">
@@ -48,15 +50,17 @@ describe('RadioButton with Redux Form', () => {
 
   describe('clicking the label', () => {
     beforeEach(async () => {
+      await radioButton1.focus();
       await radioButton1.click();
       await radioButton1.blur();
+      await radioButton2.focus();
     });
 
     it('toggles the value', () => expect(output).to.be.true);
 
     it('displays the input as checked', () => radioButton1.is({ checked: true }));
 
-    it('displays the error text', () => radioButton1.has({ feedbackText: 'Not ready to eat' }));
+    it('displays the error text', () => converge(() => radioButton1.has({ feedbackText: 'Not ready to eat' })));
 
     it('applies an error class', () => radioButton1.has({ hasError: true }));
 

lib/RadioButtonGroup/tests/RadioButtonGroup-ReduxForm-test.js

@@ -3,72 +3,76 @@ import { describe, beforeEach, it } from '@bigtest/mocha';
 import { expect } from 'chai';
 
 import { Field } from 'redux-form';
+import { RadioButtonGroup as RadioButtonGroupInteractor, RadioButton as RadioButtonInteractor } from '@folio/stripes-testing';
+
 import { mountWithContext } from '../../../tests/helpers';
 import TestForm from '../../../tests/TestForm';
 import RadioButtonGroup from '../RadioButtonGroup';
 import RadioButton from '../../RadioButton';
-import RadioButtonGroupInteractor from './interactor';
+// import RadioButtonGroupInteractor from './interactor';
 
 describe('RadioButtonGroup with Redux Form', () => {
-  const radioButtonGroup = new RadioButtonGroupInteractor();
+  const radioButtonGroup = RadioButtonGroupInteractor('TestField');
 
   beforeEach(async () => {
     await mountWithContext(
       <TestForm>
-        <Field
-          name="testField"
-          component={RadioButtonGroup}
-          validate={value => (value === 'no' ? 'testField is invalid' : undefined)}
-          warn={value => (value === 'yes' ? 'testField has a warning' : undefined)}
-        >
+        <RadioButtonGroup label="TestField">
           <p>Some help text</p>
-          <RadioButton label="Yes" value="yes" />
-          <RadioButton label="No" value="no" />
-        </Field>
+          <Field
+            component={RadioButton}
+            name="bool"
+            label="Yes"
+            value="yes"
+            type="radio"
+            validate={value => (value === 'no' ? 'testField is invalid' : undefined)}
+            warn={value => (value === 'yes' ? 'testField has a warning' : undefined)}
+          />
+          <Field
+            component={RadioButton}
+            name="bool"
+            label="No"
+            value="no"
+            type="radio"
+            validate={value => (value === 'no' ? 'testField is invalid' : undefined)}
+            warn={value => (value === 'yes' ? 'testField has a warning' : undefined)}
+          />
+        </RadioButtonGroup>
       </TestForm>
     );
+    await radioButtonGroup.focus('Yes');
   });
 
-  it('displays the first option as unselected', () => {
-    expect(radioButtonGroup.options(0).isChecked).to.be.false;
-  });
-
-  it('displays the second option as unselected', () => {
-    expect(radioButtonGroup.options(1).isChecked).to.be.false;
+  it('no options are selected', () => {
+    RadioButtonInteractor({ checked: true }).absent();
   });
 
   describe('selecting an option', () => {
     beforeEach(async () => {
-      await radioButtonGroup.options(0).clickAndBlur();
+      await radioButtonGroup.choose('Yes');
+      await radioButtonGroup.blur();
     });
 
     it('displays the first option as selected', () => {
-      expect(radioButtonGroup.options(0).isChecked).to.be.true;
+      radioButtonGroup.has({ checkedOption: 'Yes' });
     });
 
-    it('displays the second option as unselected', () => {
-      expect(radioButtonGroup.options(1).isChecked).to.be.false;
-    });
-
-    it.skip('displays a warning message', () => {
-      expect(radioButtonGroup.feedbackText).to.equal('testField has a warning');
+    it('displays a warning message', () => {
+      radioButtonGroup.has({ feedbackText: 'testField has a warning' });
     });
 
     describe('selecting another option', () => {
       beforeEach(async () => {
-        await radioButtonGroup.options(1).clickAndBlur();
-      });
-
-      it('displays the first option as unselected', () => {
-        expect(radioButtonGroup.options(0).isChecked).to.be.false;
+        await radioButtonGroup.choose('No');
       });
 
-      it('displays the second option as selected', () => {
-        expect(radioButtonGroup.options(1).isChecked).to.be.true;
+      it('displays the first option as unselected, second option selected', () => {
+        radioButtonGroup.has({ checkedOption: 'No' });
+        RadioButtonGroupInteractor({ checkedOption: 'Yes' }).absent();
       });
 
       it('displays an error message', () => {
-        expect(radioButtonGroup.feedbackText).to.equal('testField is invalid');
+        radioButtonGroup.has({ feedbackText: 'testField is invalid' });
       });
     });
   });

lib/Select/tests/Select-ReduxForm-test.js

@@ -1,21 +1,22 @@
 import React from 'react';
 import { describe, beforeEach, it } from '@bigtest/mocha';
-import { expect } from 'chai';
 
 import { Field } from 'redux-form';
+import { Select as SelectInteractor, including } from '@folio/stripes-testing';
 import { mountWithContext } from '../../../tests/helpers';
 import TestForm from '../../../tests/TestForm';
 import Select from '../Select';
-import SelectInteractor from './interactor';
+// import SelectInteractor from './interactor';
 
 describe('Select with ReduxForm', () => {
-  const select = new SelectInteractor();
+  const select = SelectInteractor('testField');
 
   describe('inputting a value', () => {
     beforeEach(async () => {
       await mountWithContext(
         <TestForm>
           <Field
+            label="testField"
             name="testField"
             component={Select}
             dataOptions={[
@@ -29,17 +30,16 @@ describe('Select with ReduxForm', () => {
     });
 
     it('renders a select element', () => {
-      expect(select.hasSelect).to.be.true;
+      select.exists();
     });
 
     describe('changing the value', () => {
       beforeEach(async () => {
-        await select.selectOption('Option 2')
-          .focusSelect();
+        await select.chooseAndBlur('Option 2');
       });
 
       it('applies a changed class', () => {
-        expect(select.hasChangedStyle).to.be.true;
+        select.has({ className: including('isChanged') });
       });
     });
   });
@@ -49,6 +49,7 @@ describe('Select with ReduxForm', () => {
       await mountWithContext(
         <TestForm>
           <Field
+            label="testField"
             name="testField"
             component={Select}
             dataOptions={[
@@ -63,15 +64,15 @@ describe('Select with ReduxForm', () => {
     });
 
     beforeEach(async () => {
-      await select.selectAndBlur('Option 2');
+      await select.chooseAndBlur('Option 2');
     });
 
-    it.skip('applies an error style', () => {
-      expect(select.hasErrorStyle).to.be.true;
+    it('applies an error style', () => {
+      select.has({ className: including('error') });
     });
 
-    it.skip('renders an error message', () => {
-      expect(select.errorText).to.equal('testField is Invalid');
+    it('renders an error message', () => {
+      select.has({ error: 'testField is Invalid' });
     });
   });
 
@@ -80,6 +81,7 @@ describe('Select with ReduxForm', () => {
       await mountWithContext(
         <TestForm>
           <Field
+            label="testField"
             name="testField"
             component={Select}
             validStylesEnabled
@@ -95,11 +97,11 @@ describe('Select with ReduxForm', () => {
     });
 
     beforeEach(async () => {
-      await select.selectAndBlur('Option 1');
+      await select.chooseAndBlur('Option 1');
     });
 
     it('applies a valid class', () => {
-      expect(select.hasValidStyle).to.be.true;
+      select.has({ className: including('valid') });
     });
   });
 });