enzyme#mount JavaScript Examples

it("has display:none style on '/stripe-setup' route", () => {
  const wrapper = mount(
    <Provider store={store}>
      <MemoryRouter initialEntries={["/stripe-setup"]}>
        <Footer />
      </MemoryRouter>
    </Provider>
  );

  const div = wrapper.find("div").get(0);

  expect(div.props.style).toHaveProperty("display", "none");
});

describe(`isBelow at ${theme.screens.md}`, () => {
  const IsBelowBP = ({ bpName }) => {
    const { isBelow } = useBreakpoint(theme.screens);
    return (<div>{isBelow(bpName) ? 'true' : 'false'}</div>);
  };
  const screensTable = Object.entries(theme.screens)
    .map(([name, value]) => [parseInt(value, 10) > parseInt(theme.screens.md, 10), name]);
  test.each(screensTable)('returns \'%s\' when breakpoint argument is \'%s\'', (expected, bpName) => {
    const wrapper = mount(
      <ResponsiveContext.Provider value={{ width: 768 }}>
        <IsBelowBP bpName={bpName} />
      </ResponsiveContext.Provider>,
    );
    expect(wrapper.text()).toBe(`${expected}`);
  });
});

describe("when contact is within texting hours...", () => {
  beforeEach(() => {
    timezones.isBetweenTextingHours.mockReturnValue(true);
    timezones.getLocalTime.mockReturnValue(
      moment()
        .utc()
        .utcOffset(-5)
    );
    StyleSheetTestUtils.suppressStyleInjection();
    mount(
      <MuiThemeProvider>
        <ConversationTexterContactComponent
          texter={propsWithEnforcedTextingHoursCampaign.texter}
          campaign={campaign}
          assignment={propsWithEnforcedTextingHoursCampaign.assignment}
          refreshData={propsWithEnforcedTextingHoursCampaign.refreshData}
          data={propsWithEnforcedTextingHoursCampaign.data}
        />
      </MuiThemeProvider>
    );
  });
  afterEach(() => {
    propsWithEnforcedTextingHoursCampaign.refreshData.mockReset();
  });
  it("it does NOT refresh data in componentDidMount", () => {
    jest.runOnlyPendingTimers();
    expect(
      propsWithEnforcedTextingHoursCampaign.refreshData.mock.calls
    ).toHaveLength(0);
  });
});

test('Theming, updates and PureComponent', t => {
  const theme = { themed: true };
  const update = { updated: true };
  const ComponentWithTheme = withTheme(Trap.Prop);
  const actual = getInterceptor();
  const expected = update;

  const wrapper = mount(
    <ThemeProvider theme={theme}>
      <Pure>
        <ComponentWithTheme intercept={actual} />
      </Pure>
    </ThemeProvider>,
  );

  wrapper.setProps({ theme: update });

  t.deepEqual(
    actual(),
    expected,
    `default theming should pass theme update through Pure Component`,
  );
});

describe('SurveyPage3', () => {
  it('should render a SurveyPage3 component ', () => {
    const store = mockStore({
      surveyReducer: mockSurveyReducerState,
      observationsReducer: mockObservationReducerState,
    });
    window.HTMLCanvasElement.prototype.getContext = () => {};

    const wrapper = mount(
      <BrowserRouter>
        <Provider store={store}>
          <SurveyPage3 />
        </Provider>
      </BrowserRouter>
    );
    expect(wrapper.find('SurveyPage3')).toMatchSnapshot();
  });
});

wrapper = mount(
  <QuestionItem productName={"camo onesie"} q={{
    "question_id": 38,
    "question_body": "How long does it last?",
    "question_date": "2019-06-28T00:00:00.000Z",
    "asker_name": "funnygirl",
    "question_helpfulness": 2,
    "reported": false,
    "answers": {
      70: {
        "id": 70,
        "body": "Some of the seams started splitting the first time I wore it!",
        "date": "2019-11-28T00:00:00.000Z",
        "answerer_name": "sillyguy",
        "helpfulness": 6,
        "photos": [],
      },
      78: {
        "id": 78,
        "body": "9 lives",
        "date": "2019-11-12T00:00:00.000Z",
        "answerer_name": "iluvdogz",
        "helpfulness": 31,
        "photos": [],
      }
    }
  }} key={39} />
)

describe("<FeedbackTable>", () => {
	const feedback = [
		{
			id: 1,
			owner_name: "John Doe",
			post: "This is John's post.",
		},
		{
			id: 2,
			owner_name: "Jane Doe",
			post: "This is Jane's post.",
		},
	];

	test("should render without crashing", () => {
		shallow(<FeedbackTable feedback={feedback} />);
	});

	test("should have table", () => {
		const wrapper = mount(<FeedbackTable feedback={feedback} />);
		expect(wrapper.exists("table")).toBe(true);
	});

	test("should have 2 dummy posts", () => {
		const wrapper = mount(<FeedbackTable feedback={feedback} />);
		expect(wrapper.find("p").length).toBe(2);
	});
});

describe("component redirects to /dashboard when logging in", () => {
  let history;

  beforeEach(() => {
    useAuth0.mockReturnValue({
      isAuthenticated: true,
      user: {
        ...user,
        "https://merchdropper.store/signup": false,
      },
      logout: jest.fn(),
      loginWithRedirect: jest.fn(),
    });

    history = { push: jest.fn() };

    jest.useFakeTimers();

    const wrapper = mount(
      <Provider store={store}>
        <Router>
          <Redirect history={history} />
        </Router>
      </Provider>
    );

    jest.advanceTimersByTime(500);
  });

  it("calls history.push", () => {
    expect(history.push).toHaveBeenCalledTimes(1);
  });

  it("redirects to /stripe-setup", () => {
    expect(history.push).toHaveBeenCalledWith("/dashboard");
  });
});

describe('AvatarList', () => {
  it('renders all items', () => {
    const wrapper = mount(<AvatarList>{renderItems(4)}</AvatarList>);
    expect(wrapper.find('AvatarList').length).toBe(1);
    expect(wrapper.find('Item').length).toBe(4);
    expect(wrapper.findWhere(node => node.key() === 'exceed').length).toBe(0);
  });

  it('renders max of 3 items', () => {
    const wrapper = mount(<AvatarList maxLength={3}>{renderItems(4)}</AvatarList>);
    expect(wrapper.find('AvatarList').length).toBe(1);
    expect(wrapper.find('Item').length).toBe(3);
    expect(wrapper.findWhere(node => node.key() === 'exceed').length).toBe(1);
  });
});

it("expect to render Footer component", () => {
  const wrapper = mount(
    <Provider store={store}>
      <MemoryRouter initialEntries={["/"]}>
        <Footer />
      </MemoryRouter>
    </Provider>
  );

  const div = wrapper.find("div").get(0);
  const ul = wrapper.find("ul a");

  expect(wrapper).toBeTruthy();
  expect(div.props.style).toHaveProperty("display", "block");
  expect(ul).toHaveLength(2);
  expect(ul.containsMatchingElement(<a>Home</a>)).toBeTruthy();
  expect(ul.containsMatchingElement(<a>Store</a>)).toBeTruthy();
});

describe("routes using memory router", () => {
  it("should show Login component for / router (using memory router)", () => {
    const component = mount(
      <MemoryRouter initialentries="{['/login']}">
        <Login />
      </MemoryRouter>
    );
    expect(component.find(Login)).toHaveLength(1);
  });
});

describe.only('GroupView', () => {
    afterAll(cleanup);

    let wrapper;

    beforeEach(() => {
        wrapper = mount(
        <GroupView {...{ selectedGroup: group }} />
        );
    });

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

    it('renders group data', () => {
        expect(wrapper.find("#group-name")).toBeDefined();
    });

    it('renders the right data', () => {
        expect(wrapper.find("#group-name").first().props().content).toStrictEqual(group.name);
    });
});

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

test("Test State", () => {
  const scroll = mount(
    <InfiniteScrollImage
      content={[
        { name: "hola", dateAttached: new Date("January 22, 2012 06:32:32") },
      ]}
    />
  );
  scroll.setState({ hasMore: false });
  expect(scroll.state().hasMore).toBe(false);
});

describe.only('RouteFields tests', () => {

  it('RouteFields requires onSave prop', () => {
    const onSave = jest.fn();
    const wrapper = mount(<RouteFields onSave={onSave} />);
    expect(wrapper.props().onSave).toBeDefined();
  });

  it('RouteFields requires onError prop', () => {
    const onError = jest.fn();
    const wrapper = mount(<RouteFields onError={onError} />);
    expect(wrapper.props().onError).toBeDefined();
  });

  it('RouteFields requires onImport prop', () => {
    const onImport = jest.fn();
    const wrapper = mount(<RouteFields onImport={onImport} />);
    expect(wrapper.props().onImport).toBeDefined();
  });

  it('renders on creation of a route', () => {
    const routeBase = false;
    const wrapper = shallow(<RouteFields routeBase={routeBase} />);

    expect(wrapper.find('.value-name')).toBeDefined();
    expect(wrapper.find('.value-description')).toBeDefined();

    expect(wrapper.find('.value-name')).toHaveLength(1);
    expect(wrapper.find('.value-description')).toHaveLength(1);
    // Values are empty if we are creating a route
    expect(wrapper.find('.value-name').get(0).props.value)
      .toBe('');
    expect(wrapper.find('.value-description').get(0).props.value)
      .toBe('');
  });
});

describe("artist from user view component: testing upper part", () => {
  let component;
  beforeEach(() => {
    component = setup();
  });
  it("redndering the whole upper components", () => {
    expect(component.find(".artist-user").exists()).toBe(true);
  });
  it("redndering the play button", () => {
    expect(component.find(".play-artist").exists()).toBe(true);
  });
  it("redndering the follow button", () => {
    expect(
      component.find("#artist-follow-button-upperContainer").exists()
    ).toBe(true);
  });
  it("redndering the option dropdown", () => {
    expect(component.find(".artist-options-dropdown").exists()).toBe(true);
  });
  it("redndering the option dropdown", () => {
    const wrapper = mount(
      <Options
        artistId={"1"}
        followStatus={true}
        handleFollowClick={() => {}}
      />
    );
    expect(wrapper.find(".artist-ellipsis-container").exists()).toBe(true);
  });
});

test("Test properties map", () => {
  const maps = mount(<MapContainer />);
  maps.zoom = 15;
  maps.center = [];
  maps.route = [];
  const submit = maps.find("Map");

  expect(maps.props.zoomControl).toBeFalsy();
  expect(maps.zoom).toBe(15);
  expect(maps.center).toStrictEqual([]);
  expect(maps.route).toStrictEqual([]);
});

mountSetup = () => {
  const component = mount(
    <Player
      trackIdx={0}
      playing={false}
      queueElement={{}}
      getRequest={(endpoint) => {
        return axios.get(endpoint);
      }}
      putRequest={(endpoint, body = {}) => {
        return axios.put(endpoint, body);
      }}
      postRequest={(endpoint, body = {}) => {
        return axios.post(endpoint, body);
      }}
      fetchQueue={() => {}}
      getNext={() => {
        return 1;
      }}
      getPrevious={() => {
        return 1;
      }}
      changePlayingState={() => {}}
      fetchTrack={() => {}}
    />
  );
  return component;
}

describe('RouteCard', () => {
    afterAll(cleanup);

    let wrapper;
    beforeEach(() => {
        wrapper = mount(
            <RouteMapContext.Provider value={{ selectedRoute: route.id, myRoutes: false }}>
                <RouteCard {...{ route }} />
            </RouteMapContext.Provider>
        );
    });

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

    it('renders on creation', () => {
        expect(wrapper.find('.title_Test')).toBeDefined();
        expect(wrapper.find('.date_Test')).toBeDefined();
        expect(wrapper.find('.rwrapper')).toBeDefined();

        expect(wrapper.find('.title_Test')).toHaveLength(1);
        expect(wrapper.find('.date_Test')).toHaveLength(1);
        expect(wrapper.find('.rwrapper')).toHaveLength(3);
    });

    it('route shown correctly', () => {
        expect(wrapper.find('.title_Test')).toBeDefined();
        expect(wrapper.find('.date_Test')).toBeDefined();
        expect(wrapper.find('.rwrapper')).toBeDefined();

        var m = moment(route.date).fromNow();

        expect(wrapper.find('.title_Test').text()).toContain(route.name);
        expect(wrapper.find('.date_Test').text()).toContain(m);
    });
});

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

test('Test Render BurgerMenu', () => {
    const mockLogout = jest.fn();
    const login = mount(<LoginPage/>);
    const menu =  login.find('BurgerMenu');
    
    
   
    expect(menu).toBeDefined();
});

global.mount = mount;

test("HamburguerClickListRoutes", () => {
  const temp = mount(<BurgerMenu/>);
  expect(temp.find("#list-routes").at(1).props().href).toBe("#/routes");
 });