Make test process less opaque

* Add additiona comments
* File names with more meaning
* Add initial DOM testing testing (this should replace the manual test writing that @interactivellama set up before

Author: interactivellama

.eslintignore

@@ -10,12 +10,12 @@ package-lock.json
 
 # React Storybook
 storybook/
-storybook-image-snapshots/
+storybook-based-tests/
 
 # Publishing and dist build
 .tmp*
 
-# For build server. A copy of itself is 
+# For build server. A copy of itself is
 design-system-react
 
 # Allow custom pre-commit
@@ -312,4 +312,4 @@ $RECYCLE.BIN/
 *.msp
 
 # Windows shortcuts
-*.lnk
+*.lnk

.gitignore

@@ -8,7 +8,7 @@ package-lock.json
 
 # React Storybook
 storybook/
-storybook-image-snapshots/
+storybook-based-tests/
 
 # Publishing and dist build
 .tmp*

.storybook-image-snapshots/config.js renamed to .storybook-based-tests/config.js

@@ -1,7 +1,7 @@
 import { configure } from '@storybook/react';
 
 function loadStories() {
-	require('../components/storybook-stories-image-snapshots'); // eslint-disable-line global-require
+	require('../components/story-based-tests.js'); // eslint-disable-line global-require
 }
 
 configure(loadStories, module);

.storybook-image-snapshots/middleware.js renamed to .storybook-based-tests/middleware.js

@@ -1,12 +1,23 @@
-// Sample stories for image snapshot testing
-// Components commented twice are not currently
-// compatible with jest-image-snapshot, most are
-// issues with a DOM not being present.
+/*
+ * STORY-BASED SNAPSHOT TESTING
+ *
+ * Please add stories below to use Storybook Stories (http://localhost:9001)
+ * as the basis for DOM and image snapshots to allow markup and visual regression
+ * testing. All new components should be added below to enable DOM and image
+ * snapshots. With enough Storybook story examples, these two methods should be
+ * significant to fully test components with the exception of callback testing.
+ * Pleaes test callback props with the Mocha framework (http://localhost:8001).
+ * `tests/story-based-tests.snapshot-test.js` looks at this file and uses the
+ * following stories to create snapshots.
+ *
+ * This library is transitioning to story-based testing, but not all components
+ * are able to be tested without a DOM. This file should eventually go away and
+ * `storybook-stories.js` used for the basis of snapshot creation.
+ */
 
 export Blank from '../tests/initial-blank-stories';
 export Accordion from '../components/accordion/__docs__/storybook-stories';
 // export Alert from '../components/alert/__docs__/storybook-stories';
-// // export AppLauncher from '../components/app-launcher/__docs__/storybook-stories';
 // export Avatar from '../components/avatar/__docs__/storybook-stories';
 // export Breadcrumb from '../components/breadcrumb/__docs__/storybook-stories';
 // export Button from '../components/button/__docs__/storybook-stories';
@@ -16,35 +27,43 @@ export Accordion from '../components/accordion/__docs__/storybook-stories';
 // export Checkbox from '../components/forms/checkbox/__docs__/storybook-stories';
 // export Combobox from '../components/combobox/__docs__/storybook-stories';
 // export Filter from '../components/filter/__docs__/storybook-stories';
-// // export GlobalNavigationBar from '../components/global-navigation-bar/__docs__/storybook-stories';
 // export DataTable from '../components/data-table/__docs__/storybook-stories';
-// // export DatePicker from '../components/date-picker/__docs__/storybook-stories';
 // export Dropdown from '../components/menu-dropdown/__docs__/storybook-stories';
-// // export IconSettings from '../components/icon-settings/__docs__/storybook-stories';
 // export Input from '../components/forms/input/__docs__/storybook-stories';
 // export Teaxtarea from '../components/forms/textarea/__docs__/storybook-stories';
 // export InlineInput from '../components/forms/input/__docs__/inline/storybook-stories';
 // export Search from '../components/forms/input/__docs__/search/storybook-stories';
-// // export GlobalHeader from '../components/global-header/__docs__/storybook-stories';
 // export Icon from '../components/icon/__docs__/storybook-stories';
 // export Lookup from '../components/lookup/__docs__/storybook-stories';
 // export MediaObject from '../components/media-object/__docs__/storybook-stories';
-// // export Modal from '../components/modal/__docs__/storybook-stories';
 // export Navigation from '../components/navigation/__docs__/storybook-stories';
-// // export Notification from '../components/notification/__docs__/storybook-stories';
 // export PageHeader from '../components/page-header/__docs__/storybook-stories';
-// // export Panel from '../components/panel/__docs__/storybook-stories';
 // export Pill from '../components/pill/__docs__/storybook-stories';
-// // export Popover from '../components/popover/__docs__/storybook-stories';
-// // export ProgressIndicator from '../components/progress-indicator/__docs__/storybook-stories';
 // export ProgressRing from '../components/progress-ring/__docs__/storybook-stories';
-// // export Picklist from '../components/menu-picklist/__docs__/storybook-stories';
 // export RadioGroup from '../components/radio-group/__docs__/storybook-stories';
 // export RadioButtonGroup from '../components/radio-button-group/__docs__/storybook-stories';
 // export SplitView from '../components/split-view/__docs__/storybook-stories';
-// // export Spinner from '../components/spinner/__docs__/storybook-stories';
 // export Tabs from '../components/tabs/__docs__/storybook-stories';
-// // export TimePicker from '../components/time-picker/__docs__/storybook-stories';
 // export Toast from '../components/toast/__docs__/storybook-stories';
 // export Tooltip from '../components/tooltip/__docs__/storybook-stories';
 // export Tree from '../components/tree/__docs__/storybook-stories';
+
+/*
+ * The following components are not compatible Jest testing because
+ * need a real DOM. These components should be updated to allow testing
+ * with Jest. This is typically done by gaurding references to `document`.
+ */
+
+// export AppLauncher from '../components/app-launcher/__docs__/storybook-stories';
+// export GlobalNavigationBar from '../components/global-navigation-bar/__docs__/storybook-stories';
+// export DatePicker from '../components/date-picker/__docs__/storybook-stories';
+// export IconSettings from '../components/icon-settings/__docs__/storybook-stories';
+// export GlobalHeader from '../components/global-header/__docs__/storybook-stories';
+// export Modal from '../components/modal/__docs__/storybook-stories';
+// export Notification from '../components/notification/__docs__/storybook-stories';
+// export Panel from '../components/panel/__docs__/storybook-stories';
+// export Popover from '../components/popover/__docs__/storybook-stories';
+// export ProgressIndicator from '../components/progress-indicator/__docs__/storybook-stories';
+// export Picklist from '../components/menu-picklist/__docs__/storybook-stories';
+// export Spinner from '../components/spinner/__docs__/storybook-stories';
+// export TimePicker from '../components/time-picker/__docs__/storybook-stories';

.storybook-image-snapshots/preview-head.html renamed to .storybook-based-tests/preview-head.html

@@ -1,6 +1,14 @@
-// In addition to this file, please add new components
-// to storybook-stories-image-snapshots.js to enable
-// image snapshot testing
+/*
+ * STORY-BASED EXAMPLES
+ *
+ * Please add stories below to use Storybook Stories (http://localhost:9001)
+ * as the basis for manual review and a development sandbox. New components
+ * should also be added to `story-based-tests.jsx` in order to automatically
+ * add DOM and image snapshots. With enough Storybook story examples, these
+ * two methods should be significant to fully test components with the
+ * exception of callback testing. Pleaes test callback props with the Mocha
+ * framework (http://localhost:8001).
+ */
 
 export Accordion from '../components/accordion/__docs__/storybook-stories';
 export Alert from '../components/alert/__docs__/storybook-stories';

.storybook-image-snapshots/webpack.config.js renamed to .storybook-based-tests/webpack.config.js

@@ -20,7 +20,7 @@
   "scripts": {
     "build-docs": "./node_modules/.bin/babel-node ./scripts/build-docs.js",
     "build-storybook": "build-storybook -o ./storybook",
-    "build-storybook-image-test": "build-storybook -o ./storybook-image-snapshots -c ./.storybook-image-snapshots",
+    "build-storybook-for-tests": "build-storybook -o ./storybook-based-tests -c ./.storybook-based-tests",
     "dist": "scripts/dist.sh",
     "format": "./node_modules/.bin/prettier-eslint --write \"**/*.{js,jsx}\"",
     "heroku-prebuild": "./scripts/heroku-prebuild.sh",
@@ -35,7 +35,7 @@
     "publish-to-upstream": "./node_modules/.bin/babel-node scripts/publish-to-git.js --remote=upstream",
     "release-patch": "./node_modules/.bin/babel-node scripts/release.js --release=patch",
     "release-minor": "./node_modules/.bin/babel-node scripts/release.js --release=minor",
-    "snapshot-test": "npm run build-storybook-image-test && ./node_modules/.bin/jest",
+    "snapshot-test": "npm run build-storybook-for-tests && ./node_modules/.bin/jest",
     "start": "./node_modules/.bin/start-storybook -p 9001 -s ./node_modules & node tests/app",
     "start-static": "node app",
     "storybook": "start-storybook -p 9001 -s ./node_modules",