github.com/siglens/siglens@v0.0.0-20240328180423-f7ce9ae441ed/ui-test/specs/available-fields/available-fields.js (about)

     1  /*
     2  Copyright 2023.
     3  
     4  Licensed under the Apache License, Version 2.0 (the "License");
     5  you may not use this file except in compliance with the License.
     6  You may obtain a copy of the License at
     7  
     8      http://www.apache.org/licenses/LICENSE-2.0
     9  
    10  Unless required by applicable law or agreed to in writing, software
    11  distributed under the License is distributed on an "AS IS" BASIS,
    12  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    13  See the License for the specific language governing permissions and
    14  limitations under the License.
    15  */
    16  
    17  /**
    18   * siglens
    19   * (c) 2022 - All rights reserved.
    20   */
    21  
    22  'use strict';
    23  
    24  describe('avaialble fields',  () => {
    25      let page;
    26  
    27      before(async () => {
    28          page = await browser.newPage();
    29  
    30          page.on('error', (err) => {
    31              console.error('error happen at the page: ', err);
    32          });
    33  
    34          page.on('pageerror', (pageerr) => {
    35              console.error('pageerror occurred: ', pageerr);
    36          });
    37  
    38          await page.goto(`file://${__dirname}/available-fields.html`);
    39      });
    40  
    41      afterEach(async () => {
    42          // reset after each test
    43          await page.evaluate(() => {
    44              defaultColumnCount = 0;
    45              resetAvailableFields();
    46          });
    47      });
    48  
    49      it('should have the correct page title', async () => {
    50          expect(await page.title()).to.eql('SigLens - Available Fields');
    51      });
    52  
    53      it.skip('should have the first 3 fields checked', async () => {
    54          // const selector = '#available-fields .fields';
    55          let selector = '#available-fields .toggle-field';
    56  
    57          await page.evaluate(() => {
    58              defaultColumnCount = 3;
    59              let columnOrder = [
    60                  "_index",
    61                  "batch",
    62                  "browser_language",
    63                  "browser_name",
    64                  "browser_user_agent",
    65                  "click_id",
    66                  "device_is_mobile",
    67                  "device_type",
    68                  "eventType",
    69                  "event_id",
    70                  "geo_country",
    71                  "geo_latitude",
    72                  "geo_longitude",
    73                  "geo_region_name",
    74                  "geo_timezone",
    75                  "ip_address",
    76                  "os",
    77                  "os_name",
    78                  "os_timezone",
    79                  "page_url",
    80                  "page_url_path",
    81                  "referer_medium",
    82                  "referer_url",
    83                  "referer_url_port",
    84                  "referer_url_scheme",
    85                  "timestamp",
    86                  "user_custom_id",
    87                  "user_domain_id",
    88                  "utm_campaign",
    89                  "utm_content",
    90                  "utm_medium",
    91                  "utm_source"
    92              ];
    93              renderAvailableFields(columnOrder);
    94          });
    95  
    96          await page.waitForSelector(selector);
    97  
    98          let fields = await page.$$eval(selector, (elements) => {
    99              // this is running in the webpage's context
   100              // so we'll need to use a plain object to pass back data
   101              return elements.map(el => {
   102                  return {
   103                      html: el.outerHTML,
   104                      index: el.dataset.index,
   105                      checked: $(el).find('.toggle-field').hasClass('active')
   106                  };
   107              });
   108          });
   109  
   110          console.log('>>>', fields);
   111  
   112          // only the first 3 should be checked
   113          expect(fields[0].checked).to.be.true;
   114          expect(fields[1].checked).to.be.true;
   115          expect(fields[2].checked).to.be.true;
   116  
   117          expect(fields[3].checked).to.be.false;
   118      });
   119  
   120  
   121      it.skip('should have the first 2 fields checked', async () => {
   122          let selector = '#available-fields .toggle-field';
   123  
   124          await page.evaluate(() => {
   125              defaultColumnCount = 2;
   126              let columnOrder = [
   127                  "_index",
   128                  "batch",
   129                  "browser_language",
   130                  "browser_name",
   131                  "browser_user_agent",
   132                  "click_id",
   133                  "device_is_mobile",
   134                  "device_type",
   135                  "eventType",
   136                  "event_id",
   137                  "geo_country",
   138                  "geo_latitude",
   139                  "geo_longitude",
   140                  "geo_region_name",
   141                  "geo_timezone",
   142                  "ip_address",
   143                  "os",
   144                  "os_name",
   145                  "os_timezone",
   146                  "page_url",
   147                  "page_url_path",
   148                  "referer_medium",
   149                  "referer_url",
   150                  "referer_url_port",
   151                  "referer_url_scheme",
   152                  "timestamp",
   153                  "user_custom_id",
   154                  "user_domain_id",
   155                  "utm_campaign",
   156                  "utm_content",
   157                  "utm_medium",
   158                  "utm_source"
   159              ];
   160              renderAvailableFields(columnOrder);
   161          });
   162  
   163          await page.waitForSelector(selector);
   164  
   165          let fields = await page.$$eval(selector, (elements) => {
   166              // this is running in the webpage's context
   167              // so we'll need to use a plain object to pass back data
   168              return elements.map(el => {
   169                  return {
   170                      html: el.outerHTML,
   171                      index: el.dataset.index,
   172                      checked: $(el).find('.toggle-field').hasClass('fa-square-check')
   173                  };
   174              });
   175          });
   176  
   177          // only the first 2 should be checked
   178          expect(fields[0].checked).to.be.true;
   179          expect(fields[1].checked).to.be.true;
   180  
   181          expect(fields[2].checked).to.be.false;
   182          expect(fields[3].checked).to.be.false;
   183      });
   184  
   185      it('should reset the available field', async () => {
   186          await page.click('#reset-fields');
   187  
   188          let fields = await page.$eval('#available-fields .fields', (el) => {
   189              return el.innerHTML;
   190          });
   191  
   192          expect(fields).to.be.empty;
   193      });
   194  });