expand reports test spec for adding exps and init report page ui state

beat/web/reports/static/reports/test/report-spec.js

 // general tests for the reports app
 describe('reports app', function(){
+	// contain helpers for browser.wait
 	const until = protractor.ExpectedConditions;
+	// just use enter.perform() to send the enter key
+	const enter = browser.actions().sendKeys(protractor.Key.ENTER);
+	// since angular isnt configured correctly for protractor,
+	// dont make protractor wait for angular
 	browser.ignoreSynchronization = true;
-	// just to make sure the window is maximized
+	// just to make sure the window is maximized during these tests.
+	// helps with button clicking & such
 	browser.driver.manage().window().maximize();
 
 	// login to the default user ('user') once before running all these tests
@@ -87,6 +93,7 @@ describe('reports app', function(){
 		});
 	});
 
+	// go to the experiments page and add up to 5 already-ran experiments
 	describe('adding experiments to the "test" report', function(){
 		// go to experiments page
 		beforeAll(function(){
@@ -125,8 +132,252 @@ describe('reports app', function(){
 			.then(() => {
 				let headerText = element(by.css('.report-results > h5'));
 				expect(headerText.getText()).toContain('Successfully added');
+
+				return browser.get('http://localhost:8000/reports/user/test/');
+			})
+			.then(() => {
+				expect(element.all(by.css('#experiment-list-test > tbody > tr')).count()).toBeGreaterThan(0);
 			})
 			;
 		});
 	});
+
+	// create 2 groups, 'group1' & 'group2'
+	describe('creating groups', function(){
+		let newGroupInput = element(by.css('#createNewGroupInput'));
+
+		it('should create the "group1" group using the enter key', function(){
+			newGroupInput.sendKeys('group1')
+			.then(() => enter.perform())
+			.then(() => browser.wait(until.textToBePresentInElementValue(element(by.css('#createNewGroupInput')), ''), 1000))
+			.then(() => expect(element.all(by.css('#groupsLayout > div')).count()).toBe(1))
+			;
+		});
+
+		it('should create the "group2" group using the "+" button', function(){
+			newGroupInput.sendKeys('group2')
+			.then(() => element(by.css('#space-for-report-items + div button')).click())
+			.then(() => browser.wait(until.textToBePresentInElementValue(element(by.css('#createNewGroupInput')), ''), 1000))
+			.then(() => expect(element.all(by.css('#groupsLayout > div')).count()).toBe(2))
+			;
+		});
+	});
+
+	// make sure the initial report layouts page is correct
+	describe('report page state with <6 experiments & two groups', function(){
+		describe('header block', function(){
+			const header = element(by.css('.col-sm-12 > p.bs-callout.bs-callout-danger'));
+
+			it('has 4 labels', function() {
+				expect(header.all(by.tagName('br')).count()).toBe(4);
+			});
+
+			it('shows the unique report id', function() {
+				expect(header.element(by.css('.fa-arrow-circle-right + a')).getAttribute('href')).toMatch(/\/reports\/[0-9]+/);
+			});
+
+			it('shows the created date', function() {
+				expect(header.element(by.css('.fa-calendar-o + strong')).getText()).toMatch(/.+ago/);
+			});
+
+			it('shows the "last edited" date', function() {
+				expect(header.element(by.css('.fa-calendar-o + strong + br + .fa-calendar-o + strong')).getText()).toMatch(/.+ago/);
+			});
+
+			it('shows that the report is editable', function() {
+				expect(header.element(by.css('.fa-warning + strong')).getText()).toBe('Editable');
+			});
+		});
+
+		describe('documentation panel', function(){
+			it('shows the empty warning', function() {
+				expect(element(by.css('#description-display > div')).getAttribute('class')).toContain('alert-warning');
+			});
+
+			it('has an "Add" button', function() {
+				expect(element(by.css('#btn-edit-doc > i')).getAttribute('class')).toContain('fa-edit');
+			});
+		});
+
+		describe('experiments list panel', function(){
+			describe('inline toolbar', function(){
+				const toolbar = element(by.css('#filters'));
+
+				it('has 3 filters', function(){
+					expect(toolbar.all(by.xpath("./div")).count()).toBe(3);
+				});
+
+				it('has a filter-rows widget', function(){
+					expect(toolbar.element(by.css('#text-filter')).getAttribute('placeholder')).toBe('Filter rows...');
+				});
+
+				it('has an attestation filter', function(){
+					expect(toolbar.element(by.css('#attestation-filter')).all(by.tagName('option')).count()).toBe(3);
+				});
+
+				it('has a privacy filter', function(){
+					expect(toolbar.element(by.css('#privacy-filter')).all(by.tagName('option')).count()).toBe(4);
+				});
+			});
+
+			describe('table', function(){
+				const table = element(by.css('#experiment-list-test'));
+
+				it('has 8 columns', function(){
+					const cols = table.all(by.css('thead th'));
+					expect(cols.count()).toBe(8);
+
+					expect(cols.get(0).getAttribute('class')).toBe('delete');
+					expect(cols.get(1).getAttribute('class')).toBe('attestation');
+					expect(cols.get(2).getAttribute('class')).toBe('privacy');
+					expect(cols.get(3).getAttribute('class')).toBe('status');
+					expect(cols.get(4).getAttribute('class')).toBe('date');
+					expect(cols.get(5).getText()).toBe('Name');
+					expect(cols.get(6).getAttribute('class')).toBe('datasets');
+					expect(cols.get(7).getAttribute('class')).toBe('analyzers');
+				});
+
+				it('has 5 or less rows', function() {
+					const rows = table.all(by.css('tbody > tr'));
+					expect(rows.count()).toBeLessThan(6);
+				});
+
+				it('has a "Remove Selected Experiments" button', function() {
+					const b = element(by.buttonText('Remove Selected Experiments'));
+					expect(b.getAttribute('disabled')).toBeDefined();
+				});
+			});
+		});
+
+		describe('report content block', function(){
+			const groupsLayout = element(by.css('#groupsLayout'));
+
+			describe('group1 container header', function(){
+				const header = element(by.css('#group1-heading'));
+				const children = element.all(by.css('#group1-heading > h4 > *'));
+
+				it('has 5 children: a collapse link, name widget, a button group, and the add items menu', function(){
+					expect(children.count()).toBe(4);
+				});
+
+				describe('collapse link', function(){
+					it('toggles "#collapse-group1"', function(){
+						expect(children.get(0).getAttribute('href')).toContain('#collapse-group1');
+					});
+				});
+
+				describe('group name widget', function(){
+					const widgetEls = children.get(1).all(by.tagName('span'));
+					const label = widgetEls.get(0);
+					const button = widgetEls.get(1);
+
+					it('has value "group1"', function(){
+						expect(label.getText()).toBe('group1');
+					});
+
+					describe('edit button', function(){
+						it('has the pencil glyphicon', function(){
+							expect(button.getAttribute('class')).toBe('glyphicon glyphicon-pencil');
+						});
+
+						it('is clickable', function(){
+							// no direct way to check if clickable...
+							// so make sure that its not disabled & its displayed instead
+							expect(button.getAttribute('disabled')).toBeNull();
+							expect(button.isDisplayed()).toBeTruthy();
+						});
+					});
+
+				});
+
+				describe('button group', function(){
+					const grp = children.get(2);
+					const btnChildren = grp.all(by.className('btn'));
+
+					it('is a btn group', function(){
+						expect(grp.getAttribute('class')).toContain('btn-group');
+					});
+
+					it('is an action buttons', function(){
+						expect(grp.getAttribute('class')).toContain('action-buttons');
+					});
+
+					it('has btn children', function() {
+						const btnChildren = grp.all(by.className('btn'));
+						expect(btnChildren.count()).toBe(2);
+					});
+
+					it('has a button to delete a group with a red "X"', function(){
+						expect(btnChildren.get(0).getAttribute('title')).toBe('Delete Group');
+						expect(btnChildren.get(0).element(by.css('i')).getAttribute('class')).toContain('fa-times');
+					});
+
+					it('has a button to drag & sort the group with a 4-directional arrow', function(){
+						expect(btnChildren.get(1).getAttribute('title')).toBe('Drag to re-order group');
+						expect(btnChildren.get(1).element(by.css('i')).getAttribute('class')).toContain('fa-arrows');
+					});
+				});
+
+				describe('add items menu', function(){
+					const grp = children.get(3);
+					const buttons = grp.all(by.tagName('button'));
+
+					it('has 3 buttons', function(){
+						expect(buttons.count()).toBe(3);
+					});
+
+					it('is all disabled', function(){
+						expect(buttons.filter(b => b.getAttribute('disabled').then(d => d)).count()).toBe(3);
+					});
+
+					it('has a button to add plots', function(){
+						const el = element(by.buttonText('Add Plot'));
+						expect(el).toBeDefined();
+					});
+
+					it('has a button to add tables', function(){
+						const el = element(by.buttonText('Add Table'));
+						expect(el).toBeDefined();
+					});
+
+					it('has a button to add text blocks', function(){
+						const el = element(by.buttonText('Add Text Block'));
+						expect(el).toBeDefined();
+					});
+				});
+			});
+
+			describe('group1 experiments panel', function(){
+				const header = element(by.css('#group1-explist-heading'));
+				const body = element(by.css('#collapse-group1-explist'));
+
+				it('is visible', function(){
+					expect(header.isDisplayed()).toBeTruthy();
+					expect(body.isDisplayed()).toBeTruthy();
+				});
+
+				it('is empty', function(){
+					expect(element.all(by.css('#collapse-group1-explist > .panel-body > *')).count()).toBe(0);
+				});
+
+				describe('header button', function(){
+					const button = element(by.css('#group1_exp_add_dropdown'));
+
+					it('is non-disabled', function(){
+						expect(button.getAttribute('disabled')).toBeNull();
+					});
+
+					it('has the text "Add Experiment"', function(){
+						expect(button.getText()).toBe('Add Experiment');
+					});
+				});
+			});
+
+			describe('group1 content panel', function(){
+				it('doesnt exist', function(){
+					expect(element.all(by.css('#collapse-group1 > *')).count()).toBe(1);
+				});
+			});
+		});
+	});
 });