import { mount } from '@vue/test-utils';
import Vue from 'vue';
import Layout from '..';

const { Sider, Content } = Layout;

describe('Layout', () => {
  it('detect the sider as children', done => {
    const wrapper = mount({
      render() {
        return (
          <Layout>
            <Sider>Sider</Sider>
            <Content>Content</Content>
          </Layout>
        );
      },
    });
    Vue.nextTick(() => {
      expect(wrapper.find('.ant-layout').classes()).toContain('ant-layout-has-sider');
      done();
    });
  });

  it('detect the sider inside the children', done => {
    const wrapper = mount({
      render() {
        return (
          <Layout>
            <div>
              <Sider>Sider</Sider>
            </div>
            <Content>Content</Content>
          </Layout>
        );
      },
    });
    Vue.nextTick(() => {
      expect(wrapper.find('.ant-layout').classes()).toContain('ant-layout-has-sider');
      done();
    });
  });

  it('detect ant-layout-sider-has-trigger class in sider when ant-layout-sider-trigger div tag exists', done => {
    const wrapper = mount({
      render() {
        return (
          <Layout>
            <div>
              <Sider collapsible>Sider</Sider>
            </div>
            <Content>Content</Content>
          </Layout>
        );
      },
    });
    Vue.nextTick(() => {
      expect(wrapper.find('.ant-layout-sider').classes()).toContain('ant-layout-sider-has-trigger');
      done();
    });
  });
});