{"size": 10209, "ext": "js", "max_stars_repo_path": "components/admin/ProjectDetailsForm/ProjectDetailsForm.test.js", "max_stars_repo_name": "IIP-Design/content-commons-client", "max_stars_repo_stars_event_min_datetime": "2021-06-10T13:02:04.000Z", "max_stars_repo_stars_event_max_datetime": "2021-08-03T20:33:19.000Z", "max_issues_repo_path": "components/admin/ProjectDetailsForm/ProjectDetailsForm.test.js", "max_issues_repo_name": "IIP-Design/content-commons-client", "max_issues_repo_issues_event_min_datetime": "2019-02-20T19:53:21.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-28T13:51:57.000Z", "max_forks_repo_path": "components/admin/ProjectDetailsForm/ProjectDetailsForm.test.js", "max_forks_repo_name": "IIP-Design/content-commons-client", "max_forks_repo_forks_event_min_datetime": "2019-05-17T17:03:15.000Z", "max_forks_repo_forks_event_max_datetime": "2020-02-04T17:07:09.000Z"}
{"max_stars_count": 2, "max_issues_count": 103, "max_forks_count": 3, "avg_line_length": 25.9770992366, "max_line_length": 109, "alphanum_fraction": 0.5978058576}
import { mount } from 'enzyme';
import toJSON from 'enzyme-to-json';
import ProjectDetailsForm from './ProjectDetailsForm';

jest.mock(
  'components/admin/FormikAutoSave/FormikAutoSave',
  () => function FormikAutoSave() { return ''; },
);

jest.mock(
  'components/admin/TermsConditions/TermsConditions',
  () => function TermsConditions() { return ''; },
);

jest.mock(
  'components/admin/dropdowns/TagDropdown/TagDropdown',
  () => function TagDropdown() { return ''; },
);

jest.mock(
  'components/admin/dropdowns/TeamDropdown/TeamDropdown',
  () => function TeamDropdown() { return ''; },
);

jest.mock(
  'components/admin/dropdowns/UserDropdown/UserDropdown',
  () => function UserDropdown() { return ''; },
);

jest.mock(
  'components/admin/dropdowns/CategoryDropdown/CategoryDropdown',
  () => function CategoryDropdown() { return ''; },
);

jest.mock(
  'components/admin/dropdowns/CopyrightDropdown/CopyrightDropdown',
  () => function CopyrightDropdown() { return ''; },
);

jest.mock(
  'components/admin/dropdowns/VisibilityDropdown/VisibilityDropdown',
  () => function VisibilityDropdown() { return ''; },
);

const props = {
  maxCategories: 2,
  values: {
    projectTitle: 'Just a test title',
    visibility: 'visibility-12345',
    author: 'author-aidkwi83',
    team: 'team-dfiiad',
    copyright: 'NO_COPYRIGHT',
    categories: ['category-123'],
    tags: ['tag-123'],
    descPublic: 'public description',
    descInternal: 'internal description',
    alt: 'some alt text',
  },
  errors: {},
  touched: {},
  isValid: true,
  dirty: false,
  handleSubmit: jest.fn(),
  handleChange: jest.fn(),
  setFieldValue: jest.fn(),
  setFieldTouched: jest.fn(),
  save: jest.fn(),
  config: {
    headline: 'Social Media Graphics Project Data',
    projectTitle: {
      label: 'Project Name',
      required: true,
    },
    visibility: {
      label: 'Visibility Setting',
      required: true,
    },
    team: {
      dropdown: true,
      label: 'Source',
      required: false,
      variables: {
        where: {
          name_in: [
            'GPA Design & Editorial',
            'ShareAmerica',
          ],
        },
      },
    },
    copyright: {
      label: 'Copyright',
      required: true,
    },
    categories: {
      label: 'Categories',
      required: true,
    },
    tags: {
      label: 'Tags',
      required: false,
    },
    descPublic: {
      label: 'Public Description',
      required: false,
    },
    descInternal: {
      label: 'Internal Description',
      required: false,
    },
    alt: {
      label: 'Alt (Alternative) Text',
      required: false,
    },
  },
};

describe( '<ProjectDetailsForm />, for graphic projects', () => {
  let Component;
  let wrapper;

  beforeEach( () => {
    Component = <ProjectDetailsForm { ...props } />;
    wrapper = mount( Component );
  } );

  it( 'renders without crashing', () => {
    expect( wrapper.exists() ).toEqual( true );
    expect( toJSON( wrapper ) ).toMatchSnapshot();
  } );

  it( 'has "edit-project__form project-data" class values', () => {
    const form = wrapper.find( 'Form' );

    expect( form.hasClass( 'edit-project__form project-data' ) )
      .toEqual( true );
  } );

  it( 'submit btn is disabled initially', () => {
    const submitBtn = wrapper.find( 'button.edit-project__form--save' );

    expect( submitBtn.prop( 'disabled' ) ).toEqual( true );
  } );

  it( 'submit btn is not disabled if touched or isValid', () => {
    const newProps = {
      ...props,
      touched: {
        projectTitle: true,
        termsConditions: true,
        categories: true,
        copyright: true,
      },
      dirty: true,
    };

    const newWrapper = mount( <ProjectDetailsForm { ...newProps } /> );
    const submitBtn = newWrapper.find( 'Button.edit-project__form--save' );

    expect( submitBtn.prop( 'disabled' ) ).toEqual( false );
  } );

  it( 'clicking submit btn calls handleSubmit once', () => {
    wrapper.simulate( 'submit' );
    expect( props.handleSubmit ).toHaveBeenCalledTimes( 1 );
  } );
} );

describe( '<ProjectDetailsForm />, for video projects', () => {
  let Component;
  let wrapper;

  const videoProps = {
    ...props,
    values: {
      projectTitle: 'Just a test title',
      visibility: 'visibility-12345',
      author: 'author-aidkwi83',
      team: 'team-dfiiad',
      categories: ['category-123'],
      tags: ['tag-123'],
      descPublic: 'public description',
      descInternal: 'internal description',
    },
    config: {
      headline: 'Project Data',
      projectTitle: {
        label: 'Project Title',
        required: true,
      },
      visibility: {
        label: 'Visibility Setting',
        required: true,
      },
      author: {
        label: 'Author',
        required: false,
      },
      team: {
        label: 'Team',
        required: false,
      },
      categories: {
        label: 'Categories',
        required: true,
      },
      tags: {
        label: 'Tags',
        required: false,
      },
      descPublic: {
        label: 'Public Description',
        required: false,
      },
      descInternal: {
        label: 'Internal Description',
        required: false,
      },
    },
  };

  beforeEach( () => {
    Component = <ProjectDetailsForm { ...videoProps } />;
    wrapper = mount( Component );
  } );

  it( 'renders without crashing', () => {
    expect( wrapper.exists() ).toEqual( true );
  } );

  it( 'renders the UserDropdown', () => {
    const userDropdown = wrapper.find( 'UserDropdown' );

    expect( userDropdown.exists() ).toEqual( true );
  } );

  it( 'does not render the CopyrightDropdown', () => {
    const copyrightDropdown = wrapper.find( 'CopyrightDropdown' );

    expect( copyrightDropdown.exists() ).toEqual( false );
  } );

  it( 'does not render the alt field', () => {
    const altField = wrapper.find( 'FormField#alt' );

    expect( altField.exists() ).toEqual( false );
  } );
} );

describe( '<ProjectDetailsForm />, if props.id has a value', () => {
  let Component;
  let wrapper;

  const newProps = {
    ...props,
    id: 'project-123',
  };

  beforeEach( () => {
    Component = <ProjectDetailsForm { ...newProps } />;
    wrapper = mount( Component );
  } );

  it( 'renders without crashing', () => {
    expect( wrapper.exists() ).toEqual( true );
  } );

  it( 'does not render the TermsConditions', () => {
    const termsConditions = wrapper.find( 'TermsConditions' );

    expect( termsConditions.exists() ).toEqual( false );
  } );

  it( 'does not render the save and upload', () => {
    const submitBtn = wrapper.find( 'Button.edit-project__form--save' );

    expect( submitBtn.exists() ).toEqual( false );
  } );
} );

describe( '<ProjectDetailsForm />, when there is a props.id and required fields are missing values', () => {
  let Component;
  let wrapper;

  const newProps = {
    ...props,
    id: 'project-123',
    errors: {
      projectTitle: 'A project title is required.',
      copyright: 'A copyright setting is required.',
      categories: 'At least 1 category is required.',
    },
    touched: {
      projectTitle: true,
      copyright: true,
      categories: true,
    },
    values: {
      projectTitle: '',
      copyright: '',
      categories: [],
    },
  };

  beforeEach( () => {
    Component = <ProjectDetailsForm { ...newProps } />;
    wrapper = mount( Component );
  } );

  it( 'renders without crashing', () => {
    expect( wrapper.exists() ).toEqual( true );
  } );

  it( 'renders an error message for the missing project title', () => {
    const projectTitleField = wrapper.find( 'FormField#projectTitle' );
    const errorMsg = wrapper.find( 'FormField#projectTitle + .error-message' );

    expect( projectTitleField.prop( 'error' ) ).toEqual( true );
    expect( errorMsg.text() ).toEqual( newProps.errors.projectTitle );
  } );

  it( 'renders an error message for the missing copyright value', () => {
    const copyrightDropdown = wrapper.find( 'CopyrightDropdown' );
    const errorMsg = wrapper.find( 'CopyrightDropdown + .error-message' );

    expect( copyrightDropdown.prop( 'error' ) ).toEqual( true );
    expect( errorMsg.text() ).toEqual( newProps.errors.copyright );
  } );

  it( 'renders an error message for the missing categories value(s)', () => {
    const categoriesDropdown = wrapper.find( 'CategoryDropdown' );
    const errorMsg = wrapper.find( 'CategoryDropdown + .error-message' );

    expect( categoriesDropdown.prop( 'error' ) ).toEqual( true );
    expect( errorMsg.text() ).toEqual( newProps.errors.categories );
  } );

  it( 'renders an error message for having over 2 categories values', () => {
    const excessiveCategoriesProps = {
      ...newProps,
      errors: {
        ...newProps.errors,
        categories: 'Maximum of 2 categories can be selected',
      },
      values: {
        ...newProps.values,
        categories: [
          '111', '222', '333',
        ],
      },
    };
    const newComponent = <ProjectDetailsForm { ...excessiveCategoriesProps } />;
    const newWrapper = mount( newComponent );
    const categoriesDropdown = newWrapper.find( 'CategoryDropdown' );
    const errorMsg = newWrapper.find( 'CategoryDropdown + .error-message' );

    expect( categoriesDropdown.prop( 'error' ) ).toEqual( true );
    expect( errorMsg.text() )
      .toEqual( excessiveCategoriesProps.errors.categories );
  } );
} );

describe( '<ProjectDetailsForm />, when there is no props.id and required fields are missing values', () => {
  let Component;
  let wrapper;

  const newProps = {
    ...props,
    errors: {
      termsConditions: 'You have to agree with our Terms of Use!',
    },
    touched: {
      termsConditions: true,
    },
  };

  beforeEach( () => {
    Component = <ProjectDetailsForm { ...newProps } />;
    wrapper = mount( Component );
  } );

  it( 'renders without crashing', () => {
    expect( wrapper.exists() ).toEqual( true );
  } );

  it( 'renders an error message for the TermsConditions', () => {
    const termsConditions = wrapper.find( 'TermsConditions' );

    expect( termsConditions.exists() ).toEqual( true );
    expect( termsConditions.prop( 'error' ) ).toEqual( true );
  } );
} );
