enzyme#shallow JavaScript Examples

describe(
  'ReviewEntry', () => {
    const randomAvatar = `https://airbnb-reviews-users-pictures.s3-us-west-1.amazonaws.com/${Math.ceil(Math.random() * 3000)}.jpg`;
    const review = {
      avatar: randomAvatar,
      firstName: 'David',
      date: 'January 2020',
      reviewText: 'Dolore officiis rerum ab. Dolores provident et deleniti sunt magnam a facilis corporis et. Aut adipisci ipsa ut est quia quia et. Asperiores doloremque assumenda quos eum quo. Eveniet earum quis ducimus debitis consequatur voluptatem non.\n \rAd culpa ut amet qui. Maiores voluptatem doloribus voluptatum totam qui non alias quia. Ducimus deserunt autem. Unde sequi non sit. Sed minus tempora consequatur. Nisi possimus necessitatibus.\n \rOmnis ut nihil voluptatibus in sunt sunt ducimus reiciendis molestiae. Culpa officia delectus ad voluptatem dicta maxime excepturi doloremque. Eum ut et soluta ut libero quam quia. Placeat dolore debitis non id inventore temporibus vitae consequatur. Aut aut aut iure voluptas facere totam placeat eos modi.'
    };

    it('Displays the avatar of the user', () => {
      const wrapper = shallow(<ReviewEntry review={review} />)
      // expect(wrapper.find('img').props().src).toEqual(randomAvatar);
      // expect(wrapper.containsMatchingElement(<Avatar />)).toBe(true);
      expect(wrapper.containsMatchingElement(<img src={randomAvatar}></img>)).toBe(true);
    });

    it('Displays the first name of the user', () => {
      const wrapper = shallow(<ReviewEntry review={review} />);
      expect(wrapper.contains('David')).toBe(true);
    });

    it('Displays the date of the review', () => {
      const wrapper = shallow(<ReviewEntry review={review} />);
      expect(wrapper.contains('January 2020')).toBe(true);
    });

    it('Displays the text of the review', () => {
      const wrapper = shallow(<ReviewEntry review={review} />);
      expect(wrapper.contains('Dolore officiis rerum ab. Dolores provident et deleniti sunt magnam a facilis corporis et. Aut adipisci ipsa ut est quia quia et. Asperiores doloremque assumenda quos eum quo. Eveniet earum quis ducimus debitis consequatur voluptatem non.\n \rAd culpa ut amet qui. Maiores voluptatem doloribus voluptatum totam qui non alias quia. Ducimus deserunt autem. Unde sequi non sit. Sed minus tempora consequatur. Nisi possimus necessitatibus.\n \rOmnis ut nihil voluptatibus in sunt sunt ducimus reiciendis molestiae. Culpa officia delectus ad voluptatem dicta maxime excepturi doloremque. Eum ut et soluta ut libero quam quia. Placeat dolore debitis non id inventore temporibus vitae consequatur. Aut aut aut iure voluptas facere totam placeat eos modi.')).toBe(true);
    });
  }
);

setup = () => {
  const component = shallow(
    <UpperContainer
      artistId={"1"}
      username={"aashrafh"}
      cover={""}
      followStatus={true}
      handleFollowClick={() => {}}
    />
  );
  return component;
}

/////////////////////////

test("TestExistance of button", () => {
    const mockLogout = jest.fn();
    const button = <GenericButton onClick={mockLogout}/>
    const wrapper = shallow(button);
    
    wrapper.simulate("click");
    expect(mockLogout).toHaveBeenCalled();
});

describe.only('Multimedia', () => {

    const container = shallow( <Multimedia {...{ files, onUpload: () => undefined, editable: true }} /> );

    it('renders without crashing', () => {
        expect(container).toBeTruthy();
    });

    it("shows all files", () => {
        expect(container.find(".file-container")).toHaveLength(3);  

        expect(container.find(".image-container")).toHaveLength(2);   
        expect(container.find("#image-0")).toHaveLength(1);  
        expect(container.find("#image-2")).toHaveLength(1);  

        expect(container.find(".link-container")).toHaveLength(1);   
        expect(container.find("#file-1")).toHaveLength(1);  
        expect(container.find("#file-1").text().includes(".zip")).toBe(true);    
    });

    it("shows a message if there are no files", () => {
        const noFilesContainer = shallow( <Multimedia {...{ no_files, onUpload: () => undefined, editable: true }} /> );
        
        expect(noFilesContainer.find(".file-container")).toHaveLength(0);
        expect(noFilesContainer.find(".image-container")).toHaveLength(0);
        expect(noFilesContainer.find(".link-container")).toHaveLength(0);

        expect(noFilesContainer.find(".no-files")).toHaveLength(1);
    });

});

describe('CheckboxTableRow component', () => {
  it('renders checkbox when selectable', () => {
    const wrapper = shallow(<CheckboxTableRow selectable={true} rowData={rowData} checkedProjects={checkedProjects} />);
    expect(wrapper.exists('Checkbox')).toBeTruthy();
  });

  it('does not render checkbox when not selectable', () => {
    const wrapper = shallow(<CheckboxTableRow selectable={false} rowData={rowData} checkedProjects={checkedProjects} />);
    expect(wrapper.exists('Checkbox')).toBeFalsy();
  });

  it('is checked based on passed data', () => {
    const wrapper = shallow(<CheckboxTableRow selectable={true} rowData={rowData} checkedProjects={checkedProjects} />);
    const checkbox = wrapper.find('Checkbox');
    expect(checkbox.prop('checked')).toBeTruthy();
  });

  it('is not checked based on passed data', () => {
    const rowDataOverride = { id: '1' };
    const wrapper = shallow(<CheckboxTableRow rowData={rowDataOverride} selectable={true} checkedProjects={checkedProjects}  />);
    const checkbox = wrapper.find('Checkbox');
    expect(checkbox.prop('checked')).toBeFalsy();
  });

  it('calls onChange with proper data', () => {
    const onChange = jest.fn();
    const wrapper = shallow(<CheckboxTableRow onChange={onChange} selectable={true} rowData={rowData} checkedProjects={checkedProjects} />);
    const checkbox = wrapper.find('Checkbox');
    checkbox.simulate('change', false);
    expect(onChange).toBeCalledWith(false, rowData);
  });
});

describe('UserHome', () => {
  let userHome

  beforeEach(() => {
    userHome = shallow(<UserHome email="[email protected]" />)
  })

  it('renders the email in an h3', () => {
    expect(userHome.find('h3').text()).to.be.equal('Welcome, [email protected]')
  })
})

it("renders the URLPreview", () => {
  const URLPreview = shallow(
    <Provider store={store}>
      <URLPreview />
    </Provider>
  );
  // expect(URLPreview).toMatchSnapshot();
  expect(URLPreview.length).toEqual(1);
});

describe("App Component", () => {
	it("should render self without error", () => {
		shallow(
			<MemoryRouter>
				<App />
			</MemoryRouter>
		);
	});
});

// /Users/liemnguyen/hfso133/Capstone/Fec2/client/src/components/Product_rendering
describe('Social_Media', () => {
  it("renders Social_Media from Product_Detail without crashing", () => {
    shallow(<Social />)
  });
  it("should call mock function when button is clicked fb", () => {
    const mockFn = jest.fn();
    const val = shallow(<button className='socialButton' id='fb' onClick={mockFn}>
    <img src='https://image.flaticon.com/icons/png/512/124/124010.png' width='20px' height='20px'></img>
  </button>);

    val.simulate('click');
    expect(mockFn).toHaveBeenCalled();
  })

  it("should call mock function when button is clicked twitter", () => {
    const mockFn = jest.fn();
    const val = shallow(<button className='socialButton' onClick={mockFn}><img src='https://louisville.edu/philosophy/images/icons-for-footer/twittericon2.png/image' width='20px' height='20px'></img></button>);

    val.simulate('click');
    expect(mockFn).toHaveBeenCalled();
  })

  it("should call mock function when button is clicked pinterest", () => {
    const mockFn = jest.fn();
    const val = shallow(<button className='socialButton' onClick={mockFn}><img src='https://paintestimating.com/wp-content/uploads/2018/07/pinterest-icon-297x300.png' width='20px' height='20px'></img></button>);

    val.simulate('click');
    expect(mockFn).toHaveBeenCalled();
  })
});

it('it renders Footer',()=>{
        const wrapper = shallow(<Footer/>);
        expect(wrapper).toMatchSnapshot();
        
    });

setUp = (props = {}) => {
  const component = shallow(<AccountOverview {...props} />);
  return component;
}