Upgrade interactors pt1 (#1857)

* filtergroups tests

* filterpanesearch tests

* upgrade focusLink tests

* headline-test-upgrade

* upgrade icon tests

* update infopopover tests

* fix infopopover test

* perform the proper action in the test

lib/ErrorModal/tests/ErrorModal-test.js

@@ -1,16 +1,22 @@
 import React from 'react';
 
-import { expect } from 'chai';
 import sinon from 'sinon';
 import { describe, beforeEach, it } from 'mocha';
-import { runAxeTest } from '@folio/stripes-testing';
-
+import { runAxeTest, Modal, Button, including, converge } from '@folio/stripes-testing';
+import { RoledHTML } from '../../../tests/helpers/localInteractors';
 import { mountWithContext } from '../../../tests/helpers';
 import ErrorModal from '../ErrorModal';
-import ErrorModalInteractor from './interactor';
+
+const ErrorModalInteractor = Modal.extend('Error modal')
+  .filters({
+    errorText: (el) => el.querySelector('[class^="modalContent--"]').textContent
+  })
+  .actions({
+    clickClose: ({ find }, label = 'Close') => find(Button(including(label))).click()
+  });
 
 describe('ErrorModal', () => {
-  const errorModal = new ErrorModalInteractor();
+  const errorModal = ErrorModalInteractor();
   const onClose = sinon.spy();
 
   const label = 'Something went wrong';
@@ -30,29 +36,19 @@ describe('ErrorModal', () => {
 
   it('has no axe errors. - ErrorModal', runAxeTest);
 
-  it('the label text should be correct', () => {
-    expect(errorModal.label.text).to.equal(label);
-  });
+  it('the label text should be correct', () => errorModal.has({ title: label }));
 
-  it('the content text should be correct', () => {
-    expect(errorModal.content.text).to.equal(content);
-  });
+  it('the content text should be correct', () => errorModal.has({ errorText: content }));
 
-  it('the content tagName should be div', () => {
-    expect(errorModal.bodyTagName).to.equal('div');
-  });
+  it('the content tagName should be div', () => RoledHTML({ className: including('modalContent') }).has({ tagName: 'DIV' }));
 
-  it('shows correct button label', () => {
-    expect(errorModal.closeButton.text).to.equal(buttonLabel);
-  });
+  it('shows correct button label', () => Button(buttonLabel).exists());
 
   describe('when clicking the close button', () => {
     beforeEach(async () => {
-      await errorModal.closeButton.click();
+      await errorModal.clickClose();
     });
 
-    it('the onClose callback should be fired', () => {
-      expect(onClose.called).to.be.true;
-    });
+    it('the onClose callback should be fired', () => converge(() => onClose.called));
   });
 });

lib/ExportCsv/tests/ExportCsv-test.js

@@ -1,16 +1,16 @@
 import React from 'react';
 import { beforeEach, it, describe } from 'mocha';
-import { expect } from 'chai';
+import { Button, Bigtest } from '@folio/stripes-testing';
 
 import { mountWithContext } from '../../../tests/helpers';
-import ButtonInteractor from '../../Button/tests/interactor';
 
 import ExportCsv from '../ExportCsv';
 import testData from './export';
 
+const { Link } = Bigtest;
+
 describe('ExportCSV', () => {
-  const exportButton = new ButtonInteractor(['data-test-export-csv']);
-  const exportLink = new ButtonInteractor('a[data-test-exportcsv-link]');
+  const exportButton = Button();
 
   beforeEach(async () => {
     await mountWithContext(
@@ -21,25 +21,13 @@ describe('ExportCSV', () => {
     );
   });
 
-  it('renders the exportCSV button', () => {
-    expect(exportButton.isPresent).to.be.true;
-    expect(exportButton.isButton).to.be.true;
-    expect(exportButton.rendersDefault).to.be.true;
-  });
-
-  it('renders the exportCSV button label', () => {
-    expect(exportButton.text).to.equal('Export to CSV');
-  });
+  it('renders the exportCSV button', () => Button('Export to CSV').exists());
 
   describe('Clicking the button', () => {
     beforeEach(async () => {
       await exportButton.click();
     });
 
-    it('creates a link node', () => {
-      expect(exportLink.isPresent).to.be.true;
-      expect(exportLink.isAnchor).to.be.true;
-      expect(exportLink.label).to.equal('');
-    });
+    it('creates a link node', () => Link({ visible: false }).exists());
   });
 });