fix: integration tests

nexxtway · Oct 14, 2019 · fb0c2a7 · fb0c2a7
1 parent fea6f0c
commit fb0c2a7
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 44 deletions.
diff --git a/integration/specs/Modal/modal-1.spec.js b/integration/specs/Modal/modal-1.spec.js
@@ -30,37 +30,37 @@ describe('Modal base example', () => {
         modal.waitUntilClose();
         expect(modal.isOpen()).toBe(false);
     });
-    it.skip('should close the modal when is opened and click the closeButton', () => {
+    it('should return focus to trigger element when close modal with ESC key', () => {
         const modal = new PageModal(MODAL);
         const triggerButton = $(BUTTON);
         triggerButton.click();
         modal.waitUntilOpen();
-        modal.clickCloseButton();
-        modal.waitUntilClose();
-        expect(modal.isOpen()).toBe(false);
+        browser.keys(ESCAPE_KEY);
+        expect(triggerButton.isFocused()).toBe(true);
     });
-    it('should return focus to trigger element when close modal with ESC key', () => {
+    it('should focus the close button when the modal is opened and press TAB', () => {
         const modal = new PageModal(MODAL);
         const triggerButton = $(BUTTON);
         triggerButton.click();
         modal.waitUntilOpen();
-        browser.keys(ESCAPE_KEY);
-        expect(triggerButton.isFocused()).toBe(true);
+        browser.keys(TAB_KEY);
+        expect(modal.hasFocusCloseButton()).toBe(true);
     });
-    it.skip('should return focus to trigger element when close modal with close button', () => {
+    it.skip('should close the modal when is opened and click the closeButton', () => {
         const modal = new PageModal(MODAL);
         const triggerButton = $(BUTTON);
         triggerButton.click();
         modal.waitUntilOpen();
         modal.clickCloseButton();
-        expect(triggerButton.isFocused()).toBe(true);
+        modal.waitUntilClose();
+        expect(modal.isOpen()).toBe(false);
     });
-    it('should focus the close button when the modal is opened and press TAB', () => {
+    it.skip('should return focus to trigger element when close modal with close button', () => {
         const modal = new PageModal(MODAL);
         const triggerButton = $(BUTTON);
         triggerButton.click();
         modal.waitUntilOpen();
-        browser.keys(TAB_KEY);
-        expect(modal.hasFocusCloseButton()).toBe(true);
+        modal.clickCloseButton();
+        expect(triggerButton.isFocused()).toBe(true);
     });
 });
diff --git a/integration/specs/Modal/modal-11.spec.js b/integration/specs/Modal/modal-11.spec.js
@@ -33,34 +33,6 @@ describe('Modal with redux form example', () => {
         modal.waitUntilOpen();
         expect(titleInput.getValue()).toBe('React Rainbow');
     });
-    it.skip('should return focus to date picker input when both modals are opened and press esc key', () => {
-        const modal = new PageModal(MODAL);
-        const triggerButton = $(BUTTON);
-        triggerButton.click();
-        modal.waitUntilOpen();
-        const datePickerInput = $(DATE_PICKER_INPUT);
-        datePickerInput.click();
-        modal.waitUntilOpen();
-        browser.keys(ESCAPE_KEY);
-        browser.waitUntil(() => !$('.rainbow-date-picker_modal').isDisplayed());
-        expect(datePickerInput.isFocused()).toBe(true);
-    });
-    it.skip('should return focus to time picker input when both modals are opened and select a time', () => {
-        const modal = new PageModal(MODAL);
-        const triggerButton = $(BUTTON);
-        triggerButton.click();
-        modal.waitUntilOpen();
-        const timePickerInput = $(TIME_PICKER_INPUT);
-        timePickerInput.click();
-        modal.waitUntilOpen();
-        browser.keys('0');
-        browser.keys('0');
-        browser.keys('0');
-        browser.keys('0');
-        browser.keys(ENTER_KEY);
-        browser.waitUntil(() => !$('.rainbow-time-picker_modal').isDisplayed());
-        expect(timePickerInput.isFocused()).toBe(true);
-    });
     it('should not close the modal when is opened and press ESC if the lookup has value typed', () => {
         const modal = new PageModal(MODAL);
         const triggerButton = $(BUTTON);
@@ -117,4 +89,44 @@ describe('Modal with redux form example', () => {
         browser.keys(ESCAPE_KEY);
         expect(modal.isOpen()).toBe(false);
     });
+    it.skip('should return focus to date picker input when both modals are opened and press esc key', () => {
+        const modal = new PageModal(MODAL);
+        const triggerButton = $(BUTTON);
+        triggerButton.click();
+        modal.waitUntilOpen();
+        const datePickerInput = $(DATE_PICKER_INPUT);
+        datePickerInput.click();
+        modal.waitUntilOpen();
+        browser.keys(ESCAPE_KEY);
+        browser.waitUntil(
+            () =>
+                !browser
+                    .react$('DatePicker')
+                    .react$('Modal')
+                    .isDisplayed(),
+        );
+        expect(datePickerInput.isFocused()).toBe(true);
+    });
+    it.skip('should return focus to time picker input when both modals are opened and select a time', () => {
+        const modal = new PageModal(MODAL);
+        const triggerButton = $(BUTTON);
+        triggerButton.click();
+        modal.waitUntilOpen();
+        const timePickerInput = $(TIME_PICKER_INPUT);
+        timePickerInput.click();
+        modal.waitUntilOpen();
+        browser.keys('0');
+        browser.keys('0');
+        browser.keys('0');
+        browser.keys('0');
+        browser.keys(ENTER_KEY);
+        browser.waitUntil(
+            () =>
+                !browser
+                    .react$('DatePicker')
+                    .react$('Modal')
+                    .isDisplayed(),
+        );
+        expect(timePickerInput.isFocused()).toBe(true);
+    });
 });
diff --git a/src/components/Modal/index.js b/src/components/Modal/index.js
@@ -134,6 +134,7 @@ export default class Modal extends Component {
                         size={size}
                     >
                         <StyledCloseButton
+                            id="modal-close-button"
                             icon={<CloseIcon />}
                             title="Close"
                             onClick={this.closeModal}

diff --git a/src/components/Modal/pageObject/index.js b/src/components/Modal/pageObject/index.js
@@ -20,11 +20,11 @@ class PageModal {
     clickCloseButton() {
         browser.waitUntil(() =>
             $(this.rootElement)
-                .$('.rainbow-modal_close-button')
+                .$('[id="modal-close-button"]')
                 .isDisplayed(),
         );
         $(this.rootElement)
-            .$('.rainbow-modal_close-button')
+            .$('[id="modal-close-button"]')
             .click();
     }
 
@@ -46,7 +46,7 @@ class PageModal {
                     .$('section[role="dialog"]')
                     .isDisplayed() &&
                 $(this.rootElement)
-                    .$('.rainbow-modal_close-button')
+                    .$('[id="modal-close-button"]')
                     .isDisplayed()
             );
         }
@@ -60,7 +60,7 @@ class PageModal {
      */
     hasFocusCloseButton() {
         return $(this.rootElement)
-            .$('.rainbow-modal_close-button')
+            .$('[id="modal-close-button"]')
             .isFocused();
     }