caps.component.ts:->
if (Acc.accOpen()) {
this.keyboardShowListener = Keyboard.addListener('keyboardDidShow', () => {
this.ngZone.run(() => {
this.isKeyboardVisible = true;
})
});
}
how can I write unit test case for this?
In order to reset the mocks, should we use beforeEach and create the mock again or define mock in one place and use afterEach to reset mocks? Does creating mocks in beforeEach have huge impact on the test performance? In general what would be the best practice in unit testing: reseting the mock or creating a new one?
Here is an example with beforeEach:
interface X {
getX(): string;
}
describe('withBeforeEach', () => {
let mockX: X;
beforeEach(() => {
mockX = {
getX: jest.fn()
};
});
});
Here is an example with afterEach:
interface X {
getX(): string;
}
describe('withAfterEach', () => {
const mockX: X = {
getX: jest.fn()
};
afterEach(() => {
jest.resetAllMocks();
});
});
I want to create a unit test for the following vuejs method with Karma.
removeClass(e) {
if (!this.$el.contains(e.target)) {
this.isActive = false;
}
}
How can I mock the data from the if statement to get the return back?
describe('removeClass()', () => {
it('should return false', () => {
vm.removeClass();
expect(vm.isActive).toBe(false);
});
});
I fixed this with:
spyOn(vm.$el, 'contains').and.returnValue(false);
I am working on a React Native component handling gestures via PanResponder.
I would like to test that when certain dx, dy values are passed to the onPanResponderRelease method, expected action will be executed. Please find below an example of what I would like to test:
export default class MyComponent extends Component<Props, State> {
constructor(props: Props) {
super(props);
this._panResponder = this._initPanResponder();
}
_initPanResponder(): PanResponder {
const panResponder = PanResponder.create({
onStartShouldSetPanResponder: () => true,
onMoveShouldSetPanResponder: () => true,
onPanResponderMove: Animated.event([
null,
{ dx: this._animation.x, dy: this._animation.y }
]),
onPanResponderRelease: (e, gestureState) => {
const { dx, dy } = gestureState;
if (dy > 100) {
doSomething(); // <---- what I would like to unit test
}
}
});
return panResponder;
}
}
Is there any straightforward way to unit test the following with Jest?
I tend to leave testing the wiring code out, since testing an actual PanResponder involves a UI test that is hard to write, is usually flaky, and gives little value.
What you can do, is extract the event handling function out, and test it independently.
In that case, the test would very simple, as all you need to do is invoke the handler in the test and see you're getting what you expected.
If you want to test user's interection with the component you should mock PanResponder in a way you forward the functions given as params to PanResponder.create to the panHandlers it returns.
// setup-tests.ts
jest.doMock('react-native', () => {
return Object.setPrototypeOf(
PanResponder: {
...ReactNative.PanResponder,
create: (config: any) => ({ panHandlers: config }),
},
},
ReactNative
);
});
Tha way, when yoou spread panHandlers in the View you are handling Pan, you can access the functions the way you set up in the file
// pan-handling-component.tsx
const Component: React.FC = () => {
...
const panResponder = React.useRef(
PanResponder.create({
...
onPanResponderMove: (_, gestureState) => {
Animated.event([slideAnim], { useNativeDriver: false })(
gestureState.moveY
);
},
onPanResponderTerminationRequest: () => true,
onPanResponderRelease: () => {
// #ts-ignore
const currentValue = slideAnim._value;
if (currentValue < 0) {
slideIn();
} else if (currentValue > height - 300) {
handleClose();
}
},
})
).current;
...
return (
<View
testID={DRAWER_WRAPPER_TESTID}
{...panResponder.panHandlers}
>
...
</View>
);
And, finally, the unit test would be something like this
// pan-handling-component.test.tsx
...
const panHandler = instance.root.findByProps({
testID: DRAWER_WRAPPER_TESTID,
});
act(() => {
panHandler.props.onPanResponderMove(eventMock, gestureStateMOck);
panHandler.props.onPanResponderRelease();
});
...
Right now I am writing an unit test for this kind of situation like below:
public div: HTMLDivElement;
public currentEvent: EventType;
public listenToRender() {
this.adsService.render.filter((event: EventType) => {
return this.div.id === event.slot.getSlotElementId();
}).subscribe((event: EventType) => {
let custom_event = new CustomEvent('render', {
detail: event
});
this.currentEvent= event;
});
}
During the unit test, I mock the render with subject, but I don't know how I can make it pass the filter
return this.div.id === event.slot.getSlotElementId();
and go to the subscribe function.
class MockAdsService {
render = new Subject();
}
class MockEventType {
name: 'test_event';
slot: {
getSlotElementId = function() {return 'test_id'}
};
}
describe('test', () => {
let mockAdsService: MockAdsService,
mockEventType: MockEventType;
beforeEach(() => {
mockAdsService = new MockAdsService();
mockEventType = new MockEventType();
});
it('listenToRender fired correctly', () => {
mockAdsService.render.next(mockEventType);
component.listenToRender();
expect(component.currentEvent).toEqual(mockEventType);
});
});
Do I need to set up something in subject.next for passing the filter?
It's very simple. You're subscribing your component after your event has already happened. It's too late for cold observable. Just switch render.next() and component.listenToRender() calls and everything should work just fine:
it('listenToRender fired correctly', () => {
component.listenToRender();
mockAdsService.render.next(mockEventType);
expect(component.currentEvent).toEqual(mockEventType);
});