Merge pull request #3 from xflagstudio/follow_zendesk_ui_changes

Follow zendesk ui changes
xflagstudio · Aug 30, 2018 · c2a2eaa · c2a2eaa
2 parents 90c1457 + 02802a5
commit c2a2eaa
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 42 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -12,9 +12,9 @@ jobs:
           # fallback to using the latest cache if no exact match is found
           - v1-dependencies-
 
-      - run: yarn install
+      - run: npm install
       - save_cache:
           paths:
             - node_modules
           key: v1-dependencies-{{ checksum "package.json" }}
-      - run: yarn test
+      - run: npm test
diff --git a/test/zendesk-incident-protector.spec.js b/test/zendesk-incident-protector.spec.js
@@ -37,10 +37,14 @@ const defaultDOM = new JSDOM(`
 <!-- submit button -->
 <footer class="ticket-resolution-footer">
   <div class="ticket-resolution-footer-pane">
-    <div id="ember1234" class="ticket_submit_buttons">
-      <button class="save">
-      submit
-      </button>
+    <div id="ember1234" class="ember-view">
+      <div dir="ltr">
+        <div class="LRf LRg LRh LRi LRj">
+          <div data-garden-id="buttons.button_group_view" data-garden-version="3.4.0" class="ButtonGroupView-hogehoge index__l-btn-group___hugahuga" dir="ltr">
+            <button class="save">submit</button>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </footer>
@@ -67,7 +71,7 @@ window.localStorage = global.localStorage;
 
 describe('ValidatorManager', () => {
   const stub = sinon.stub($, 'filter');
-  const expectedButtonId = 'ember1234';
+  const expectedButtonViewId = 'ember1234';
 
   beforeEach(() => {
     validatorManager = new ValidatorManager();
@@ -78,52 +82,46 @@ describe('ValidatorManager', () => {
     stub.returns($(ValidatorManager.UI_CONSTANTS.selector.buttonArea));
   });
 
-  describe('getButtonId', () => {
-    it('returns id of parent element of button', () => {
-      validatorManager.getButtonId().should.equal(expectedButtonId);
-    });
-  });
-
   describe('addValidator', () => {
     it('adds button id into idsWithValidator', () => {
-      const targetWords = ['test', 'memo', '(aaa|xxx)'];
-      const buttonId    = expectedButtonId;
-      const locale      = 'ja';
+      const targetWords  = ['test', 'memo', '(aaa|xxx)'];
+      const buttonViewId = expectedButtonViewId;
+      const locale       = 'ja';
 
-      let validator = validatorManager.addValidator(targetWords, buttonId, locale);
+      let validator = validatorManager.addValidator(targetWords, buttonViewId, locale);
 
       (validator instanceof NGWordValidator).should.equal(true);
-      validatorManager.idsWithValidator.should.contain(expectedButtonId);
+      validatorManager.idsWithValidator.should.contain(expectedButtonViewId);
     });
   });
 
   describe('hasValidator', () => {
     context('before adding validator', () => {
       it('returns false', () => {
-        const buttonId = expectedButtonId;
-        validatorManager.hasValidator(buttonId).should.equal(false);
+        const buttonViewId = expectedButtonViewId;
+        validatorManager.hasValidator(buttonViewId).should.equal(false);
       });
     });
 
     context('after adding validator', () => {
       beforeEach(() => {
-        const targetWords = ['test', 'memo', '(aaa|xxx)'];
-        const buttonId    = expectedButtonId;
+        const targetWords  = ['test', 'memo', '(aaa|xxx)'];
+        const buttonViewId = expectedButtonViewId;
 
-        validatorManager.addValidator(targetWords, buttonId);
+        validatorManager.addValidator(targetWords, buttonViewId);
       });
 
       context('with added button id', () => {
         it('returns true', () => {
-          const buttonId = expectedButtonId;
-          validatorManager.hasValidator(buttonId).should.equal(true);
+          const buttonViewId = expectedButtonViewId;
+          validatorManager.hasValidator(buttonViewId).should.equal(true);
         });
       });
 
       context('with not added button id', () => {
         it('returns false', () => {
-          const buttonId = 'unknown';
-          validatorManager.hasValidator(buttonId).should.equal(false);
+          const buttonViewId = 'unknown';
+          validatorManager.hasValidator(buttonViewId).should.equal(false);
         });
       });
     });

diff --git a/zendesk-incident-protector.user.js b/zendesk-incident-protector.user.js
@@ -62,32 +62,40 @@
       return {
         selector: {
           sectionPanel: 'section.main_panes:not([style*="display:none"]):not([style*="display: none"])',
-          buttonArea: 'footer.ticket-resolution-footer div.ticket-resolution-footer-pane div.ticket_submit_buttons'
+          footerPanelArea: 'footer.ticket-resolution-footer div.ticket-resolution-footer-pane',
+          buttonViewArea: 'div div div[class ^= "ButtonGroupView"]'
         }
       };
     }
 
     targetButtonAreaSelector() {
       const idFilter = this.idsWithValidator.map(id => `:not([id='${id}'])`).join("");
 
-      return `${ValidatorManager.UI_CONSTANTS.selector.sectionPanel} ${ValidatorManager.UI_CONSTANTS.selector.buttonArea}${idFilter}`;
+      return `${ValidatorManager.UI_CONSTANTS.selector.sectionPanel} ${ValidatorManager.UI_CONSTANTS.selector.footerPanelArea} div${idFilter} ${ValidatorManager.UI_CONSTANTS.selector.buttonViewArea}`;
     }
 
-    getButtonId() {
-      let submitButton = $(ValidatorManager.UI_CONSTANTS.selector.buttonArea).filter(':visible');
-      return submitButton.attr('id');
+    getButtonViewId(dom) {
+      // NOTE:
+      // get nearest id attribute on parent div.ember-view
+      return $(dom).parent().parent().parent().attr('id');
     }
 
-    addValidator(targetWords, buttonId, locale) {
-      if (buttonId !== undefined && !this.hasValidator(buttonId)) {
-        this.idsWithValidator.push(buttonId);
+    addValidator(targetWords, buttonViewId, locale) {
+      if (buttonViewId !== undefined && !this.hasValidator(buttonViewId)) {
+        this.idsWithValidator.push(buttonViewId);
 
-        console.log(`button id added. id:${buttonId} idsWithValidator:${this.idsWithValidator}`);
+        console.log(`button view with id:${buttonViewId} added. idsWithValidator:${this.idsWithValidator}`);
 
-        let validator = new NGWordValidator(`${ValidatorManager.UI_CONSTANTS.selector.buttonArea}[id='${buttonId}'] button`, targetWords, locale);
-        validator.run();
+        const buttonDOM = `${ValidatorManager.UI_CONSTANTS.selector.footerPanelArea} div#${buttonViewId} ${ValidatorManager.UI_CONSTANTS.selector.buttonViewArea} button`;
 
-        return validator;
+        let ngWordValidator = new NGWordValidator(buttonDOM, targetWords, locale);
+
+        ngWordValidator.run();
+
+        return ngWordValidator;
+      }
+      if (this.hasValidator(buttonViewId)) {
+        console.log(`button area with id:${buttonViewId} has been already set validator.`);
       }
     }
 
@@ -271,10 +279,10 @@
           (object) => {
             console.log('submit button loaded!');
 
-            const targetWords = ngWordManager.toTargetWords(host);
-            const buttonId    = $(object).attr('id');
+            const targetWords  = ngWordManager.toTargetWords(host);
+            const buttonViewId = validatorManager.getButtonViewId(object);
 
-            validatorManager.addValidator(targetWords, buttonId, locale);
+            validatorManager.addValidator(targetWords, buttonViewId, locale);
           }
         )
         .catch((error) => {