const path = require('path');
//@ts-ignore
let pageLocal = page;
describe('layout integration tests row layout', () => {
  beforeAll(async () => {
    await pageLocal.goto(`file:///${path.join(__dirname, '../resources/test-env/layout/layout-test.html')}`, {waitUntil: 'domcontentloaded'});
  });
  it('TC_FG_017, TC_FG_018, TC_FG_019, Verify that the user is able to specify the width of a column through , Verify that the user can define width using any of the following units px, em, rem, pt, %, Verify that invalid width inputs such as negative values, alphabets, alphanumerics are ignored and the default width is applied to a column', async (done)=>{
    const headerCellHanddle = await pageLocal.$('.fg-header-container');
    let cells = await headerCellHanddle.$$eval('.fg-header-cell', (nodes:any)=> {
      return nodes.map((node:any) => node.offsetWidth);
    });
    //TC_FG_017
    expect(cells[0]).toEqual(100);
    expect(cells[1]).toEqual(64);
    expect(cells[2]).toEqual(64);
    expect(cells[3]).toEqual(154);
    //TC_FG_018
    expect(cells[4]).toEqual(64);
    expect(cells[5]).toEqual(200);
    //TC_FG_019
    expect(cells[6]).toEqual(200);
    expect(cells[7]).toEqual(200);
    expect(cells[8]).toEqual(200);
    done();
  });
  it('TC_FG_086, Verify that the user is able to set the grid type row from configuration', async (done)=>{
    const rowLayoutGridhandle = await pageLocal.$('#grid-container'),
      rowLayoutHeader = await rowLayoutGridhandle.$$eval('.fg-header-container', (node:any)=>{return node});
    // also includes TC_FG_096
    expect(rowLayoutHeader).toBeDefined();
    done();
  });
});

describe('layout integration tests card layout', () => {
  beforeAll(async () => {
    await pageLocal.goto(`file:///${path.join(__dirname, '../resources/test-env/layout/cardLayout-test.html')}`, {waitUntil: 'domcontentloaded'});
  });
  it('TC_FG_086, Verify that the user is able to set the grid type from configuration card', async (done)=>{
    const cardLayoutGridhandle = await pageLocal.$('#grid-container-for-card'),
      cardLayoutHeader = await cardLayoutGridhandle.$$eval('.fg-layout-type-card', (node:any)=>{return node}),
      cardHeaderElements = await cardLayoutGridhandle.$$eval('.fg-card-header-content', (node:any)=>{return node});
    // Layout type card is set, hence fg-layout-type-card must be present
    expect(cardLayoutHeader).toBeDefined();
    expect(cardHeaderElements).toBeDefined();
    done();
  });
  it('TC_FG_095,Verify that if the user does not specify a custom template in card layout, default styling is applied.', async (done)=>{
    const cardLayoutGridhandle = await pageLocal.$('#grid-container-for-card'),
      cardHeaderElements = await cardLayoutGridhandle.$$eval('.fg-card-header-content', (node:any)=>{return node});
    expect(cardHeaderElements).toBeDefined();
    done();
  });
  it('TC_FG_097,Verify that by default, if the volume of data in a grid cannot be accommodated in the space provided, vertical sroll bars appear', async (done)=>{
    const cardLayoutGridhandle = await pageLocal.$('#grid-container-for-card'),
      cardScrollerElement = await cardLayoutGridhandle.$$eval('.fg-card-scroller', (nodes:any)=>{
        return nodes.map((node:any) => node.scrollHeight);
      });
    // scrollheight to be greater than card-container height
    expect(cardScrollerElement[0]).toBeGreaterThan(600);
    done();
  });
  it('TC_FG_101,Verify that, each card in a single row has the same width - if the content does not fit in the width, it gets truncated with ellipses and tooltip.', async (done)=>{
    const cardLayoutGridhandle = await pageLocal.$('#grid-container-for-card'),
      cardCellTexts = await cardLayoutGridhandle.$$eval('.fg-card-cell-content', (nodes:any)=>{
        return nodes.map((node:any) => {return {innerText: node.innerText, width: node.clientWidth, height: node.clientHeight}; });
      });
    // no direct way to verify text ellipses appears hence checked long text and small width, height appeared
    expect(cardCellTexts[11].innerText).toBe('Duis bibendum, felis sed interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.');
    expect(cardCellTexts[11].width).toBe(168);
    expect(cardCellTexts[11].height).toBe(15);
    done();
  });
});