I am new to writing unit tests.
I am trying to write a unit test for a tooltip Ember component. The usage pattern is
<div id="parent"> I have a tooltip</div>
{{tooltip-comp}}
tooltip content
{{/tooltip-comp}}
I am trying to check that clicking the parent div (with id parent), makes the 'isVisible' property true for the component.
Do I need to somehow insert a parent to DOM to be able to do this?
I am using Ember CLI.
Related
I have a contentEditable div where I want to allow users to type text, as well as insert input elements such as text boxes and dropdowns. The elements will be inserted where the cursor currently is, by allowing the user to click a button outside the editable div.
I got it working pretty well following this general example:
http://jsfiddle.net/jwvha/1/
which basically does a
document.selection.createRange().pasteHTML(html);
The problem is that it expects HTML to be passed into the function which inserts the element at cursor. For more complex things, I'd like to be able to insert Ember components with full html/js logic available, instead of trying to put all html/js into a string.
Is there a way to programmatically create a component AND insert it into a contentEditable element at cursor, while maintaining its functionality, such as actions, etc.
I'm on Ember 2.5 currently.
I think you could use a ember-cli plugin called ember-wormhole. What this component do is basically move the dom of you ember component to an html element that contains an id attribute.
e.g.
document.selection.createRange().pasteHTML('<div id="my-component-id"></div>');
use my-component-id to ember-wormhole destinantion attribute:
{{#ember-wormhole to="my-component-id"}}
{{my-component...}}
{{/ember-wormhole}}
Regarding that, you could do something like:
click() {
let componentId = 'my-component-id';
document.selection.createRange().pasteHTML(`<div id="${componentId}"></div>`);
this.get('components').pushObject(componentId); // components being an array
}
in your handlebars template:
{{#each components as |componentId|}}
{{#ember-wormhole to=componentId}}
{{my-component...}}
{{/ember-wormhole}}
{{/each}}
I have a contentEditable div where I want to allow users to type text, as well as insert input elements such as text boxes and dropdowns. The elements will be inserted where the cursor currently is, by allowing the user to click a button outside the editable div.
I got it working pretty well following this general example:
http://jsfiddle.net/jwvha/1/
which basically does a
document.selection.createRange().pasteHTML(html);
The problem is that it expects HTML to be passed into the function which inserts the element at cursor. For more complex things, I'd like to be able to insert Ember components with full html/js logic available, instead of trying to put all html/js into a string.
Is there a way to programmatically create a component AND insert it into a contentEditable element at cursor, while maintaining its functionality, such as actions, etc.
I'm on Ember 2.5 currently.
I think you could use a ember-cli plugin called ember-wormhole. What this component do is basically move the dom of you ember component to an html element that contains an id attribute.
e.g.
document.selection.createRange().pasteHTML('<div id="my-component-id"></div>');
use my-component-id to ember-wormhole destinantion attribute:
{{#ember-wormhole to="my-component-id"}}
{{my-component...}}
{{/ember-wormhole}}
Regarding that, you could do something like:
click() {
let componentId = 'my-component-id';
document.selection.createRange().pasteHTML(`<div id="${componentId}"></div>`);
this.get('components').pushObject(componentId); // components being an array
}
in your handlebars template:
{{#each components as |componentId|}}
{{#ember-wormhole to=componentId}}
{{my-component...}}
{{/ember-wormhole}}
{{/each}}
I have an app with a number of components on the page. I'd really like to know what component a given deprecation is related to. Is there a way to map an outlet to a component?
In other words if I get:
A property of <frontend#view:-outlet::ember673> was modified inside
the didInsertElement hook. You should never change properties on
components, services or models during didInsertElement because it
causes significant performance degradation.
What component is being used for ember673 ?
we have a Sitecore Project up and running, that is based on the regular aspx/ascx approach.
Over time we would like to transform our existing sublayouts to MVC.
For test purposes I am trying to add a very simple MVC text component to the project, still I am stuck somehow.
What I have done so far:
Installed MVC 5.2
Installed WebPages
Added references and bindings
Added the MVC Scaffold
Right now, the Site does compile and run.
I have this Controller:
public class TextComponentController : Controller
{
public ActionResult Index()
{
return View();
}
}
And my view:
<h2>Index</h2>
<p>Hello from my View Template</p>
So absolutely nothing special here ;)
How can I create a sublayout (without a datasource) that just displays this simple MVC component?
In the very simplest way, you need to have the following:
Item for your page, the one that has URL; that is as normal in Sitecore
That page Item should have Layout assigned. From Presentation --> Details menu select at least a layout on that stage. If you do not have layout yet, you need to create a layout definition item under /Layout/Layouts folder and associate it with certain *.cshml file. Also mention that layout should have a placeholder where you will "inject"your rendering.
#Html.Sitecore().Placeholder("Main")
You need to create a Controller Rendering under /Layout/Renderings folder in Sitecore. Make sure you set Controller and Controller Action fields to your controller name and action method name.
Finally, go again to Presentation --> Details --> Edit --> Controls and add your newly created rendering into a placeholder that you have on your layout *.cshtml file.
That's all done.
Hope this helps!
I'm using ember-cli and am writing some tests for my components. Is there a way (in the test) to pass in some block content to the component so that I can test the component use in block form?
No matter what you are passing to the component, it is just a template that is being wrapped by your component. Your unit test will be testing only the component which will remain the same regardless of the template it renders.
If you are trying to test how the component behaves during user interaction, you are talking about integration/acceptance tests. In that case you don't need to pass a block to the component because you'll be visiting routes that render templates where you have already set up your blocks.