diff --git a/spec/javascripts/app/collections/aspects_spec.js b/spec/javascripts/app/collections/aspects_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..0c879501c1540909a196ba1c001b6a535859a145
--- /dev/null
+++ b/spec/javascripts/app/collections/aspects_spec.js
@@ -0,0 +1,89 @@
+describe("app.collections.Aspects", function(){
+ beforeEach(function(){
+ var my_aspects = [{ name: 'Work', selected: true },
+ { name: 'Friends', selected: false },
+ { name: 'Acquaintances', selected: false }]
+ this.aspects = new app.collections.Aspects(my_aspects);
+ });
+
+ describe("#selectAll", function(){
+ it("selects every aspect in the collection", function(){
+ this.aspects.selectAll();
+ this.aspects.each(function(aspect){
+ expect(aspect.get('selected')).toBeTruthy();
+ });
+ });
+ });
+
+ describe("#deselectAll", function(){
+ it("deselects every aspect in the collection", function(){
+ this.aspects.deselectAll();
+ this.aspects.each(function(aspect){
+ expect(aspect.get('selected')).toBeFalsy();
+ });
+ });
+ });
+
+ describe("#allSelected", function(){
+ it("returns true if every aspect is selected", function(){
+ this.aspects.at(1).set('selected', true);
+ this.aspects.at(2).set('selected', true);
+ expect(this.aspects.allSelected()).toBeTruthy();
+ });
+
+ it("returns false if at least one aspect is not selected", function(){
+ expect(this.aspects.allSelected()).toBeFalsy();
+ });
+ });
+
+ describe("#toSentence", function(){
+ describe('without aspects', function(){
+ beforeEach(function(){
+ this.aspects = new app.collections.Aspects({ name: 'Work', selected: false })
+ spyOn(this.aspects, 'selectedAspects').andCallThrough();
+ });
+
+ it("returns the name of the aspect", function(){
+ expect(this.aspects.toSentence()).toEqual('My Aspects');
+ expect(this.aspects.selectedAspects).toHaveBeenCalled();
+ });
+ });
+
+ describe("with one aspect", function(){
+ beforeEach(function(){
+ this.aspects = new app.collections.Aspects({ name: 'Work', selected: true })
+ spyOn(this.aspects, 'selectedAspects').andCallThrough();
+ });
+
+ it("returns the name of the aspect", function(){
+ expect(this.aspects.toSentence()).toEqual('Work');
+ expect(this.aspects.selectedAspects).toHaveBeenCalled();
+ });
+ });
+
+ describe("with three aspect", function(){
+ it("returns the name of the selected aspect", function(){
+ expect(this.aspects.toSentence()).toEqual('Work');
+ });
+
+ it("returns the names of the two selected aspects", function(){
+ this.aspects.at(1).set('selected', true);
+ expect(this.aspects.toSentence()).toEqual('Work and Friends');
+ });
+
+ it("returns the names of the selected aspects in a comma-separated sentence", function(){
+ this.aspects.at(1).set('selected', true);
+ this.aspects.at(2).set('selected', true);
+ expect(this.aspects.toSentence()).toEqual('Work, Friends and Acquaintances');
+ });
+ });
+ });
+
+ describe("#selectedAspects", function(){
+ describe("by name", function(){
+ it("returns the names of the selected aspects", function(){
+ expect(this.aspects.selectedAspects('name')).toEqual(["Work"]);
+ });
+ });
+ });
+});
diff --git a/spec/javascripts/app/models/aspect_spec.js b/spec/javascripts/app/models/aspect_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..72ab56047ce8365ac686c04117c718c69bdd6c99
--- /dev/null
+++ b/spec/javascripts/app/models/aspect_spec.js
@@ -0,0 +1,15 @@
+describe("app.models.Aspect", function(){
+ describe("#toggleSelected", function(){
+ it("should select the aspect", function(){
+ this.aspect = new app.models.Aspect({ name: 'John Doe', selected: false });
+ this.aspect.toggleSelected();
+ expect(this.aspect.get("selected")).toBeTruthy();
+ });
+
+ it("should deselect the aspect", function(){
+ this.aspect = new app.models.Aspect({ name: 'John Doe', selected: true });
+ this.aspect.toggleSelected();
+ expect(this.aspect.get("selected")).toBeFalsy();
+ });
+ });
+});
diff --git a/spec/javascripts/app/views/aspect_view_spec.js b/spec/javascripts/app/views/aspect_view_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..cfdbb387d96ee7344b9be6d568cbf3d90c609c48
--- /dev/null
+++ b/spec/javascripts/app/views/aspect_view_spec.js
@@ -0,0 +1,42 @@
+describe("app.views.Aspect", function(){
+ beforeEach(function(){
+ this.aspect = new app.models.Aspect({ name: 'Acquaintances', selected: true });
+ this.view = new app.views.Aspect({ model: this.aspect });
+ });
+
+ describe("render", function(){
+ beforeEach(function(){
+ this.view.render();
+ });
+
+ it('should show the aspect selected', function(){
+ expect(this.view.$el.hasClass('active')).toBeTruthy();
+ });
+
+ it('should show the name of the aspect', function(){
+ expect(this.view.$('a.aspect_selector').text()).toMatch('Acquaintances');
+ });
+
+ describe('selecting aspects', function(){
+ beforeEach(function(){
+ app.router = new app.Router();
+ spyOn(app.router, 'aspects_stream');
+ spyOn(this.view, 'toggleAspect').andCallThrough();
+ this.view.delegateEvents();
+ });
+
+ it('it should deselect the aspect', function(){
+ this.view.$('a.aspect_selector').trigger('click');
+ expect(this.view.toggleAspect).toHaveBeenCalled();
+ expect(this.view.$el.hasClass('active')).toBeFalsy();
+ expect(app.router.aspects_stream).toHaveBeenCalled();
+ });
+
+ it('should call #toggleSelected on the model', function(){
+ spyOn(this.aspect, 'toggleSelected');
+ this.view.$('a.aspect_selector').trigger('click');
+ expect(this.aspect.toggleSelected).toHaveBeenCalled();
+ });
+ });
+ });
+});
diff --git a/spec/javascripts/app/views/aspects_list_view_spec.js b/spec/javascripts/app/views/aspects_list_view_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..27b5ed9726ff117b74ae871899a9a837d5c5b4a0
--- /dev/null
+++ b/spec/javascripts/app/views/aspects_list_view_spec.js
@@ -0,0 +1,61 @@
+describe("app.views.AspectsList", function(){
+ beforeEach(function(){
+ setFixtures('<ul id="aspects_list"></ul>');
+ Diaspora.I18n.loadLocale({ aspect_navigation : {
+ 'select_all' : 'Select all',
+ 'deselect_all' : 'Deselect all'
+ }});
+
+ var aspects = [{ name: 'Work', selected: true },
+ { name: 'Friends', selected: false },
+ { name: 'Acquaintances', selected: false }];
+ this.aspects = new app.collections.Aspects(aspects);
+ this.view = new app.views.AspectsList({ collection: this.aspects });
+ });
+
+ describe('rendering', function(){
+ beforeEach(function(){
+ this.view.render();
+ });
+
+ it('should show the corresponding aspects selected', function(){
+ expect(this.view.$('.active').length).toBe(1);
+ expect(this.view.$('.active > .aspect_selector').text()).toMatch('Work');
+ });
+
+ it('should show all the aspects', function(){
+ var aspect_selectors = this.view.$('.aspect_selector');
+ expect(aspect_selectors.length).toBe(3)
+ expect(aspect_selectors[0].text).toMatch('Work');
+ expect(aspect_selectors[1].text).toMatch('Friends');
+ expect(aspect_selectors[2].text).toMatch('Acquaintances');
+ });
+
+ it('should show \'Select all\' link', function(){
+ expect(this.view.$('.toggle_selector').text()).toMatch('Select all');
+ });
+
+ describe('selecting aspects', function(){
+ context('selecting all aspects', function(){
+ beforeEach(function(){
+ app.router = new app.Router();
+ spyOn(app.router, 'aspects_stream');
+ spyOn(this.view, 'toggleAll').andCallThrough();
+ spyOn(this.view, 'toggleSelector').andCallThrough();
+ this.view.delegateEvents();
+ this.view.$('.toggle_selector').click();
+ });
+
+ it('should show all the aspects selected', function(){
+ expect(this.view.toggleAll).toHaveBeenCalled();
+ expect(this.view.$('li.active').length).toBe(3);
+ });
+
+ it('should show \'Deselect all\' link', function(){
+ expect(this.view.toggleSelector).toHaveBeenCalled();
+ expect(this.view.$('.toggle_selector').text()).toMatch('Deselect all');
+ });
+ });
+ });
+ });
+});