{"action":"created","issue":{"url":"https://api.github.com/repos/aurelia/framework/issues/230","labels_url":"https://api.github.com/repos/aurelia/framework/issues/230/labels{/name}","comments_url":"https://api.github.com/repos/aurelia/framework/issues/230/comments","events_url":"https://api.github.com/repos/aurelia/framework/issues/230/events","html_url":"https://github.com/aurelia/framework/issues/230","id":112944142,"number":230,"title":"Provide a way to write unit tests for the view (and the DOM)","user":{"login":"sylvain-hamel","id":1754010,"avatar_url":"https://avatars.githubusercontent.com/u/1754010?v=3","gravatar_id":"","url":"https://api.github.com/users/sylvain-hamel","html_url":"https://github.com/sylvain-hamel","followers_url":"https://api.github.com/users/sylvain-hamel/followers","following_url":"https://api.github.com/users/sylvain-hamel/following{/other_user}","gists_url":"https://api.github.com/users/sylvain-hamel/gists{/gist_id}","starred_url":"https://api.github.com/users/sylvain-hamel/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sylvain-hamel/subscriptions","organizations_url":"https://api.github.com/users/sylvain-hamel/orgs","repos_url":"https://api.github.com/users/sylvain-hamel/repos","events_url":"https://api.github.com/users/sylvain-hamel/events{/privacy}","received_events_url":"https://api.github.com/users/sylvain-hamel/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2015-10-23T03:50:07Z","updated_at":"2015-10-27T17:55:08Z","closed_at":null,"body":"We need a way to unit test views and assert the state of their DOM properties. \r\n\r\nFor instance I might want a tests like this:\r\n\r\n```\r\ndescribe('a custom element that has an input bound to one of its model property', function() {\r\n\r\n  let customElement;\r\n  let domElement;\r\n\r\n  beforeEach(function() {\r\n    customElement = aurelia.some_way_to_compile('<my-custom-element></my-custom-element>');\r\n    customElement.name = \"joe\";\r\n\r\n    domElement = aurelia.some_way_to_get_DOM_element(customElement);\r\n  });\r\n\r\n  it('should have the input set to the model value', function() {\r\n    expect($(domElement).find('input').val()).toEqual(\"joe\");\r\n  });\r\n});\r\n```\r\n\r\nI posted [this question] (http://stackoverflow.com/questions/33048284/how-to-access-the-dom-element-in-an-aurelia-unit-test) on SO and @EisenbergEffect told me that it's not supported yet and that `BehaviorInstance.createForUnitTest` is made to test the controller and the model, but not the view.\r\n\r\n[This plunkr] (http://plnkr.co/edit/D2gRHPTkjklh2IZtny3Y?p=preview) shows how in the Angular world I can use the `$compiler` service to do that type of test (as well as how to mock directives). \r\n\r\nWe need the same thing for Aurelia.\r\n\r\nPS: This is not about end-to-end protractor tests."},"comment":{"url":"https://api.github.com/repos/aurelia/framework/issues/comments/151586539","html_url":"https://github.com/aurelia/framework/issues/230#issuecomment-151586539","issue_url":"https://api.github.com/repos/aurelia/framework/issues/230","id":151586539,"user":{"login":"sylvain-hamel","id":1754010,"avatar_url":"https://avatars.githubusercontent.com/u/1754010?v=3","gravatar_id":"","url":"https://api.github.com/users/sylvain-hamel","html_url":"https://github.com/sylvain-hamel","followers_url":"https://api.github.com/users/sylvain-hamel/followers","following_url":"https://api.github.com/users/sylvain-hamel/following{/other_user}","gists_url":"https://api.github.com/users/sylvain-hamel/gists{/gist_id}","starred_url":"https://api.github.com/users/sylvain-hamel/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/sylvain-hamel/subscriptions","organizations_url":"https://api.github.com/users/sylvain-hamel/orgs","repos_url":"https://api.github.com/users/sylvain-hamel/repos","events_url":"https://api.github.com/users/sylvain-hamel/events{/privacy}","received_events_url":"https://api.github.com/users/sylvain-hamel/received_events","type":"User","site_admin":false},"created_at":"2015-10-27T17:55:08Z","updated_at":"2015-10-27T17:55:08Z","body":"I agree that you'd typically test the ViewModels (and the Controllers) but I think we need a solution for less typical cases as well.\r\n\r\nIn my current angular app, 90% of the unit tests are **not** compiling directives. But the 10% that do are important because they tests key UI behaviors.\r\n\r\nGiven a view that uses a jQuery plugin (say a charting component). In order to prove that you are configuring the component right, you may have to instantiate it in the DOM and assert its state (`expect($(myChartElement).find('.data-point').length.toBe(1)`).\r\n\r\nI have a few other cases where the UI behavior relies on CSS (collapsible panels). If someone changes the CSS, I want a unit test to fail.\r\n\r\nI don't want to have this type of test in my e2e environment for two reasons:\r\n\r\n- The above tests have nothing to do with what we tests in our e2e tests (verify login page, verify order approval process, etc…).\r\n- e2e tests tend to have a lot of setup and tend to be slower. They also tend to be executed as an \"after push\" thing. I want the tests I've described above to be run locally as soon as I change a file.\r\n\r\nMoreover, I think a lot of projects don't have e2e tests at all. If Aurelia allows us to do this type of testing in a unit test, then that’s better than not testing at all. \r\n\r\nDoes that make sense to you?"}}