diff --git a/.babelrc b/.babelrc index 510caa0..7913b15 100644 --- a/.babelrc +++ b/.babelrc @@ -1,5 +1,5 @@ { - "presets": ["es2015"], + "presets": ["env"], "env": { "test": { "plugins": [ diff --git a/.eslintrc.test.yml b/.eslintrc.test.yml index 4bc9183..5d93486 100644 --- a/.eslintrc.test.yml +++ b/.eslintrc.test.yml @@ -3,7 +3,3 @@ extends: env: mocha: true - -globals: - expect: false - sinon: false diff --git a/.gitignore b/.gitignore index 8ee4343..9b5517c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,6 @@ /elm-stuff/ +/tests/elm-stuff/ /node_modules/ /dist/ /coverage/ +/npm-debug.log diff --git a/README.md b/README.md index af82e28..ac52e38 100644 --- a/README.md +++ b/README.md @@ -67,7 +67,7 @@ On success, the demo app is deployed to [elm-app-boilerplate GitHub Pages](http: ## Build Configuration Using Environment Variables -The default environment variables used by the build scripts are defined in the `.env` file. The defaults are always overridden by the variables defined in the environment. They are useful for abstracting away the differences between the development and production platforms. For example, the following command builds the application with a custom `BASE_PATH` suitable for deployment to GitHub Project Pages. +The default environment variables used by the build scripts are defined in the `.env` file. The defaults are always overridden by the variables defined in the environment. They are useful for abstracting away the differences between the development and production environments. For example, the following command builds the application with a custom `BASE_PATH` suitable for deployment to GitHub Project Pages. ``` BASE_PATH=/elm-app-boilerplate npm run build @@ -86,14 +86,14 @@ This project customizes the standard `npm version` script to also: - ensure that the dependencies are up to date - execute all tests -- update the version in `elm-package.json` +- update the version in `elm-package.json` and `tests/elm-package.json` - push the branch on which the version change was made - push the created tag ## Updating Dependencies -Dependeny check and update is handled by [ncu](https://github.com/tjunnone/npm-check-updates). A check runs automatically every time `npm version` is executed but can also be triggered explicitly. +Dependency check and update is handled by [ncu](https://github.com/tjunnone/npm-check-updates). A check runs automatically every time `npm version` is executed but can also be triggered explicitly. ``` npm run ncu # checks the dependencies in package.json @@ -133,22 +133,21 @@ The parameters to those commands must be specified after `--`, for example: `npm ### Elm - `elm-package.json` - describes the Elm application and its dependencies -- `elm/` - Elm source files -- `elm/Main.elm` - Elm application entry point -- `elm/Stylesheets.elm` - elm-css entry point, lists all the stylesheets which need to be processed -- `elm/TestRunner.elm` - the entry point for executing tests and bootstrapping the actual test runner -- `elm/App/` - the namespace for all application Elm modules -- `elm/App/Etc/` - contains configuration modules -- `elm/App/Etc/Tests.elm` - the main file loading and exposing all the test suites -- `elm/App/Etc/Config.elm` - the Elm app configuration -- `elm/App/Etc/Style.elm` - the configuration for stylesheets, including the color palette, device breakpoints, font sizes, etc -- `elm/App/Section/` - contains all sections. A section groups related pages and manages routing within its group -- `elm/App/Section//Route.elm` - contains route mappings and helpers for `` -- `elm/App/Page/` - contains all pages. Page are responsible for the main contents of their sections -- `elm/App/Widget/` - contains all reusable widgets -- `elm/App/**//Css.elm` - contains the CSS rules for `` defined using `elm-css` -- `elm/App/**//Style.elm` - contains style-related types and definitions for ``, which are shared between the application and the Elm CSS modules -- `elm/App/**//Test.elm` - contains tests for `` +- `src/` - Elm source files +- `src/Main.elm` - Elm application entry point +- `src/Stylesheets.elm` - elm-css entry point, lists all the stylesheets which need to be processed +- `src/App/` - the namespace for all application Elm modules +- `src/App/Etc/` - contains configuration modules +- `src/App/Etc/Config.elm` - the Elm app configuration +- `src/App/Etc/Style.elm` - the configuration for stylesheets, including the color palette, device breakpoints, font sizes, etc +- `src/App/Section/` - contains all sections. A section groups related pages and manages routing within its group +- `src/App/Section//Route.elm` - contains route mappings and helpers for `` +- `src/App/Page/` - contains all pages. Page are responsible for the main contents of their sections +- `src/App/Widget/` - contains all reusable widgets +- `src/App/**//Css.elm` - contains the CSS rules for `` defined using `elm-css` +- `src/App/**//Style.elm` - contains style-related types and definitions for ``, which are shared between the application and the Elm CSS modules +- `tests/elm-package.json` - defines dependencies for running tests +- `tests/App/**/Test.elm` - contains tests for `` ### JavaScript @@ -171,7 +170,7 @@ The parameters to those commands must be specified after `--`, for example: `npm Use a [BEM](http://getbem.com/)-like methodology for styling. -Because the CSS class names are generated from the Elm class names, it is not feeasible to follow the BEM class name format. So, here's an alternative: +Because the CSS class names are generated from the Elm class names, it is not feasible to follow the BEM class name format. So, here's an alternative: - Using the `elm-css` `namespace`'s, prefix the CSS class names with a letter "p", "s", "w" corresponding to the folder in which the component is located - "Page", "Section", "Widget" respectively. It allows to quickly find the Elm components based on the CSS class names during debugging. - Specify longer `namespace`s when you're creating specializations of other components. For example, the `Menu` component uses "w" prefix by default. The `MainMenu` component is a specialization of the `Menu` component, so it uses "wMain" prefix. When combined with the `Menu`'s `CssClass`'es, the generated CSS class names correspond to the `MainMenu` component name, that is, *block*-level class is `wMainMenu`. diff --git a/elm-package.json b/elm-package.json index c3e41e3..a11f7c3 100644 --- a/elm-package.json +++ b/elm-package.json @@ -4,23 +4,18 @@ "repository": "https://github.com/gkubisa/elm-app-boilerplate.git", "license": "MIT", "source-directories": [ - "elm", - "node_modules/elm-test/src" + "src" ], "exposed-modules": [], "dependencies": { "Fresheyeball/elm-tuple-extra": "3.0.0 <= v < 4.0.0", - "elm-community/elm-test": "3.1.0 <= v < 4.0.0", - "elm-community/json-extra": "2.1.0 <= v < 3.0.0", - "elm-lang/core": "5.0.0 <= v < 6.0.0", + "elm-lang/core": "5.1.1 <= v < 6.0.0", "elm-lang/html": "2.0.0 <= v < 3.0.0", - "elm-lang/http": "1.0.0 <= v < 2.0.0", - "elm-lang/navigation": "2.0.1 <= v < 3.0.0", + "elm-lang/navigation": "2.1.0 <= v < 3.0.0", "evancz/url-parser": "2.0.1 <= v < 3.0.0", - "mgold/elm-random-pcg": "4.0.2 <= v < 5.0.0", - "rtfeldman/elm-css": "8.1.0 <= v < 9.0.0", - "rtfeldman/elm-css-helpers": "2.0.1 <= v < 3.0.0", - "scottcorgan/elm-css-normalize": "1.1.7 <= v < 2.0.0" + "rtfeldman/elm-css": "11.2.0 <= v < 12.0.0", + "rtfeldman/elm-css-helpers": "2.1.0 <= v < 3.0.0", + "scottcorgan/elm-css-normalize": "1.1.9 <= v < 2.0.0" }, "elm-version": "0.18.0 <= v < 0.19.0" } diff --git a/elm/App/Widget/Menu/Test.elm b/elm/App/Widget/Menu/Test.elm deleted file mode 100644 index 6115490..0000000 --- a/elm/App/Widget/Menu/Test.elm +++ /dev/null @@ -1,10 +0,0 @@ -module App.Widget.Menu.Test exposing (testSuite) - -import Test exposing (Test, describe) - - -testSuite : Test -testSuite = - describe "App.Widget.Menu" - [-- TODO add some tests - ] diff --git a/js/main.js b/js/main.js index 8badce6..7e12382 100644 --- a/js/main.js +++ b/js/main.js @@ -1,5 +1,5 @@ import './polyfill/origin' -import '../elm/Stylesheets' -import Elm from '../elm/Main' +import '../src/Stylesheets' +import Elm from '../src/Main' Elm.Main.embed(document.getElementById('elm'), __CONFIG__) diff --git a/js/sample.test.js b/js/sample.test.js index a66ac8e..6a91494 100644 --- a/js/sample.test.js +++ b/js/sample.test.js @@ -1,24 +1,24 @@ import sample from '../js/sample' +import sinon from 'sinon' +import assert from 'assert' describe('sample', () => { - it('should pass the framework setup tests', () => { // `mocha` globals are recognized by eslint - 'apples'.should.not.equal('oranges') // `should` assertion style works - expect(2 + 2).to.equal(4) // the global "expect" is recognized by eslint - expect(true && false).to.be.false() // calling `false` enabled by `dirty-chai` - const spy = sinon.spy() // the global "sinon" is recognized by eslint + it('should work with sinon', () => { + const spy = sinon.spy() spy(5) - spy.should.be.calledOnce.calledWith(5) // `called*`, etc enabled by `chai-sinon` + assert.ok(spy.calledOnce) + assert.ok(spy.calledWith(5)) }) describe('sum', () => { it('should add 2 numbers', () => { - sample.sum(3, 5).should.equal(8) + assert.strictEqual(sample.sum(3, 5), 8) }) }) describe('product', () => { it('should multiply 2 numbers', () => { - sample.product(3, 5).should.equal(15) + assert.strictEqual(sample.product(3, 5), 15) }) }) }) diff --git a/karma.conf.js b/karma.conf.js index b0de33f..4a9ac86 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -15,7 +15,7 @@ module.exports = function (config) { // frameworks to use // available frameworks: https://npmjs.org/browse/keyword/karma-adapter - frameworks: ['mocha', 'chai-sinon', 'dirty-chai', 'chai'], + frameworks: ['mocha'], // list of files/patterns to load in the browser files: [ @@ -26,9 +26,6 @@ module.exports = function (config) { exclude: [], plugins: [ - require('karma-chai'), - require('karma-chai-sinon'), - require('karma-dirty-chai'), require('karma-coverage'), require('karma-phantomjs-launcher'), require('karma-mocha'), diff --git a/package.json b/package.json index b3bdfca..cbfc7f1 100644 --- a/package.json +++ b/package.json @@ -6,12 +6,14 @@ "start": "webpack-dev-server --hot --inline", "build": "webpack -p --bail", "test": "run-p 'test:*'", - "test:elm": "elm test --warn --compiler node_modules/.bin/elm-make elm/TestRunner.elm", + "pretest:elm": "cd tests && elm package install -y", + "test:elm": "elm test --warn", "test:js": "cross-env NODE_ENV=test karma start --single-run", "tdd": "run-p 'tdd:*'", - "tdd:elm": "nodemon --watch 'elm/' --ext elm --exec 'npm run test:elm'", + "pretdd:elm": "cd tests && elm package install -y", + "tdd:elm": "elm test --watch --warn", "tdd:js": "cross-env NODE_ENV=test karma start", - "clean": "rm -rf dist elm-stuff/build-artifacts", + "clean": "rm -rf dist elm-stuff/build-artifacts tests/elm-stuff/build-artifacts", "elm": "elm", "elm-repl": "elm repl", "elm-package": "elm package", @@ -20,9 +22,9 @@ "elm-test": "elm test", "ncu": "ncu", "preversion": "run-s 'ncu -- --error-level 2' test", - "version": "json -4 -I -f elm-package.json -e \"this.version='${npm_package_version}'\" && git add elm-package.json", + "version": "json -4 -I -f elm-package.json -e \"this.version='${npm_package_version}'\" && json -4 -I -f tests/elm-package.json -e \"this.version='${npm_package_version}'\" && git add elm-package.json tests/elm-package.json", "postversion": "git push && git push origin v${npm_package_version}", - "postinstall": "elm package install -y" + "postinstall": "elm package install -y && cd tests && elm package install -y" }, "author": "Greg Kubisa ", "license": "MIT", @@ -31,52 +33,46 @@ "node": ">= 6.0" }, "devDependencies": { - "autoprefixer": "^6.6.1", - "babel-core": "^6.21.0", - "babel-eslint": "^7.1.1", - "babel-loader": "^6.2.10", - "babel-plugin-istanbul": "^4.1.1", - "babel-preset-es2015": "^6.18.0", - "chai": "^3.5.0", - "cross-env": "^3.1.4", - "css-loader": "^0.27.3", - "dirty-chai": "^1.2.2", + "autoprefixer": "^7.2.3", + "babel-core": "^6.26.0", + "babel-eslint": "^8.1.2", + "babel-loader": "^7.1.2", + "babel-plugin-istanbul": "^4.1.5", + "babel-preset-env": "^1.6.1", + "cross-env": "^5.1.3", + "css-loader": "^0.28.7", "dotenv": "^4.0.0", "elm": "^0.18.0", - "elm-css": "^0.6.0", - "elm-css-webpack-loader": "^3.1.0", + "elm-css": "^0.6.1", + "elm-css-webpack-loader": "gkubisa/elm-css-webpack-loader#aaecfd7051831ace2bdc9c7ce3171f8977f755dd", "elm-hot-loader": "^0.5.4", - "elm-test": "^0.18.2", - "elm-webpack-loader": "^4.1.1", - "eslint": "^3.13.0", - "eslint-loader": "^1.6.1", - "extract-text-webpack-plugin": "^2.1.0", - "file-loader": "^0.10.1", - "html-webpack-plugin": "^2.26.0", - "json": "^9.0.4", - "karma": "^1.3.0", - "karma-chai": "^0.1.0", - "karma-chai-sinon": "^0.1.5", + "elm-test": "^0.18.12", + "elm-webpack-loader": "^4.4.0", + "eslint": "^4.14.0", + "eslint-loader": "^1.9.0", + "extract-text-webpack-plugin": "^3.0.2", + "file-loader": "^1.1.6", + "html-webpack-plugin": "^2.30.1", + "json": "^9.0.6", + "karma": "^2.0.0", "karma-coverage": "^1.1.1", - "karma-dirty-chai": "^1.0.2", "karma-mocha": "^1.3.0", - "karma-mocha-reporter": "^2.2.1", - "karma-phantomjs-launcher": "^1.0.2", + "karma-mocha-reporter": "^2.2.5", + "karma-phantomjs-launcher": "^1.0.4", "karma-sourcemap-loader": "^0.3.7", - "karma-webpack": "^2.0.3", - "mocha": "^3.2.0", - "node-elm-compiler": "^4.2.1", - "nodemon": "^1.11.0", + "karma-webpack": "^2.0.9", + "mocha": "^4.0.1", + "node-elm-compiler": "^4.4.1", + "nodemon": "^1.14.3", "noop-loader": "^1.0.0", - "npm-check-updates": "^2.8.9", - "npm-run-all": "^4.0.0", - "phantomjs-prebuilt": "^2.1.14", - "postcss-loader": "^1.2.1", - "sinon": "^2.1.0", - "sinon-chai": "^2.8.0", - "style-loader": "^0.16.1", - "url-loader": "^0.5.7", - "webpack": "^2.3.2", - "webpack-dev-server": "^2.4.2" + "npm-check-updates": "^2.14.0", + "npm-run-all": "^4.1.2", + "phantomjs-prebuilt": "^2.1.16", + "postcss-loader": "^2.0.9", + "sinon": "^4.1.3", + "style-loader": "^0.19.1", + "url-loader": "^0.6.2", + "webpack": "^3.10.0", + "webpack-dev-server": "^2.9.7" } } diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..2aaa10d --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = ({ file, options, env }) => ({ + plugins: { + 'autoprefixer': env == 'production' ? {} : false, + 'cssnano': env == 'production' ? {} : false + } +}) diff --git a/elm/App/Etc/Config.elm b/src/App/Etc/Config.elm similarity index 100% rename from elm/App/Etc/Config.elm rename to src/App/Etc/Config.elm diff --git a/elm/App/Etc/Style.elm b/src/App/Etc/Style.elm similarity index 100% rename from elm/App/Etc/Style.elm rename to src/App/Etc/Style.elm diff --git a/elm/App/Etc/Tests.elm b/src/App/Etc/Tests.elm similarity index 100% rename from elm/App/Etc/Tests.elm rename to src/App/Etc/Tests.elm diff --git a/elm/App/Page/Home.elm b/src/App/Page/Home.elm similarity index 100% rename from elm/App/Page/Home.elm rename to src/App/Page/Home.elm diff --git a/elm/App/Page/NotFound.elm b/src/App/Page/NotFound.elm similarity index 100% rename from elm/App/Page/NotFound.elm rename to src/App/Page/NotFound.elm diff --git a/elm/App/Section/Demo.elm b/src/App/Section/Demo.elm similarity index 100% rename from elm/App/Section/Demo.elm rename to src/App/Section/Demo.elm diff --git a/elm/App/Section/Demo/Route.elm b/src/App/Section/Demo/Route.elm similarity index 100% rename from elm/App/Section/Demo/Route.elm rename to src/App/Section/Demo/Route.elm diff --git a/elm/App/Section/Root.elm b/src/App/Section/Root.elm similarity index 100% rename from elm/App/Section/Root.elm rename to src/App/Section/Root.elm diff --git a/elm/App/Section/Root/Css.elm b/src/App/Section/Root/Css.elm similarity index 100% rename from elm/App/Section/Root/Css.elm rename to src/App/Section/Root/Css.elm diff --git a/elm/App/Section/Root/Route.elm b/src/App/Section/Root/Route.elm similarity index 100% rename from elm/App/Section/Root/Route.elm rename to src/App/Section/Root/Route.elm diff --git a/elm/App/Section/Root/Route/Test.elm b/src/App/Section/Root/Route/Test.elm similarity index 100% rename from elm/App/Section/Root/Route/Test.elm rename to src/App/Section/Root/Route/Test.elm diff --git a/elm/App/Section/Root/Style.elm b/src/App/Section/Root/Style.elm similarity index 100% rename from elm/App/Section/Root/Style.elm rename to src/App/Section/Root/Style.elm diff --git a/elm/App/Widget/MainMenu.elm b/src/App/Widget/MainMenu.elm similarity index 100% rename from elm/App/Widget/MainMenu.elm rename to src/App/Widget/MainMenu.elm diff --git a/elm/App/Widget/MainMenu/Css.elm b/src/App/Widget/MainMenu/Css.elm similarity index 100% rename from elm/App/Widget/MainMenu/Css.elm rename to src/App/Widget/MainMenu/Css.elm diff --git a/elm/App/Widget/MainMenu/Style.elm b/src/App/Widget/MainMenu/Style.elm similarity index 100% rename from elm/App/Widget/MainMenu/Style.elm rename to src/App/Widget/MainMenu/Style.elm diff --git a/elm/App/Widget/Menu.elm b/src/App/Widget/Menu.elm similarity index 100% rename from elm/App/Widget/Menu.elm rename to src/App/Widget/Menu.elm diff --git a/elm/App/Widget/Menu/Style.elm b/src/App/Widget/Menu/Style.elm similarity index 100% rename from elm/App/Widget/Menu/Style.elm rename to src/App/Widget/Menu/Style.elm diff --git a/elm/Main.elm b/src/Main.elm similarity index 100% rename from elm/Main.elm rename to src/Main.elm diff --git a/elm/Stylesheets.elm b/src/Stylesheets.elm similarity index 100% rename from elm/Stylesheets.elm rename to src/Stylesheets.elm diff --git a/elm/TestRunner.elm b/src/TestRunner.elm similarity index 100% rename from elm/TestRunner.elm rename to src/TestRunner.elm diff --git a/tests/App/Widget/MenuTest.elm b/tests/App/Widget/MenuTest.elm new file mode 100644 index 0000000..aaff70d --- /dev/null +++ b/tests/App/Widget/MenuTest.elm @@ -0,0 +1,15 @@ +module App.Widget.MenuTest exposing (..) + +import Test exposing (Test, describe, test) +import Expect + + +suite : Test +suite = + describe "App.Widget.Menu" + [ test "placeholder" <| + \_ -> + Expect.equal 2 2 + + -- TODO add some real tests + ] diff --git a/tests/elm-package.json b/tests/elm-package.json new file mode 100644 index 0000000..f500c62 --- /dev/null +++ b/tests/elm-package.json @@ -0,0 +1,24 @@ +{ + "version": "0.6.0", + "summary": "Elm application boilerplate - test suites", + "repository": "https://github.com/gkubisa/elm-app-boilerplate.git", + "license": "MIT", + "source-directories": [ + "../src", + "." + ], + "exposed-modules": [], + "dependencies": { + "Fresheyeball/elm-tuple-extra": "3.0.0 <= v < 4.0.0", + "eeue56/elm-html-test": "5.1.2 <= v < 6.0.0", + "elm-community/elm-test": "4.0.0 <= v < 5.0.0", + "elm-lang/core": "5.1.1 <= v < 6.0.0", + "elm-lang/html": "2.0.0 <= v < 3.0.0", + "elm-lang/navigation": "2.1.0 <= v < 3.0.0", + "evancz/url-parser": "2.0.1 <= v < 3.0.0", + "rtfeldman/elm-css": "11.2.0 <= v < 12.0.0", + "rtfeldman/elm-css-helpers": "2.1.0 <= v < 3.0.0", + "scottcorgan/elm-css-normalize": "1.1.9 <= v < 2.0.0" + }, + "elm-version": "0.18.0 <= v < 0.19.0" +}