Update documentation for #221

packages/desktop/src/renderer/app/components/modals/auth-modal/auth-modal.component.html

@@ -42,7 +42,11 @@ <h4 class="modal-title">Log into your account</h4>
     </div>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-secondary" (click)="closeModal()">
+    <button
+      type="button"
+      class="btn btn-secondary modal-close"
+      (click)="closeModal()"
+    >
       Close
     </button>
   </div>

packages/desktop/src/renderer/app/components/modals/changelog-modal/changelog-modal.component.html

@@ -18,7 +18,11 @@ <h4 class="modal-title">
     </markdown>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-secondary" (click)="close()">
+    <button
+      type="button"
+      class="btn btn-secondary modal-close"
+      (click)="close()"
+    >
       Close
     </button>
   </div>

packages/desktop/src/renderer/app/components/modals/duplicate-modal/duplicate-modal.component.html

@@ -36,7 +36,11 @@ <h3 class="modal-title">
     </div>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-secondary" (click)="closeModal()">
+    <button
+      type="button"
+      class="btn btn-secondary modal-close"
+      (click)="closeModal()"
+    >
       Cancel
     </button>
   </div>

packages/desktop/src/renderer/app/components/modals/editor-modal/editor-modal.component.html

@@ -15,7 +15,11 @@ <h4 class="modal-title">{{ data.title | titlecase }}</h4>
       </div>
     </div>
     <div class="modal-footer">
-      <button type="button" class="btn btn-secondary" (click)="close()">
+      <button
+        type="button"
+        class="btn btn-secondary modal-close"
+        (click)="close()"
+      >
         Close
       </button>
     </div>

packages/desktop/src/renderer/app/components/modals/settings-modal/settings-modal.component.html

@@ -271,7 +271,11 @@ <h4 class="modal-title">Settings</h4>
       </div>
     </div>
     <div class="modal-footer">
-      <button type="button" class="btn btn-secondary" (click)="close()">
+      <button
+        type="button"
+        class="btn btn-secondary modal-close"
+        (click)="close()"
+      >
         Close
       </button>
     </div>

packages/desktop/src/renderer/app/components/modals/templates-modal/templates-modal.component.html

@@ -299,7 +299,11 @@ <h4 class="text-center my-4 pl-4 text-shadow w-50">
         </div>
 
         <div class="ml-auto">
-          <button type="button" class="btn btn-secondary" (click)="close()">
+          <button
+            type="button"
+            class="btn btn-secondary modal-close"
+            (click)="close()"
+          >
             Close
           </button>
 

packages/desktop/src/renderer/app/components/modals/welcome-modal/welcome-modal.component.html

@@ -10,7 +10,11 @@ <h4 class="modal-title">Welcome new Mockoon user!</h4>
     </p>
   </div>
   <div class="modal-footer">
-    <button type="button" class="btn btn-secondary" (click)="closeModal()">
+    <button
+      type="button"
+      class="btn btn-secondary modal-close"
+      (click)="closeModal()"
+    >
       Start using Mockoon
     </button>
   </div>

packages/desktop/test/libs/modals.ts

@@ -19,7 +19,7 @@ class Modals {
   }
 
   private get closeBtn(): ChainablePromiseElement<WebdriverIO.Element> {
-    return $('.modal-dialog .modal-footer button');
+    return $('.modal-dialog .modal-footer button.modal-close');
   }
 
   private get title(): ChainablePromiseElement<WebdriverIO.Element> {

packages/desktop/test/libs/routes.ts

@@ -22,6 +22,13 @@ class Routes {
     params: 5,
     request_number: 6
   };
+  private rulesOperatorsIndexes = {
+    equals: 1,
+    regex: 2,
+    regex_i: 3,
+    null: 4,
+    empty_array: 5
+  };
   private activeMenuEntrySelector = '.routes-menu .nav-item .nav-link.active';
 
   public get bodyTypeToggle(): ChainablePromiseElement<WebdriverIO.Element> {
@@ -107,6 +114,10 @@ class Routes {
     return $('#route-responses-menu #route-response-duplication-button');
   }
 
+  public get routeResponseStatusDropdown(): ChainablePromiseElement<WebdriverIO.Element> {
+    return $('#status-code-dropdown');
+  }
+
   public get routeResponseDropdownlabel(): ChainablePromiseElement<WebdriverIO.Element> {
     return $('#route-responses-dropdown .dropdown-toggle-label');
   }
@@ -337,6 +348,10 @@ class Routes {
     await utils.assertDropdownValue('method', expected);
   }
 
+  public async setMethod(index: number) {
+    await utils.setDropdownValue('methods', index);
+  }
+
   public async assertPath(expected: string) {
     expect(await this.pathInput.getValue()).toEqual(expected);
   }
@@ -370,6 +385,10 @@ class Routes {
     await utils.assertDropdownValue('statusCode', expected);
   }
 
+  public async setRouteResponseStatusCode(statusIndex: number) {
+    await utils.setDropdownValue('status-code', statusIndex);
+  }
+
   public async setFile(value: string): Promise<void> {
     await utils.setElementValue(this.fileInput, value);
   }
@@ -497,12 +516,19 @@ class Routes {
       ),
       rule.modifier
     );
-    await utils.setElementValue(
-      $(
-        'app-route-response-rules .rule-item:last-of-type .form-inline input[formcontrolname="value"]'
-      ),
-      rule.value
+    await utils.setDropdownValue(
+      `rules${lastRuleIndex}operator`,
+      this.rulesOperatorsIndexes[rule.operator]
     );
+
+    if (rule.operator !== 'null') {
+      await utils.setElementValue(
+        $(
+          'app-route-response-rules .rule-item:last-of-type .form-inline input[formcontrolname="value"]'
+        ),
+        rule.value
+      );
+    }
   }
 
   public async removeResponseRule(index: number) {

packages/desktop/test/tools/documentation.spec.ts

@@ -1615,6 +1615,9 @@ const documentationTopics: {
           // account for openai api call
           await browser.pause(20000);
         },
+        postTasks: async () => {
+          await modals.close();
+        },
         get highlightedTarget() {
           return $('.modal-footer .ml-auto button:last-of-type');
         },
@@ -1628,6 +1631,82 @@ const documentationTopics: {
         fileName: 'templates-generate-get-route.png'
       }
     ]
+  },
+  {
+    enabled: true,
+    folder: 'route-responses/global-routes-with-rules',
+    screenshots: [
+      {
+        tasks: async () => {
+          await routes.addHTTPRoute();
+          await routes.setPath('*');
+          await routes.setMethod(1);
+
+          await routes.addHTTPRoute();
+          await routes.setPath('users');
+
+          await routes.select(1);
+        },
+        get highlightedTarget() {
+          return routes.getMenuItem(1);
+        },
+        highlight: true,
+        highlightGaps: { top: 0, right: 0, bottom: 0, left: 0 },
+        screenshotPosition: { left: 0, top: 0 },
+        screeenshotGaps: { right: 300, bottom: 200 },
+        fileName: 'create-wildcard-route.png'
+      },
+      {
+        tasks: async () => {
+          await routes.toggleRouteResponseFallback();
+        },
+        get highlightedTarget() {
+          return routes.fallbackResponseBtn;
+        },
+        highlight: true,
+        screenshotPosition: { right: 0 },
+        highlightGaps: { top: 0, right: 0, bottom: 0, left: 0 },
+        screeenshotGaps: { top: 20, bottom: 120, left: 960 },
+        fileName: 'activate-fallback-mode.png'
+      },
+      {
+        tasks: async () => {
+          // 401
+          await routes.setRouteResponseStatusCode(30);
+        },
+        get highlightedTarget() {
+          return routes.routeResponseStatusDropdown;
+        },
+        get screenshotTarget() {
+          return routes.routeResponseDropdownlabel;
+        },
+        highlight: true,
+        screenshotPosition: { right: 0 },
+        highlightGaps: { top: 0, right: 0, bottom: 0, left: 0 },
+        screeenshotGaps: { top: 40, bottom: 200, left: 100 },
+        fileName: 'response-status-code-401.png'
+      },
+      {
+        tasks: async () => {
+          await routes.switchTab('RULES');
+          await routes.addResponseRule({
+            target: 'header',
+            invert: false,
+            modifier: 'Authorization',
+            operator: 'null',
+            value: ''
+          });
+        },
+        get highlightedTarget() {
+          return routes.getResponseRule(1);
+        },
+        highlight: true,
+        screenshotPosition: { right: 0 },
+        highlightGaps: { top: 10, right: 5, bottom: 40, left: 10 },
+        screeenshotGaps: { top: 200, bottom: 20, left: 20 },
+        fileName: 'response-rule-header-null.png'
+      }
+    ]
   }
 ];