ylqjgm
/
canvas-lms
mirror of https://github.com/instructure/canvas-lms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add ViewOptionsMenu fly-out menus 

closes: CNVS-37089

Test Plan:
 - Given new Gradebook feature enabled
 - When the View Menu in Gradebook is open
 - Then the Arrange By sub-menu is now a fly-out menu

Change-Id: I94fc3ab89226bd183b09980ea47bf845e02971b3
Reviewed-on: https://gerrit.instructure.com/113097
Tested-by: Jenkins
Reviewed-by: Shahbaz Javeed <sjaveed@instructure.com>
Reviewed-by: Spencer Olson <solson@instructure.com>
QA-Review: Anju Reddy <areddy@instructure.com>
Product-Review: Christi Wruck
This commit is contained in:
Derek Bender 2017-05-24 17:24:31 -05:00 committed by Keith T. Garner
parent 69d4f0b5e3
commit 25e7be975f
7 changed files with 243 additions and 327 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
app/jsx/gradezilla/default_gradebook/components/ViewOptionsMenu.js
View File

@ -20,11 +20,17 @@ import React from 'react';
import { arrayOf, bool, func, shape, string } from 'prop-types'
import IconMiniArrowDownSolid from 'instructure-icons/lib/Solid/IconMiniArrowDownSolid'
import Button from 'instructure-ui/lib/components/Button';
import { MenuItem, MenuItemGroup, MenuItemSeparator } from 'instructure-ui/lib/components/Menu';
import {
MenuItem,
MenuItemGroup,
MenuItemFlyout,
MenuItemSeparator
} from 'instructure-ui/lib/components/Menu';
import PopoverMenu from 'instructure-ui/lib/components/PopoverMenu';
import Typography from 'instructure-ui/lib/components/Typography';
import I18n from 'i18n!gradebook';
import { filterLabels } from 'jsx/gradezilla/default_gradebook/constants/ViewOptions';
import ScreenReaderContent from 'instructure-ui/lib/components/ScreenReaderContent';
function renderTriggerButton (bindButton) {
return (
@ -68,12 +74,11 @@ class ViewOptionsMenu extends React.Component {
constructor (props) {
super(props);
this.onFilterSelect = (_event, filters) => {
this.props.filterSettings.onSelect(filters);
};
this.onFilterSelect = (_event, filters) => { this.props.filterSettings.onSelect(filters) };
this.bindMenuContent = (menuContent) => { this.menuContent = menuContent };
this.bindButton = (button) => { this.button = button };
this.bindStatusesMenuItem = (menuItem) => { this.statusesMenuItem = menuItem };
this.bindArrangeByMenuContent = (menuContent) => { this.arrangeByMenuContent = menuContent };
}
areColumnsOrderedBy (criterion, direction) {
@ -97,63 +102,68 @@ class ViewOptionsMenu extends React.Component {
trigger={renderTriggerButton(this.bindButton)}
contentRef={this.bindMenuContent}
>
<MenuItemGroup label={I18n.t('Arrange By')}>
<MenuItem
disabled={this.props.columnSortSettings.disabled}
selected={this.areColumnsOrderedBy('default')}
onSelect={this.props.columnSortSettings.onSortByDefault}
>
{ I18n.t('Default Order') }
</MenuItem>
<MenuItemFlyout
contentRef={this.bindArrangeByMenuContent}
label={I18n.t('Arrange By')}
>
<MenuItemGroup label={<ScreenReaderContent>{I18n.t('Arrange By')}</ScreenReaderContent>}>
<MenuItem
disabled={this.props.columnSortSettings.disabled}
selected={this.areColumnsOrderedBy('default')}
onSelect={this.props.columnSortSettings.onSortByDefault}
>
{ I18n.t('Default Order') }
</MenuItem>
<MenuItem
disabled={this.props.columnSortSettings.disabled}
selected={this.areColumnsOrderedBy('name', 'ascending')}
onSelect={this.props.columnSortSettings.onSortByNameAscending}
>
{ I18n.t('Assignment Name - A-Z') }
</MenuItem>
<MenuItem
disabled={this.props.columnSortSettings.disabled}
selected={this.areColumnsOrderedBy('name', 'ascending')}
onSelect={this.props.columnSortSettings.onSortByNameAscending}
>
{ I18n.t('Assignment Name - A-Z') }
</MenuItem>
<MenuItem
disabled={this.props.columnSortSettings.disabled}
selected={this.areColumnsOrderedBy('name', 'descending')}
onSelect={this.props.columnSortSettings.onSortByNameDescending}
>
{ I18n.t('Assignment Name - Z-A') }
</MenuItem>
<MenuItem
disabled={this.props.columnSortSettings.disabled}
selected={this.areColumnsOrderedBy('name', 'descending')}
onSelect={this.props.columnSortSettings.onSortByNameDescending}
>
{ I18n.t('Assignment Name - Z-A') }
</MenuItem>
<MenuItem
disabled={this.props.columnSortSettings.disabled}
selected={this.areColumnsOrderedBy('due_date', 'ascending')}
onSelect={this.props.columnSortSettings.onSortByDueDateAscending}
>
{ I18n.t('Due Date - Oldest to Newest') }
</MenuItem>
<MenuItem
disabled={this.props.columnSortSettings.disabled}
selected={this.areColumnsOrderedBy('due_date', 'ascending')}
onSelect={this.props.columnSortSettings.onSortByDueDateAscending}
>
{ I18n.t('Due Date - Oldest to Newest') }
</MenuItem>
<MenuItem
disabled={this.props.columnSortSettings.disabled}
selected={this.areColumnsOrderedBy('due_date', 'descending')}
onSelect={this.props.columnSortSettings.onSortByDueDateDescending}
>
{ I18n.t('Due Date - Newest to Oldest') }
</MenuItem>
<MenuItem
disabled={this.props.columnSortSettings.disabled}
selected={this.areColumnsOrderedBy('due_date', 'descending')}
onSelect={this.props.columnSortSettings.onSortByDueDateDescending}
>
{ I18n.t('Due Date - Newest to Oldest') }
</MenuItem>
<MenuItem
disabled={this.props.columnSortSettings.disabled}
selected={this.areColumnsOrderedBy('points', 'ascending')}
onSelect={this.props.columnSortSettings.onSortByPointsAscending}
>
{ I18n.t('Points - Lowest to Highest') }
</MenuItem>
<MenuItem
disabled={this.props.columnSortSettings.disabled}
selected={this.areColumnsOrderedBy('points', 'ascending')}
onSelect={this.props.columnSortSettings.onSortByPointsAscending}
>
{ I18n.t('Points - Lowest to Highest') }
</MenuItem>
<MenuItem
disabled={this.props.columnSortSettings.disabled}
selected={this.areColumnsOrderedBy('points', 'descending')}
onSelect={this.props.columnSortSettings.onSortByPointsDescending}
>
{ I18n.t('Points - Highest to Lowest') }
</MenuItem>
</MenuItemGroup>
<MenuItem
disabled={this.props.columnSortSettings.disabled}
selected={this.areColumnsOrderedBy('points', 'descending')}
onSelect={this.props.columnSortSettings.onSortByPointsDescending}
>
{ I18n.t('Points - Highest to Lowest') }
</MenuItem>
</MenuItemGroup>
</MenuItemFlyout>
<MenuItemSeparator />

329
spec/javascripts/jsx/gradezilla/default_gradebook/components/ViewOptionsMenuSpec.js
View File

@ -56,6 +56,14 @@ function mountAndOpenOptions (props) {
return wrapper;
}
function openArrangeBy (props) {
const wrapper = mountAndOpenOptions(props);
const menuContent = new ReactWrapper(wrapper.node.menuContent, wrapper.node);
const flyout = menuContent.find('MenuItemFlyout');
flyout.find('button').simulate('mouseOver');
return wrapper;
}
QUnit.module('ViewOptionsMenu#focus');
test('trigger is focused', function () {
@ -94,14 +102,14 @@ QUnit.module('ViewOptionsMenu - notes', {
test('teacher notes are optionally enabled', function () {
this.wrapper = mountAndOpenOptions(this.props);
const notesMenuItem = this.getMenuItem();
strictEqual(notesMenuItem.prop('disabled'), false)
strictEqual(notesMenuItem.prop('disabled'), false);
});
test('teacher notes are optionally disabled', function () {
this.props.teacherNotes.disabled = true;
this.wrapper = mountAndOpenOptions(this.props);
const notesMenuItem = this.getMenuItem();
equal(notesMenuItem.prop('disabled'), true)
equal(notesMenuItem.prop('disabled'), true);
});
test('triggers the onSelect when the "Notes" option is clicked', function () {
@ -138,10 +146,9 @@ QUnit.module('ViewOptionsMenu - Filters', {
},
findMenuItem (text) {
return this.findMenuItemGroup('Filters')
.findWhere(component => (
component.name() === 'MenuItem' && component.text().includes(text)
));
return this.findMenuItemGroup('Filters').findWhere(component => (
component.name() === 'MenuItem' && component.text().includes(text)
));
},
teardown () {
@ -152,7 +159,7 @@ QUnit.module('ViewOptionsMenu - Filters', {
test('includes each available filter', function () {
this.wrapper = mountAndOpenOptions(this.props);
const group = this.findMenuItemGroup('Filters');
strictEqual(group.find('MenuItem').length, 4)
strictEqual(group.find('MenuItem').length, 4);
});
test('displays filters by name', function () {
@ -255,7 +262,7 @@ test('onSelectShowUnpublishedAssignment is called when selected', function () {
});
QUnit.module('ViewOptionsMenu - Column Sorting', {
getProps (criterion = 'due_date', direction = 'ascending', disabled = false) {
props (criterion = 'due_date', direction = 'ascending', disabled = false) {
return {
...createExampleProps(),
columnSortSettings: {
@ -268,272 +275,184 @@ QUnit.module('ViewOptionsMenu - Column Sorting', {
onSortByDueDateAscending: this.stub(),
onSortByDueDateDescending: this.stub(),
onSortByPointsAscending: this.stub(),
onSortByPointsDescending: this.stub()
onSortByPointsDescending: this.stub(),
}
};
},
});
getMenuContainer () {
return new ReactWrapper(this.wrapper.node.menuContent, this.wrapper.node);
},
getMenuItemGroup (name) {
let selectedMenuItemGroup;
const menuContainer = this.getMenuContainer();
const menuItemGroups = menuContainer.find('MenuItemGroup');
const menuItemGroupCount = menuItemGroups.length;
for (let groupIdx = 0; groupIdx < menuItemGroupCount; groupIdx++) {
const group = menuItemGroups.at(groupIdx);
if (group.props().label === name) {
selectedMenuItemGroup = group;
break;
}
}
return selectedMenuItemGroup;
},
getMenuItem (name, menuItemContainer) {
let selectedMenuItem;
const container = menuItemContainer || this.getMenuContainer();
const menuItems = container.find('MenuItem');
const menuItemCount = menuItems.length;
for (let menuItemIdx = 0; menuItemIdx < menuItemCount; menuItemIdx++) {
const menuItem = menuItems.at(menuItemIdx);
if (menuItem.text().trim() === name) {
selectedMenuItem = menuItem;
break;
}
}
return selectedMenuItem;
},
getMenuItems (filterProp, filterValue, menuItemContainer) {
const selectedMenuItems = [];
const container = menuItemContainer || this.getMenuContainer();
const menuItems = container.find('MenuItem');
const menuItemCount = menuItems.length;
for (let menuItemIdx = 0; menuItemIdx < menuItemCount; menuItemIdx++) {
const menuItem = menuItems.at(menuItemIdx);
if (filterProp === undefined || menuItem.props()[filterProp] === filterValue) {
selectedMenuItems.push(menuItem);
}
}
return selectedMenuItems;
},
teardown () {
if (this.wrapper) {
this.wrapper.unmount();
}
}
test('Arrange By menu does not allow multiple selections', function () {
const wrapper = openArrangeBy(this.props('default', 'acending'));
const arrangeByMenu = new ReactWrapper(wrapper.node.arrangeByMenuContent, wrapper.node);
const arrangeByFlyout = arrangeByMenu.find('MenuItemGroup');
equal(arrangeByFlyout.props().allowMultiple, false);
});
test('Default Order is selected when criterion is default and direction is ascending', function () {
const props = this.getProps('default', 'ascending');
const wrapper = openArrangeBy(this.props('default', 'acending'));
const arrangeByMenu = new ReactWrapper(wrapper.node.arrangeByMenuContent, wrapper.node);
const arrangeByMenuItems = arrangeByMenu.find('MenuItem').map(menuItem => menuItem);
const selectedMenuItem = arrangeByMenuItems.find(menuItem => menuItem.props().selected);
this.wrapper = mountAndOpenOptions(props);
const arrangeByMenuItemGroup = this.getMenuItemGroup('Arrange By');
const selectedMenuItems = this.getMenuItems('selected', true, arrangeByMenuItemGroup);
strictEqual(selectedMenuItems.length, 1, 'only one menu item should be selected');
strictEqual(selectedMenuItems[0].text().trim(), 'Default Order');
equal(selectedMenuItem.text().trim(), 'Default Order');
});
test('Default Order is selected when criterion is default and direction is descending', function () {
const props = this.getProps('default', 'descending');
const wrapper = openArrangeBy(this.props('default', 'descending'));
const arrangeByMenu = new ReactWrapper(wrapper.node.arrangeByMenuContent, wrapper.node);
const arrangeByMenuItems = arrangeByMenu.find('MenuItem').map(menuItem => menuItem);
const selectedMenuItem = arrangeByMenuItems.find(menuItem => menuItem.props().selected);
this.wrapper = mountAndOpenOptions(props);
const arrangeByMenuItemGroup = this.getMenuItemGroup('Arrange By');
const selectedMenuItems = this.getMenuItems('selected', true, arrangeByMenuItemGroup);
strictEqual(selectedMenuItems.length, 1, 'only one menu item should be selected');
strictEqual(selectedMenuItems[0].text().trim(), 'Default Order');
equal(selectedMenuItem.text().trim(), 'Default Order');
});
test('Assignment Name - A-Z is selected when criterion is name and direction is ascending', function () {
const props = this.getProps('name', 'ascending');
const wrapper = openArrangeBy(this.props('name', 'ascending'));
const arrangeByMenu = new ReactWrapper(wrapper.node.arrangeByMenuContent, wrapper.node);
const arrangeByMenuItems = arrangeByMenu.find('MenuItem').map(menuItem => menuItem);
const selectedMenuItem = arrangeByMenuItems.find(menuItem => menuItem.props().selected);
this.wrapper = mountAndOpenOptions(props);
const arrangeByMenuItemGroup = this.getMenuItemGroup('Arrange By');
const selectedMenuItems = this.getMenuItems('selected', true, arrangeByMenuItemGroup);
strictEqual(selectedMenuItems.length, 1, 'only one menu item should be selected');
strictEqual(selectedMenuItems[0].text().trim(), 'Assignment Name - A-Z');
equal(selectedMenuItem.text().trim(), 'Assignment Name - A-Z');
});
test('Assignment Name - Z-A is selected when criterion is name and direction is ascending', function () {
const props = this.getProps('name', 'descending');
const wrapper = openArrangeBy(this.props('name', 'descending'));
const arrangeByMenu = new ReactWrapper(wrapper.node.arrangeByMenuContent, wrapper.node);
const arrangeByMenuItems = arrangeByMenu.find('MenuItem').map(menuItem => menuItem);
const selectedMenuItem = arrangeByMenuItems.find(menuItem => menuItem.props().selected);
this.wrapper = mountAndOpenOptions(props);
const arrangeByMenuItemGroup = this.getMenuItemGroup('Arrange By');
const selectedMenuItems = this.getMenuItems('selected', true, arrangeByMenuItemGroup);
strictEqual(selectedMenuItems.length, 1, 'only one menu item should be selected');
strictEqual(selectedMenuItems[0].text().trim(), 'Assignment Name - Z-A');
equal(selectedMenuItem.text().trim(), 'Assignment Name - Z-A');
});
test('Due Date - Oldest to Newest is selected when criterion is name and direction is ascending', function () {
const props = this.getProps('due_date', 'ascending');
const wrapper = openArrangeBy(this.props('due_date', 'ascending'));
const arrangeByMenu = new ReactWrapper(wrapper.node.arrangeByMenuContent, wrapper.node);
const arrangeByMenuItems = arrangeByMenu.find('MenuItem').map(menuItem => menuItem);
const selectedMenuItem = arrangeByMenuItems.find(menuItem => menuItem.props().selected);
this.wrapper = mountAndOpenOptions(props);
const arrangeByMenuItemGroup = this.getMenuItemGroup('Arrange By');
const selectedMenuItems = this.getMenuItems('selected', true, arrangeByMenuItemGroup);
strictEqual(selectedMenuItems.length, 1, 'only one menu item should be selected');
strictEqual(selectedMenuItems[0].text().trim(), 'Due Date - Oldest to Newest');
equal(selectedMenuItem.text().trim(), 'Due Date - Oldest to Newest');
});
test('Due Date - Oldest to Newest is selected when criterion is name and direction is ascending', function () {
const props = this.getProps('due_date', 'descending');
const wrapper = openArrangeBy(this.props('due_date', 'descending'));
const arrangeByMenu = new ReactWrapper(wrapper.node.arrangeByMenuContent, wrapper.node);
const arrangeByMenuItems = arrangeByMenu.find('MenuItem').map(menuItem => menuItem);
const selectedMenuItem = arrangeByMenuItems.find(menuItem => menuItem.props().selected);
this.wrapper = mountAndOpenOptions(props);
const arrangeByMenuItemGroup = this.getMenuItemGroup('Arrange By');
const selectedMenuItems = this.getMenuItems('selected', true, arrangeByMenuItemGroup);
strictEqual(selectedMenuItems.length, 1, 'only one menu item should be selected');
strictEqual(selectedMenuItems[0].text().trim(), 'Due Date - Newest to Oldest');
equal(selectedMenuItem.text().trim(), 'Due Date - Newest to Oldest');
});
test('Points - Lowest to Highest is selected when criterion is name and direction is ascending', function () {
const props = this.getProps('points', 'ascending');
const wrapper = openArrangeBy(this.props('points', 'ascending'));
const arrangeByMenu = new ReactWrapper(wrapper.node.arrangeByMenuContent, wrapper.node);
const arrangeByMenuItems = arrangeByMenu.find('MenuItem').map(menuItem => menuItem);
const selectedMenuItem = arrangeByMenuItems.find(menuItem => menuItem.props().selected);
this.wrapper = mountAndOpenOptions(props);
const arrangeByMenuItemGroup = this.getMenuItemGroup('Arrange By');
const selectedMenuItems = this.getMenuItems('selected', true, arrangeByMenuItemGroup);
strictEqual(selectedMenuItems.length, 1, 'only one menu item should be selected');
strictEqual(selectedMenuItems[0].text().trim(), 'Points - Lowest to Highest');
equal(selectedMenuItem.text().trim(), 'Points - Lowest to Highest');
});
test('Points - Lowest to Highest is selected when criterion is name and direction is ascending', function () {
const props = this.getProps('points', 'descending');
const wrapper = openArrangeBy(this.props('points', 'descending'));
const arrangeByMenu = new ReactWrapper(wrapper.node.arrangeByMenuContent, wrapper.node);
const arrangeByMenuItems = arrangeByMenu.find('MenuItem').map(menuItem => menuItem);
const selectedMenuItem = arrangeByMenuItems.find(menuItem => menuItem.props().selected);
this.wrapper = mountAndOpenOptions(props);
const arrangeByMenuItemGroup = this.getMenuItemGroup('Arrange By');
const selectedMenuItems = this.getMenuItems('selected', true, arrangeByMenuItemGroup);
strictEqual(selectedMenuItems.length, 1, 'only one menu item should be selected');
strictEqual(selectedMenuItems[0].text().trim(), 'Points - Highest to Lowest');
equal(selectedMenuItem.text().trim(), 'Points - Highest to Lowest');
});
test('all column ordering options are disabled when the column ordering settings are disabled', function () {
const props = this.getProps();
const props = this.props();
props.columnSortSettings.disabled = true;
const wrapper = openArrangeBy(props);
const arrangeByMenu = new ReactWrapper(wrapper.node.arrangeByMenuContent, wrapper.node);
const disabledMenuItems =
arrangeByMenu.find('MenuItem').findWhere(menuItem => menuItem.props().disabled);
this.wrapper = mountAndOpenOptions(props);
const arrangeByMenuItemGroup = this.getMenuItemGroup('Arrange By');
const disabledMenuItems = this.getMenuItems('disabled', true, arrangeByMenuItemGroup);
strictEqual(disabledMenuItems.length, 7, 'all column ordering menu items are disabled');
strictEqual(disabledMenuItems.length, 7);
});
test('clicking on "Default Order" triggers onSortByDefault', function () {
const props = this.getProps();
const props = this.props();
const wrapper = openArrangeBy(props);
const arrangeByMenu = new ReactWrapper(wrapper.node.arrangeByMenuContent, wrapper.node);
const arrangeByMenuItems = arrangeByMenu.find('MenuItem').map(menuItem => menuItem);
const defaultOrderMenuItem =
arrangeByMenuItems.find(menuItem => menuItem.props().children === 'Default Order');
defaultOrderMenuItem.simulate('click');
this.wrapper = mountAndOpenOptions(props);
const arrangeByMenuItemGroup = this.getMenuItemGroup('Arrange By');
const specificMenuItem = this.getMenuItem('Default Order', arrangeByMenuItemGroup);
specificMenuItem.simulate('click');
strictEqual(props.columnSortSettings.onSortByDefault.callCount, 1);
ok(props.columnSortSettings.onSortByDefault.calledOnce);
});
test('clicking on "Assignments - A-Z" triggers onSortByNameAscending', function () {
const props = this.getProps();
const props = this.props();
const wrapper = openArrangeBy(props);
const arrangeByMenu = new ReactWrapper(wrapper.node.arrangeByMenuContent, wrapper.node);
const arrangeByMenuItems = arrangeByMenu.find('MenuItem').map(menuItem => menuItem);
const assignmentNameAscendingMenuItem =
arrangeByMenuItems.find(menuItem => menuItem.props().children === 'Assignment Name - A-Z');
assignmentNameAscendingMenuItem.simulate('click');
this.wrapper = mountAndOpenOptions(props);
const arrangeByMenuItemGroup = this.getMenuItemGroup('Arrange By');
const specificMenuItem = this.getMenuItem('Assignment Name - A-Z', arrangeByMenuItemGroup);
specificMenuItem.simulate('click');
strictEqual(props.columnSortSettings.onSortByNameAscending.callCount, 1);
ok(props.columnSortSettings.onSortByNameAscending.calledOnce);
});
test('clicking on "Assignments - Z-A" triggers onSortByNameDescending', function () {
const props = this.getProps();
const props = this.props();
const wrapper = openArrangeBy(props);
const arrangeByMenu = new ReactWrapper(wrapper.node.arrangeByMenuContent, wrapper.node);
const arrangeByMenuItems = arrangeByMenu.find('MenuItem').map(menuItem => menuItem);
const assignmentNameDescendingMenuItem =
arrangeByMenuItems.find(menuItem => menuItem.props().children === 'Assignment Name - Z-A');
assignmentNameDescendingMenuItem.simulate('click');
this.wrapper = mountAndOpenOptions(props);
const arrangeByMenuItemGroup = this.getMenuItemGroup('Arrange By');
const specificMenuItem = this.getMenuItem('Assignment Name - Z-A', arrangeByMenuItemGroup);
specificMenuItem.simulate('click');
strictEqual(props.columnSortSettings.onSortByNameDescending.callCount, 1);
ok(props.columnSortSettings.onSortByNameDescending.calledOnce);
});
test('clicking on "Due Date - Oldest to Newest" triggers onSortByDueDateAscending', function () {
const props = this.getProps();
const props = this.props();
const wrapper = openArrangeBy(props);
const arrangeByMenu = new ReactWrapper(wrapper.node.arrangeByMenuContent, wrapper.node);
const arrangeByMenuItems = arrangeByMenu.find('MenuItem').map(menuItem => menuItem);
const dueDateOldestToNewestMenuItem =
arrangeByMenuItems.find(menuItem => menuItem.props().children === 'Due Date - Oldest to Newest');
dueDateOldestToNewestMenuItem.simulate('click');
this.wrapper = mountAndOpenOptions(props);
const arrangeByMenuItemGroup = this.getMenuItemGroup('Arrange By');
const specificMenuItem = this.getMenuItem('Due Date - Oldest to Newest', arrangeByMenuItemGroup);
specificMenuItem.simulate('click');
strictEqual(props.columnSortSettings.onSortByDueDateAscending.callCount, 1);
ok(props.columnSortSettings.onSortByDueDateAscending.calledOnce);
});
test('clicking on "Due Date - Newest to Oldest" triggers onSortByDueDateDescending', function () {
const props = this.getProps();
const props = this.props();
const wrapper = openArrangeBy(props);
const arrangeByMenu = new ReactWrapper(wrapper.node.arrangeByMenuContent, wrapper.node);
const arrangeByMenuItems = arrangeByMenu.find('MenuItem').map(menuItem => menuItem);
const dueDateNewestToOldestMenuItem =
arrangeByMenuItems.find(menuItem => menuItem.props().children === 'Due Date - Newest to Oldest');
dueDateNewestToOldestMenuItem.simulate('click');
this.wrapper = mountAndOpenOptions(props);
const arrangeByMenuItemGroup = this.getMenuItemGroup('Arrange By');
const specificMenuItem = this.getMenuItem('Due Date - Newest to Oldest', arrangeByMenuItemGroup);
specificMenuItem.simulate('click');
strictEqual(props.columnSortSettings.onSortByDueDateDescending.callCount, 1);
ok(props.columnSortSettings.onSortByDueDateDescending.calledOnce);
});
test('clicking on "Points - Lowest to Highest" triggers onSortByPointsAscending', function () {
const props = this.getProps();
const props = this.props();
const wrapper = openArrangeBy(props);
const arrangeByMenu = new ReactWrapper(wrapper.node.arrangeByMenuContent, wrapper.node);
const arrangeByMenuItems = arrangeByMenu.find('MenuItem').map(menuItem => menuItem);
const arrangeByPointsLowestToHighestMenuItem =
arrangeByMenuItems.find(menuItem => menuItem.props().children === 'Points - Lowest to Highest');
arrangeByPointsLowestToHighestMenuItem.simulate('click');
this.wrapper = mountAndOpenOptions(props);
const arrangeByMenuItemGroup = this.getMenuItemGroup('Arrange By');
const specificMenuItem = this.getMenuItem('Points - Lowest to Highest', arrangeByMenuItemGroup);
specificMenuItem.simulate('click');
strictEqual(props.columnSortSettings.onSortByPointsAscending.callCount, 1);
ok(props.columnSortSettings.onSortByPointsAscending.calledOnce);
});
test('clicking on "Points - Highest to Lowest" triggers onSortByPointsDescending', function () {
const props = this.getProps();
const props = this.props();
const wrapper = openArrangeBy(props);
const arrangeByMenu = new ReactWrapper(wrapper.node.arrangeByMenuContent, wrapper.node);
const arrangeByMenuItems = arrangeByMenu.find('MenuItem').map(menuItem => menuItem);
const arrangeByPointsHighestToLowestMenuItem =
arrangeByMenuItems.find(menuItem => menuItem.props().children === 'Points - Highest to Lowest');
arrangeByPointsHighestToLowestMenuItem.simulate('click');
this.wrapper = mountAndOpenOptions(props);
const arrangeByMenuItemGroup = this.getMenuItemGroup('Arrange By');
const specificMenuItem = this.getMenuItem('Points - Highest to Lowest', arrangeByMenuItemGroup);
specificMenuItem.simulate('click');
strictEqual(props.columnSortSettings.onSortByPointsDescending.callCount, 1);
ok(props.columnSortSettings.onSortByPointsDescending.calledOnce);
});
QUnit.module('ViewOptionsMenu - Statuses');

4
spec/selenium/grades/gradezilla/gradebook_a11y_spec.rb
View File

@ -69,8 +69,8 @@ describe "Gradezilla" do
context "return focus to settings menu when it closes" do
it "after arrange columns is clicked", priority: "2", test_id: 720462 do
view_menu_trigger = Gradezilla.gradebook_menu('View').find('button')
Gradezilla.open_gradebook_menu('View')
Gradezilla.select_gradebook_menu_option('Arrange By > Due Date - Oldest to Newest')
Gradezilla.open_view_menu_and_arrange_by_menu
Gradezilla.select_gradebook_menu_option('Due Date - Oldest to Newest')
expect(active_element).to eq(view_menu_trigger)
end
end

45
spec/selenium/grades/gradezilla/gradebook_arrange_by_assignment_group_spec.rb
View File

@ -34,42 +34,31 @@ describe "Gradezilla - arrange by assignment group" do
Gradezilla.visit(@course)
end
it "should default to arrange columns by assignment group", priority: "1", test_id: 220028 do
it "defaults arrange by to assignment group in the grid", priority: "1", test_id: 220028 do
first_row_cells = find_slick_cells(0, f('#gradebook_grid .container_1'))
expect(first_row_cells[0]).to include_text @assignment_1_points
expect(first_row_cells[1]).to include_text @assignment_2_points
expect(first_row_cells[2]).to include_text "-"
view_menu = Gradezilla.open_gradebook_menu('View')
arrange_by_group = Gradezilla.gradebook_menu_group('Arrange By', container: view_menu)
arrangement_menu_options = Gradezilla.gradebook_menu_options(arrange_by_group)
selected_menu_options = arrangement_menu_options.select do |menu_item|
menu_item.attribute('aria-checked') == 'true'
end
expect(selected_menu_options.size).to eq(1)
expect(selected_menu_options[0].text.strip).to eq('Default Order')
end
it "should validate arrange columns by assignment group option", priority: "1", test_id: 220029 do
# since assignment group is the default, sort by due date, then assignment group again
view_menu = Gradezilla.open_gradebook_menu('View')
Gradezilla.select_gradebook_menu_option('Default Order', container: view_menu)
it "shows default arrange by in the view menu" do
Gradezilla.open_view_menu_and_arrange_by_menu
expect(Gradezilla.popover_menu_item('Default Order').attribute('aria-checked')).to eq 'true'
end
it "validates arrange columns by assignment group option", priority: "1", test_id: 220029 do
Gradezilla.open_view_menu_and_arrange_by_menu
Gradezilla.popover_menu_item('Default Order').click
first_row_cells = find_slick_cells(0, f('#gradebook_grid .container_1'))
expect(first_row_cells[0]).to include_text @assignment_1_points
expect(first_row_cells[1]).to include_text @assignment_2_points
expect(first_row_cells[2]).to include_text "-"
view_menu = Gradezilla.open_gradebook_menu('View')
arrange_by_group = Gradezilla.gradebook_menu_group('Arrange By', container: view_menu)
arrangement_menu_options = Gradezilla.gradebook_menu_options(arrange_by_group)
selected_menu_options = arrangement_menu_options.select do |menu_item|
menu_item.attribute('aria-checked') == 'true'
end
Gradezilla.open_view_menu_and_arrange_by_menu
expect(selected_menu_options.size).to eq(1)
expect(selected_menu_options[0].text.strip).to eq('Default Order')
expect(Gradezilla.popover_menu_item('Default Order').attribute('aria-checked')).to eq 'true'
# Setting should stick (not be messed up) after reload
Gradezilla.visit(@course)
@ -79,14 +68,8 @@ describe "Gradezilla - arrange by assignment group" do
expect(first_row_cells[1]).to include_text @assignment_2_points
expect(first_row_cells[2]).to include_text "-"
view_menu = Gradezilla.open_gradebook_menu('View')
arrange_by_group = Gradezilla.gradebook_menu_group('Arrange By', container: view_menu)
arrangement_menu_options = Gradezilla.gradebook_menu_options(arrange_by_group)
selected_menu_options = arrangement_menu_options.select do |menu_item|
menu_item.attribute('aria-checked') == 'true'
end
Gradezilla.open_view_menu_and_arrange_by_menu
expect(selected_menu_options.size).to eq(1)
expect(selected_menu_options[0].text.strip).to eq('Default Order')
expect(Gradezilla.popover_menu_item('Default Order').attribute('aria-checked')).to eq 'true'
end
end

43
spec/selenium/grades/gradezilla/gradebook_arrange_by_due_date_spec.rb
View File

@ -34,24 +34,18 @@ describe "Gradezilla - arrange by due date" do
Gradezilla.visit(@course)
end
it "should validate arrange columns by due date option", priority: "1", test_id: 220027 do
it "validates arrange columns by due date option", priority: "1", test_id: 220027 do
expected_text = "-"
view_menu = Gradezilla.open_gradebook_menu('View')
Gradezilla.select_gradebook_menu_option('Arrange By > Due Date - Oldest to Newest', container: view_menu)
Gradezilla.open_view_menu_and_arrange_by_menu
Gradezilla.popover_menu_item('Due Date - Oldest to Newest').click
first_row_cells = find_slick_cells(0, f('#gradebook_grid .container_1'))
expect(first_row_cells[0]).to include_text expected_text
view_menu = Gradezilla.open_gradebook_menu('View')
arrange_by_group = Gradezilla.gradebook_menu_group('Arrange By', container: view_menu)
arrangement_menu_options = Gradezilla.gradebook_menu_options(arrange_by_group)
selected_menu_options = arrangement_menu_options.select do |menu_item|
menu_item.attribute('aria-checked') == 'true'
end
Gradezilla.open_view_menu_and_arrange_by_menu
expect(selected_menu_options.size).to eq(1)
expect(selected_menu_options[0].text.strip).to eq('Due Date - Oldest to Newest')
expect(Gradezilla.popover_menu_item('Due Date - Oldest to Newest').attribute('aria-checked')).to eq 'true'
# Setting should stick after reload
Gradezilla.visit(@course)
@ -63,15 +57,9 @@ describe "Gradezilla - arrange by due date" do
expect(first_row_cells[1]).to include_text @assignment_1_points
expect(first_row_cells[2]).to include_text @assignment_2_points
view_menu = Gradezilla.open_gradebook_menu('View')
arrange_by_group = Gradezilla.gradebook_menu_group('Arrange By', container: view_menu)
arrangement_menu_options = Gradezilla.gradebook_menu_options(arrange_by_group)
selected_menu_options = arrangement_menu_options.select do |menu_item|
menu_item.attribute('aria-checked') == 'true'
end
Gradezilla.open_view_menu_and_arrange_by_menu
expect(selected_menu_options.size).to eq(1)
expect(selected_menu_options[0].text.strip).to eq('Due Date - Oldest to Newest')
expect(Gradezilla.popover_menu_item('Due Date - Oldest to Newest').attribute('aria-checked')).to eq 'true'
end
it "should put assignments with no due date last when sorting by due date and VDD", priority: "2", test_id: 251038 do
@ -80,11 +68,12 @@ describe "Gradezilla - arrange by due date" do
# create 1 section
@section_a = @course.course_sections.create!(name: 'Section A')
# give second assignment a default due date and an override
assignment2.update_attribute(:due_at, 3.days.from_now)
assignment2.update!(due_at: 3.days.from_now)
create_assignment_override(assignment2, @section_a, 2)
view_menu = Gradezilla.open_gradebook_menu('View')
Gradezilla.select_gradebook_menu_option('Arrange By > Due Date - Oldest to Newest', container: view_menu)
Gradezilla.open_view_menu_and_arrange_by_menu
Gradezilla.popover_menu_item('Due Date - Oldest to Newest').click
# since due date changes in assignments don't reflect in column sorting without a refresh
Gradezilla.visit(@course)
expect(f('#gradebook_grid .container_1 .slick-header-column:nth-child(1)')).to include_text(assignment3.title)
@ -98,14 +87,14 @@ describe "Gradezilla - arrange by due date" do
@section_a = @course.course_sections.create!(name: 'Section A')
@section_b = @course.course_sections.create!(name: 'Section B')
# give each assignment a default due date
@assignment.update_attribute(:due_at, 3.days.from_now)
assignment3.update_attribute(:due_at, 2.days.from_now)
@assignment.update!(due_at: 3.days.from_now)
assignment3.update!(due_at: 2.days.from_now)
# creating overrides in each section
create_assignment_override(@assignment, @section_a, 5)
create_assignment_override(assignment3, @section_b, 4)
view_menu = Gradezilla.open_gradebook_menu('View')
Gradezilla.select_gradebook_menu_option('Arrange By > Due Date - Oldest to Newest', container: view_menu)
Gradezilla.open_view_menu_and_arrange_by_menu
Gradezilla.popover_menu_item('Due Date - Oldest to Newest').click
expect(f('#gradebook_grid .container_1 .slick-header-column:nth-child(1)')).to include_text(assignment3.title)
expect(f('#gradebook_grid .container_1 .slick-header-column:nth-child(2)')).to include_text(@assignment.title)

8
spec/selenium/grades/gradezilla/gradebook_column_spec.rb
View File

@ -73,11 +73,11 @@ describe "Gradezilla - assignment column headers" do
expect(first_row_cells[2]).to include_text @assignment_1_points
# none of the predefined short orders should be selected.
view_menu = Gradezilla.open_gradebook_menu('View')
arrange_by_group = Gradezilla.gradebook_menu_group('Arrange By', container: view_menu)
arrangement_menu_options = Gradezilla.gradebook_menu_options(arrange_by_group)
Gradezilla.open_view_menu_and_arrange_by_menu
arrangement_menu_options_aria_checked =
Gradezilla.popover_menu_items.map { |i| i.attribute('aria-checked') }
expect(arrangement_menu_options.all? { |menu_item| menu_item.attribute('aria-checked') == 'false'}).to be_truthy
expect(arrangement_menu_options_aria_checked).to all eq('false')
end
it "should put new assignments at the end when columns have custom order", priority: "1", test_id: 220032 do

21
spec/selenium/grades/page_objects/gradezilla_page.rb
View File

@ -239,10 +239,17 @@ class Gradezilla
trigger = f('button', gradebook_menu(name))
trigger.click
# return the id of the popover menu for use elsewhere if needed
# return the finder of the popover menu for use elsewhere if needed
menu_container(trigger.attribute('id'))
end
def open_view_menu_and_arrange_by_menu
view_menu = Gradezilla.open_gradebook_menu('View')
trigger = ff('button', view_menu).find { |element| element.text == "Arrange By" }
trigger.click
view_menu
end
def select_gradebook_menu_option(name, container: nil)
gradebook_menu_option(name, container: container).click
end
@ -264,8 +271,16 @@ class Gradezilla
gradebook_settings_cog.click
end
def save_button_click
save_button.click
def popover_menu_item(name)
popover_menu_items.find do |menu_item|
menu_item.text == name
end
end
def popover_menu_items
ff('[role=menu][aria-labelledby*=PopoverMenu] [role=menuitemradio]')
end
delegate :click, to: :save_button, prefix: true
end
end