Merge pull request patternfly#776 from cliffpyles/feature/add-visual-…

…regression-test

chore(tests): Add visual regression tests

.gitignore

@@ -31,3 +31,8 @@ patternfly.spec
 
 #Ignore generated dist files
 /dist
+
+#Ignore backstop regression test images and reports
+/backstop_data/bitmaps_test
+/backstop_data/bitmaps_reference
+/backstop_data/html_report

backstop/config/index.js

@@ -0,0 +1,29 @@
+const scenarios = require('./scenarios');
+
+module.exports = {
+  "id": "backstop_default",
+  "viewports": [
+    {
+      "label": "desktop",
+      "width": 1440,
+      "height": 900
+    }
+  ],
+  "onBeforeScript": "chromy/onBefore.js",
+  "onReadyScript": "chromy/onReady.js",
+  "scenarios": scenarios,
+  "paths": {
+    "bitmaps_reference": "backstop_data/bitmaps_reference",
+    "bitmaps_test": "backstop_data/bitmaps_test",
+    "engine_scripts": "backstop_data/engine_scripts",
+    "html_report": "backstop_data/html_report",
+    "ci_report": "backstop_data/ci_report"
+  },
+  "report": ["browser"],
+  "engine": "chrome",
+  "engineFlags": [],
+  "asyncCaptureLimit": 5,
+  "asyncCompareLimit": 25,
+  "debug": false,
+  "debugWindow": false
+}

backstop/config/scenarios/about-modal.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'about-modal',
+  url: 'http://localhost:9000/about-modal.html'
+}]

backstop/config/scenarios/accordions.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'accordions',
+  url: 'http://localhost:9000/accordions.html'
+}]

backstop/config/scenarios/alerts.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'alerts',
+  url: 'http://localhost:9000/alerts.html'
+}]

backstop/config/scenarios/application-launcher.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'application-launcher',
+  url: 'http://localhost:9000/application-launcher.html'
+}]

backstop/config/scenarios/area-charts.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'area-charts',
+  url: 'http://localhost:9000/area-charts.html'
+}]

backstop/config/scenarios/badges.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'badges',
+  url: 'http://localhost:9000/badges.html'
+}]

backstop/config/scenarios/bar-charts.js

@@ -0,0 +1,5 @@
+// module.exports = [{
+//   label: 'bar-charts',
+//   url: 'http://localhost:9000/bar-charts.html'
+// }]
+module.exports = []

backstop/config/scenarios/basic.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'basic',
+  url: 'http://localhost:9000/basic.html'
+}]

backstop/config/scenarios/blank-slate.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'blank-slate',
+  url: 'http://localhost:9000/blank-slate.html'
+}]

backstop/config/scenarios/bootstrap-combobox.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'bootstrap-combobox',
+  url: 'http://localhost:9000/bootstrap-combobox.html'
+}]

backstop/config/scenarios/bootstrap-datepicker.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'bootstrap-datepicker',
+  url: 'http://localhost:9000/bootstrap-datepicker.html'
+}]

backstop/config/scenarios/bootstrap-select.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'bootstrap-select',
+  url: 'http://localhost:9000/bootstrap-select.html'
+}]

backstop/config/scenarios/bootstrap-switch.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'bootstrap-switch',
+  url: 'http://localhost:9000/bootstrap-switch.html'
+}]

backstop/config/scenarios/bootstrap-touchspin.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'bootstrap-touchspin',
+  url: 'http://localhost:9000/bootstrap-touchspin.html'
+}]

backstop/config/scenarios/bootstrap-treeview.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'bootstrap-treeview',
+  url: 'http://localhost:9000/bootstrap-treeview.html'
+}]

backstop/config/scenarios/breadcrumbs.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'breadcrumbs',
+  url: 'http://localhost:9000/breadcrumbs.html'
+}]

backstop/config/scenarios/buttons.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'buttons',
+  url: 'http://localhost:9000/buttons.html'
+}]

backstop/config/scenarios/card-view-card-variatons.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'card-view-card-variatons',
+  url: 'http://localhost:9000/card-view-card-variatons.html'
+}]

backstop/config/scenarios/card-view-multi-select.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'card-view-multi-select',
+  url: 'http://localhost:9000/card-view-multi-select.html'
+}]

backstop/config/scenarios/card-view-single-select.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'card-view-single-select',
+  url: 'http://localhost:9000/card-view-single-select.html'
+}]

backstop/config/scenarios/cards.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'cards',
+  url: 'http://localhost:9000/cards.html'
+}]

backstop/config/scenarios/code.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'code',
+  url: 'http://localhost:9000/code.html'
+}]

backstop/config/scenarios/dashboard.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'dashboard',
+  url: 'http://localhost:9000/dashboard.html'
+}]

backstop/config/scenarios/donut-charts.js

@@ -0,0 +1,5 @@
+// module.exports = [{
+//   label: 'donut-charts',
+//   url: 'http://localhost:9000/donut-charts.html'
+// }]
+module.exports = []

backstop/config/scenarios/dropdowns.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'dropdowns',
+  url: 'http://localhost:9000/dropdowns.html'
+}]

backstop/config/scenarios/form.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'form',
+  url: 'http://localhost:9000/form.html'
+}]

backstop/config/scenarios/forms.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'forms',
+  url: 'http://localhost:9000/forms.html'
+}]

backstop/config/scenarios/icons.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'icons',
+  url: 'http://localhost:9000/icons.html'
+}]

backstop/config/scenarios/index.js

@@ -0,0 +1,138 @@
+const aboutModalScenario = require('./about-modal'),
+      accordionsScenario = require('./accordions'),
+      alertsScenario = require('./alerts'),
+      applicationLauncherScenario = require('./application-launcher'),
+      badgesScenario = require('./badges'),
+      blankSlateScenario = require('./blank-slate'),
+      bootstrapComboboxScenario = require('./bootstrap-combobox'),
+      bootstrapDatepickerScenario = require('./bootstrap-datepicker'),
+      bootstrapSelectScenario = require('./bootstrap-select'),
+      bootstrapSwitchScenario = require('./bootstrap-switch'),
+      bootstrapTouchspinScenario = require('./bootstrap-touchspin'),
+      bootstrapTreeviewScenario = require('./bootstrap-treeview'),
+      breadcrumbsScenario = require('./breadcrumbs'),
+      buttonsScenario = require('./buttons'),
+      cardViewCardVariatonsScenario = require('./card-view-card-variatons'),
+      codeScenario = require('./code'),
+      dropdownsScenario = require('./dropdowns'),
+      formsScenario = require('./forms'),
+      iconsScenario = require('./icons'),
+      infoTipScenario = require('./info-tip'),
+      labelsScenario = require('./labels'),
+      listGroupScenario = require('./list-group'),
+      listScenario = require('./list'),
+      listViewRowsScenario = require('./list-view-rows'),
+      modalsScenario = require('./modals'),
+      navbarScenario = require('./navbar'),
+      paginationScenario = require('./pagination'),
+      panelsScenario = require('./panels'),
+      popoversScenario = require('./popovers'),
+      progressBarsScenario = require('./progress-bars'),
+      searchScenario = require('./search'),
+      spinnerScenario = require('./spinner'),
+      tableViewColumnsScenario = require('./table-view-columns'),
+      tableViewNavbarScenario = require('./table-view-navbar'),
+      tableViewScenario = require('./table-view'),
+      tablesScenario = require('./tables'),
+      tabsScenario = require('./tabs'),
+      timePickerScenario = require('./time-picker'),
+      toastsScenario = require('./toasts'),
+      toolbarScenario = require('./toolbar'),
+      tooltipScenario = require('./tooltip'),
+      typographyScenario = require('./typography'),
+      wizardScenario = require('./wizard'),
+      areaChartsScenario = require('./area-charts'),
+      barChartsScenario = require('./bar-charts'),
+      donutChartsScenario = require('./donut-charts'),
+      lineChartsScenario = require('./line-charts'),
+      pieChartsScenario = require('./pie-charts'),
+      utilizationBarChartsScenario = require('./utilization-bar-charts'),
+      basicScenario = require('./basic'),
+      treeViewScenario = require('./tree-view'),
+      cardViewMultiSelectScenario = require('./card-view-multi-select'),
+      cardViewSingleSelectScenario = require('./card-view-single-select'),
+      cardsScenario = require('./cards'),
+      dashboardScenario = require('./dashboard'),
+      formScenario = require('./form'),
+      listViewCompoundExpansionScenario = require('./list-view-compound-expansion'),
+      listViewSimpleExpansionScenario = require('./list-view-simple-expansion'),
+      listViewScenario = require('./list-view'),
+      loginScenario = require('./login'),
+      notificationDrawerHoriztonalNavScenario = require('./notification-drawer-horiztonal-nav'),
+      notificationDrawerVerticalNavScenario = require('./notification-drawer-vertical-nav'),
+      paginationCardViewScenario = require('./pagination-card-view'),
+      paginationListViewScenario = require('./pagination-list-view'),
+      paginationTableViewScenario = require('./pagination-table-view'),
+      tabScenario = require('./tab'),
+      typography2Scenario = require('./typography2');
+
+const scenarios = [
+  ...aboutModalScenario,
+  ...accordionsScenario,
+  ...alertsScenario,
+  ...applicationLauncherScenario,
+  ...badgesScenario,
+  ...blankSlateScenario,
+  ...bootstrapComboboxScenario,
+  ...bootstrapDatepickerScenario,
+  ...bootstrapSelectScenario,
+  ...bootstrapSwitchScenario,
+  ...bootstrapTouchspinScenario,
+  ...bootstrapTreeviewScenario,
+  ...breadcrumbsScenario,
+  ...buttonsScenario,
+  ...cardViewCardVariatonsScenario,
+  ...codeScenario,
+  ...dropdownsScenario,
+  ...formsScenario,
+  ...iconsScenario,
+  ...infoTipScenario,
+  ...labelsScenario,
+  ...listGroupScenario,
+  ...listScenario,
+  ...listViewRowsScenario,
+  ...modalsScenario,
+  ...navbarScenario,
+  ...paginationScenario,
+  ...panelsScenario,
+  ...popoversScenario,
+  ...progressBarsScenario,
+  ...searchScenario,
+  ...spinnerScenario,
+  ...tableViewColumnsScenario,
+  ...tableViewNavbarScenario,
+  ...tableViewScenario,
+  ...tablesScenario,
+  ...tabsScenario,
+  ...timePickerScenario,
+  ...toastsScenario,
+  ...toolbarScenario,
+  ...tooltipScenario,
+  ...typographyScenario,
+  ...wizardScenario,
+  ...areaChartsScenario,
+  ...barChartsScenario,
+  ...donutChartsScenario,
+  ...lineChartsScenario,
+  ...pieChartsScenario,
+  ...utilizationBarChartsScenario,
+  ...basicScenario,
+  ...treeViewScenario,
+  ...cardViewMultiSelectScenario,
+  ...cardViewSingleSelectScenario,
+  ...cardsScenario,
+  ...dashboardScenario,
+  ...formScenario,
+  ...listViewCompoundExpansionScenario,
+  ...listViewSimpleExpansionScenario,
+  ...listViewScenario,
+  ...loginScenario,
+  ...notificationDrawerHoriztonalNavScenario,
+  ...notificationDrawerVerticalNavScenario,
+  ...paginationCardViewScenario,
+  ...paginationListViewScenario,
+  ...paginationTableViewScenario,
+  ...tabScenario
+];
+
+module.exports = scenarios

backstop/config/scenarios/info-tip.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'info-tip',
+  url: 'http://localhost:9000/info-tip.html'
+}]

backstop/config/scenarios/labels.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'labels',
+  url: 'http://localhost:9000/labels.html'
+}]

backstop/config/scenarios/line-charts.js

@@ -0,0 +1,5 @@
+// module.exports = [{
+//   label: 'line-charts',
+//   url: 'http://localhost:9000/line-charts.html'
+// }]
+module.exports = []

backstop/config/scenarios/list-group.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'list-group',
+  url: 'http://localhost:9000/list-group.html'
+}]

backstop/config/scenarios/list-view-compound-expansion.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'list-view-compound-expansion',
+  url: 'http://localhost:9000/list-view-compound-expansion.html'
+}]

backstop/config/scenarios/list-view-rows.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'list-view-rows',
+  url: 'http://localhost:9000/list-view-rows.html'
+}]

backstop/config/scenarios/list-view-simple-expansion.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'list-view-simple-expansion',
+  url: 'http://localhost:9000/list-view-simple-expansion.html'
+}]

backstop/config/scenarios/list-view.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'list-view',
+  url: 'http://localhost:9000/list-view.html'
+}]

backstop/config/scenarios/list.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'list',
+  url: 'http://localhost:9000/list.html'
+}]

backstop/config/scenarios/login.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'login',
+  url: 'http://localhost:9000/login.html'
+}]

backstop/config/scenarios/modals.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'modals',
+  url: 'http://localhost:9000/modals.html'
+}]

backstop/config/scenarios/navbar.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'navbar',
+  url: 'http://localhost:9000/navbar.html'
+}]

backstop/config/scenarios/notification-drawer-horiztonal-nav.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'notification-drawer-horiztonal-nav',
+  url: 'http://localhost:9000/notification-drawer-horiztonal-nav.html'
+}]

backstop/config/scenarios/notification-drawer-vertical-nav.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'notification-drawer-vertical-nav',
+  url: 'http://localhost:9000/notification-drawer-vertical-nav.html'
+}]

backstop/config/scenarios/pagination-card-view.js

@@ -0,0 +1,4 @@
+module.exports = [{
+  label: 'pagination-card-view',
+  url: 'http://localhost:9000/pagination-card-view.html'
+}]