test("should be able to render", () => {
const titleBar = shallow(<TitleBar />);
expect(toJSON(titleBar)).toMatchSnapshot();
const titleBar2 = shallow(<TitleBar theme="dark" title="great" />);
expect(toJSON(titleBar2)).toMatchSnapshot();
});
test('Keyboard event with searching in the list', () => {
const props = {
preferredCountries: ['af', 'al'],
defaultCountry: 'in',
flagsImagePath: '/flags.723494a4.png',
initialValue: '+9112121',
inputProps: {
autoFocus: true
}
}
const wrapper = mount(<ReactTelephoneInput {...props} />)
expect(toJson(wrapper)).toMatchSnapshot()
wrapper.find('[data-test-id="src_reacttelephoneinput_test_id_7"]').simulate('click')
wrapper
.find('[data-test-id="src_reacttelephoneinput_test_id_6"]')
.simulate('keyDown', { keyCode: 65, which: 65 })
wrapper
.find('[data-test-id="src_reacttelephoneinput_test_id_6"]')
.simulate('keyDown', { keyCode: 65, which: 65 })
wrapper
.find('[data-test-id="src_reacttelephoneinput_test_id_6"]')
.simulate('keyUp', { keyCode: 65, which: 65 })
wrapper
.find('[data-test-id="src_reacttelephoneinput_test_id_2"]')
.at(2)
.simulate('click')
wrapper
.find('[data-test-id="src_reacttelephoneinput_test_id_5"]')
.simulate('keyDown', { keyCode: 91, which: 91 })
wrapper
.find('[data-test-id="src_reacttelephoneinput_test_id_5"]')
.simulate('keyDown', { keyCode: 91, which: 91 })
expect(toJson(wrapper)).toMatchSnapshot()
})
test("clicking dropdown content triggers the items callback and closes the menu", () => {
const clicky = jest.fn();
const wrapper = mount(
<DropdownMenu>
<DropdownTrigger>
<div className="clickMe">Click me</div>
</DropdownTrigger>
<DropdownContent>
<li className="alsoClickMe" onClick={clicky}>
1
</li>
</DropdownContent>
</DropdownMenu>
);
expect(toJSON(wrapper)).toMatchSnapshot();
// Trigger should be shown
// Content should not be available yet
expect(toJSON(wrapper)).toMatchSnapshot();
expect(wrapper.find(".alsoClickMe").length).toEqual(0);
// Content should now be shown
wrapper.find(".clickMe").simulate("click");
expect(toJSON(wrapper)).toMatchSnapshot();
expect(wrapper.find(".alsoClickMe").length).toEqual(1);
// Clicking the item should close the menu
wrapper.find(".alsoClickMe").simulate("click");
expect(wrapper.find(".alsoClickMe").length).toEqual(0);
expect(toJSON(wrapper)).toMatchSnapshot();
});
test("should be able to render", () => {
const logo = shallow(<Logo />);
expect(toJSON(logo)).toMatchSnapshot();
logo.setProps({ theme: "dark" });
expect(toJSON(logo)).toMatchSnapshot();
});
test('Interaction test 2', () => {
const onChange = jest.fn()
const props = {
preferredCountries: ['af', 'al'],
defaultCountry: 'in',
flagsImagePath: '/flags.723494a4.png',
initialValue: '+9112121',
inputProps: {
autoFocus: true
},
onChange: formattedNumber => onChange(formattedNumber)
}
const wrapper = mount(<ReactTelephoneInput {...props} />)
expect(toJson(wrapper)).toMatchSnapshot()
wrapper.find('[data-test-id="src_reacttelephoneinput_test_id_5"]').simulate('focus')
wrapper.find('[data-test-id="src_reacttelephoneinput_test_id_5"]').simulate('click')
wrapper
.find('[data-test-id="src_reacttelephoneinput_test_id_5"]')
.simulate('keyDown', { keyCode: 49, which: 49 })
wrapper
.find('[data-test-id="src_reacttelephoneinput_test_id_5"]')
.simulate('change', { target: { value: '+91 121211', checked: false } })
expect(onChange).toBeCalledWith('+91 12121-1')
wrapper
.find('[data-test-id="src_reacttelephoneinput_test_id_5"]')
.simulate('keyDown', { keyCode: 50, which: 50 })
wrapper
.find('[data-test-id="src_reacttelephoneinput_test_id_5"]')
.simulate('change', { target: { value: '+91 12121-12', checked: false } })
expect(onChange).toBeCalledWith('+91 12121-12')
wrapper
.find('[data-test-id="src_reacttelephoneinput_test_id_5"]')
.simulate('keyDown', { keyCode: 49, which: 49 })
wrapper
.find('[data-test-id="src_reacttelephoneinput_test_id_5"]')
.simulate('change', { target: { value: '+91 12121-121', checked: false } })
expect(onChange).toBeCalledWith('+91 12121-121')
wrapper.find('[data-test-id="src_reacttelephoneinput_test_id_5"]').simulate('blur')
wrapper.find('[data-test-id="src_reacttelephoneinput_test_id_7"]').simulate('click')
wrapper
.find('div')
.at(9)
.simulate('scroll')
wrapper.find('[data-test-id="src_reacttelephoneinput_test_id_5"]').simulate('focus')
wrapper.find('[data-test-id="src_reacttelephoneinput_test_id_5"]').simulate('blur')
// click on a flag in the dropdown list of flags
// that should trigger another onChange call
wrapper
.find('[data-test-id="src_reacttelephoneinput_test_id_0"]')
.at(5)
.simulate('click')
// verify the number of times onChange would have been called
expect(onChange.mock.calls.length).toBe(4)
expect(toJson(wrapper)).toMatchSnapshot()
})
test(caseName, () => {
const element = cases[caseName];
const mountTree = mount(element);
const renderTree = render(element);
const shallowTree = shallow(element);
expect(toJson(mountTree)).toMatchSnapshot(`enzyme.mount ${caseName}`);
expect(toJson(renderTree)).toMatchSnapshot(`enzyme.render ${caseName}`);
expect(toJson(shallowTree)).toMatchSnapshot(`enzyme.shallow ${caseName}`);
});
it('render search', () => {
const { wrapper, props: {changeFilter} } = setup();
const input = wrapper.find('.search__input');
expect(input.prop('defaultValue')).toEqual('query');
expect(toJson(wrapper)).toMatchSnapshot();
})
it('enables to set inner html', async () => {
const dialog = shallow(<ConfirmDialog
{...props}
dangerouslySetInnerHTML={{ _html: '<b>Custom</b> html content' }}
/>);
expect(toJson(dialog)).toMatchSnapshot();
});
it('renders a confirm dialog', async () => {
const dialog = shallow(<ConfirmDialog
{...props}
{...{ message }}
/>);
expect(toJson(dialog)).toMatchSnapshot();
});
it('renders the value', async () => {
const controller = mockController({ editing: false });
const value = 200;
const formatter = editFormatter(controller)(value, data({}));
expect(toJson(shallow(formatter))).toMatchSnapshot();
});
test('it renders a list of tags', () => {
const filters = {
values: {
'good-submission': {
label: 'Good Submission',
active: false,
},
'good-quote': {
label: 'Good Quote',
active: false,
},
},
type: 'tags',
};
const component = mount(
<MultiValueFilter
options={filters}
header={'Tags'}
updateFilters={() => {}}
/>,
);
expect(toJson(component)).toMatchSnapshot();
component.unmount();
});
it('match snapshot when not authenticated', () => {
const props = {
isAuthenticated: jest.fn(),
};
expect(toJson(shallow(<RootContainer {...props}/>))).toMatchSnapshot();
});
test('change theme', () => {
const Div = withTheme(styled.div`color: ${props => props.theme.primary};`)
const TestComponent = props => (
<ThemeProvider theme={props.theme}>
{props.renderChild ? <Div>this will be green then pink</Div> : null}
</ThemeProvider>
)
const wrapper = mount(
<TestComponent renderChild theme={{ primary: 'green' }} />
)
expect(enzymeToJson(wrapper)).toMatchSnapshot()
wrapper.setProps({ theme: { primary: 'pink' } })
expect(enzymeToJson(wrapper)).toMatchSnapshot()
wrapper.setProps({ renderChild: false })
expect(enzymeToJson(wrapper)).toMatchSnapshot()
})
it('should render ActionSheet success', function () {
const wrapper = mount(<ActionSheet
autoDectect
type={'ios'}
visible={false}
onClose={() => {}}
menus={['选项一', '选项二'].map((item, index) => {
return {
type: 'default',
label: item,
textStyle: {color: '#000000'},
onPress: () => {}
}
})}
actions={[
{
type: 'default',
label: '取消',
textStyle: {color: '#000000'},
onPress: () => {}
}
]}
/>)
expect(toJson(wrapper)).toMatchSnapshot()
})
it('renders without crashing', () => {
expect(
toJson(
Object.assign({}, Index, { _reactInternalInstance: 'censored' }),
),
).toMatchSnapshot();
});
it('should render correctly', () => {
const wrapper = shallow(
<TimeDisplay {...defaultProps} />
);
expect(toJson(wrapper)).toMatchSnapshot();
});
it('should render without search icon', () => {
const component = shallow(
<SearchBar noIcon />
);
expect(component.length).toBe(1);
expect(toJson(component)).toMatchSnapshot();
});
it('should render with a custom search icon', () => {
const component = shallow(
<SearchBar leftIcon={<View />} />
);
expect(component.length).toBe(1);
expect(toJson(component)).toMatchSnapshot();
});
it('should render social icon button', () => {
const component = shallow(
<SocialIcon title="Sign In With Facebook" button type="facebook" />
);
expect(component.length).toBe(1);
expect(toJson(component)).toMatchSnapshot();
});
it('should render light social icon', () => {
const component = shallow(
<SocialIcon light raised={false} type="medium" />
);
expect(component.length).toBe(1);
expect(toJson(component)).toMatchSnapshot();
});
it('should render without icon', () => {
const component = shallow(
<Search underlineColorAndroid="red" noIcon round />
);
expect(component.length).toBe(1);
expect(toJson(component)).toMatchSnapshot();
});
it('match snapshot when precondition failed', () => {
const props = {
isAuthenticated: jest.fn(),
authed: Actions.Auth.PRECONDITION_FAILED
};
expect(toJson(shallow(<RootContainer {...props}/>))).toMatchSnapshot();
});
it('should render with a custom search icon', () => {
const component = shallow(
<SearchBar searchIcon={{ size: 50 }} lightTheme />
);
expect(component.length).toBe(1);
expect(toJson(component)).toMatchSnapshot();
});
it('should render avatar without height', () => {
const component = shallow(
<Avatar width={80} title="avatar title" titleStyle={{ color: 'red' }} />
);
expect(component.length).toBe(1);
expect(toJson(component)).toMatchSnapshot();
});
it('should render xlarge avatar', () => {
const component = shallow(
<Avatar xlarge rounded title="avatar title" activeOpacity={0.7} />
);
expect(component.length).toBe(1);
expect(toJson(component)).toMatchSnapshot();
});
it('should render without issues', () => {
const component = shallow(
<FeaturedTile imageSrc={{ url: 'http://google.com' }} />
);
expect(component.length).toBe(1);
expect(toJson(component)).toMatchSnapshot();
});
it('should render without clear icon', () => {
const component = shallow(
<SearchBar clearIcon={false} />
);
expect(component.length).toBe(1);
expect(toJson(component)).toMatchSnapshot();
});
it('should render with a custom icon', () => {
const component = shallow(
<SearchBar icon={{ type: 'font-awesome', name: 'glass' }} />
);
expect(component.length).toBe(1);
expect(toJson(component)).toMatchSnapshot();
});
it('should render with a custom Cancel button title', () => {
const component = shallow(
<SearchBar cancelButtonTitle="Annuler" />
);
expect(component.length).toBe(1);
expect(toJson(component)).toMatchSnapshot();
});
it('match snapshot when login invalid', () => {
const props = {
isAuthenticated: jest.fn(),
authed: Actions.Auth.LOGIN_INVALID
};
expect(toJson(shallow(<RootContainer {...props}/>))).toMatchSnapshot();
});