fixes eslint issues

.gitignore

@@ -4,3 +4,4 @@ coverage
 .nyc_output
 *DS_Store
 cypress/screenshots
+.vscode

package.json

@@ -54,10 +54,10 @@
     "css-loader": "6.8.1",
     "cypress": "13.6.1",
     "esbuild-loader": "4.0.2",
-    "eslint": "8.55.0",
+    "eslint": "8.57.0",
     "eslint-config-airbnb": "19.0.4",
     "eslint-plugin-cypress": "2.15.1",
-    "eslint-plugin-import": "2.29.0",
+    "eslint-plugin-import": "2.29.1",
     "eslint-plugin-jsx-a11y": "6.8.0",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",

src/components/Accordion/js/AccordionItem.test.js

@@ -49,8 +49,9 @@ describe('AccordionItem', () => {
       .get(selectors.itemActive)
       .should('exist')
       .get(selectors.trigger)
-      .click()
-      .get(selectors.itemActive)
+      .click();
+
+    cy.get(selectors.itemActive)
       .should('not.exist');
   });
 
@@ -60,8 +61,9 @@ describe('AccordionItem', () => {
       .get(selectors.itemActive)
       .should('exist')
       .get(selectors.trigger)
-      .click()
-      .get(selectors.itemActive)
+      .click();
+
+    cy.get(selectors.itemActive)
       .should('exist');
   });
 });

src/components/Accordion/js/AccordionItemTrigger.js

@@ -17,6 +17,7 @@ function ItemTrigger({ wrap }) {
       className={classes}
       onClick={toggleChange}
       type="button"
+      aria-label="collapse/expand"
     >
       <Icon className="collapsable__arrow" type={iconType} />
     </button>

src/components/Button/Button.test.js

@@ -83,7 +83,7 @@ describe('Button', () => {
   });
 
   it('should call the onClick callback', () => {
-    const onClick = cy.stub();
+    const onClick = cy.stub().as('onClick');
 
     cy
       .mount(
@@ -96,12 +96,14 @@ describe('Button', () => {
       );
 
     cy.contains(buttonText)
-      .click()
-      .then(() => expect(onClick).to.be.called);
+      .click();
+
+    cy.get('@onClick')
+      .should('be.called');
   });
 
   it('should not call the onClick callback if disabled', () => {
-    const onClick = cy.stub();
+    const onClick = cy.stub().as('onClick');
 
     cy
       .mount(
@@ -115,7 +117,9 @@ describe('Button', () => {
       );
 
     cy.contains(buttonText)
-      .click({ force: true })
-      .then(() => expect(onClick).not.to.be.called);
+      .click({ force: true });
+
+    cy.get('@onClick')
+      .should('not.be.called');
   });
 });

src/components/Button/index.js

@@ -1,4 +1,4 @@
-import React, { Fragment, cloneElement } from 'react';
+import React, { cloneElement } from 'react';
 import PropTypes from 'prop-types';
 
 import Icon from '../Icon';
@@ -65,13 +65,12 @@ const Button = React.forwardRef((props, ref) => {
 
     if (customButton) {
       return (
-        <Fragment>
+        <>
           { cloneElement(customButton, {
             className: getCssClasses(),
             disabled,
-          })
-          }
-        </Fragment>
+          })}
+        </>
       );
     }
 
@@ -99,7 +98,7 @@ const Button = React.forwardRef((props, ref) => {
           className={getCssClasses()}
           disabled={disabled}
           onClick={onClick}
-          type={type || 'button'}
+          type={type || 'button'} // eslint-disable-line react/button-has-type
           ref={ref}
           {...rest}
         >
@@ -113,7 +112,6 @@ const Button = React.forwardRef((props, ref) => {
     return buttonType;
   };
 
-
   return (
     getButtonType()
   );

src/components/Collapsible/Collapsible.test.js

@@ -78,7 +78,6 @@ describe('Collapsible', () => {
       );
     }
 
-    // eslint-disable-next-line cypress/no-unnecessary-waiting
     cy
       .mount(<Component />)
       .get(wrapperSelector)
@@ -87,16 +86,20 @@ describe('Collapsible', () => {
 
       .get('button')
       .contains('large')
-      .click()
-      .wait(200)
+      .click();
+
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
+    cy.wait(200)
       .get(wrapperSelector)
       .invoke('height')
       .should('be.gt', epsilon)
 
       .get('button')
       .contains('small')
-      .click()
-      .wait(200)
+      .click();
+
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
+    cy.wait(200)
       .get(wrapperSelector)
       .invoke('height')
       .should('be.lt', epsilon);

src/components/Confirm/Confirm.test.js

@@ -46,8 +46,9 @@ describe('Confirm', () => {
       .get(selectors.modalBackdrop)
       .should('not.have.class', 'opened')
       .get(selectors.contentButton)
-      .click()
-      .get(selectors.modalBackdrop)
+      .click();
+
+    cy.get(selectors.modalBackdrop)
       .should('have.class', 'opened');
   });
 
@@ -82,45 +83,47 @@ describe('Confirm', () => {
 
   it('calls the confirmCallback when clicking on the confirm button', () => {
     const confirmBtnText = 'Custom Confirm';
-    const confirmCallback = cy.stub();
+    const confirmCallback = cy.stub().as('confirmCallback');
 
     cy
       .mount(<Component confirmBtnText={confirmBtnText} confirmCallback={confirmCallback} />)
       .get(selectors.contentButton)
-      .click()
-      .get('button')
+      .click();
+
+    cy.get('button')
       .contains(confirmBtnText)
-      .click()
-      .then(() => {
-        expect(confirmCallback).to.be.called;
-      });
+      .click();
+
+    cy.get('@confirmCallback')
+      .should('be.called');
   });
 
   it('calls the cancelCallback when clicking on the confirm button', () => {
     const cancelBtnText = 'Custom Cancel';
-    const cancelCallback = cy.stub();
+    const cancelCallback = cy.stub().as('cancelCallback');
 
     cy
       .mount(<Component cancelBtnText={cancelBtnText} cancelCallback={cancelCallback} />)
       .get(selectors.contentButton)
-      .click()
-      .get('button')
+      .click();
+
+    cy.get('button')
       .contains(cancelBtnText)
-      .click()
-      .then(() => {
-        expect(cancelCallback).to.be.called;
-      });
+      .click();
+
+    cy.get('@cancelCallback')
+      .should('be.called');
   });
 
   it('calls the beforeCallback when showing the modal', () => {
-    const beforeCallback = cy.stub();
+    const beforeCallback = cy.stub().as('beforeCallback');
 
     cy
       .mount(<Component beforeCallback={beforeCallback} />)
       .get(selectors.contentButton)
-      .click()
-      .then(() => {
-        expect(beforeCallback).to.be.called;
-      });
+      .click();
+
+    cy.get('@beforeCallback')
+      .should('be.called');
   });
 });

src/components/Confirm/index.js

@@ -61,8 +61,8 @@ function Confirm(props) {
         </Modal.Body>
         <Modal.Footer>
           <Button
-              onClick={cancel}
-              theme="default"
+            onClick={cancel}
+            theme="default"
           >
             {cancelBtnText}
           </Button>