/* global Feature Scenario */

Feature('themes')

// nothing

Scenario('It should display button Labels: null | null', async ({ I }) => {
  I.amOnPage('themes.html')
  I.waitForText('Themes Test Page')
  I.waitForText('Collapse')
  I.waitForText('Edit JSON')
  I.waitForText('Object Properties')
  I.waitForText('Delete item')
  I.waitForText('Delete Last item')
  I.waitForText('Delete All')
  I.waitForText('Move down')
  I.waitForText('Move up')
})

// only themes

Scenario('It should display button Labels: barebones | null', async ({ I }) => {
  I.amOnPage('themes.html')
  I.waitForText('Themes Test Page')
  I.waitForText('Collapse')
  I.waitForText('Edit JSON')
  I.waitForText('Object Properties')
  I.waitForText('Delete item')
  I.waitForText('Delete Last item')
  I.waitForText('Delete All')
  I.waitForText('Move down')
  I.waitForText('Move up')
})

Scenario('It should display button Labels: spectre | null', async ({ I }) => {
  I.amOnPage('themes.html')
  I.selectOption('theme', 'Spectre')
  I.waitForText('Themes Test Page')
  I.waitForText('Collapse')
  I.waitForText('Edit JSON')
  I.waitForText('Object Properties')
  I.waitForText('Delete item')
  I.waitForText('Delete Last item')
  I.waitForText('Delete All')
  I.waitForText('Move down')
  I.waitForText('Move up')
  I.seeElement('.table-striped') // can see when theme options is enabled
  I.seeElement('.je-table-border') // can see when theme options is enabled
  I.dontSeeElement('.je-noindent') // can't see when theme options is enabled
})

/*
  Scenario('It should display button Labels: materialize | null', async (I) => {
  I.amOnPage('themes.html')
  I.selectOption('theme', 'Materialize')
  I.waitForText('Themes Test Page')
  I.waitForText('COLLAPSE')
  I.waitForText('EDIT JSON')
  I.waitForText('OBJECT PROPERTIES')
  I.waitForText('DELETE ITEM')
  I.waitForText('DELETE LAST ITEM')
  I.waitForText('DELETE ALL')
  I.waitForText('MOVE DOWN')
  I.waitForText('MOVE UP')
})
*/
/*
Scenario('It should display button Labels: jqueryui | null', async (I) => {
  I.amOnPage('themes.html')
  I.selectOption('theme', 'jQuery UI')
  I.waitForText('Themes Test Page')
  I.waitForText('Collapse')
  I.waitForText('Edit JSON')
  I.waitForText('Object Properties')
  I.waitForText('Delete item')
  I.waitForText('Delete Last item')
  I.waitForText('Delete All')
  I.waitForText('Move down')
  I.waitForText('Move up')
})
*/

/*
Scenario('It should display button Labels: foundation6 | null', async (I) => {
  I.amOnPage('themes.html')
  I.selectOption('theme', 'Foundation 6')
  I.waitForText('Themes Test Page')
  I.waitForText('Collapse')
  I.waitForText('Edit JSON')
  I.waitForText('Object Properties')
  I.waitForText('Delete item')
  I.waitForText('Delete Last item')
  I.waitForText('Delete All')
  I.waitForText('Move down')
  I.waitForText('Move up')
})

Scenario('It should display button Labels: foundation5 | null', async (I) => {
  I.amOnPage('themes.html')
  I.selectOption('theme', 'Foundation 5')
  I.waitForText('Themes Test Page')
  I.waitForText('Collapse')
  I.waitForText('Edit JSON')
  I.waitForText('Object Properties')
  I.waitForText('Delete item')
  I.waitForText('Delete Last item')
  I.waitForText('Delete All')
  I.waitForText('Move down')
  I.waitForText('Move up')
})

Scenario('It should display button Labels: foundation4 | null', async (I) => {
  I.amOnPage('themes.html')
  I.selectOption('theme', 'Foundation 4')
  I.waitForText('Themes Test Page')
  I.waitForText('Collapse')
  I.waitForText('Edit JSON')
  I.waitForText('Object Properties')
  I.waitForText('Delete item')
  I.waitForText('Delete Last item')
  I.waitForText('Delete All')
  I.waitForText('Move down')
  I.waitForText('Move up')
})

Scenario('It should display button Labels: foundation3 | null', async (I) => {
  I.amOnPage('themes.html')
  I.selectOption('theme', 'Foundation 3')
  I.waitForText('Themes Test Page')
  I.waitForText('Collapse')
  I.waitForText('Edit JSON')
  I.waitForText('Object Properties')
  I.waitForText('Delete item')
  I.waitForText('Delete Last item')
  I.waitForText('Delete All')
  I.waitForText('Move down')
  I.waitForText('Move up')
})
*/

Scenario('It should display button Labels: bootstrap5 | null', async ({ I }) => {
  I.amOnPage('themes.html')
  I.selectOption('theme', 'Bootstrap 5')
  I.waitForText('Themes Test Page')
  I.waitForText('Collapse')
  I.waitForText('Edit JSON')
  I.waitForText('Object Properties')
  I.waitForText('Delete item')
  I.waitForText('Delete Last item')
  I.waitForText('Delete All')
  I.waitForText('Move down')
  I.waitForText('Move up')
})

Scenario('It should display button Labels: bootstrap4 | null', async ({ I }) => {
  I.amOnPage('themes.html')
  I.selectOption('theme', 'Bootstrap 4')
  I.waitForText('Themes Test Page')
  I.waitForText('Collapse')
  I.waitForText('Edit JSON')
  I.waitForText('Object Properties')
  I.waitForText('Delete item')
  I.waitForText('Delete Last item')
  I.waitForText('Delete All')
  I.waitForText('Move down')
  I.waitForText('Move up')
})

Scenario('It should display button Labels: bootstrap3 | null', async ({ I }) => {
  I.amOnPage('themes.html')
  I.selectOption('theme', 'Bootstrap 3')
  I.waitForText('Themes Test Page')
  I.waitForText('Collapse')
  I.waitForText('Edit JSON')
  I.waitForText('Object Properties')
  I.waitForText('Delete item')
  I.waitForText('Delete Last item')
  I.waitForText('Delete All')
  I.waitForText('Move down')
  I.waitForText('Move up')
})
/*
Scenario('It should display button Labels: bootstrap2 | null', async (I) => {
  I.amOnPage('themes.html')
  I.selectOption('theme', 'Bootstrap 2')
  I.waitForText('Themes Test Page')
  I.waitForText('Collapse')
  I.waitForText('Edit JSON')
  I.waitForText('Object Properties')
  I.waitForText('Delete item')
  I.waitForText('Delete Last item')
  I.waitForText('Delete All')
  I.waitForText('Move down')
  I.waitForText('Move up')
})
*/
// only icons

/*
  Scenario('It should hide button Labels: null | bootstrap2', async (I) => {
  I.amOnPage('themes.html')
  I.selectOption('iconlib', 'Bootstrap 2')
  I.waitForText('Themes Test Page')
  I.dontSee('Collapse')
  I.dontSee('Edit JSON')
  I.dontSee('Object Properties')
  I.dontSee('Delete item')
  I.dontSee('Delete Last item')
  I.dontSee('Delete All')
  I.dontSee('Move down')
  I.dontSee('Move up')

  I.click('Collapse')
  I.seeElementInDOM('i.icon-chevron-down')
  I.seeElementInDOM('i.icon-chevron-up')
  I.seeElementInDOM('i.icon-trash')
  I.seeElementInDOM('i.icon-pencil')
  I.seeElementInDOM('i.icon-plus')
  I.seeElementInDOM('i.icon-minus')
  I.seeElementInDOM('i.icon-ban-circle')
  I.seeElementInDOM('i.icon-ok')
  I.seeElementInDOM('i.icon-arrow-up')
  I.seeElementInDOM('i.icon-arrow-right')
  I.seeElementInDOM('i.icon-arrow-down')
  I.seeElementInDOM('i.icon-arrow-left')
  I.seeElementInDOM('i.icon-copy')
  I.seeElementInDOM('i.icon-list')
})
 */
Scenario('It should hide button Labels: null | bootstrap3', async ({ I }) => {
  I.amOnPage('themes.html')
  I.selectOption('iconlib', 'Bootstrap 3')
  I.waitForText('Themes Test Page')
  I.dontSee('Collapse')
  I.dontSee('Edit JSON')
  I.dontSee('Object Properties')
  I.dontSee('Delete item')
  I.dontSee('Delete Last item')
  I.dontSee('Delete All')
  I.dontSee('Move down')
  I.dontSee('Move up')

  I.click('Collapse')
  I.seeElementInDOM('i.glyphicon.glyphicon-chevron-down')
  I.seeElementInDOM('i.glyphicon.glyphicon-chevron-right')
  I.seeElementInDOM('i.glyphicon.glyphicon-trash')
  I.seeElementInDOM('i.glyphicon.glyphicon-pencil')
  I.seeElementInDOM('i.glyphicon.glyphicon-plus')
  I.seeElementInDOM('i.glyphicon.glyphicon-minus')
  I.seeElementInDOM('i.glyphicon.glyphicon-floppy-remove')
  I.seeElementInDOM('i.glyphicon.glyphicon-floppy-saved')
  I.seeElementInDOM('i.glyphicon.glyphicon-arrow-up')
  I.seeElementInDOM('i.glyphicon.glyphicon-arrow-right')
  I.seeElementInDOM('i.glyphicon.glyphicon-arrow-down')
  I.seeElementInDOM('i.glyphicon.glyphicon-arrow-left')
  I.seeElementInDOM('i.glyphicon.glyphicon-copy')
  I.seeElementInDOM('i.glyphicon.glyphicon-list')
})

Scenario('It should hide button Labels: null | bootstrap icons @themes @iconlib', async ({ I }) => {
  I.amOnPage('themes.html')
  I.selectOption('iconlib', 'bootstrap')
  I.waitForText('Themes Test Page')
  I.dontSee('Collapse')
  I.dontSee('Edit JSON')
  I.dontSee('Object Properties')
  I.dontSee('Delete item')
  I.dontSee('Delete Last item')
  I.dontSee('Delete All')
  I.dontSee('Move down')
  I.dontSee('Move up')

  I.click('Collapse')
  I.seeElementInDOM('i.bi.bi-chevron-down')
  I.seeElementInDOM('i.bi.bi-chevron-right')
  I.seeElementInDOM('i.bi.bi-trash')
  I.seeElementInDOM('i.bi.bi-pencil')
  I.seeElementInDOM('i.bi.bi-plus')
  I.seeElementInDOM('i.bi.bi-dash')
  I.seeElementInDOM('i.bi.bi-x-circle')
  I.seeElementInDOM('i.bi.bi-save')
  I.seeElementInDOM('i.bi.bi-arrow-up')
  I.seeElementInDOM('i.bi.bi-arrow-right')
  I.seeElementInDOM('i.bi.bi-arrow-down')
  I.seeElementInDOM('i.bi.bi-arrow-left')
  I.seeElementInDOM('i.bi.bi-clipboard')
  I.seeElementInDOM('i.bi.bi-list-ul')
})

/*
Scenario('It should hide button Labels: null | fontawesome3', async (I) => {
  I.amOnPage('themes.html')
  I.selectOption('iconlib', 'fontawesome 3')
  I.waitForText('Themes Test Page')
  I.dontSee('Collapse')
  I.dontSee('Edit JSON')
  I.dontSee('Object Properties')
  I.dontSee('Delete item')
  I.dontSee('Delete Last item')
  I.dontSee('Delete All')
  I.dontSee('Move down')
  I.dontSee('Move up')

  I.click('Collapse')
  I.seeElementInDOM('i.icon-chevron-down')
  I.seeElementInDOM('i.icon-chevron-right')
  I.seeElementInDOM('i.icon-trash')
  I.seeElementInDOM('i.icon-pencil')
  I.seeElementInDOM('i.icon-plus')
  I.seeElementInDOM('i.icon-minus')
  I.seeElementInDOM('i.icon-ban-circle')
  I.seeElementInDOM('i.icon-save')
  I.seeElementInDOM('i.icon-arrow-up')
  I.seeElementInDOM('i.icon-arrow-right')
  I.seeElementInDOM('i.icon-arrow-down')
  I.seeElementInDOM('i.icon-arrow-left')
  I.seeElementInDOM('i.icon-copy')
  I.seeElementInDOM('i.icon-list')
})

Scenario('It should hide button Labels: null | fontawesome4', async (I) => {
  I.amOnPage('themes.html')
  I.selectOption('iconlib', 'fontawesome 4')
  I.waitForText('Themes Test Page')
  I.dontSee('Collapse')
  I.dontSee('Edit JSON')
  I.dontSee('Object Properties')
  I.dontSee('Delete item')
  I.dontSee('Delete Last item')
  I.dontSee('Delete All')
  I.dontSee('Move down')
  I.dontSee('Move up')

  I.click('Collapse')
  I.seeElementInDOM('i.fa.fa-caret-square-o-down')
  I.seeElementInDOM('i.fa.fa-caret-square-o-right')
  I.seeElementInDOM('i.fa.fa-times')
  I.seeElementInDOM('i.fa.fa-pencil')
  I.seeElementInDOM('i.fa.fa-plus')
  I.seeElementInDOM('i.fa.fa-minus')
  I.seeElementInDOM('i.fa.fa-ban')
  I.seeElementInDOM('i.fa.fa-save')
  I.seeElementInDOM('i.fa.fa-arrow-up')
  I.seeElementInDOM('i.fa.fa-arrow-right')
  I.seeElementInDOM('i.fa.fa-arrow-down')
  I.seeElementInDOM('i.fa.fa-arrow-left')
  I.seeElementInDOM('i.fa.fa-files-o')
  I.seeElementInDOM('i.fa.fa-list')
})

Scenario('It should hide button Labels: null | fontawesome5', async (I) => {
  I.amOnPage('themes.html')
  I.selectOption('iconlib', 'fontawesome 5')
  I.waitForText('Themes Test Page')
  I.dontSee('Collapse')
  I.dontSee('Edit JSON')
  I.dontSee('Object Properties')
  I.dontSee('Delete item')
  I.dontSee('Delete Last item')
  I.dontSee('Delete All')
  I.dontSee('Move down')
  I.dontSee('Move up')

  I.click('Collapse')
  I.seeElementInDOM('i.fas.fa-caret-down')
  I.seeElementInDOM('i.fas.fa-caret-right')
  I.seeElementInDOM('i.fas.fa-trash')
  I.seeElementInDOM('i.fas.fa-pen')
  I.seeElementInDOM('i.fas.fa-plus')
  I.seeElementInDOM('i.fas.fa-minus')
  I.seeElementInDOM('i.fas.fa-ban')
  I.seeElementInDOM('i.fas.fa-save')
  I.seeElementInDOM('i.fas.fa-arrow-up')
  I.seeElementInDOM('i.fas.fa-arrow-right')
  I.seeElementInDOM('i.fas.fa-arrow-down')
  I.seeElementInDOM('i.fas.fa-arrow-left')
  I.seeElementInDOM('i.fas.fa-copy')
  I.seeElementInDOM('i.fas.fa-list')
})

Scenario('It should hide button Labels: null | foundation3', async (I) => {
  I.amOnPage('themes.html')
  I.selectOption('iconlib', 'Foundation 3')
  I.waitForText('Themes Test Page')
  I.dontSee('Collapse')
  I.dontSee('Edit JSON')
  I.dontSee('Object Properties')
  I.dontSee('Delete item')
  I.dontSee('Delete Last item')
  I.dontSee('Delete All')
  I.dontSee('Move down')
  I.dontSee('Move up')

  I.click('Collapse')
  I.seeElementInDOM('i.fi-minus')
  I.seeElementInDOM('i.fi-plus')
  I.seeElementInDOM('i.fi-trash')
  I.seeElementInDOM('i.fi-pencil')
  I.seeElementInDOM('i.fi-plus')
  I.seeElementInDOM('i.fi-minus')
  I.seeElementInDOM('i.fi-x-circle')
  I.seeElementInDOM('i.fi-save')
  I.seeElementInDOM('i.fi-arrow-up')
  I.seeElementInDOM('i.fi-arrow-right')
  I.seeElementInDOM('i.fi-arrow-down')
  I.seeElementInDOM('i.fi-arrow-left')
  I.seeElementInDOM('i.fi-page-copy')
  I.seeElementInDOM('i.fi-list')
})

Scenario('It should hide button Labels: null | jqueryui', async (I) => {
  I.amOnPage('themes.html')
  I.selectOption('iconlib', 'jQuery UI')
  I.waitForText('Themes Test Page')
  I.dontSee('Collapse')
  I.dontSee('Edit JSON')
  I.dontSee('Object Properties')
  I.dontSee('Delete item')
  I.dontSee('Delete Last item')
  I.dontSee('Delete All')
  I.dontSee('Move down')
  I.dontSee('Move up')

  I.click('Collapse')
  I.seeElementInDOM('i.ui-icon.ui-icon-triangle-1-s')
  I.seeElementInDOM('i.ui-icon.ui-icon-triangle-1-e')
  I.seeElementInDOM('i.ui-icon.ui-icon-trash')
  I.seeElementInDOM('i.ui-icon.ui-icon-pencil')
  I.seeElementInDOM('i.ui-icon.ui-icon-plusthick')
  I.seeElementInDOM('i.ui-icon.ui-icon-minusthick')
  I.seeElementInDOM('i.ui-icon.ui-icon-closethick')
  I.seeElementInDOM('i.ui-icon.ui-icon-disk')
  I.seeElementInDOM('i.ui-icon.ui-icon-arrowthick-1-n')
  I.seeElementInDOM('i.ui-icon.ui-icon-arrowthick-1-e')
  I.seeElementInDOM('i.ui-icon.ui-icon-arrowthick-1-s')
  I.seeElementInDOM('i.ui-icon.ui-icon-arrowthick-1-w')
  I.seeElementInDOM('i.ui-icon.ui-icon-copy')
  I.seeElementInDOM('i.ui-icon.ui-icon-note')
})

Scenario('It should hide button Labels: null | materialicons', async (I) => {
  I.amOnPage('themes.html')
  I.selectOption('iconlib', 'Material icons')
  I.waitForText('Themes Test Page')
  I.dontSee('Collapse')
  I.dontSee('Edit JSON')
  I.dontSee('Object Properties')
  I.dontSee('Delete item')
  I.dontSee('Delete Last item')
  I.dontSee('Delete All')
  I.dontSee('Move down')
  I.dontSee('Move up')

  I.waitForText('arrow_drop_up', 'i.material-icons')
  I.waitForText('delete', 'i.material-icons')
  I.waitForText('edit', 'i.material-icons')
  I.waitForText('add', 'i.material-icons')
  I.waitForText('remove', 'i.material-icons')
  I.waitForText('arrow_upward', 'i.material-icons')
  I.waitForText('arrow_downward', 'i.material-icons')
  I.waitForText('arrow_forward', 'i.material-icons')
  I.click('#root\\.arraycasetabstop\\.arraytest\\.1')
  I.waitForText('arrow_back', 'i.material-icons')
  I.waitForText('list', 'i.material-icons')
  I.click('Edit JSON')
  I.waitForText('save', 'i.material-icons')
  I.waitForText('content_copy', 'i.material-icons')
  I.waitForText('cancel', 'i.material-icons')
  I.click('Collapse')
  I.waitForText('arrow_drop_down', 'i.material-icons')
})

Scenario('It should hide button Labels: null | openiconic', async (I) => {
  I.amOnPage('themes.html')
  I.selectOption('iconlib', 'Open Iconic')
  I.waitForText('Themes Test Page')
  I.dontSee('Collapse')
  I.dontSee('Edit JSON')
  I.dontSee('Object Properties')
  I.dontSee('Delete item')
  I.dontSee('Delete Last item')
  I.dontSee('Delete All')
  I.dontSee('Move down')
  I.dontSee('Move up')

  I.click('Collapse')
  I.seeElementInDOM('i.oi-icon.oi-icon-collapse-down')
  I.seeElementInDOM('i.oi-icon.oi-icon-expand-right')
  I.seeElementInDOM('i.oi-icon.oi-icon-trash')
  I.seeElementInDOM('i.oi-icon.oi-icon-pencil')
  I.seeElementInDOM('i.oi-icon.oi-icon-plus')
  I.seeElementInDOM('i.oi-icon.oi-icon-minus')
  I.seeElementInDOM('i.oi-icon.oi-icon-ban')
  I.seeElementInDOM('i.oi-icon.oi-icon-file')
  I.seeElementInDOM('i.oi-icon.oi-icon-arrow-thick-top')
  I.seeElementInDOM('i.oi-icon.oi-icon-arrow-thick-right')
  I.seeElementInDOM('i.oi-icon.oi-icon-arrow-thick-bottom')
  I.seeElementInDOM('i.oi-icon.oi-icon-arrow-thick-left')
  I.seeElementInDOM('i.oi-icon.oi-icon-clipboard')
  I.seeElementInDOM('i.oi-icon.oi-icon-list')
})
*/
Scenario('It should hide button Labels: null | spectre', async ({ I }) => {
  I.amOnPage('themes.html')
  I.selectOption('iconlib', 'Spectre')
  I.waitForText('Themes Test Page')
  I.dontSee('Collapse')
  I.dontSee('Edit JSON')
  I.dontSee('Object Properties')
  I.dontSee('Delete item')
  I.dontSee('Delete Last item')
  I.dontSee('Delete All')
  I.dontSee('Move down')
  I.dontSee('Move up')

  I.click('.json-editor-btn-collapse')
  I.seeElementInDOM('i.icon.icon-arrow-down')
  I.seeElementInDOM('i.icon.icon-arrow-right')
  I.seeElementInDOM('i.icon.icon-delete')
  I.seeElementInDOM('i.icon.icon-edit')
  I.seeElementInDOM('i.icon.icon-plus')
  I.seeElementInDOM('i.icon.icon-minus')
  I.seeElementInDOM('i.icon.icon-cross')
  I.seeElementInDOM('i.icon.icon-check')
  I.seeElementInDOM('i.icon.icon-upward')
  I.seeElementInDOM('i.icon.icon-forward')
  I.seeElementInDOM('i.icon.icon-downward')
  I.seeElementInDOM('i.icon.icon-back')
  I.seeElementInDOM('i.icon.icon-copy')
  I.seeElementInDOM('i.icon.icon-menu')
})

// icons + themes

Scenario('It should hide button Labels: spectre | spectre', async ({ I }) => {
  I.amOnPage('themes.html')
  I.selectOption('theme', 'Spectre')
  I.selectOption('iconlib', 'Spectre')
  I.waitForText('Themes Test Page')
  I.dontSee('Collapse')
  I.dontSee('Edit JSON')
  I.dontSee('Object Properties')
  I.dontSee('Delete item')
  I.dontSee('Delete Last item')
  I.dontSee('Delete All')
  I.dontSee('Move down')
  I.dontSee('Move up')

  I.click('.json-editor-btn-collapse')
  I.seeElementInDOM('i.icon.icon-arrow-down')
  I.seeElementInDOM('i.icon.icon-arrow-right')
  I.seeElementInDOM('i.icon.icon-delete')
  I.seeElementInDOM('i.icon.icon-edit')
  I.seeElementInDOM('i.icon.icon-plus')
  I.seeElementInDOM('i.icon.icon-minus')
  I.seeElementInDOM('i.icon.icon-cross')
  I.seeElementInDOM('i.icon.icon-check')
  I.seeElementInDOM('i.icon.icon-upward')
  I.seeElementInDOM('i.icon.icon-forward')
  I.seeElementInDOM('i.icon.icon-downward')
  I.seeElementInDOM('i.icon.icon-back')
  I.seeElementInDOM('i.icon.icon-copy')
  I.seeElementInDOM('i.icon.icon-menu')
})
