import React, { useCallback, useEffect } from 'react';
import { teamixTest } from '@teamix/testing-capability';

const InnerTest = () => {
  useEffect(() => {
    const $e = document.querySelector('#e');
    $e.addEventListener('click', () => {
      console.log('click :>> ', $e);
    });
  }, []);

  useEffect(() => {
    setTimeout(async () => {
      const result = await teamixTest({
        element: '#test',
        testItem: ['INVALIDSTYLE'],
        infoLimit: 10, // 为减少数据库压力，巡检任务默认为2，如需更多信息可通过Chrome插件自行检测
      });

      console.log('INVALIDSTYLE 测试结果 => ', result);
    }, 1000);
  }, []);

  const event = useCallback((e) => {
    console.log('onclick :>> ', e.target.onclick);
    console.log('onmouseenter :>> ', e.target.onmouseenter);
  }, []);

  return (
    <section id="test">
      <p>
        <a id="a" href="https://aliyun.com/" style={{ cursor: 'pointer' }}>
          a标签有href
        </a>
      </p>
      <p>
        <a id="b" style={{ cursor: 'pointer' }}>
          a标签无href
        </a>
      </p>
      <p>
        <a id="c" onClick={event} style={{ cursor: 'pointer' }}>
          有onClick事件
        </a>
      </p>
      <p id="d" style={{ cursor: 'pointer' }}>
        无onClick事件
      </p>
      <p id="e" style={{ cursor: 'pointer' }}>
        有getEventListener
      </p>
      <p id="f" style={{ cursor: 'pointer' }}>
        无getEventListener
      </p>
      <p id="g" style={{ cursor: 'move' }}>
        非手型且无事件
      </p>
      <p id="h" onMouseEnter={event} style={{ cursor: 'pointer' }}>
        有onMouseEnter事件，未判断Mouse事件，归类为无onClick
      </p>
      <p id="i" onClick={event} style={{ cursor: 'pointer' }}>
        <span id="ii">我没有事件，但是我继承了父元素的pointer</span>
      </p>
    </section>
  );
};

export default InnerTest;