(v0.7.0) Used shenanigans-manager@0.2 instead of Gulp

.travis.yml

@@ -1,8 +1,8 @@
 language: node_js
 
 node_js:
-  - "7"
+  - "node"
   - "5"
 
 script:
-  node_modules/gulp/bin/gulp.js
+  npm run verify

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+    "editor.tabSize": 4,
+    "editor.trimAutoWhitespace": true,
+    "tslint.alwaysShowRuleFailuresAsWarnings": true,
+    "tslint.autoFixOnSave": true,
+    "typescript.tsdk": "node_modules\\typescript\\lib"
+}

gulpfile.js

@@ -1 +0,0 @@
-require("gulp-shenanigans").initialize(require("gulp"));

package.json

@@ -1,87 +1,123 @@
 {
-  "name": "userwrappr",
-  "description": "Creates configurable HTML displays over flexible-sized contents.",
-  "version": "0.6.5",
-  "author": {
-    "name": "Josh Goldberg",
-    "email": "joshuakgoldberg@outlook.com"
-  },
-  "repository": {
-    "type": "git",
-    "url": "ssh://git@github.com:FullScreenShenanigans/UserWrappr.git"
-  },
-  "bugs": {
-    "url": "https://github.com/FullScreenShenanigans/UserWrappr/issues"
-  },
-  "license": "MIT",
-  "types": "./lib/index.d.ts",
-  "dependencies": {
-    "mobx": "^3.3.1",
-    "mobx-react": "^4.3.4",
-    "react": "^16.1.1",
-    "react-dom": "^16.1.1",
-    "requirejs": "^2.3.5",
-    "sinon": "^4.1.2",
-    "sinon-chai": "^2.14.0"
-  },
-  "devDependencies": {
-    "@types/react": "^16.0.22",
-    "@types/react-dom": "^16.0.3",
-    "gulp": "^3.9.1",
-    "gulp-shenanigans": "^0.6.17"
-  },
-  "scripts": {
-    "gulp": "gulp",
-    "test": "gulp test"
-  },
-  "shenanigans": {
-    "entries": [
-      {
-        "entry": "./src/UserWrappr.js",
-        "name": "UserWrappr",
-        "sources": [
-          "src/**/*.js",
-          "!src/Menus/**/*.js"
-        ]
-      },
-      {
-        "entry": "./src/Menus/InitializeMenus.js",
-        "name": "UserWrappr-Delayed",
-        "sources": [
-          "src/Menus/**/*.js"
-        ]
-      }
-    ],
-    "externals": [
-      {
-        "js": {
-          "dev": "../node_modules/mobx/lib/mobx.umd",
-          "prod": "../node_modules/mobx/lib/mobx.umd.min"
-        },
-        "name": "mobx"
-      },
-      {
-        "js": {
-          "dev": "../node_modules/mobx-react/index",
-          "prod": "../node_modules/mobx-react/index.min"
-        },
-        "name": "mobx-react"
-      },
-      {
-        "js": {
-          "dev": "../node_modules/react/umd/react.development",
-          "prod": "../node_modules/react/lib/react.production"
-        },
-        "name": "react"
-      },
-      {
-        "js": {
-          "dev": "../node_modules/react-dom/umd/react-dom.development",
-          "prod": "../node_modules/react-dom/lib/react-dom.production"
-        },
-        "name": "react-dom"
-      }
-    ],
-    "name": "UserWrappr"
-  }
-}
+    "author": {
+        "email": "joshuakgoldberg@outlook.com",
+        "name": "Josh Goldberg"
+    },
+    "browser": "./src/index.js",
+    "bugs": {
+        "url": "https://github.com/FullScreenShenanigans/UserWrappr/issues"
+    },
+    "dependencies": {
+        "mobx": "^3.4.1",
+        "mobx-react": "^4.3.5",
+        "react": "^16.2.0",
+        "react-dom": "^16.2.0",
+        "requirejs": "^2.3.5"
+    },
+    "description": "Creates configurable HTML displays over flexible-sized contents.",
+    "devDependencies": {
+        "@types/chai": "^4.0.4",
+        "@types/lolex": "^1.5.32",
+        "@types/mocha": "^2.2.44",
+        "@types/react": "^16.0.31",
+        "@types/react-dom": "^16.0.3",
+        "@types/sinon": "^4.0.0",
+        "@types/sinon-chai": "^2.7.29",
+        "chai": "^4.1.2",
+        "glob": "^7.1.2",
+        "lolex": "^2.3.0",
+        "mocha": "^4.0.1",
+        "mocha-headless-chrome": "^1.7.1",
+        "requirejs": "^2.3.5",
+        "run-for-every-file": "^1.1.0",
+        "shenanigans-manager": "^0.2.0",
+        "sinon": "^4.1.2",
+        "sinon-chai": "^2.14.0",
+        "tslint": "5.8.0",
+        "tsutils": "^2.14.0",
+        "typedoc": "^0.9.0",
+        "typescript": "^2.6.2",
+        "webpack": "^3.10.0"
+    },
+    "license": "MIT",
+    "name": "userwrappr",
+    "repository": {
+        "type": "git",
+        "url": "ssh://git@github.com:FullScreenShenanigans/UserWrappr.git"
+    },
+    "scripts": {
+        "dist": "npm run dist:webpack",
+        "dist:webpack": "webpack --config webpack.config.js",
+        "docs": "npm run docs:typedoc",
+        "docs:typedoc": "typedoc src/ --out docs/generated",
+        "init": "npm install && npm run setup && npm run verify",
+        "setup": "npm run setup:copy && npm run setup:package",
+        "setup:copy": "npm run setup:copy:default",
+        "setup:copy:default": "run-for-every-file --dot --src \"node_modules/shenanigans-manager/setup/default/\" --file \"**/*\" --run \"mustache package.json {{src-file}} {{file}}\" --dest \".\" --only-files",
+        "setup:package": "shenanigans-manager hydrate-package-json",
+        "src": "npm run src:tsc && npm run src:tslint",
+        "src:tsc": "tsc -p .",
+        "src:tslint": "tslint -c tslint.json --exclude ./node_modules/**/*.ts* -p tsconfig.json -t stylish",
+        "test": "npm run test:setup && npm run test:run",
+        "test:run": "mocha-headless-chrome --file test/index.html",
+        "test:setup": "npm run test:setup:copy && npm run test:setup:html && npm run test:setup:tsc",
+        "test:setup:copy": "npm run test:setup:copy:default",
+        "test:setup:copy:default": "run-for-every-file --dot --src \"node_modules/shenanigans-manager/setup/test/\" --file \"**/*\" --run \"mustache package.json {{src-file}} ./test/{{file}}\" --dest \".\" --only-files",
+        "test:setup:html": "shenanigans-manager generate-test-html",
+        "test:setup:tsc": "tsc -p test",
+        "verify": "npm run src && npm run test && npm run dist && npm run docs",
+        "watch": "run-p \"tsc -p . -w\" \"echo sup\""
+    },
+    "shenanigans": {
+        "entries": [
+            {
+                "entry": "./src/UserWrappr.js",
+                "name": "UserWrappr",
+                "sources": [
+                    "src/**/*.js",
+                    "!src/Menus/**/*.js"
+                ]
+            },
+            {
+                "entry": "./src/Menus/InitializeMenus.js",
+                "name": "UserWrappr-Delayed",
+                "sources": [
+                    "src/Menus/**/*.js"
+                ]
+            }
+        ],
+        "externals": [
+            {
+                "js": {
+                    "dev": "../node_modules/mobx/lib/mobx.umd",
+                    "prod": "../node_modules/mobx/lib/mobx.umd.min"
+                },
+                "name": "mobx"
+            },
+            {
+                "js": {
+                    "dev": "../node_modules/mobx-react/index",
+                    "prod": "../node_modules/mobx-react/index.min"
+                },
+                "name": "mobx-react"
+            },
+            {
+                "js": {
+                    "dev": "../node_modules/react/umd/react.development",
+                    "prod": "../node_modules/react/lib/react.production"
+                },
+                "name": "react"
+            },
+            {
+                "js": {
+                    "dev": "../node_modules/react-dom/umd/react-dom.development",
+                    "prod": "../node_modules/react-dom/lib/react-dom.production"
+                },
+                "name": "react-dom"
+            }
+        ],
+        "name": "UserWrappr"
+    },
+    "types": "./src/index.d.ts",
+    "version": "0.7.0"
+}

src/Bootstrapping/AreasFaker.test.ts

@@ -0,0 +1,107 @@
+import { expect } from "chai";
+
+import { stubClassNames, stubStyles } from "../fakes.test";
+import { IAbsoluteSizeSchema } from "../Sizing";
+import { stubAreasFaker, stubContainerSize } from "./fakes.test";
+
+describe("AreasFaker", () => {
+    describe("createAndAppendMenuArea", () => {
+        it("creates an outer area with the outer area class name", async () => {
+            // Arrange
+            const areasFaker = stubAreasFaker();
+
+            // Act
+            const { menuArea } = await areasFaker.createAndAppendMenuArea(stubContainerSize);
+
+            // Assert
+            expect(menuArea.className).to.be.equal(stubClassNames.menusOuterArea);
+        });
+
+        it("creates an inner area with the inner area fake class name and styles", async () => {
+            // Arrange
+            const areasFaker = stubAreasFaker();
+
+            // Act
+            const { menuArea } = await areasFaker.createAndAppendMenuArea(stubContainerSize);
+            const innerArea = menuArea.children[0] as HTMLElement;
+
+            // Assert
+            expect(innerArea.className).to.be.equal([
+                stubClassNames.menusInnerArea,
+                stubClassNames.menusInnerAreaFake,
+            ].join(" "));
+            expect(innerArea.style).to.contain({
+                ...stubStyles.menusInnerArea,
+                ...stubStyles.menusInnerAreaFake,
+            });
+        });
+
+        it("creates stub menu titles when provided menu schemas", async () => {
+            // Arrange
+            const areasFaker = stubAreasFaker({
+                menus: [
+                    {
+                        options: [],
+                        title: "abc",
+                    },
+                    {
+                        options: [],
+                        title: "def",
+                    },
+                ],
+            });
+
+            // Act
+            const { menuArea } = await areasFaker.createAndAppendMenuArea(stubContainerSize);
+
+            // Assert
+            expect(menuArea.textContent).to.be.equal("abcdef");
+        });
+    });
+
+    describe("createContentArea", () => {
+        it("vertically fills the content size to the container excluding the menu area", () => {
+            // Arrange
+            const areasFaker = stubAreasFaker();
+            const containerSize: IAbsoluteSizeSchema = {
+                height: 350,
+                width: 490,
+            };
+            const menuAreaSize: IAbsoluteSizeSchema = {
+                height: 140,
+                width: 210,
+            };
+
+            // Act
+            const { contentSize } = areasFaker.createContentArea(containerSize, menuAreaSize);
+
+            // Assert
+            expect(contentSize).to.be.deep.equal({
+                height: 210,
+                width: 490,
+            });
+        });
+
+        it("matches its content area size style to the returned content size", () => {
+            // Arrange
+            const areasFaker = stubAreasFaker();
+            const containerSize: IAbsoluteSizeSchema = {
+                height: 350,
+                width: 490,
+            };
+            const menuAreaSize: IAbsoluteSizeSchema = {
+                height: 140,
+                width: 210,
+            };
+
+            // Act
+            const { contentArea, contentSize } = areasFaker.createContentArea(containerSize, menuAreaSize);
+
+            // Assert
+            expect(contentArea.style).to.contain({
+                height: `${contentSize.height}px`,
+                width: `${contentSize.width}px`,
+            });
+        });
+    });
+});

src/Bootstrapping/AreasFaker.ts

@@ -83,7 +83,7 @@ export class AreasFaker {
         const clientRect = menuArea.getBoundingClientRect();
         const menuSize: IAbsoluteSizeSchema = {
             height: Math.round(clientRect.height),
-            width: Math.round(clientRect.width)
+            width: Math.round(clientRect.width),
         };
 
         return { menuArea, menuSize };
@@ -103,7 +103,7 @@ export class AreasFaker {
                 ...this.dependencies.styles.contentArea,
                 height: `${contentSize.height}px`,
                 width: `${contentSize.width}px`,
-            }
+            },
         });
 
         return { contentSize, contentArea };
@@ -119,17 +119,17 @@ export class AreasFaker {
         const innerArea = this.dependencies.createElement("div", {
             className: [
                 this.dependencies.classNames.menusInnerArea,
-                this.dependencies.classNames.menusInnerAreaFake
+                this.dependencies.classNames.menusInnerAreaFake,
             ].join(" "),
             style: {
                 ...this.dependencies.styles.menusInnerArea,
                 ...this.dependencies.styles.menusInnerAreaFake,
-                width: `${containerSize.width}px`
-            }
+                width: `${containerSize.width}px`,
+            },
         });
         const outerArea = this.dependencies.createElement("div", {
             className: this.dependencies.classNames.menusOuterArea,
-            children: [innerArea]
+            children: [innerArea],
         });
 
         for (const menu of this.dependencies.menus) {
@@ -140,10 +140,10 @@ export class AreasFaker {
                         this.dependencies.createElement("h4", {
                             className: this.dependencies.classNames.menuTitle,
                             style: this.dependencies.styles.menuTitle,
-                            textContent: menu.title
-                        })
+                            textContent: menu.title,
+                        }),
                     ],
-                    style: this.dependencies.styles.menu
+                    style: this.dependencies.styles.menu,
                 }));
         }
 

src/Bootstrapping/ClassNames.ts

@@ -78,5 +78,5 @@ export const defaultClassNames: IClassNames = {
     optionLeft: "option-left",
     optionRight: "option-right",
     options: "options",
-    optionsList: "options-list"
+    optionsList: "options-list",
 };

src/Bootstrapping/CreateElement.test.ts

@@ -0,0 +1,66 @@
+import { expect } from "chai";
+
+import { createElement } from "./CreateElement";
+
+describe("createElement", () => {
+    it("creates an element when given a tag name", () => {
+        // Arrange
+        const tagName = "div";
+
+        // Act
+        const element = createElement(tagName);
+
+        // Assert
+        expect(element.tagName).to.be.equal("DIV");
+    });
+
+    it("appends children to the element when given children", () => {
+        // Arrange
+        const children = [
+            createElement("p"),
+            createElement("span"),
+        ];
+
+        // Act
+        const element = createElement("div", { children });
+
+        // Assert
+        expect([].slice.call(element.children)).to.be.deep.equal(children);
+    });
+
+    it("sets the className of the element when given a className", () => {
+        // Arrange
+        const className = "abc def";
+
+        // Act
+        const element = createElement("div", { className });
+
+        // Assert
+        expect(element.className).to.be.equal(className);
+    });
+
+    it("sets the textContent of the element when given a textContent", () => {
+        // Arrange
+        const textContent = "abc def";
+
+        // Act
+        const element = createElement("div", { textContent });
+
+        // Assert
+        expect(element.textContent).to.be.equal(textContent);
+    });
+
+    it("adds style properties to the element when given a style", () => {
+        // Arrange
+        const style: Partial<CSSStyleDeclaration> = {
+            backgroundColor: "blue",
+            color: "red",
+        };
+
+        // Act
+        const element = createElement("div", { style });
+
+        // Assert
+        expect(element.style).to.contain(style);
+    });
+});

src/Bootstrapping/Styles.ts

@@ -103,13 +103,13 @@ export interface IStyles {
  */
 export const defaultStyles: IStyles = {
     contentArea: {
-        position: "relative"
+        position: "relative",
     },
     menusInnerArea: {
         alignItems: "stretch",
         display: "flex",
         flexWrap: "wrap",
-        justifyContent: "center"
+        justifyContent: "center",
     },
     menusInnerAreaFake: {},
     input: {},
@@ -121,39 +121,39 @@ export const defaultStyles: IStyles = {
     inputSelect: {},
     menuChildrenOpen: {},
     menuChildrenClosed: {
-        display: "none"
+        display: "none",
     },
     menu: {
         flex: "1",
         position: "relative",
-        textAlign: "center"
+        textAlign: "center",
     },
     menuTitle: {
         cursor: "default",
         display: "inline-block",
         margin: "0",
-        padding: "3px 21px"
+        padding: "3px 21px",
     },
     option: {
         display: "flex",
         flexDirection: "row",
         flexGrow: "0",
-        flexWrap: "wrap"
+        flexWrap: "wrap",
     },
     optionLeft: {
         flexGrow: "1",
-        width: "50%"
+        width: "50%",
     },
     optionRight: {
         flexGrow: "1",
-        width: "50%"
+        width: "50%",
     },
     options: {
         bottom: "0",
         position: "absolute",
-        width: "100%"
+        width: "100%",
     },
     optionsList: {
-        overflowY: "auto"
-    }
+        overflowY: "auto",
+    },
 };

src/Bootstrapping/fakes.test.ts

@@ -1,11 +1,11 @@
-import { AreasFaker, IAreasFakerDependencies } from "../../../src/Bootstrapping/AreasFaker";
-import { createElement } from "../../../src/Bootstrapping/CreateElement";
-import { IAbsoluteSizeSchema } from "../../../src/Sizing";
-import { stubClassNames, stubStyles } from "../../UserWrappr/stubs";
+import { stubClassNames, stubStyles } from "../fakes.test";
+import { IAbsoluteSizeSchema } from "../Sizing";
+import { AreasFaker, IAreasFakerDependencies } from "./AreasFaker";
+import { createElement } from "./CreateElement";
 
 export const stubContainerSize: IAbsoluteSizeSchema = {
     width: 210,
-    height: 280
+    height: 280,
 };
 
 const stubDependencies: IAreasFakerDependencies = {
@@ -13,16 +13,16 @@ const stubDependencies: IAreasFakerDependencies = {
     container: createElement("div", {
         style: {
             height: `${stubContainerSize.height}px`,
-            width: `${stubContainerSize.width}px`
-        }
+            width: `${stubContainerSize.width}px`,
+        },
     }),
     createElement,
     menus: [],
-    styles: stubStyles
+    styles: stubStyles,
 };
 
 export const stubAreasFaker = (partialDependencies: Partial<IAreasFakerDependencies> = {}) =>
     new AreasFaker({
         ...stubDependencies,
-        ...partialDependencies
+        ...partialDependencies,
     });

src/Display.ts

@@ -141,7 +141,7 @@ export class Display {
 
         return {
             height: availableHeight - Math.round(container.offsetTop),
-            width: Math.round(container.clientWidth)
+            width: Math.round(container.clientWidth),
         };
     }
 }

src/IUserWrappr.ts

@@ -13,6 +13,7 @@ import { IRelativeSizeSchema } from "./Sizing";
  * @param onComplete   Handler for load success.
  * @param onError   Handler for load failure.
  */
+// tslint:disable-next-line:ban-types
 export type IRequireJs = (modules: string[], onComplete: Function, onError: Function) => void;
 
 /**

src/Menus/InitializeMenus.test.ts

@@ -0,0 +1,40 @@
+import { expect } from "chai";
+import { stubWrappingViewDependencies } from "./fakes.test";
+import { initializeMenus } from "./InitializeMenus";
+
+describe("initializeMenus", () => {
+    it("replaces the inner area with a non-fake area", async () => {
+        // Arrange
+        const dependencies = stubWrappingViewDependencies();
+        const { classNames, container } = dependencies;
+
+        // Act
+        await initializeMenus(dependencies);
+
+        // Assert
+        expect(container.children[0].children[0].className).to.be.equal(classNames.menusInnerArea);
+    });
+
+    it("renders menu titles when given menu schemas", async () => {
+        // Arrange
+        const dependencies = stubWrappingViewDependencies({
+            menus: [
+                {
+                    options: [],
+                    title: "abc",
+                },
+                {
+                    options: [],
+                    title: "def",
+                },
+            ],
+        });
+        const { container } = dependencies;
+
+        // Act
+        await initializeMenus(dependencies);
+
+        // Assert
+        expect(container.textContent).to.be.equal("abcdef");
+    });
+});

src/Menus/InitializeMenus.tsx

@@ -45,7 +45,7 @@ export const initializeMenus: IInitializeMenusView = async (dependencies: IWrapp
         classNames: dependencies.classNames,
         containerSize: dependencies.containerSize,
         menus: dependencies.menus,
-        styles: dependencies.styles
+        styles: dependencies.styles,
     });
 
     const menusContainerQuery = `.${dependencies.classNames.menusOuterArea}`;

src/Menus/Menu.tsx

@@ -11,7 +11,7 @@ export const Menu = observer(({ children, store }: { children?: React.ReactNode;
         " ",
         store.classNames.menu,
         "-",
-        VisualState[store.visualState]
+        VisualState[store.visualState],
     ].join("");
 
     return (

src/Menus/MenuStore.test.ts

@@ -0,0 +1,56 @@
+import { expect } from "chai";
+
+import { stubMenuStore } from "./fakes.test";
+import { VisualState } from "./MenuStore";
+
+describe("MenuStore", () => {
+    describe("close", () => {
+        it("keeps the store closed when the store is closed", () => {
+            // Arrange
+            const { store } = stubMenuStore();
+
+            // Act
+            store.close();
+
+            // Assert
+            expect(store.visualState).to.be.equal(VisualState.Closed);
+        });
+
+        it("closes the store when the store is open", () => {
+            // Arrange
+            const { store } = stubMenuStore();
+            store.open();
+
+            // Act
+            store.close();
+
+            // Assert
+            expect(store.visualState).to.be.equal(VisualState.Closed);
+        });
+    });
+
+    describe("open", () => {
+        it("opens the store when the store is closed", () => {
+            // Arrange
+            const { store } = stubMenuStore();
+
+            // Act
+            store.open();
+
+            // Assert
+            expect(store.visualState).to.be.equal(VisualState.Open);
+        });
+
+        it("keeps the store open when the store is open", () => {
+            // Arrange
+            const { store } = stubMenuStore();
+            store.open();
+
+            // Act
+            store.open();
+
+            // Assert
+            expect(store.visualState).to.be.equal(VisualState.Open);
+        });
+    });
+});

src/Menus/MenuStore.ts

@@ -16,7 +16,7 @@ export enum VisualState {
     /**
      * The menu open.
      */
-    Open
+    Open,
 }
 
 /**
@@ -70,7 +70,7 @@ export class MenuStore {
             classNames: this.dependencies.classNames,
             onMouseEnter: this.open,
             styles: this.dependencies.styles,
-            title: this.dependencies.title
+            title: this.dependencies.title,
         });
     }
 

src/Menus/MenuTitleStore.ts

@@ -1,6 +1,11 @@
 import { IClassNames } from "../Bootstrapping/ClassNames";
 import { IStyles } from "../Bootstrapping/Styles";
 
+/**
+ * Handler for a title being hovered over.
+ */
+export type IOnMenuTitleMouseEnter = () => void;
+
 /**
  * Dependencies to initialize a new MenuTitleStore.
  */
@@ -13,7 +18,7 @@ export interface IMenuTitleStoreDependencies {
     /**
      * Handler for the title being hovered over, if any.
      */
-    onMouseEnter?: () => void;
+    onMouseEnter?: IOnMenuTitleMouseEnter;
 
     /**
      * Styles to use for display elements.

src/Menus/Menus.tsx

@@ -14,7 +14,7 @@ const renderMenuAndOptionsList = (stores: IMenuAndOptionsListStores) => (
 export const Menus = observer(({ store }: { store: MenusStore }) => {
     const style = {
         ...store.styles.menusInnerArea,
-        width: `${store.containerSize.width}px`
+        width: `${store.containerSize.width}px`,
     } as React.CSSProperties;
 
     return (