Permalink
Browse files

Reordering a table option stages options (#3874)

* tests for changing/staging options

* use <button> instead of <input type="button"> for "+add row"

This is already used for builder options, and it makes more sense (and the main reason: it works in integration tests).

* settingsConsole: reordering tables should not mutate option values directly
...because then the stage can't tell if the option has been changed

* test for dragging to reorder table options
  • Loading branch information...
1 parent 2da6aa2 commit 586b4d2153e3a38542b156b5ff3d094b88c1ab21 @erikdesjardins erikdesjardins committed on GitHub Jan 10, 2017
Showing with 139 additions and 14 deletions.
  1. +5 −14 lib/modules/settingsConsole.js
  2. +134 −0 tests/settingsConsole.js
@@ -568,11 +568,9 @@ function drawConfigOptions(mod) {
$thisOptionDescription.insertAfter($thisLabel);
if (!isFixed) {
// Create an "add row" button...
- const addRowText = i18n(thisOptions[i].addRowText || 'settingsConsoleDefaultAddRowText');
- const addRowButton = document.createElement('input');
- addRowButton.classList.add('addRowButton');
- addRowButton.setAttribute('type', 'button');
- addRowButton.setAttribute('value', addRowText);
+ const addRowButton = $('<button class="addRowButton"></button>')
+ .text(i18n(thisOptions[i].addRowText || 'settingsConsoleDefaultAddRowText'))
+ .get(0);
addRowButton.setAttribute('optionName', i);
addRowButton.setAttribute('moduleID', mod.moduleID);
addRowButton.addEventListener('click', function() {
@@ -607,7 +605,7 @@ function drawConfigOptions(mod) {
$(addRowButton).insertAfter($thisOptionSetting);
- makeOptionTableSortable(thisTbody, mod, i);
+ makeOptionTableSortable(thisTbody);
}
} else if (thisOptions[i].type === 'builder') {
$thisOptionContainer.addClass('specialOptionType');
@@ -967,7 +965,7 @@ export function setOptionValue(moduleID: string, optionKey: string, value: strin
}
}
-function makeOptionTableSortable(tableBody, mod, optionKey) {
+function makeOptionTableSortable(tableBody) {
function cleanupDrag($item) {
$item.removeData(['oldIndex', 'dragOffset']);
$(RESConfigPanelOptions).edgescroll('stop');
@@ -987,13 +985,6 @@ function makeOptionTableSortable(tableBody, mod, optionKey) {
onDrop($item, container, _super, event) {
_super($item, container, _super, event);
- const oldIndex = $item.data('oldIndex');
- const newIndex = $item.index();
- const rows = mod.options[optionKey].value;
- const row = rows.splice(oldIndex, 1)[0];
-
- rows.splice(newIndex, 0, row);
-
cleanupDrag($item);
$item.trigger('change');
},
@@ -1,3 +1,5 @@
+/* eslint-disable no-unused-expressions */
+
module.exports = {
'opens on links to #res:settings': browser => {
browser
@@ -26,4 +28,136 @@ module.exports = {
.waitForElementNotVisible('#RESConsoleContainer', 1000)
.end();
},
+ 'change boolean option': browser => {
+ browser
+ .url('https://www.reddit.com/#res:settings/accountSwitcher')
+ .waitForElementVisible('#RESConsoleContainer')
+
+ // initial state, no options changed
+ .assert.cssClassPresent('#moduleOptionsSave', 'optionsSaved', 'options not staged')
+
+ // enable keepLoggedIn
+ .click('#keepLoggedInContainer')
+ .assert.cssClassNotPresent('#moduleOptionsSave', 'optionsSaved', 'options staged')
+
+ // click save
+ .click('#moduleOptionsSave')
+ .assert.cssClassPresent('#moduleOptionsSave', 'optionsSaved', 'options not staged')
+
+ // refresh and ensure that the option was saved
+ .refresh()
+ .waitForElementVisible('#RESConsoleContainer')
+ .perform(() => {
+ browser.expect.element('#keepLoggedIn').selected;
+ })
+ .end();
+ },
+ 'change enum option': browser => {
+ browser
+ .url('https://www.reddit.com/#res:settings/accountSwitcher')
+ .waitForElementVisible('#RESConsoleContainer')
+
+ // initial state, no options changed
+ .assert.cssClassPresent('#moduleOptionsSave', 'optionsSaved', 'options not staged')
+ .perform(() => {
+ browser.expect.element('#dropDownStyle-0').selected;
+ })
+
+ // select "simple arrow" dropdown style
+ .click('#dropDownStyle-1')
+ .assert.cssClassNotPresent('#moduleOptionsSave', 'optionsSaved', 'options staged')
+
+ // click save
+ .click('#moduleOptionsSave')
+ .assert.cssClassPresent('#moduleOptionsSave', 'optionsSaved', 'options not staged')
+
+ // refresh and ensure that the option was saved
+ .refresh()
+ .waitForElementVisible('#RESConsoleContainer')
+ .perform(() => {
+ browser.expect.element('#dropDownStyle-1').selected;
+ })
+ .end();
+ },
+ 'change text option': browser => {
+ browser
+ .url('https://www.reddit.com/#res:settings/quickMessage')
+ .waitForElementVisible('#RESConsoleContainer')
+
+ // initial state, no options changed
+ .assert.cssClassPresent('#moduleOptionsSave', 'optionsSaved', 'options not staged')
+
+ // set a value for defaultSubject
+ .setValue('#defaultSubject', ['test subject'])
+ .assert.cssClassNotPresent('#moduleOptionsSave', 'optionsSaved', 'options staged')
+
+ // click save
+ .click('#moduleOptionsSave')
+ .assert.cssClassPresent('#moduleOptionsSave', 'optionsSaved', 'options not staged')
+
+ // refresh and ensure that the option was saved
+ .refresh()
+ .waitForElementVisible('#RESConsoleContainer')
+ .assert.value('#defaultSubject', 'test subject')
+ .end();
+ },
+ 'change table option': browser => {
+ browser
+ .url('https://www.reddit.com/#res:settings/accountSwitcher')
+ .waitForElementVisible('#RESConsoleContainer')
+
+ // initial state, no options changed
+ .assert.cssClassPresent('#moduleOptionsSave', 'optionsSaved', 'options not staged')
+
+ // add row
+ .click('#optionContainer-accountSwitcher-accounts .addRowButton')
+ .setValue('#accounts_accountSwitcherUsername_1', ['test'])
+ .assert.cssClassNotPresent('#moduleOptionsSave', 'optionsSaved', 'options staged')
+
+ // click save
+ .click('#moduleOptionsSave')
+ .assert.cssClassPresent('#moduleOptionsSave', 'optionsSaved', 'options not staged')
+
+ // refresh and ensure that the option was saved
+ .refresh()
+ .waitForElementVisible('#RESConsoleContainer')
+ .assert.value('#accounts_accountSwitcherUsername_0', 'test')
+ .end();
+ },
+ 'drag to reorder table options': browser => {
+ if (browser.options.desiredCapabilities.browserName === 'firefox') {
+ // geckodriver doesn't support moveto https://github.com/mozilla/geckodriver/issues/159
+ browser.end();
+ return;
+ }
+
+ browser
+ .url('https://www.reddit.com/#res:settings/accountSwitcher')
+ .waitForElementVisible('#RESConsoleContainer')
+
+ // add rows
+ .click('#optionContainer-accountSwitcher-accounts .addRowButton')
+ .click('#optionContainer-accountSwitcher-accounts .addRowButton')
+ .setValue('#accounts_accountSwitcherUsername_1', ['first'])
+ .setValue('#accounts_accountSwitcherUsername_2', ['second'])
+ .click('#moduleOptionsSave')
+
+ // reorder
+ .refresh()
+ .waitForElementVisible('#RESConsoleContainer')
+ .assert.cssClassPresent('#moduleOptionsSave', 'optionsSaved', 'options not staged')
+ .moveToElement('#optionContainer-accountSwitcher-accounts tr:nth-child(1) .handle', 0, 0)
+ .mouseButtonDown()
+ .moveTo(null, 0, 50)
+ .mouseButtonUp()
+ .assert.cssClassNotPresent('#moduleOptionsSave', 'optionsSaved', 'options staged')
+
+ // ensure that changes get saved
+ .click('#moduleOptionsSave')
+ .refresh()
+ .waitForElementVisible('#RESConsoleContainer')
+ .assert.value('#accounts_accountSwitcherUsername_0', 'second')
+ .assert.value('#accounts_accountSwitcherUsername_1', 'first')
+ .end();
+ },
};

0 comments on commit 586b4d2

Please sign in to comment.