import { afterEach, beforeEach, describe, expect, it } from 'vitest';
import { hide, show } from './dom';

describe('hide / show', () => {
  beforeEach(() => {
    document.body.innerHTML = '';
  });

  afterEach(() => {
    document.body.innerHTML = '';
  });

  describe('hide', () => {
    it('display を none に切り替える', () => {
      const el = document.createElement('div');
      document.body.appendChild(el);

      hide(el);

      expect(el.style.display).toBe('none');
    });

    it('すでに display:none の要素には何もしない', () => {
      const el = document.createElement('div');
      el.style.display = 'none';
      document.body.appendChild(el);

      hide(el);

      expect(el.style.display).toBe('none');
    });
  });

  describe('show', () => {
    it('hide() で隠した要素を元の display 値に戻す', () => {
      const el = document.createElement('div');
      el.style.display = 'flex';
      document.body.appendChild(el);

      hide(el);
      show(el);

      expect(el.style.display).toBe('flex');
    });

    it('HTML 側で style="display: none" を指定された要素はインライン指定を外す', () => {
      const el = document.createElement('div');
      el.setAttribute('style', 'display: none');
      document.body.appendChild(el);

      show(el);

      // インラインの display 指定が外れている
      expect(el.style.display).toBe('');
    });

    it('既に表示されている要素には何もしない', () => {
      const el = document.createElement('div');
      el.style.display = 'flex';
      document.body.appendChild(el);

      show(el);

      expect(el.style.display).toBe('flex');
    });
  });
});
