Skip to content

Commit c9c3c69

Browse files
Gaurav0Gaurav0
authored
Merge pull request #701 from Gaurav0/ember_optional_features
Ember optional features
2 parents c054ae9 + d9a2a0e commit c9c3c69

8 files changed

Lines changed: 226 additions & 8 deletions

File tree

‎app/components/dummy-app.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export default Component.extend(ResizeMixin, {
6565
let offset = this.$().offset(), width = this.$().width(),
6666
height = this.$().height();
6767

68-
$('#root').css({
68+
$('#main').css({
6969
top: offset.top,
7070
left: offset.left,
7171
width: width,

‎app/services/ember-cli.js‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -286,9 +286,7 @@ export default Service.extend({
286286

287287
let contentForBody = `${depScriptTags}\n${appScriptTag}\n${testStuff}\n`;
288288

289-
if (!testingEnabled(twiddleJSON) || legacyTesting(twiddleJSON)) {
290-
contentForBody += '<div id="root"></div>';
291-
}
289+
contentForBody += '<div id="root"></div>';
292290

293291
index = index.replace('{{content-for \'body\'}}', contentForBody);
294292

@@ -579,7 +577,7 @@ function contentForAppBoot(content, config) {
579577
*/
580578
function calculateAppConfig(config) {
581579
let appConfig = config.APP || {};
582-
appConfig.rootElement="#root";
580+
appConfig.rootElement="#main";
583581
return JSON.stringify(appConfig);
584582
}
585583

‎app/styles/_main.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ body {
88
width: 100%;
99
}
1010

11-
#root {
11+
#main {
1212
position: absolute;
1313
}
1414

‎blueprints/twiddle.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
{
22
"version": "0.17.0",
33
"EmberENV": {
4-
"FEATURES": {}
4+
"FEATURES": {},
5+
"_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
6+
"_APPLICATION_TEMPLATE_WRAPPER": true,
7+
"_JQUERY_INTEGRATION": true
58
},
69
"options": {
710
"use_pods": false,

‎tests/acceptance/application-template-wrapper-test.js‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import { module, test } from 'qunit';
2+
import { setupApplicationTest } from 'ember-qunit';
3+
import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
4+
import runGist from '../helpers/run-gist';
5+
import outputPane from '../helpers/output-pane';
6+
7+
let files = [
8+
{
9+
filename: "templates.application.hbs",
10+
content: `<h1>Welcome to {{this.appName}}</h1>`
11+
},
12+
{
13+
filename: "controllers.application.js",
14+
content: `import Controller from '@ember/controller';
15+
16+
export default class ApplicationController extends Controller {
17+
appName = 'Ember Twiddle';
18+
}`
19+
},
20+
{
21+
filename: "twiddle.json",
22+
content: `{
23+
"version": "0.17.0",
24+
"EmberENV": {
25+
"FEATURES": {},
26+
"_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
27+
"_APPLICATION_TEMPLATE_WRAPPER": true,
28+
"_JQUERY_INTEGRATION": true
29+
},
30+
"options": {
31+
"use_pods": false,
32+
"enable-testing": false
33+
},
34+
"dependencies": {
35+
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
36+
"ember": "3.14.3",
37+
"ember-template-compiler": "3.14.3",
38+
"ember-testing": "3.14.3"
39+
},
40+
"addons": {
41+
"ember-data": "3.14.1"
42+
}
43+
}`
44+
}
45+
];
46+
47+
function setFlag(state) {
48+
let file = files.find(file => file.filename === 'twiddle.json');
49+
let twiddleJSON = JSON.parse(file.content);
50+
twiddleJSON.EmberENV["_APPLICATION_TEMPLATE_WRAPPER"] = state;
51+
file.content = JSON.stringify(twiddleJSON);
52+
}
53+
54+
module('Acceptance | application-template-wrapper', function(hooks) {
55+
setupApplicationTest(hooks);
56+
setupMirage(hooks);
57+
58+
test('application template wrapper off', async function(assert) {
59+
60+
setFlag(false);
61+
62+
await runGist(files);
63+
64+
assert.equal(outputPane().document.querySelector('h1').textContent.trim(), 'Welcome to Ember Twiddle', 'content loaded');
65+
assert.equal(outputPane().document.querySelectorAll('.ember-application>.ember-view>h1').length, 0, 'content is not inside wrapper');
66+
});
67+
68+
test('application template wrapper on', async function(assert) {
69+
70+
setFlag(true);
71+
72+
await runGist(files);
73+
74+
assert.equal(outputPane().document.querySelector('h1').textContent.trim(), 'Welcome to Ember Twiddle', 'content loaded');
75+
assert.equal(outputPane().document.querySelectorAll('.ember-application>.ember-view>h1').length, 1, 'content is inside wrapper');
76+
});
77+
});

‎tests/acceptance/jquery-integration-test.js‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { module, test } from 'qunit';
2+
import { setupApplicationTest } from 'ember-qunit';
3+
import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
4+
import runGist from '../helpers/run-gist';
5+
import outputContents from '../helpers/output-contents';
6+
7+
module('Acceptance | jquery-integration', function(hooks) {
8+
setupApplicationTest(hooks);
9+
setupMirage(hooks);
10+
11+
test('can turn jquery integration off', async function(assert) {
12+
13+
let files = [
14+
{
15+
filename: "templates.application.hbs",
16+
content: `<h1>Welcome to {{this.appName}}</h1>`
17+
},
18+
{
19+
filename: "controllers.application.js",
20+
content: `import Controller from '@ember/controller';
21+
22+
export default class ApplicationController extends Controller {
23+
appName = 'Ember Twiddle';
24+
}`
25+
},
26+
{
27+
filename: "twiddle.json",
28+
content: `{
29+
"version": "0.17.0",
30+
"EmberENV": {
31+
"FEATURES": {},
32+
"_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
33+
"_APPLICATION_TEMPLATE_WRAPPER": false,
34+
"_JQUERY_INTEGRATION": false
35+
},
36+
"options": {
37+
"use_pods": false,
38+
"enable-testing": false
39+
},
40+
"dependencies": {
41+
"ember": "3.14.3",
42+
"ember-template-compiler": "3.14.3",
43+
"ember-testing": "3.14.3"
44+
},
45+
"addons": {
46+
"ember-data": "3.14.1"
47+
}
48+
}`
49+
}
50+
];
51+
52+
await runGist(files);
53+
54+
assert.equal(outputContents(), 'Welcome to Ember Twiddle');
55+
});
56+
});

‎tests/acceptance/template-only-glimmer-components-test.js‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import { module, test } from 'qunit';
2+
import { setupApplicationTest } from 'ember-qunit';
3+
import setupMirage from 'ember-cli-mirage/test-support/setup-mirage';
4+
import runGist from '../helpers/run-gist';
5+
import outputPane from '../helpers/output-pane';
6+
7+
let files = [
8+
{
9+
filename: "templates.application.hbs",
10+
content: `<h1>Welcome to {{this.appName}}</h1>
11+
<div class="test-parent">
12+
<MyComponent @appName={{this.appName}} />
13+
</div>`
14+
},
15+
{
16+
filename: "controllers.application.js",
17+
content: `import Controller from '@ember/controller';
18+
19+
export default class ApplicationController extends Controller {
20+
appName = 'Ember Twiddle';
21+
}`
22+
},
23+
{
24+
filename: "templates.components.my-component.hbs",
25+
content: `{{@appName}}`
26+
},
27+
{
28+
filename: "twiddle.json",
29+
content: `{
30+
"version": "0.17.0",
31+
"EmberENV": {
32+
"FEATURES": {},
33+
"_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
34+
"_APPLICATION_TEMPLATE_WRAPPER": true,
35+
"_JQUERY_INTEGRATION": true
36+
},
37+
"options": {
38+
"use_pods": false,
39+
"enable-testing": false
40+
},
41+
"dependencies": {
42+
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
43+
"ember": "3.14.3",
44+
"ember-template-compiler": "3.14.3",
45+
"ember-testing": "3.14.3"
46+
},
47+
"addons": {
48+
"ember-data": "3.14.1"
49+
}
50+
}`
51+
}
52+
];
53+
54+
function setFlag(state) {
55+
let file = files.find(file => file.filename === 'twiddle.json');
56+
let twiddleJSON = JSON.parse(file.content);
57+
twiddleJSON.EmberENV["_TEMPLATE_ONLY_GLIMMER_COMPONENTS"] = state;
58+
file.content = JSON.stringify(twiddleJSON);
59+
}
60+
61+
module('Acceptance | template-only-glimmer-components', function(hooks) {
62+
setupApplicationTest(hooks);
63+
setupMirage(hooks);
64+
65+
test('template only glimmer components off', async function(assert) {
66+
67+
setFlag(false);
68+
69+
await runGist(files);
70+
71+
assert.equal(outputPane().document.querySelector('.test-parent').textContent.trim(), 'Ember Twiddle', 'content loaded');
72+
assert.equal(outputPane().document.querySelectorAll('.test-parent>.ember-view').length, 1, 'content is inside wrapper div');
73+
});
74+
75+
test('template only glimmer components on', async function(assert) {
76+
77+
setFlag(true);
78+
79+
await runGist(files);
80+
81+
assert.equal(outputPane().document.querySelector('.test-parent').textContent.trim(), 'Ember Twiddle', 'content loaded');
82+
assert.equal(outputPane().document.querySelectorAll('.test-parent>.ember-view').length, 0, 'content is not inside wrapper div');
83+
});
84+
});

‎tests/helpers/output-contents.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import outputPane from './output-pane';
22

33
export default function(selector) {
44
let output = outputPane();
5-
let outputDiv = output.document.querySelector('#root');
5+
let outputDiv = output.document.querySelector('#main');
66
if (selector) {
77
return outputDiv.querySelector(selector).textContent.trim();
88
}

0 commit comments

Comments
 (0)