const { setUp } = require('./helpers');

describe('Data rendering', () => {
  beforeAll(async () => {
    await setUp(page);
  });

  it('should have a <select> element with sorted <option> elements', () =>
    page
      .evaluate(() => {
        const nodeList = document.querySelectorAll('select > option');
        return Array.from(nodeList).map(el => el.innerText);
      })
      .then(values => {
        expect(values.length).toBeGreaterThan(0);
        if (values.length > 0) {
          const sortedValues = [...values].sort((a, b) => a.localeCompare(b));
          expect(values).toEqual(sortedValues);
        }
      }));

  it('should initially render the alumni repo from the select element', async () => {
    const result = await page.evaluate(() => {
      const root = document.querySelector('#root');
      return root.innerText.includes('Alumni Guides');
    });
    expect(result).toBe(true);
  });

  it('should display the JavaScript3 repo upon selection', async () => {
    const optionValue = await page.evaluate(() => {
      const option = Array.from(document.querySelectorAll('select > option')).find(
        opt => opt.innerText === 'JavaScript3',
      );
      return option ? option.getAttribute('value') : null;
    });

    let result = { repoNameFound: false, contributorNameFound: true };

    if (optionValue) {
      await page.select('select', optionValue);
      await page.waitFor(1000);
      result = await page.evaluate(() => {
        const root = document.querySelector('#root');
        const repoNameFound = root.innerText.includes('JavaScript3 module');
        const contributorNameFound = root.innerText.includes('mkruijt');
        return { repoNameFound, contributorNameFound };
      });
    }

    expect(result).toEqual({ repoNameFound: true, contributorNameFound: true });
  });
});