Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor SyntheticClipboardEvent tests to only use the public API #11365

Merged
199 changes: 172 additions & 27 deletions packages/react-dom/src/events/__tests__/SyntheticClipboardEvent-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,68 +9,213 @@

'use strict';

var SyntheticClipboardEvent;
var React;
var ReactDOM;

describe('SyntheticClipboardEvent', () => {
var createEvent;
var simulateEvent;
var container;

beforeEach(() => {
// TODO: can we express this test with only public API?
SyntheticClipboardEvent = require('../SyntheticClipboardEvent').default;
createEvent = function(nativeEvent) {
var target = require('../getEventTarget').default(nativeEvent);
return SyntheticClipboardEvent.getPooled({}, '', nativeEvent, target);
};
React = require('react');
ReactDOM = require('react-dom');

container = document.createElement('div');
document.body.appendChild(container);
});

afterEach(() => {
document.body.removeChild(container);
container = null;
});

describe('ClipboardEvent interface', () => {
describe('clipboardData', () => {
describe('when event has clipboardData', () => {
it("returns event's clipboardData", () => {
// Mock clipboardData since native implementation doesn't have a constructor
var expectedCount = 0;

// Mock clipboardData since jsdom implementation doesn't have a constructor
var clipboardData = {
dropEffect: null,
effectAllowed: null,
files: null,
items: null,
types: null,
};
var clipboardEvent = createEvent({clipboardData: clipboardData});
var eventHandler = event => {
expect(event.clipboardData).toBe(clipboardData);
expectedCount++;
};
var div = ReactDOM.render(
<div
onCopy={eventHandler}
onCut={eventHandler}
onPaste={eventHandler}
/>,
container,
);

var event;
event = document.createEvent('Event');
event.initEvent('copy', true, true);
event.clipboardData = clipboardData;
div.dispatchEvent(event);

event = document.createEvent('Event');
event.initEvent('cut', true, true);
event.clipboardData = clipboardData;
div.dispatchEvent(event);

expect(clipboardEvent.clipboardData).toBe(clipboardData);
event = document.createEvent('Event');
event.initEvent('paste', true, true);
event.clipboardData = clipboardData;
div.dispatchEvent(event);

expect(expectedCount).toBe(3);
});
});
});
});

describe('EventInterface', () => {
it('normalizes properties from the Event interface', () => {
var target = document.createElement('div');
var syntheticEvent = createEvent({srcElement: target});
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like this test specifically verifies that the synthetic event still determines the target even if only srcElement was set. Your test doesn't verify this.

var expectedCount = 0;
var div;

var eventHandler = type => event => {
expect(event.target).toBe(div);
expect(event.type).toBe(type);
expectedCount++;
};

div = ReactDOM.render(
<div
onCopy={eventHandler('copy')}
onCut={eventHandler('cut')}
onPaste={eventHandler('paste')}
/>,
container,
);

var event;
event = document.createEvent('Event');
event.initEvent('copy', true, true);
// Emulate IE8
Object.defineProperty(event, 'target', {
get() {},
});
Object.defineProperty(event, 'srcElement', {
get() {
return div;
},
});
div.dispatchEvent(event);

event = document.createEvent('Event');
event.initEvent('cut', true, true);
// Emulate IE8
Object.defineProperty(event, 'target', {
get() {},
});
Object.defineProperty(event, 'srcElement', {
get() {
return div;
},
});
div.dispatchEvent(event);

expect(syntheticEvent.target).toBe(target);
expect(syntheticEvent.type).toBe(undefined);
event = document.createEvent('Event');
event.initEvent('paste', true, true);
// Emulate IE8
Object.defineProperty(event, 'target', {
get() {},
});
Object.defineProperty(event, 'srcElement', {
get() {
return div;
},
});
div.dispatchEvent(event);

expect(expectedCount).toBe(3);
});

it('is able to `preventDefault` and `stopPropagation`', () => {
var nativeEvent = {};
var syntheticEvent = createEvent(nativeEvent);
var expectedCount = 0;

var eventHandler = event => {
expect(event.isDefaultPrevented()).toBe(false);
event.preventDefault();
expect(event.isDefaultPrevented()).toBe(true);
expect(event.isPropagationStopped()).toBe(false);
event.stopPropagation();
expect(event.isPropagationStopped()).toBe(true);
expectedCount++;
};

var div = ReactDOM.render(
<div
onCopy={eventHandler}
onCut={eventHandler}
onPaste={eventHandler}
/>,
container,
);

expect(syntheticEvent.isDefaultPrevented()).toBe(false);
syntheticEvent.preventDefault();
expect(syntheticEvent.isDefaultPrevented()).toBe(true);
var event;
event = document.createEvent('Event');
event.initEvent('copy', true, true);
div.dispatchEvent(event);

expect(syntheticEvent.isPropagationStopped()).toBe(false);
syntheticEvent.stopPropagation();
expect(syntheticEvent.isPropagationStopped()).toBe(true);
event = document.createEvent('Event');
event.initEvent('cut', true, true);
div.dispatchEvent(event);

event = document.createEvent('Event');
event.initEvent('paste', true, true);
div.dispatchEvent(event);

expect(expectedCount).toBe(3);
});

it('is able to `persist`', () => {
var syntheticEvent = createEvent({});
var expectedCount = 0;

const persistentEvents = [];
var eventHandler = event => {
expect(event.isPersistent()).toBe(false);
event.persist();
expect(event.isPersistent()).toBe(true);
persistentEvents.push(event);
};

var div = ReactDOM.render(
<div
onCopy={eventHandler}
onCut={eventHandler}
onPaste={eventHandler}
/>,
container,
);

var event;
event = document.createEvent('Event');
event.initEvent('copy', true, true);
div.dispatchEvent(event);

event = document.createEvent('Event');
event.initEvent('cut', true, true);
div.dispatchEvent(event);

event = document.createEvent('Event');
event.initEvent('paste', true, true);
div.dispatchEvent(event);

expect(syntheticEvent.isPersistent()).toBe(false);
syntheticEvent.persist();
expect(syntheticEvent.isPersistent()).toBe(true);
expect(persistentEvents.length).toBe(3);
expect(persistentEvents[0].type).toBe('copy');
expect(persistentEvents[1].type).toBe('cut');
expect(persistentEvents[2].type).toBe('paste');
});
});
});