import React from 'react';
import { mount } from 'enzyme';

import PageLayout, { LAYOUT_TYPES } from './PageLayout';
import OneColumnLayout from './OneColumnLayout';
import TwoColumnLayout from './TwoColumnLayout';

describe('PageLayout', () => {
  it('OneColumnLayout should match the snapshot', () => {
    const component = mount(
      <PageLayout
        header={{
          page: 'styleguide-test',
          currentPageType: 'product',
          links: [],
          theme: 'white',
        }}
        footer={{
          variant: 'transparent',
        }}
        actions={[]}
        layoutType={LAYOUT_TYPES.ONE_COLUMN}
      >
        <OneColumnLayout>
          <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
            ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
            nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
            anim id est laborum.
          </div>
        </OneColumnLayout>
      </PageLayout>
    );

    expect(component.getElement()).toMatchSnapshot();
  });

  it('TwoColumnLayout should match the snapshot', () => {
    const component = mount(
      <PageLayout
        header={{
          page: 'styleguide-test',
          currentPageType: 'product',
          links: [],
          theme: 'white',
        }}
        footer={{
          variant: 'transparent',
        }}
        actions={[]}
        layoutType={LAYOUT_TYPES.TWO_COLUMN}
      >
        <TwoColumnLayout
          left={
            <div>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
              ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
              fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
              mollit anim id est laborum.
            </div>
          }
          right={
            <div>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
              ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
              fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
              mollit anim id est laborum.
            </div>
          }
        />
      </PageLayout>
    );

    expect(component.getElement()).toMatchSnapshot();
  });

  it('TwoColumnLayout flexible should match the snapshot', () => {
    const component = mount(
      <PageLayout
        header={{
          page: 'styleguide-test',
          currentPageType: 'product',
          links: [],
          theme: 'white',
        }}
        footer={{
          variant: 'transparent',
        }}
        actions={[]}
        layoutType={LAYOUT_TYPES.TWO_COLUMN_FLEXIBLE}
      >
        <TwoColumnLayout
          left={
            <div>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
              ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
              fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
              mollit anim id est laborum.
            </div>
          }
          right={
            <div>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
              dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
              ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
              fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
              mollit anim id est laborum.
            </div>
          }
          isFlexible
        />
      </PageLayout>
    );

    expect(component.getElement()).toMatchSnapshot();
  });
});