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.

Sign up for GitHub

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

Jump to bottom

Fix issues with IE11 #276

Merged
merged 3 commits into from
Dec 15, 2017
Merged

Fix issues with IE11 #276

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
86f1093
Fix almost all tests for ie11
cibernox Dec 15, 2017
7a658ba
Minor cleanup to address PR feedback.
rwjblue Dec 15, 2017
6b22d7c
Fix remaining failures in IE11.
rwjblue Dec 15, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions addon-test-support/@ember/test-helpers/dom/fill-in.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,8 @@ export default function fillIn(target, text) {
if (!element) {
throw new Error(`Element not found when calling \`fillIn('${target}')\`.`);
}

if (!isFormControl(element) && !element.isContentEditable) {
let isControl = isFormControl(element);
Copy link
Contributor Author

Choose a reason for hiding this comment

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

It turns out that isContentEditable is true for input elements in IE. I did this fix but maybe we have to go back to check if the element has a contenteditable=true attribute

if (!isControl && !element.isContentEditable) {
throw new Error('`fillIn` is only usable on form controls or contenteditable elements.');
}

Expand All @@ -33,10 +33,10 @@ export default function fillIn(target, text) {

__focus__(element);

if (element.isContentEditable) {
element.innerHTML = text;
} else {
if (isControl) {
element.value = text;
} else {
element.innerHTML = text;
}

fireEvent(element, 'input');
Expand Down
2 changes: 1 addition & 1 deletion tests/dummy/config/targets.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* eslint-env node */
const browsers = ['last 1 Chrome versions', 'last 1 Firefox versions', 'last 1 Safari versions'];
const browsers = ['ie 11', 'last 1 Chrome versions', 'last 1 Firefox versions', 'last 1 Safari versions'];
Copy link
Member

Choose a reason for hiding this comment

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

We should probably revert this change (to test locally you can use CI=true ember test --server or CI=true ember s -p 0)...


const isCI = !!process.env.CI;
const isProduction = process.env.EMBER_ENV === 'production';
Expand Down
1 change: 1 addition & 0 deletions tests/helpers/is-ie.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export default !window.ActiveXObject && 'ActiveXObject' in window;
Copy link
Member

Choose a reason for hiding this comment

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

This is great! 👍 I think we should add a comment explaining what it does.

Something like:

// `window.ActiveXObject` returns undefined in IE11 (as well as non-IE browsers)
// whereas `"ActiveXObject" in window` returns `true` in all IE versions
// only IE11 will pass _both_ of these conditions

Copy link
Contributor

Choose a reason for hiding this comment

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

😨

19 changes: 14 additions & 5 deletions tests/unit/dom/blur-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,15 @@
import { module, test } from 'qunit';
import { focus, blur, setContext, unsetContext } from '@ember/test-helpers';
import { buildInstrumentedElement } from '../../helpers/events';
import isIE from '../../helpers/is-ie';

let focusSteps = ['focus', 'focusin'];
let blurSteps = ['blur', 'focusout'];

if (isIE) {
focusSteps = ['focusin', 'focus'];
blurSteps = ['focusout', 'blur'];
}

module('DOM Helper: blur', function(hooks) {
let context, elementWithFocus;
Expand All @@ -17,7 +26,7 @@ module('DOM Helper: blur', function(hooks) {
await focus(elementWithFocus);

// verify that focus was ran, and reset steps
assert.verifySteps(['focus', 'focusin']);
assert.verifySteps(focusSteps);
assert.equal(document.activeElement, elementWithFocus, 'activeElement updated');
});

Expand All @@ -35,7 +44,7 @@ module('DOM Helper: blur', function(hooks) {

await promise;

assert.verifySteps(['blur', 'focusout']);
assert.verifySteps(blurSteps);
});

test('rejects if selector is not found', async function(assert) {
Expand All @@ -50,7 +59,7 @@ module('DOM Helper: blur', function(hooks) {
setContext(context);
await blur(`#${elementWithFocus.id}`);

assert.verifySteps(['blur', 'focusout']);
assert.verifySteps(blurSteps);
assert.notEqual(document.activeElement, elementWithFocus, 'activeElement updated');
});

Expand All @@ -64,14 +73,14 @@ module('DOM Helper: blur', function(hooks) {
setContext(context);
await blur(elementWithFocus);

assert.verifySteps(['blur', 'focusout']);
assert.verifySteps(blurSteps);
assert.notEqual(document.activeElement, elementWithFocus, 'activeElement updated');
});

test('bluring via element without context set', async function(assert) {
await blur(elementWithFocus);

assert.verifySteps(['blur', 'focusout']);
assert.verifySteps(blurSteps);
assert.notEqual(document.activeElement, elementWithFocus, 'activeElement updated');
});
});
13 changes: 10 additions & 3 deletions tests/unit/dom/click-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { module, test } from 'qunit';
import { click, setContext, unsetContext } from '@ember/test-helpers';
import { buildInstrumentedElement } from '../../helpers/events';
import isIE from '../../helpers/is-ie';

module('DOM Helper: click', function(hooks) {
let context, element;
Expand Down Expand Up @@ -78,13 +79,19 @@ module('DOM Helper: click', function(hooks) {
});

module('focusable element types', function() {
let clickSteps = ['mousedown', 'focus', 'focusin', 'mouseup', 'click'];

if (isIE) {
clickSteps = ['mousedown', 'focusin', 'mouseup', 'click', 'focus'];
}

test('clicking a input via selector with context set', async function(assert) {
element = buildInstrumentedElement('input');

setContext(context);
await click(`#${element.id}`);

assert.verifySteps(['mousedown', 'focus', 'focusin', 'mouseup', 'click']);
assert.verifySteps(clickSteps);
assert.strictEqual(document.activeElement, element, 'activeElement updated');
});

Expand All @@ -94,7 +101,7 @@ module('DOM Helper: click', function(hooks) {
setContext(context);
await click(element);

assert.verifySteps(['mousedown', 'focus', 'focusin', 'mouseup', 'click']);
assert.verifySteps(clickSteps);
assert.strictEqual(document.activeElement, element, 'activeElement updated');
});

Expand All @@ -103,7 +110,7 @@ module('DOM Helper: click', function(hooks) {

await click(element);

assert.verifySteps(['mousedown', 'focus', 'focusin', 'mouseup', 'click']);
assert.verifySteps(clickSteps);
assert.strictEqual(document.activeElement, element, 'activeElement updated');
});

Expand Down
21 changes: 14 additions & 7 deletions tests/unit/dom/fill-in-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
import { module, test } from 'qunit';
import { fillIn, setContext, unsetContext } from '@ember/test-helpers';
import { buildInstrumentedElement } from '../../helpers/events';
import isIE from '../../helpers/is-ie';

let clickSteps = ['focus', 'focusin', 'input', 'change'];

if (isIE) {
clickSteps = ['focusin', 'input', 'change', 'focus'];
}

module('DOM Helper: fillIn', function(hooks) {
let context, element;
Expand Down Expand Up @@ -63,7 +70,7 @@ module('DOM Helper: fillIn', function(hooks) {

await promise;

assert.verifySteps(['focus', 'focusin', 'input', 'change']);
assert.verifySteps(clickSteps);
assert.strictEqual(document.activeElement, element, 'activeElement updated');
assert.equal(element.value, 'foo');
});
Expand All @@ -74,7 +81,7 @@ module('DOM Helper: fillIn', function(hooks) {
setContext(context);
await fillIn(`#${element.id}`, 'foo');

assert.verifySteps(['focus', 'focusin', 'input', 'change']);
assert.verifySteps(clickSteps);
assert.strictEqual(document.activeElement, element, 'activeElement updated');
assert.equal(element.value, 'foo');
});
Expand All @@ -85,7 +92,7 @@ module('DOM Helper: fillIn', function(hooks) {
setContext(context);
await fillIn(element, 'foo');

assert.verifySteps(['focus', 'focusin', 'input', 'change']);
assert.verifySteps(clickSteps);
assert.strictEqual(document.activeElement, element, 'activeElement updated');
assert.equal(element.value, 'foo');
});
Expand All @@ -96,7 +103,7 @@ module('DOM Helper: fillIn', function(hooks) {
setContext(context);
await fillIn(`#${element.id}`, 'foo');

assert.verifySteps(['focus', 'focusin', 'input', 'change']);
assert.verifySteps(clickSteps);
assert.strictEqual(document.activeElement, element, 'activeElement updated');
assert.equal(element.value, 'foo');
});
Expand All @@ -107,7 +114,7 @@ module('DOM Helper: fillIn', function(hooks) {
setContext(context);
await fillIn(element, 'foo');

assert.verifySteps(['focus', 'focusin', 'input', 'change']);
assert.verifySteps(clickSteps);
assert.strictEqual(document.activeElement, element, 'activeElement updated');
assert.equal(element.value, 'foo');
});
Expand All @@ -119,7 +126,7 @@ module('DOM Helper: fillIn', function(hooks) {
setContext(context);
await fillIn(element, 'foo');

assert.verifySteps(['focus', 'focusin', 'input', 'change']);
assert.verifySteps(clickSteps);
assert.strictEqual(document.activeElement, element, 'activeElement updated');
assert.equal(element.innerHTML, 'foo');
});
Expand All @@ -129,7 +136,7 @@ module('DOM Helper: fillIn', function(hooks) {

await fillIn(element, 'foo');

assert.verifySteps(['focus', 'focusin', 'input', 'change']);
assert.verifySteps(clickSteps);
assert.strictEqual(document.activeElement, element, 'activeElement updated');
assert.equal(element.value, 'foo');
});
Expand Down
15 changes: 11 additions & 4 deletions tests/unit/dom/focus-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
import { module, test } from 'qunit';
import { focus, setContext, unsetContext } from '@ember/test-helpers';
import { buildInstrumentedElement } from '../../helpers/events';
import isIE from '../../helpers/is-ie';

let focusSteps = ['focus', 'focusin'];

if (isIE) {
focusSteps = ['focusin', 'focus'];
}

module('DOM Helper: focus', function(hooks) {
let context, element;
Expand Down Expand Up @@ -47,7 +54,7 @@ module('DOM Helper: focus', function(hooks) {

await promise;

assert.verifySteps(['focus', 'focusin']);
assert.verifySteps(focusSteps);
});

test('rejects if selector is not found', async function(assert) {
Expand All @@ -65,7 +72,7 @@ module('DOM Helper: focus', function(hooks) {
setContext(context);
await focus(`#${element.id}`);

assert.verifySteps(['focus', 'focusin']);
assert.verifySteps(focusSteps);
assert.strictEqual(document.activeElement, element, 'activeElement updated');
});

Expand All @@ -75,7 +82,7 @@ module('DOM Helper: focus', function(hooks) {
setContext(context);
await focus(element);

assert.verifySteps(['focus', 'focusin']);
assert.verifySteps(focusSteps);
assert.strictEqual(document.activeElement, element, 'activeElement updated');
});

Expand All @@ -84,7 +91,7 @@ module('DOM Helper: focus', function(hooks) {

await focus(element);

assert.verifySteps(['focus', 'focusin']);
assert.verifySteps(focusSteps);
assert.strictEqual(document.activeElement, element, 'activeElement updated');
});

Expand Down
36 changes: 9 additions & 27 deletions tests/unit/dom/tap-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { module, test } from 'qunit';
import { tap, setContext, unsetContext } from '@ember/test-helpers';
import { buildInstrumentedElement } from '../../helpers/events';
import isIE from '../../helpers/is-ie';

module('DOM Helper: tap', function(hooks) {
let context, element;
Expand Down Expand Up @@ -78,21 +79,18 @@ module('DOM Helper: tap', function(hooks) {
});

module('focusable element types', function() {
let tapSteps = ['touchstart', 'touchend', 'mousedown', 'focus', 'focusin', 'mouseup', 'click'];

if (isIE) {
tapSteps = ['touchstart', 'touchend', 'mousedown', 'focusin', 'mouseup', 'click', 'focus'];
}
test('tapping a input via selector with context set', async function(assert) {
element = buildInstrumentedElement('input');

setContext(context);
await tap(`#${element.id}`);

assert.verifySteps([
'touchstart',
'touchend',
'mousedown',
'focus',
'focusin',
'mouseup',
'click',
]);
assert.verifySteps(tapSteps);
assert.strictEqual(document.activeElement, element, 'activeElement updated');
});

Expand All @@ -102,15 +100,7 @@ module('DOM Helper: tap', function(hooks) {
setContext(context);
await tap(element);

assert.verifySteps([
'touchstart',
'touchend',
'mousedown',
'focus',
'focusin',
'mouseup',
'click',
]);
assert.verifySteps(tapSteps);
assert.strictEqual(document.activeElement, element, 'activeElement updated');
});

Expand All @@ -119,15 +109,7 @@ module('DOM Helper: tap', function(hooks) {

await tap(element);

assert.verifySteps([
'touchstart',
'touchend',
'mousedown',
'focus',
'focusin',
'mouseup',
'click',
]);
assert.verifySteps(tapSteps);
assert.strictEqual(document.activeElement, element, 'activeElement updated');
});

Expand Down
2 changes: 1 addition & 1 deletion tests/unit/legacy-0-6-x/test-module-for-component-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ moduleForComponent('pretty-color', {

test('className', function(assert) {
this.render();
assert.ok(this._element.matches('.pretty-color'));
assert.ok(this._element.classList.contains('pretty-color'));
});

test('template', function(assert) {
Expand Down