describe('Performance', ()=>{
  beforeEach(() => {
    cy.visit('https://REDACTED-HOST/files');
    cy.login();
    cy.visit('https://REDACTED-HOST/files');
    cy.url().should('include', 'files');
    cy.contains('li', 'COMPARE').click();
  });

  it('Compare dropdown sorting Test', () => {
    const expectedOptions =
    ['By File Name (A to Z)', 'By File Name (Z to A)', 'By Dependency (A to Z)', 'By Dependency (Z to A)', 'By File Type (A to Z)', 'By File Type (Z to A)', 'By Last Update (A to Z)', 'By Last Update (Z to A)'];

    cy.url().should('include', 'files');
    cy.get('.p-dropdown').click();
    cy.get('.p-dropdown-items')
    .find('.p-dropdown-item')
    .then($options => {
      const actualOptions = $options.map((index, elem) => Cypress.$(elem).find('.p-dropdown-item-label').text()).get()
      expect(actualOptions).to.deep.equal(expectedOptions)
    })
  })

  it('Grid Card Sorting Test', () => {
    let originalData = [];
    let sortedData = [];

    cy.url().should('include', 'files');
    cy.get('#compareGridCards').find('li').each($card => {
      originalData.push($card.find('div h3').text().trim());
    });
    // Sort: By File Name (A to Z)
    cy.get('.p-dropdown').click();
    cy.contains('.p-dropdown-item', 'By File Name (A to Z)').click();
    cy.wait(2000);
    cy.get('#compareGridCards').find('li').each($card => {
      sortedData.push($card.find('div h3').text().trim());
    });
    expect(sortedData).to.deep.equal(originalData.sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase())));
    // Sort: By File Name (Z to A)
    sortedData = [];
    cy.get('.p-dropdown').click();
    cy.contains('.p-dropdown-item', 'By File Name (Z to A)').click();
    cy.wait(2000);
    cy.get('#compareGridCards').find('li').each($card => {
      sortedData.push($card.find('div h3').text().trim());
    });
    expect(sortedData).to.deep.equal(originalData.sort((a, b) => a.name.toLowerCase().localeCompare(b.name.toLowerCase())).reverse());
    // Sort: By Dependency (A to Z)
    cy.get('.p-dropdown').click();
    sortedData = [];
    cy.contains('.p-dropdown-item', 'By Dependency (A to Z)').click();
    cy.wait(2000);
    cy.get('#compareGridCards').find('li').each($card => {
      sortedData.push($card.find('div h3').text().trim());
    });
    expect(sortedData).to.deep.equal(originalData.sort((a, b) => a.parentLog.toLowerCase().localeCompare(b.parentLog.toLowerCase())));
    // Sort: By Dependency (Z to A)
    cy.get('.p-dropdown').click();
    sortedData = [];
    cy.contains('.p-dropdown-item', 'By Dependency (Z to A)').click();
    cy.wait(2000);
    cy.get('#compareGridCards').find('li').each($card => {
      sortedData.push($card.find('div h3').text().trim());
    });
    expect(sortedData).to.deep.equal(originalData.sort((a, b) => a.parentLog.toLowerCase().localeCompare(b.parentLog.toLowerCase())).reverse());
    // Sort: By File Type (A to Z)
    cy.get('.p-dropdown').click();
    sortedData = [];
    cy.contains('.p-dropdown-item', 'By File Type (A to Z)').click();
    cy.wait(2000);
    cy.get('#compareGridCards').find('li').each($card => {
      sortedData.push($card.find('div h3').text().trim());
    });
    expect(sortedData).to.deep.equal(originalData.sort((a, b) => a.fileType.toLowerCase().localeCompare(b.fileType.toLowerCase())));
    // Sort: By File Type (Z to A)
    cy.get('.p-dropdown').click();
    sortedData = [];
    cy.contains('.p-dropdown-item', 'By File Type (Z to A)').click();
    cy.wait(2000);
    cy.get('#compareGridCards').find('li').each($card => {
      sortedData.push($card.find('div h3').text().trim());
    });
    expect(sortedData).to.deep.equal(originalData.sort((a, b) => a.fileType.toLowerCase().localeCompare(b.fileType.toLowerCase())).reverse());
    // Sort: By Last Update (A to Z)
    cy.get('.p-dropdown').click();
    sortedData = [];
    cy.contains('.p-dropdown-item', 'By Last Update (A to Z)').click();
    cy.wait(2000);
    cy.get('#compareGridCards').find('li').each($card => {
      sortedData.push($card.find('div h3').text().trim());
    });
    expect(sortedData).to.deep.equal(originalData.sort((a, b) => new Date(a.updated_base) - new Date(b.updated_base)));
    // Sort: By Last Update (Z to A)
    cy.get('.p-dropdown').click();
    sortedData = [];
    cy.contains('.p-dropdown-item', 'By Last Update (Z to A)').click();
    cy.wait(2000);
    cy.get('#compareGridCards').find('li').each($card => {
      sortedData.push($card.find('div h3').text().trim());
    });
    expect(sortedData).to.deep.equal(originalData.sort((a, b) => new Date(a.updated_base) - new Date(b.updated_base)).reverse());
  })

  it('Enter Compare', () => {
    cy.url().should('include', 'files');
    cy.contains('button', 'Compare').should('be.disabled'); // 斷言按鈕為禁用狀態
    // 安裝套件: cypress-drag-drop
    cy.get('#compareFile0').drag('#primaryDragCard');
    cy.get('#compareFile1').drag('#secondaryDragCard');
    // Enter Compare
    cy.contains('button', 'Compare').click();
    cy.contains('h2', 'COMPARE');
    cy.url().should('include', 'compare');
    cy.wait(2000);
    // 斷言排序
    // 斷言頁面中有 6 個 canvas 元素
    cy.get('canvas').should('have.length', 6);
    // 斷言狀態欄
    cy.get('#compareState').click();
    cy.wait(3000); // 等待渲染
    cy.get('.p-sidebar-content li').first().then($li => {
      const percentage = $li.find('span').eq(1).text();
      expect(percentage).to.match(/^\d+(\.\d+)?%$/); // 使用正則表達式來確認文字內容是否符合數字 + % 符號的組合
    });
  });

  it('Anchor', () => {
    // enter Map
    cy.url().should('include', 'files');
    cy.get('#compareFile0').drag('#primaryDragCard');
    cy.get('#compareFile1').drag('#secondaryDragCard');
    cy.contains('button', 'Compare').click();
    cy.contains('h2', 'COMPARE');
    cy.url().should('include', 'compare');
    cy.wait(2000);
    // Anchor 網頁不會捲動到錨點位置是因為 Cypress 是模擬使用者行為而非準確瀏覽器行為
    cy.get('aside li a[href="#cycleTime"]').click();
    cy.url().should('include', '#cycleTime');
    cy.get('aside li a[href="#processingTime"]').click();
    cy.url().should('include', '#processingTime');
    cy.get('aside li a[href="#waitingTime"]').click();
    cy.url().should('include', '#waitingTime');
    cy.get('aside li a[href="#cases"]').click();
    cy.url().should('include', '#cases');
  });
})
