[Summary view] [Print] [Text view]

   1  @editor @editor_atto @atto @atto_table @_bug_phantomjs
   2  Feature: Atto tables
   3    To format text in Atto, I need to create tables
   4  
   5    @javascript
   6    Scenario: Create a table
   7      Given I log in as "admin"
   8      And I follow "Profile" in the user menu
   9      And I follow "Blog entries"
  10      And I follow "Add a new entry"
  11      And I set the field "Entry title" to "How to make a table"
  12      And I set the field "Blog entry body" to "Table test"
  13      And I select the text in the "Blog entry body" Atto editor
  14      And I click on "Show more buttons" "button"
  15      When I click on "Table" "button"
  16      And I set the field "Caption" to "Dinner"
  17      And I press "Create table"
  18      And I press "Save changes"
  19      Then ".blog_entry table caption" "css_element" should be visible
  20  
  21    @javascript
  22    Scenario: Edit a table
  23      Given I log in as "admin"
  24      And I follow "Profile" in the user menu
  25      And I follow "Blog entries"
  26      And I follow "Add a new entry"
  27      And I set the field "Entry title" to "How to make a table"
  28      And I set the field "Blog entry body" to "<table><tr><td>Cell</td></tr></table>"
  29      And I select the text in the "Blog entry body" Atto editor
  30      And I click on "Show more buttons" "button"
  31      And I click on "Table" "button"
  32      And I click on "Edit table" "link"
  33      And I set the field "Caption" to "Dinner"
  34      And I press "Update table"
  35      And I press "Save changes"
  36      Then ".blog_entry table caption" "css_element" should be visible
  37  
  38    @javascript
  39    Scenario: Check table setting defaults on new table
  40      Given the following config values are set as admin:
  41      | config | value | plugin |
  42      | allowborders | 1 | atto_table |
  43      | allowbackgroundcolour | 1 | atto_table |
  44      | allowwidth | 1 | atto_table |
  45      And I log in as "admin"
  46      And I follow "Profile" in the user menu
  47      And I follow "Blog entries"
  48      And I follow "Add a new entry"
  49      And I set the field "Entry title" to "How to make a table"
  50      And I set the field "Blog entry body" to "Table test"
  51      And I select the text in the "Blog entry body" Atto editor
  52      And I click on "Show more buttons" "button"
  53      When I click on "Table" "button"
  54      Then the ".moodle-dialogue-base .atto_form .borderstyle" "css_element" should be disabled
  55      And the ".moodle-dialogue-base .atto_form .bordersize" "css_element" should be disabled
  56      And the "borderColour" "radio" should be disabled
  57      And the field "borders" matches value "default"
  58      And the field "Theme default" matches value "1"
  59      And the field "Table width (in %)" matches value ""
  60  
  61    @javascript
  62    Scenario: Edit a table restores settings
  63      Given the following config values are set as admin:
  64      | config | value | plugin |
  65      | allowborders | 1 | atto_table |
  66      | allowbackgroundcolour | 1 | atto_table |
  67      | allowwidth | 1 | atto_table |
  68      And I log in as "admin"
  69      And I follow "Profile" in the user menu
  70      And I follow "Blog entries"
  71      And I follow "Add a new entry"
  72      And I set the field "Entry title" to "How to make a table"
  73      And I set the field "Blog entry body" to "<table><tr><td>Cell</td></tr></table>"
  74      And I select the text in the "Blog entry body" Atto editor
  75      And I click on "Show more buttons" "button"
  76      And I click on "Table" "button"
  77      And I click on "Edit table" "link"
  78      And I click on "#FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .backgroundcolour" "css_element"
  79      And I set the field "Table width (in %)" to "100"
  80      And I set the field "Borders" to "Around table"
  81      And I set the field "Style of borders" to "Dashed"
  82      And I set the field "Size of borders" to "2"
  83      And I click on "#FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .bordercolour" "css_element"
  84      And I press "Update table"
  85      And I select the text in the "Blog entry body" Atto editor
  86      And I click on "Table" "button"
  87      When I click on "Edit table" "link"
  88      # Check that the background colour is set correctly.
  89      Then the field with xpath "//label/input[@name='backgroundColour' and @value='#FFFFFF']" matches value "1"
  90      And the field "Table width (in %)" matches value "100"
  91      And the field "Borders" matches value "Around table"
  92      And the field "Style of borders" matches value "dashed"
  93      And the field "Size of borders" matches value "2"
  94      # Check that the border colour is set correctly.
  95      And the field with xpath "//label/input[@name='borderColour' and @value='#FFFFFF']" matches value "1"
  96  
  97    @javascript
  98    Scenario: Create a table with background colour and width with border settings off
  99      Given the following config values are set as admin:
 100      | config | value | plugin |
 101      | allowborders | 0 | atto_table |
 102      | allowbackgroundcolour | 1 | atto_table |
 103      | allowwidth | 1 | atto_table |
 104      And I log in as "admin"
 105      And I follow "Profile" in the user menu
 106      And I follow "Blog entries"
 107      And I follow "Add a new entry"
 108      And I set the field "Entry title" to "How to make a table"
 109      And I set the field "Blog entry body" to "Table test"
 110      And I select the text in the "Blog entry body" Atto editor
 111      And I click on "Show more buttons" "button"
 112      When I click on "Table" "button"
 113      Then ".moodle-dialogue-base .atto_form .borders" "css_element" should not exist
 114      Then ".moodle-dialogue-base .atto_form .borderstyle" "css_element" should not exist
 115      Then ".moodle-dialogue-base .atto_form .bordersize" "css_element" should not exist
 116      Then ".moodle-dialogue-base .atto_form .bordercolour" "css_element" should not exist
 117      Then ".moodle-dialogue-base .atto_form .backgroundcolour" "css_element" should exist
 118      Then ".moodle-dialogue-base .atto_form .customwidth" "css_element" should exist
 119      And I click on "#FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .backgroundcolour" "css_element"
 120      And I set the field "Table width (in %)" to "100"
 121      And I press "Create table"
 122      And I press "Save changes"
 123      And I follow "Edit"
 124      And I click on "Show more buttons" "button"
 125      And I click on "HTML" "button"
 126      Then I should see "background-color:rgb(255,255,255);"
 127      And I should see "width:100%;"
 128  
 129    @javascript
 130    Scenario: Edit a table with background colour and width with border settings off
 131      Given the following config values are set as admin:
 132      | config | value | plugin |
 133      | allowborders | 0 | atto_table |
 134      | allowbackgroundcolour | 1 | atto_table |
 135      | allowwidth | 1 | atto_table |
 136      And I log in as "admin"
 137      And I follow "Profile" in the user menu
 138      And I follow "Blog entries"
 139      And I follow "Add a new entry"
 140      And I set the field "Entry title" to "How to make a table"
 141      And I set the field "Blog entry body" to "<table><tr><td>Cell</td></tr></table>"
 142      And I select the text in the "Blog entry body" Atto editor
 143      And I click on "Show more buttons" "button"
 144      And I click on "Table" "button"
 145      When I click on "Edit table" "link"
 146      And I click on "#FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .backgroundcolour" "css_element"
 147      And I set the field "Table width (in %)" to "100"
 148      And I press "Update table"
 149      And I press "Save changes"
 150      And I follow "Edit"
 151      And I click on "Show more buttons" "button"
 152      And I click on "HTML" "button"
 153      Then I should see "background-color:rgb(255,255,255);"
 154      And I should see "width:100%;"
 155  
 156    @javascript
 157    Scenario: Create a table with background colour and width with borders on
 158      Given the following config values are set as admin:
 159      | config | value | plugin |
 160      | allowborders | 1 | atto_table |
 161      | allowbackgroundcolour | 1 | atto_table |
 162      | allowwidth | 1 | atto_table |
 163      And I log in as "admin"
 164      And I follow "Profile" in the user menu
 165      And I follow "Blog entries"
 166      And I follow "Add a new entry"
 167      And I set the field "Entry title" to "How to make a table"
 168      And I set the field "Blog entry body" to "Table test"
 169      And I select the text in the "Blog entry body" Atto editor
 170      And I click on "Show more buttons" "button"
 171      When I click on "Table" "button"
 172      Then ".moodle-dialogue-base .atto_form .borders" "css_element" should exist
 173      Then ".moodle-dialogue-base .atto_form .borderstyle" "css_element" should exist
 174      Then ".moodle-dialogue-base .atto_form .bordersize" "css_element" should exist
 175      Then ".moodle-dialogue-base .atto_form .bordercolour" "css_element" should exist
 176      Then ".moodle-dialogue-base .atto_form .backgroundcolour" "css_element" should exist
 177      Then ".moodle-dialogue-base .atto_form .customwidth" "css_element" should exist
 178      And I click on "#FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .backgroundcolour" "css_element"
 179      And I set the field "Table width (in %)" to "100"
 180      And I set the field "Borders" to "Around table"
 181      And I press "Create table"
 182      And I press "Save changes"
 183      And I follow "Edit"
 184      And I click on "Show more buttons" "button"
 185      And I click on "HTML" "button"
 186      Then I should see "background-color:rgb(255,255,255);"
 187      And I should see "width:100%;"
 188  
 189    @javascript
 190    Scenario: Edit a table with background colour and width with borders on
 191      Given the following config values are set as admin:
 192      | config | value | plugin |
 193      | allowborders | 1 | atto_table |
 194      | allowbackgroundcolour | 1 | atto_table |
 195      | allowwidth | 1 | atto_table |
 196      And I log in as "admin"
 197      And I follow "Profile" in the user menu
 198      And I follow "Blog entries"
 199      And I follow "Add a new entry"
 200      And I set the field "Entry title" to "How to make a table"
 201      And I set the field "Blog entry body" to "<table><tr><td>Cell</td></tr></table>"
 202      And I select the text in the "Blog entry body" Atto editor
 203      And I click on "Show more buttons" "button"
 204      And I click on "Table" "button"
 205      When I click on "Edit table" "link"
 206      And I click on "#FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .backgroundcolour" "css_element"
 207      And I set the field "Table width (in %)" to "100"
 208      And I set the field "Borders" to "Around each cell"
 209      And I press "Update table"
 210      And I press "Save changes"
 211      And I follow "Edit"
 212      And I click on "Show more buttons" "button"
 213      And I click on "HTML" "button"
 214      Then I should see "background-color:rgb(255,255,255);"
 215      And I should see "width:100%;"
 216  
 217    @javascript
 218    Scenario: Create a table with background colour and width with borders and border styling on
 219      Given the following config values are set as admin:
 220      | config | value | plugin |
 221      | allowborders | 1 | atto_table |
 222      | allowbackgroundcolour | 1 | atto_table |
 223      | allowwidth | 1 | atto_table |
 224      And I log in as "admin"
 225      And I follow "Profile" in the user menu
 226      And I follow "Blog entries"
 227      And I follow "Add a new entry"
 228      And I set the field "Entry title" to "How to make a table"
 229      And I set the field "Blog entry body" to "Table test"
 230      And I select the text in the "Blog entry body" Atto editor
 231      And I click on "Show more buttons" "button"
 232      When I click on "Table" "button"
 233      And I click on "#FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .backgroundcolour" "css_element"
 234      And I set the field "Table width (in %)" to "100"
 235      And I set the field "Borders" to "Around table"
 236      And I set the field "Style of borders" to "Dashed"
 237      And I press "Create table"
 238      And I press "Save changes"
 239      And I follow "Edit"
 240      And I click on "Show more buttons" "button"
 241      And I click on "HTML" "button"
 242      Then I should see "background-color:rgb(255,255,255);"
 243      And I should see "width:100%;"
 244      And I should see "border-style:dashed;"
 245  
 246    @javascript
 247    Scenario: Edit a table with background colour and width with borders and border styling on
 248      Given the following config values are set as admin:
 249      | config | value | plugin |
 250      | allowborders | 1 | atto_table |
 251      | allowbackgroundcolour | 1 | atto_table |
 252      | allowwidth | 1 | atto_table |
 253      And I log in as "admin"
 254      And I follow "Profile" in the user menu
 255      And I follow "Blog entries"
 256      And I follow "Add a new entry"
 257      And I set the field "Entry title" to "How to make a table"
 258      And I set the field "Blog entry body" to "<table><tr><td>Cell</td></tr></table>"
 259      And I select the text in the "Blog entry body" Atto editor
 260      And I click on "Show more buttons" "button"
 261      And I click on "Table" "button"
 262      When I click on "Edit table" "link"
 263      And I click on "#FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .backgroundcolour" "css_element"
 264      And I set the field "Table width (in %)" to "100"
 265      And I set the field "Borders" to "Around table"
 266      And I set the field "Style of borders" to "Dashed"
 267      And I press "Update table"
 268      And I press "Save changes"
 269      And I follow "Edit"
 270      And I click on "Show more buttons" "button"
 271      And I click on "HTML" "button"
 272      Then I should see "background-color:rgb(255,255,255);"
 273      And I should see "width:100%;"
 274      And I should see "border-style:dashed;"
 275  
 276    @javascript
 277    Scenario: Create a table with background colour and width with borders, border styling, and border size on
 278      Given the following config values are set as admin:
 279      | config | value | plugin |
 280      | allowborders | 1 | atto_table |
 281      | allowbackgroundcolour | 1 | atto_table |
 282      | allowwidth | 1 | atto_table |
 283      And I log in as "admin"
 284      And I follow "Profile" in the user menu
 285      And I follow "Blog entries"
 286      And I follow "Add a new entry"
 287      And I set the field "Entry title" to "How to make a table"
 288      And I set the field "Blog entry body" to "Table test"
 289      And I select the text in the "Blog entry body" Atto editor
 290      And I click on "Show more buttons" "button"
 291      When I click on "Table" "button"
 292      And I click on "#FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .backgroundcolour" "css_element"
 293      And I set the field "Table width (in %)" to "100"
 294      And I set the field "Borders" to "Around table"
 295      And I set the field "Style of borders" to "Dashed"
 296      And I set the field "Size of borders" to "2"
 297      And I press "Create table"
 298      And I press "Save changes"
 299      And I follow "Edit"
 300      And I click on "Show more buttons" "button"
 301      And I click on "HTML" "button"
 302      Then I should see "background-color:rgb(255,255,255);"
 303      And I should see "width:100%;"
 304      And I should see "border-style:dashed;"
 305      And I should see "border-width:2px;"
 306  
 307    @javascript
 308    Scenario: Edit a table with background colour and width with borders, border styling, and border size on
 309      Given the following config values are set as admin:
 310      | config | value | plugin |
 311      | allowborders | 1 | atto_table |
 312      | allowbackgroundcolour | 1 | atto_table |
 313      | allowwidth | 1 | atto_table |
 314      And I log in as "admin"
 315      And I follow "Profile" in the user menu
 316      And I follow "Blog entries"
 317      And I follow "Add a new entry"
 318      And I set the field "Entry title" to "How to make a table"
 319      And I set the field "Blog entry body" to "<table><tr><td>Cell</td></tr></table>"
 320      And I select the text in the "Blog entry body" Atto editor
 321      And I click on "Show more buttons" "button"
 322      And I click on "Table" "button"
 323      When I click on "Edit table" "link"
 324      And I click on "#FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .backgroundcolour" "css_element"
 325      And I set the field "Table width (in %)" to "100"
 326      And I set the field "Borders" to "Around table"
 327      And I set the field "Style of borders" to "Dashed"
 328      And I set the field "Size of borders" to "2"
 329      And I press "Update table"
 330      And I press "Save changes"
 331      And I follow "Edit"
 332      And I click on "Show more buttons" "button"
 333      And I click on "HTML" "button"
 334      Then I should see "background-color:rgb(255,255,255);"
 335      And I should see "width:100%;"
 336      And I should see "border-style:dashed;"
 337      And I should see "border-width:2px;"
 338  
 339    @javascript
 340    Scenario: Create a table with all settings on
 341      Given the following config values are set as admin:
 342      | config | value | plugin |
 343      | allowborders | 1 | atto_table |
 344      | allowbackgroundcolour | 1 | atto_table |
 345      | allowwidth | 1 | atto_table |
 346      And I log in as "admin"
 347      And I follow "Profile" in the user menu
 348      And I follow "Blog entries"
 349      And I follow "Add a new entry"
 350      And I set the field "Entry title" to "How to make a table"
 351      And I set the field "Blog entry body" to "Table test"
 352      And I select the text in the "Blog entry body" Atto editor
 353      And I click on "Show more buttons" "button"
 354      When I click on "Table" "button"
 355      And I click on "#FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .backgroundcolour" "css_element"
 356      And I set the field "Table width (in %)" to "100"
 357      And I set the field "Borders" to "Around table"
 358      And I set the field "Style of borders" to "Dashed"
 359      And I set the field "Size of borders" to "2"
 360      And I click on "#FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .bordercolour" "css_element"
 361      And I press "Create table"
 362      And I press "Save changes"
 363      And I follow "Edit"
 364      And I click on "Show more buttons" "button"
 365      And I click on "HTML" "button"
 366      Then I should see "background-color:rgb(255,255,255);"
 367      And I should see "width:100%;"
 368      And I should see "dashed"
 369      And I should see "2px"
 370      And I should see "rgb(255,255,255)"
 371  
 372    @javascript
 373    Scenario: Edit a table with background colour and width with borders, border styling, and border size on
 374      Given the following config values are set as admin:
 375      | config | value | plugin |
 376      | allowborders | 1 | atto_table |
 377      | allowbackgroundcolour | 1 | atto_table |
 378      | allowwidth | 1 | atto_table |
 379      And I log in as "admin"
 380      And I follow "Profile" in the user menu
 381      And I follow "Blog entries"
 382      And I follow "Add a new entry"
 383      And I set the field "Entry title" to "How to make a table"
 384      And I set the field "Blog entry body" to "<table><tr><td>Cell</td></tr></table>"
 385      And I select the text in the "Blog entry body" Atto editor
 386      And I click on "Show more buttons" "button"
 387      And I click on "Table" "button"
 388      When I click on "Edit table" "link"
 389      And I click on "FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .backgroundcolour" "css_element"
 390      And I set the field "Table width (in %)" to "100"
 391      And I set the field "Borders" to "Around table"
 392      And I set the field "Style of borders" to "Dashed"
 393      And I set the field "Size of borders" to "2"
 394      And I click on "FFFFFF" "radio" in the ".moodle-dialogue-base .atto_form .bordercolour" "css_element"
 395      And I press "Update table"
 396      And I press "Save changes"
 397      And I follow "Edit"
 398      And I click on "Show more buttons" "button"
 399      And I click on "HTML" "button"
 400      Then I should see "background-color:rgb(255,255,255);"
 401      And I should see "width:100%;"
 402      And I should see "dashed"
 403      And I should see "2px"
 404      And I should see "rgb(255,255,255)"