Github user robertkowalski commented on the pull request:
https://github.com/apache/couchdb-fauxton/pull/66#issuecomment-57139659
Sure! I would create `app/addon/fauxton/tests/breadcrumbsViewSpec.js` and
add the tests to it. I added a template where I left a failing test for you
that you can turn from red into green, but feel free to add more tests!
After the Component is under test, refactoring should be quite pleasant, so
if you wanted, you could start to move some logic from the view more in the
direction of the Models. You then would just have to take care that your tests
stay green.
We are first loading all our needed AMD Modules into the test via `define`.
With `describe` from Mocha (http://visionmedia.github.io/mocha/) we are
creating a new test-block. `beforeEach` runs before each test (which is defined
by a function called `it`) and it will setup the environment for every test in
that specific block. It is possible to nest `describe` blocks. An assertion is
done via assert.equal. A full list of assertions can be found at:
http://chaijs.com/api/assert/ - The `done` callbacks are helpers for
asynchronous testing. Just call it if your async before/after/it is ready. The
`viewSandBox` is a small helper which attaches our HTML to the DOM, so we can
test it.
```javascript
// Licensed under the Apache License, Version 2.0 (the "License"); you may
not
// use this file except in compliance with the License. You may obtain a
copy of
// the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
// License for the specific language governing permissions and limitations
under
// the License.
define([
'app',
'addons/fauxton/components',
'testUtils'
], function (app, Components, testUtils) {
var assert = testUtils.assert,
ViewSandbox = testUtils.ViewSandbox;
describe('Breadcrumbs', function () {
var breadcrumbs, viewSandbox;
describe('3 Breadcrumbs', function () {
// async setup with done-callback
beforeEach(function (done) {
// initialize a Breadcrumb-View with fake data
breadcrumbs = new Components.Breadcrumbs({
crumbs: [
{link: "/root", name: "root"},
{link: "/first", name: "first"},
{link: "/second", name: "second"}
]
});
// render in a view-sandbox, which attaches it to the DOM
// for us, so we can test it
viewSandbox = new ViewSandbox();
viewSandbox.renderView(breadcrumbs, done);
});
afterEach(function () {
// sync cleanup (done callback not provided)!
viewSandbox.remove();
});
// sync test
it('should have 2 dividers between 3 breadcrumbs', function () {
assert.equal(2, breadcrumbs.$('.divider').length);
});
});
describe('1 Breadcrumbs', function () {
var breadcrumbs, viewSandbox;
beforeEach(function (done) {
breadcrumbs = new Components.Breadcrumbs({
crumbs: [
{link: "/root", name: "root"}
]
});
viewSandbox = new ViewSandbox();
viewSandbox.renderView(breadcrumbs, done);
});
afterEach(function () {
viewSandbox.remove();
});
it('should have 0 dividers for 1 breadcrumb', function () {
assert.equal(true, false);
});
});
});
});
```
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at [email protected] or file a JIRA ticket
with INFRA.
---
