test(BTS-167): implements unit test for event mocks

catho · Apr 1, 2019 · 6d3373a · 6d3373a
1 parent bdccd86
commit 6d3373a
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 72 deletions.
diff --git a/components/SnackBar/SnackBar.jsx b/components/SnackBar/SnackBar.jsx
@@ -98,6 +98,8 @@ class SnackBar extends React.Component {
     setTimeout(() => {
       onClose();
     }, secondsToClose * 1000);
+
+    this.closeOnTime(secondsToClose, onClose);
   }
 
   componentWillUnmount() {
@@ -115,6 +117,12 @@ class SnackBar extends React.Component {
     element.focus();
   };
 
+  closeOnTime = (secondsToClose, callback) => {
+    setTimeout(() => {
+      callback();
+    }, secondsToClose * 1000);
+  };
+
   render() {
     const _id = uniqId('snackbar-dialog-');
     const {

diff --git a/components/SnackBar/SnackBar.unit.test.jsx b/components/SnackBar/SnackBar.unit.test.jsx
@@ -7,15 +7,18 @@ describe('<SnackBar />', () => {
   const actionTriggerEventMock = jest.fn();
   const onCloseEventMock = jest.fn();
   const CloseButtonAriaLabel = 'close';
+  const secondsToClose = 1;
 
   const actionTrigger = {
     title: 'ACTION',
     callbackFn: actionTriggerEventMock,
   };
+
+  let component;
   const SnackBarComponent = (
     <SnackBar
       text="SnackBar message content"
-      secondsToClose={10}
+      secondsToClose={secondsToClose}
       onClose={onCloseEventMock}
       closeButtonAriaLabel={CloseButtonAriaLabel}
       skin="black"
@@ -32,43 +35,52 @@ describe('<SnackBar />', () => {
       <SnackBar secondsToClose={10} />,
       <SnackBar skin="black" />,
     ];
-    SNACKBARS.forEach(snackbar =>
-      expect(toJson(mount(snackbar))).toMatchSnapshot(),
-    );
+
+    SNACKBARS.forEach(snackbar => {
+      const SnackComponent = mount(snackbar);
+      expect(toJson(SnackComponent)).toMatchSnapshot();
+      SnackComponent.unmount();
+    });
+  });
+
+  afterEach(() => {
+    if (component && component.length) {
+      component.unmount();
+    }
   });
 
   it('should call on close event callback', () => {
-    const component = mount(SnackBarComponent);
+    component = mount(SnackBarComponent);
     component.find('CloseIcon').simulate('click');
     expect(onCloseEventMock).toHaveBeenCalled();
   });
 
   it('should call action trigger callback', () => {
-    const component = mount(SnackBarComponent);
+    component = mount(SnackBarComponent);
     component.find('ActionButton').simulate('click');
     expect(actionTriggerEventMock).toHaveBeenCalled();
   });
 
   it('should action trigger title has the same of the prop object', () => {
-    const component = mount(SnackBarComponent);
+    component = mount(SnackBarComponent);
     const actionTriggerText = component.find('ActionButton').text();
     expect(actionTrigger.title).toMatch(actionTriggerText);
   });
 
   it('should have a close icon when its props is set', () => {
-    const component = mount(SnackBarComponent);
+    component = mount(SnackBarComponent);
     const closeIconContent = component.find('CloseIcon').text();
     expect(closeIconContent).toMatch('close');
   });
 
   it('should the arial label os close button prop be the same of the props setted', () => {
-    const component = mount(SnackBarComponent);
+    component = mount(SnackBarComponent);
     const ariaLabelContent = component.find('CloseIcon').prop('aria-label');
     expect(CloseButtonAriaLabel).toMatch(ariaLabelContent);
   });
 
   it('(a11y) should the dialog has the same id of content', () => {
-    const component = mount(SnackBarComponent);
+    component = mount(SnackBarComponent);
     const snackBarDialogAriaDescribedBy = component
       .find('SnackBarDialog')
       .prop('aria-describedby');
@@ -81,16 +93,34 @@ describe('<SnackBar />', () => {
   });
 
   it('(a11y) should close component when the close button was confirmed by keyboard', () => {
-    const component = mount(SnackBarComponent);
+    component = mount(SnackBarComponent);
     component.find('CloseIcon').simulate('keypress', { key: 'Enter' });
     expect(onCloseEventMock).toHaveBeenCalled();
   });
 
-  it('(a11y) should focus the action button when component was rendered', () => {});
+  it('(a11y) should focus the action button when component was rendered', () => {
+    component = mount(SnackBarComponent);
+    const focusedElement = document.activeElement;
+    expect(component.find('ActionButton').getDOMNode()).toEqual(focusedElement);
+  });
+
+  it('(a11y) should close the component by secondsToClose prop time setted', () => {
+    component = mount(SnackBarComponent);
 
-  // it('should be child of body element', () => {
-  //   expect(document.body.childNodes.length).toBe(8);
-  //   mount(SnackBarComponent);
-  //   expect(document.body.childNodes.length).toBe(9);
-  // });
+    const secondsToCloseProp = component
+      .find('SnackBarDialog')
+      .prop('secondsToClose');
+
+    expect(secondsToCloseProp).toBe(secondsToClose);
+
+    setTimeout(() => {
+      expect(onCloseEventMock).toHaveBeenCalled();
+    }, secondsToClose);
+  });
+
+  it('should be child of body element', () => {
+    expect(document.body.childNodes.length).toBe(0);
+    mount(SnackBarComponent);
+    expect(document.body.childNodes.length).toBe(1);
+  });
 });