import { isPaternalExposeElements, getElementKey } from '..';

describe('isPaternalExposeElements', () => {
  beforeAll(() => {
    document.body.innerHTML = `
    <div id="app">
      <div id="container1" data-ml-root="true">
        <span id="c1"></span>
        <span id="c2">Aqua</span>
      </div>
      <div id="container2">
        <span id="c3"></span>
        <span id="c4">Aqua</span>
      </div>
    </div>
  `;
  });

  test('root is body, always ok if contains', () => {
    expect(isPaternalExposeElements(document.body, document.body)).toBe(true);
    expect(isPaternalExposeElements(document.body, document.getElementById('app'))).toBe(true);
    expect(isPaternalExposeElements(document.body, document.getElementById('container1'))).toBe(true);
    expect(isPaternalExposeElements(document.body, document.getElementById('c1'))).toBe(true);
    expect(isPaternalExposeElements(document.body, document.getElementById('c2'))).toBe(true);
    expect(isPaternalExposeElements(document.body, document.getElementById('container2'))).toBe(true);
    expect(isPaternalExposeElements(document.body, document.documentElement)).toBe(false);
  });

  test('root is not body, but has data-ml-root, ok', () => {
    expect(isPaternalExposeElements(document.getElementById('container1'), document.body)).toBe(false);
    expect(isPaternalExposeElements(document.getElementById('container1'), document.getElementById('app'))).toBe(false);
    expect(isPaternalExposeElements(document.getElementById('container1'), document.getElementById('container1'))).toBe(
      true,
    );
    expect(isPaternalExposeElements(document.getElementById('container1'), document.getElementById('c1'))).toBe(true);
    expect(isPaternalExposeElements(document.getElementById('container1'), document.getElementById('c2'))).toBe(true);
  });

  test('root is not body, and has no data-ml-root, not ok', () => {
    expect(isPaternalExposeElements(document.getElementById('app'), document.getElementById('container2'))).toBe(false);
    expect(isPaternalExposeElements(document.getElementById('container2'), document.body)).toBe(false);
    expect(isPaternalExposeElements(document.getElementById('container2'), document.getElementById('app'))).toBe(false);
    expect(isPaternalExposeElements(document.getElementById('container2'), document.getElementById('container2'))).toBe(
      false,
    );
    expect(isPaternalExposeElements(document.getElementById('container2'), document.getElementById('c3'))).toBe(false);
    expect(isPaternalExposeElements(document.getElementById('container2'), document.getElementById('c4'))).toBe(false);
  });

  test('root is not body, but has data-ml-root, but target is not child of root, not ok', () => {
    expect(isPaternalExposeElements(document.getElementById('container1'), document.getElementById('c3'))).toBe(false);
    expect(isPaternalExposeElements(document.getElementById('container1'), document.getElementById('c4'))).toBe(false);
  });
});

describe('getElementKey', () => {
  it('works ok', () => {
    document.body.innerHTML = `
      <div id="app">
        <div id="container1" ml-key="">
          <span id="c1" ml-key="0"></span>
          <span id="c2" ml-key="aqua">Aqua</span>
        </div>
        <div id="container2" data-ml-key="">
          <span id="c3" data-ml-key="0"></span>
          <span id="c4" data-ml-key="aqua">Aqua</span>
        </div>
      </div>
    `;
    expect(getElementKey(document.getElementById('app'))).toBe('');
    expect(getElementKey(document.getElementById('container1'))).toBe('');
    expect(getElementKey(document.getElementById('c1'))).toBe('0');
    expect(getElementKey(document.getElementById('c2'))).toBe('aqua');
    expect(getElementKey(document.getElementById('container2'))).toBe('');
    expect(getElementKey(document.getElementById('c3'))).toBe('0');
    expect(getElementKey(document.getElementById('c4'))).toBe('aqua');
  });
});