Enhance search page component e2e test verification with pattern

matching against mocked data

Author: gurbirkalsi

web-server/v0.4/mock/api.js

@@ -74,6 +74,11 @@ export const mockMappings = {
               user: { type: 'string', index: 'not_analyzed' },
             },
           },
+          '@metadata': {
+            properties: {
+              controller_dir: { type: 'string', index: 'not_analyzed' },
+            },
+          },
         },
       },
     },
@@ -92,6 +97,9 @@ export const mockSearch = {
             script: 'test',
             user: 'test_user',
           },
+          '@metadata': {
+            controller_dir: 'test_controller',
+          },
         },
       },
     ],

web-server/v0.4/src/e2e/search.e2e.js

@@ -45,55 +45,69 @@ afterAll(() => {
 });
 
 describe('search page component', () => {
-  test(
-    'should load run mapping',
-    async done => {
-      await page.waitForSelector('.ant-table-tbody', { visible: true });
-      done();
-    },
-    30000
-  );
+  test('should load month indices', async () => {
+    await page.waitForSelector(
+      '.ant-form-item-control > .ant-form-item-children > .ant-select > .ant-select-selection > .ant-select-selection__rendered'
+    );
+    const testMonth = await page.$eval(
+      '.ant-select-selection > .ant-select-selection__rendered > ul > li.ant-select-selection__choice',
+      elem => elem.getAttribute('title')
+    );
+    expect(testMonth).toBe(mockIndices[0].index.split('.').pop());
+  });
+
+  test('should load mappings', async () => {
+    await page.waitForSelector(
+      'div.ant-col.ant-col-md-24.ant-col-lg-7 > div > div.ant-card-body > div:nth-child(2) > p:nth-child(2) > span:nth-child(1)'
+    );
+    const testField = await page.$eval(
+      'div.ant-col.ant-col-md-24.ant-col-lg-7 > div > div.ant-card-body > div:nth-child(2) > p:nth-child(2) > span:nth-child(1)',
+      elem => elem.innerHTML
+    );
+    expect(testField).toBe('config');
+  });
+
+  test('should select month index', async () => {
+    await page.waitForSelector('.ant-select-selection', { visible: true });
+    await page.click('.ant-select-selection');
+    await page.click('.ant-select-dropdown-menu-item');
+    await page.click('.ant-select-dropdown-menu-item[aria-selected="false"]');
+  });
 
-  test('should select search filter tag', async () => {
+  test('should select field tag', async () => {
     await page.waitForSelector('.ant-tag', { visible: true });
     await page.click('.ant-tag');
   });
 
-  test('should reset search filter tags', async () => {
-    await page.waitForSelector('button[name="Reset"]', { visible: true });
-    await page.click('button[name="Reset"]');
+  test('should apply filter changes', async () => {
+    await page.waitForSelector(
+      '.ant-card-head > .ant-card-head-wrapper > .ant-card-extra > div > .ant-btn-primary'
+    );
+    await page.click(
+      '.ant-card-head > .ant-card-head-wrapper > .ant-card-extra > div > .ant-btn-primary'
+    );
+  });
+
+  test('should reset filter changes', async () => {
+    await page.waitForSelector(
+      '.ant-card-head > .ant-card-head-wrapper > .ant-card-extra > div > .ant-btn:nth-child(1)'
+    );
+    await page.click(
+      '.ant-card-head > .ant-card-head-wrapper > .ant-card-extra > div > .ant-btn:nth-child(1)'
+    );
   });
 
   test('should input search query', async () => {
     await page.type('.ant-input', 'test', { delay: 50 });
   });
 
-  test(
-    'should execute search query',
-    async () => {
-      await page.waitForSelector('.ant-input-search-button', { visible: true });
-      await page.click('.ant-input-search-button');
-      await page.waitForResponse(response => response.status() === 200);
-    },
-    30000
-  );
-
-  test('should select month index', async () => {
-    await page.waitForSelector('.ant-select-selection', { visible: true });
-    await page.click('.ant-select-selection');
-    await page.click('.ant-select-dropdown-menu-item');
-    await page.click('.ant-select-dropdown-menu-item[aria-selected="false"]');
+  test('should execute search query', async () => {
+    await page.waitForSelector('.ant-input-search-button', { visible: true });
+    await page.click('.ant-input-search-button');
+    const testResult = await page.$eval(
+      '.ant-table-tbody > tr > td:nth-child(2)',
+      elem => elem.innerHTML
+    );
+    expect(testResult).toBe('test_run');
   });
-
-  test(
-    'should update search results for selected month index',
-    async done => {
-      await page.waitForSelector('button[name="Apply"]', { visible: true });
-      await page.click('button[name="Apply"]');
-      await page.waitForResponse(response => response.status() === 200);
-      await page.waitForSelector('.ant-table-tbody', { visible: true });
-      done();
-    },
-    30000
-  );
 });