From 6a3152cb33ccddadb049b517949e29822dd28266 Mon Sep 17 00:00:00 2001 From: William Killerud Date: Fri, 26 Jan 2018 14:56:45 +0100 Subject: [PATCH] chore(ffe-system-message-react): Import component BREAKING CHANGE: the `files` property has been changed to only include the `lib/` folder. If you imported anything from anywhere else you need to update your imports to go through the official channels. With this ffe-system-message-react lives in the monorepo. All new changes must be done there. --- commitlint.config.js | 1 + packages/ffe-system-message-react/.babelrc | 6 - .../ffe-system-message-react/.eslintrc.json | 3 - packages/ffe-system-message-react/.gitignore | 18 --- packages/ffe-system-message-react/.npmrc | 1 - .../ffe-system-message-react/CHANGELOG.md | 1 - packages/ffe-system-message-react/README.md | 14 --- packages/ffe-system-message-react/USAGE.md | 3 + packages/ffe-system-message-react/build.sh | 7 -- .../ffe-system-message-react/dev/dev-app.js | 38 ------ .../ffe-system-message-react/dev/styles.less | 3 - .../example/create-example.js | 3 - .../example/example.js | 74 ------------ packages/ffe-system-message-react/flow.sh | 42 ------- .../ffe-system-message-react/package.json | 114 ++++++------------ .../src/SystemErrorMessage.md | 5 + .../src/SystemInfoMessage.md | 5 + .../src/SystemMessage.js | 20 +-- .../src/SystemMessage.md | 32 ----- .../src/SystemMessage.spec.js | 107 ++++++++++++++++ .../src/SystemNewsMessage.md | 5 + .../src/SystemSuccessMessage.md | 5 + .../src/test/.eslintrc.json | 8 -- .../src/test/SystemMessage.spec.js | 110 ----------------- .../src/test/setup.js | 14 --- .../ffe-system-message-react/test-setup.js | 4 + .../webpack.config.js | 9 -- styleguide.config.js | 6 + 28 files changed, 189 insertions(+), 469 deletions(-) delete mode 100644 packages/ffe-system-message-react/.babelrc delete mode 100644 packages/ffe-system-message-react/.eslintrc.json create mode 100644 packages/ffe-system-message-react/USAGE.md delete mode 100755 packages/ffe-system-message-react/build.sh delete mode 100644 packages/ffe-system-message-react/dev/dev-app.js delete mode 100644 packages/ffe-system-message-react/dev/styles.less delete mode 100644 packages/ffe-system-message-react/example/create-example.js delete mode 100644 packages/ffe-system-message-react/example/example.js delete mode 100755 packages/ffe-system-message-react/flow.sh create mode 100644 packages/ffe-system-message-react/src/SystemErrorMessage.md create mode 100644 packages/ffe-system-message-react/src/SystemInfoMessage.md delete mode 100644 packages/ffe-system-message-react/src/SystemMessage.md create mode 100644 packages/ffe-system-message-react/src/SystemMessage.spec.js create mode 100644 packages/ffe-system-message-react/src/SystemNewsMessage.md create mode 100644 packages/ffe-system-message-react/src/SystemSuccessMessage.md delete mode 100644 packages/ffe-system-message-react/src/test/.eslintrc.json delete mode 100644 packages/ffe-system-message-react/src/test/SystemMessage.spec.js delete mode 100644 packages/ffe-system-message-react/src/test/setup.js create mode 100644 packages/ffe-system-message-react/test-setup.js delete mode 100644 packages/ffe-system-message-react/webpack.config.js diff --git a/commitlint.config.js b/commitlint.config.js index dadc7fa73d..e4318d6afd 100644 --- a/commitlint.config.js +++ b/commitlint.config.js @@ -46,6 +46,7 @@ module.exports = { 'ffe-spinner', 'ffe-spinner-react', 'ffe-system-message', + 'ffe-system-message-react', 'ffe-tables', 'ffe-tables-react', ], diff --git a/packages/ffe-system-message-react/.babelrc b/packages/ffe-system-message-react/.babelrc deleted file mode 100644 index fcb06dcdc1..0000000000 --- a/packages/ffe-system-message-react/.babelrc +++ /dev/null @@ -1,6 +0,0 @@ -{ - "presets": ["env", "react"], - "plugins": [ - "transform-object-rest-spread" - ] -} diff --git a/packages/ffe-system-message-react/.eslintrc.json b/packages/ffe-system-message-react/.eslintrc.json deleted file mode 100644 index 3a0aa7460d..0000000000 --- a/packages/ffe-system-message-react/.eslintrc.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "extends": "ffe" -} diff --git a/packages/ffe-system-message-react/.gitignore b/packages/ffe-system-message-react/.gitignore index b6e652f97d..c3af857904 100644 --- a/packages/ffe-system-message-react/.gitignore +++ b/packages/ffe-system-message-react/.gitignore @@ -1,19 +1 @@ -#Editors -*~ -*.iml - -#FFE fonts -dev/ffe/* - -#Node -node_modules -npm-debug.log* - -#We're not using this but the precommit-hook keeps adding them -.jshintrc -.jshintignore - -#Build lib/ -example.html -.idea/ diff --git a/packages/ffe-system-message-react/.npmrc b/packages/ffe-system-message-react/.npmrc index 8594fc7c8f..43c97e719a 100644 --- a/packages/ffe-system-message-react/.npmrc +++ b/packages/ffe-system-message-react/.npmrc @@ -1,2 +1 @@ -registry=***REMOVED*** package-lock=false diff --git a/packages/ffe-system-message-react/CHANGELOG.md b/packages/ffe-system-message-react/CHANGELOG.md index 3f6e68f262..0d1322f617 100644 --- a/packages/ffe-system-message-react/CHANGELOG.md +++ b/packages/ffe-system-message-react/CHANGELOG.md @@ -1,4 +1,3 @@ -# CHANGELOG ## Version 2.0.0 * Upgraded to work with ffe-icons-react 4.x. diff --git a/packages/ffe-system-message-react/README.md b/packages/ffe-system-message-react/README.md index 18296fe8ec..34153c8962 100644 --- a/packages/ffe-system-message-react/README.md +++ b/packages/ffe-system-message-react/README.md @@ -11,17 +11,3 @@ $ npm install --save ffe-system-message-react Like all React packages in FFE, this package expects the package `ffe-system-message` to be imported in your project's main css- or less-file. Please see the [docs for usage and API information](src/SystemMessage.md). - -## Examples - -The current version of the package can be seen in the SB1 Design Manual at [***REMOVED***](***REMOVED***). - -## Development - -To run a standalone (and extremely simple) application for testing changes to either this component or its sibling CSS package. Clone this repo and run -``` -$ npm install && npm run dev -``` -This should spin up a server on [localhost:3000](http://localhost:3000). - -For testing changes to the CSS package, first run `npm link` in the root of the cloned [ffe-system-message](***REMOVED***) pacakge and then run `npm link ffe-system-message` in the root of this package. Changes in the CSS file(s) should reflect immediately in the app running on port 3000. diff --git a/packages/ffe-system-message-react/USAGE.md b/packages/ffe-system-message-react/USAGE.md new file mode 100644 index 0000000000..31088b3fe3 --- /dev/null +++ b/packages/ffe-system-message-react/USAGE.md @@ -0,0 +1,3 @@ +Denne typen meldinger skal kun benyttes til kritiske systemmeldinger som skal eksponeres til brukeren. Kan lukkes. + +Det finnes fire typer systemmeldinger: diff --git a/packages/ffe-system-message-react/build.sh b/packages/ffe-system-message-react/build.sh deleted file mode 100755 index e553c2b9a3..0000000000 --- a/packages/ffe-system-message-react/build.sh +++ /dev/null @@ -1,7 +0,0 @@ -#!/bin/bash -e - -npm install -npm test -npm run lint -npm run build - diff --git a/packages/ffe-system-message-react/dev/dev-app.js b/packages/ffe-system-message-react/dev/dev-app.js deleted file mode 100644 index c620b9f890..0000000000 --- a/packages/ffe-system-message-react/dev/dev-app.js +++ /dev/null @@ -1,38 +0,0 @@ -import 'babel-polyfill'; -import './styles.less'; - -import React from 'react'; -import { render } from 'react-dom'; - -import { - SystemErrorMessage, - SystemInfoMessage, - SystemNewsMessage, - SystemSuccessMessage, -} from '../src'; - -render( -
-
- - Vi opplever for tiden problemer med nettbank og kortbetaling. Vi gir en lyd så snart dette er løst. - -
-
- - Her kan det stå en nyhet eller informasjon som ikke er kritisk. - -
-
- - Vekommen til betaversjonen av nye Sparebank1.no - -
-
- - En gladnyhet. Nå er nettbanken oppe og går igjen! - -
-
, - document.getElementById('root') -); diff --git a/packages/ffe-system-message-react/dev/styles.less b/packages/ffe-system-message-react/dev/styles.less deleted file mode 100644 index 44a8afec53..0000000000 --- a/packages/ffe-system-message-react/dev/styles.less +++ /dev/null @@ -1,3 +0,0 @@ -@import "../node_modules/ffe-core/less/ffe"; -@import '../node_modules/ffe-system-message/less/ffe-system-message.less'; -@base-url: "/ffe"; diff --git a/packages/ffe-system-message-react/example/create-example.js b/packages/ffe-system-message-react/example/create-example.js deleted file mode 100644 index a6c556da04..0000000000 --- a/packages/ffe-system-message-react/example/create-example.js +++ /dev/null @@ -1,3 +0,0 @@ -import Example from './example'; - -console.log(Example); diff --git a/packages/ffe-system-message-react/example/example.js b/packages/ffe-system-message-react/example/example.js deleted file mode 100644 index bda44bb3d6..0000000000 --- a/packages/ffe-system-message-react/example/example.js +++ /dev/null @@ -1,74 +0,0 @@ -import React from 'react'; -import { renderToStaticMarkup } from 'react-dom/server'; - -import { - SystemErrorMessage, - SystemInfoMessage, - SystemNewsMessage, - SystemSuccessMessage, -} from '../lib'; - -const example = ( -
-
-

System Message

-
I PRODUKSJON
-

- HENTET FRA STASH -

-

Denne typen meldinger skal kun benyttes til kritiske systemmeldinger som skal eksponeres til brukeren. Kan lukkes om brukeren klikker på "x".

-
- -

Eksempler

- -
-

Feil

- - Feilmelding :( - -
- -
-

Informasjon

- - Her kan det stå en nyhet eller informasjon som ikke er kritisk. - -
- -
-

Nyheter

- - Velkommen til betaversjonen av nye Sparebank1.no. En egen farge for nyheter som dette. - -
- -
-

Success

- - Gladmelding :) - -
- -
- - -
- 
-                    
-                        {
-                            renderToStaticMarkup(
-                                
-                                    Send innholdet her. Alt pakkes i et <p> element så unngå bruk av
-                                    feks <div>, <p> og <ul>.
-                                
-                            ).replace(/
-
-
-
- -
-); - -export default renderToStaticMarkup(example); diff --git a/packages/ffe-system-message-react/flow.sh b/packages/ffe-system-message-react/flow.sh deleted file mode 100755 index 8085187d6a..0000000000 --- a/packages/ffe-system-message-react/flow.sh +++ /dev/null @@ -1,42 +0,0 @@ -#!/bin/bash - -# Makes functions inherit trap ERR -set -E - - -trap 'executionFailed ${LINENO}' ERR - -function main() { - ./build.sh - - if should_publish; then - npm run has-published -s || npm publish - bob ci job build --jobname ffe-design-system_build_deploy - fi -} - -function should_publish() { - [[ $GIT_BRANCH =~ ^(origin/)?master$ ]] -} - -# Fail the build if someone tries to send it parameters since script doesn't handle params at the moment. -if [ $# -ne 0 ] ; then - echo "Failed the build. flow.sh does not support input parameters. Input parameters were '$@'" - exit 1; -fi - -function executionFailed() { - # Called when some command fail execution - local self=$(basename "$0") - local parent_lineno="$1" - local message="$2" - local resultCode="${3:-1}" - if [[ -n "$message" ]]; then - echo "${self}: Error on or near line ${parent_lineno}: ${message}; exiting with status ${resultCode}" - else - echo "${self}: Error on or near line ${parent_lineno}; exiting with status ${resultCode}" - fi - exit "${resultCode}" -} - -main diff --git a/packages/ffe-system-message-react/package.json b/packages/ffe-system-message-react/package.json index d0338c7908..3bef2a7d52 100644 --- a/packages/ffe-system-message-react/package.json +++ b/packages/ffe-system-message-react/package.json @@ -1,78 +1,40 @@ { - "name": "ffe-system-message-react", - "version": "2.0.0", - "description": "SpareBank 1 System Message komponent", - "main": "lib/index.js", - "scripts": { - "build": "babel -d lib/. --ignore=src/test/ src/. && npm run example", - "dev": "npm run ffe:fonts && hjs-dev-server", - "example": "babel-node example/create-example.js > example.html", - "ffe:fonts": "mkdirp dev/ffe/fonts && cp node_modules/ffe-core/fonts/* dev/ffe/fonts", - "lint": "eslint src/", - "lint:fix": "eslint --fix src/", - "start": "npm run dev", - "test": "cross-env NODE_ENV=test mocha -G --compilers js:babel-core/register --require src/test/setup.js --recursive src/test", - "tdd": "npm test -- --watch", - "validate": "npm ls", - "postpublish": "git tag ${npm_package_version} && git push --tags", - "has-published": "npm show . versions -s | grep -q ${npm_package_version}" - }, - "repository": { - "type": "git", - "url": "***REMOVED***" - }, - "author": "SpareBank 1", - "pre-commit": [ - "lint", - "test" - ], - "dependencies": { - "prop-types": "*" - }, - "peerDependencies": { - "ffe-icons-react": "4.x", - "ffe-system-message": "1.x || 2.x" - }, - "devDependencies": { - "babel-cli": "^6.10.1", - "babel-core": "^6.10.4", - "babel-loader": "^6.4.1", - "babel-plugin-transform-object-rest-spread": "^6.26.0", - "babel-polyfill": "^6.9.1", - "babel-preset-env": "^1.6.1", - "babel-preset-react": "^6.11.1", - "cross-env": "^1.0.8", - "css-loader": "^0.28.9", - "enzyme": "^3.3.0", - "enzyme-adapter-react-16": "^1.1.1", - "eslint": "^4.16.0", - "eslint-config-ffe": "^7.0.1", - "eslint-plugin-import": "^2.2.0", - "eslint-plugin-jsx-a11y": "^6.0.3", - "eslint-plugin-react": "^7.5.1", - "expect.js": "^0.3.1", - "ffe-core": "^10.3.0", - "ffe-icons-react": "^4.0.5", - "ffe-system-message": "^2.0.0", - "hjs-webpack": "^9.2.0", - "jsdom": "^11.6.0", - "less": "^2.7.1", - "less-loader": "^2.2.3", - "mkdirp": "^0.5.1", - "mocha": "^5.0.0", - "postcss-loader": "^0.9.1", - "precommit-hook": "^3.0.0", - "react": "^16.2.0", - "react-dom": "^16.2.0", - "sinon": "^4.0.1", - "style-loader": "^0.19.1" - }, - "publishConfig": { - "registry": "***REMOVED***" - }, - "files": [ - "lib", - "example.html", - "*.js" - ] + "name": "ffe-system-message-react", + "version": "2.0.0", + "description": "SpareBank 1 System Message komponent", + "main": "lib/index.js", + "files": ["lib"], + "repository": { + "type": "git", + "url": + "***REMOVED***" + }, + "author": "SpareBank 1", + "license": "UNLICENSED", + "scripts": { + "build": "babel -d lib/. --ignore=*.spec.js src/.", + "lint": "eslint src/.", + "test:nsp": "nsp check", + "test:spec": "jest", + "test": "npm run test:spec && npm run test:nsp" + }, + "dependencies": { + "prop-types": "*" + }, + "peerDependencies": { + "ffe-icons-react": "4.x", + "ffe-system-message": "1.x || 2.x" + }, + "devDependencies": { + "enzyme": "^3.3.0", + "enzyme-adapter-react-16": "^1.1.1", + "ffe-icons-react": "^4.0.5", + "jest": "^22.1.4", + "nsp": "^2.2.0", + "react": "^16.2.0", + "react-dom": "^16.2.0" + }, + "jest": { + "setupTestFrameworkScriptFile": "./test-setup.js" + } } diff --git a/packages/ffe-system-message-react/src/SystemErrorMessage.md b/packages/ffe-system-message-react/src/SystemErrorMessage.md new file mode 100644 index 0000000000..7a5aa50406 --- /dev/null +++ b/packages/ffe-system-message-react/src/SystemErrorMessage.md @@ -0,0 +1,5 @@ +```js + + Noen av systemene våre er dessverre utilgjengelige akkurat nå. + +``` diff --git a/packages/ffe-system-message-react/src/SystemInfoMessage.md b/packages/ffe-system-message-react/src/SystemInfoMessage.md new file mode 100644 index 0000000000..77b3a9b644 --- /dev/null +++ b/packages/ffe-system-message-react/src/SystemInfoMessage.md @@ -0,0 +1,5 @@ +```js + + Mobilbanken vil være utilgjengelig førstkommende fredag kl 19-20. + +``` diff --git a/packages/ffe-system-message-react/src/SystemMessage.js b/packages/ffe-system-message-react/src/SystemMessage.js index d1697cde0b..ca7e520281 100644 --- a/packages/ffe-system-message-react/src/SystemMessage.js +++ b/packages/ffe-system-message-react/src/SystemMessage.js @@ -3,7 +3,7 @@ import { func, node, number, object, oneOf } from 'prop-types'; import KryssIkon from 'ffe-icons-react/lib/kryss-ikon'; -/** +/* * Internal base component for creating system messages. * Should not be used directly! Instead, use one of the * proxy components exported from the public API @@ -39,8 +39,13 @@ export default class SystemMessage extends Component { return (
{ this._self = self; }} - style={{ ...style, transition: `height ${animationLengthMs / 1000}s` }} + ref={self => { + this._self = self; + }} + style={{ + ...style, + transition: `height ${animationLengthMs / 1000}s`, + }} >
-
- {icon} -
-

- {children} -

+
{icon}
+

{children}

); } - } SystemMessage.propTypes = { diff --git a/packages/ffe-system-message-react/src/SystemMessage.md b/packages/ffe-system-message-react/src/SystemMessage.md deleted file mode 100644 index 2ec4a7aa6a..0000000000 --- a/packages/ffe-system-message-react/src/SystemMessage.md +++ /dev/null @@ -1,32 +0,0 @@ -Denne typen meldinger skal kun benyttes til kritiske systemmeldinger som skal eksponeres til brukeren. Kan lukkes. - -Det finnes fire typer systemmeldinger: - -```js -const SystemErrorMessage = require('./SystemErrorMessage'); - - Noen av systemene våre er dessverre utilgjengelige akkurat nå. - -``` - -```js -const SystemInfoMessage = require('./SystemInfoMessage'); - - Mobilbanken vil være utilgjengelig førstkommende fredag kl 19-20. - -``` - -```js -const SystemNewsMessage = require('./SystemNewsMessage'); - - Velkommen til ny betaversjon av SpareBank 1! - -``` - -```js -const SystemSuccessMessage = require('./SystemSuccessMessage'); - - Alle systemene våre funker! - -``` - diff --git a/packages/ffe-system-message-react/src/SystemMessage.spec.js b/packages/ffe-system-message-react/src/SystemMessage.spec.js new file mode 100644 index 0000000000..c2a849f02e --- /dev/null +++ b/packages/ffe-system-message-react/src/SystemMessage.spec.js @@ -0,0 +1,107 @@ +/*eslint-env jest*/ +import React from 'react'; +import { shallow, mount } from 'enzyme'; +import sinon from 'sinon'; + +import SystemMessage from './SystemMessage'; +import SystemErrorMessage from './SystemErrorMessage'; +import SystemInfoMessage from './SystemInfoMessage'; +import SystemNewsMessage from './SystemNewsMessage'; +import SystemSuccessMessage from './SystemSuccessMessage'; + +const defaultProps = { + children: Message, +}; + +const getMountedWrapper = props => + mount(); +const getShallowWrapper = props => + shallow(); + +describe('', () => { + it('renders with provided body', () => { + const wrapper = getMountedWrapper({ + children: Blå sjiraff, + }); + const text = wrapper.find('.ffe-system-message__content'); + expect(text.exists()).toBe(true); + expect(text.text()).toBe('Blå sjiraff'); + }); + + it('closes itself after a click on the close container', () => { + const clock = sinon.useFakeTimers(); + const wrapper = getMountedWrapper(); + wrapper.find('.ffe-system-message__close').simulate('click'); + clock.tick(200); + const component = wrapper.find('.ffe-system-message-wrapper'); + expect(component.first().instance().style.height).toBe('0px'); + clock.restore(); + }); + + it('should accept style prop to apply styles to outermost container', () => { + const wrapper = getShallowWrapper({ + style: { marginTop: '40px' }, + }); + expect(wrapper.props().style.marginTop).toBe('40px'); + }); + + it('should execute onClose prop when close button is clicked', () => { + const clock = sinon.useFakeTimers(); + const onClose = sinon.spy(); + const wrapper = getMountedWrapper({ + onClose, + }); + + const component = wrapper.find('.ffe-system-message'); + expect(component.exists()).toBe(true); + wrapper.find('.ffe-system-message__close').simulate('click'); + + clock.tick(100); + expect(onClose.calledOnce).toBe(false); + clock.tick(300); + expect(onClose.calledOnce).toBe(true); + clock.restore(); + }); + + describe('for different types of message', () => { + it('', () => { + const wrapper = mount( + Infomelding, + ); + const message = wrapper.find('.ffe-system-message-wrapper'); + expect(message.hasClass('ffe-system-message-wrapper--info')).toBe( + true, + ); + }); + + it('', () => { + const wrapper = mount( + Feilmelding, + ); + const message = wrapper.find('.ffe-system-message-wrapper'); + expect(message.hasClass('ffe-system-message-wrapper--error')).toBe( + true, + ); + }); + + it('', () => { + const wrapper = mount( + Gladmelding, + ); + const message = wrapper.find('.ffe-system-message-wrapper'); + expect( + message.hasClass('ffe-system-message-wrapper--success'), + ).toBe(true); + }); + + it('', () => { + const wrapper = mount( + Nyhetsmelding, + ); + const message = wrapper.find('.ffe-system-message-wrapper'); + expect(message.hasClass('ffe-system-message-wrapper--news')).toBe( + true, + ); + }); + }); +}); diff --git a/packages/ffe-system-message-react/src/SystemNewsMessage.md b/packages/ffe-system-message-react/src/SystemNewsMessage.md new file mode 100644 index 0000000000..fe90aad0ef --- /dev/null +++ b/packages/ffe-system-message-react/src/SystemNewsMessage.md @@ -0,0 +1,5 @@ +```js + + Velkommen til ny betaversjon av SpareBank 1! + +``` diff --git a/packages/ffe-system-message-react/src/SystemSuccessMessage.md b/packages/ffe-system-message-react/src/SystemSuccessMessage.md new file mode 100644 index 0000000000..4db4709fdf --- /dev/null +++ b/packages/ffe-system-message-react/src/SystemSuccessMessage.md @@ -0,0 +1,5 @@ +```js + + Alle systemene våre funker! + +``` diff --git a/packages/ffe-system-message-react/src/test/.eslintrc.json b/packages/ffe-system-message-react/src/test/.eslintrc.json deleted file mode 100644 index ceb3b8ec3e..0000000000 --- a/packages/ffe-system-message-react/src/test/.eslintrc.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "env": { - "mocha": true - }, - "globals": { - "expect": true - } -} diff --git a/packages/ffe-system-message-react/src/test/SystemMessage.spec.js b/packages/ffe-system-message-react/src/test/SystemMessage.spec.js deleted file mode 100644 index 996dcfb36e..0000000000 --- a/packages/ffe-system-message-react/src/test/SystemMessage.spec.js +++ /dev/null @@ -1,110 +0,0 @@ -import React from 'react'; -import Enzyme, { shallow, mount } from 'enzyme'; -import Adapter from 'enzyme-adapter-react-16'; -import { - SystemErrorMessage, - SystemInfoMessage, - SystemSuccessMessage, - SystemNewsMessage, -} from '../'; -import SystemMessage from '../SystemMessage'; -import sinon from 'sinon'; - -Enzyme.configure({adapter: new Adapter()}); - -describe('', () => { - let wrapper; - - beforeEach(() => { - wrapper = mount( - - Blå sjiraff - - ); - }); - - it('renders with provided body', () => { - const text = wrapper.find('.ffe-system-message__content'); - expect(text.length).to.be(1); - expect(text.text()).to.be('Blå sjiraff'); - }); - - it('closes itself after a click on the close container', done => { - wrapper.find('.ffe-system-message__close').simulate('click'); - setTimeout(() => { - const component = wrapper.find('.ffe-system-message-wrapper'); - expect(component.first().instance().style.height).to.be('0px'); - done(); - }, 100); - }); - - it('should accept style prop to apply styles to outermost container', () => { - const el = shallow(); - expect(el.props().style.marginTop).to.be('40px'); - }); - - it('should execute onClose prop when close button is clicked', done => { - const onClickSpy = sinon.spy(); - wrapper = mount( - - Melding - - ); - const component = wrapper.find('.ffe-system-message'); - expect(component.length).to.be(1); - wrapper.find('.ffe-system-message__close').simulate('click'); - - setTimeout(() => { - expect(onClickSpy.calledOnce).to.be(false); - }, 100); - - setTimeout(() => { - expect(onClickSpy.calledOnce).to.be(true); - done(); - }, 300); - }); -}); - -describe('for different types of message', () => { - let wrapper; - - it('creates info-message', () => { - wrapper = mount( - - Infomelding - - ); - const message = wrapper.find('.ffe-system-message-wrapper'); - expect(message.hasClass('ffe-system-message-wrapper--info')).to.be(true); - }); - - it('creates error-message', () => { - wrapper = mount( - - Feilmelding - - ); - const message = wrapper.find('.ffe-system-message-wrapper'); - expect(message.hasClass('ffe-system-message-wrapper--error')).to.be(true); - }); - - it('create success-message', () => { - wrapper = mount( - - Gladmelding - - ); - const message = wrapper.find('.ffe-system-message-wrapper'); - expect(message.hasClass('ffe-system-message-wrapper--success')).to.be(true); - }); - - it('create news-message', () => { - wrapper = mount( - - Nyhetsmelding - - ); - const message = wrapper.find('.ffe-system-message-wrapper'); - expect(message.hasClass('ffe-system-message-wrapper--news')).to.be(true); - }); -}); diff --git a/packages/ffe-system-message-react/src/test/setup.js b/packages/ffe-system-message-react/src/test/setup.js deleted file mode 100644 index c933a7f5ce..0000000000 --- a/packages/ffe-system-message-react/src/test/setup.js +++ /dev/null @@ -1,14 +0,0 @@ -import jsdom from 'jsdom'; -import 'babel-polyfill'; - -const {JSDOM} = jsdom; -const {document} = (new JSDOM('')).window; -global.document = document; -global.window = document.defaultView; -Object.keys(window).forEach(key => { - if (!(key in global)) { - global[key] = window[key]; - } -}); -global.navigator = global.window.navigator; -global.expect = require('expect.js'); diff --git a/packages/ffe-system-message-react/test-setup.js b/packages/ffe-system-message-react/test-setup.js new file mode 100644 index 0000000000..82edfc9e5a --- /dev/null +++ b/packages/ffe-system-message-react/test-setup.js @@ -0,0 +1,4 @@ +import { configure } from 'enzyme'; +import Adapter from 'enzyme-adapter-react-16'; + +configure({ adapter: new Adapter() }); diff --git a/packages/ffe-system-message-react/webpack.config.js b/packages/ffe-system-message-react/webpack.config.js deleted file mode 100644 index db2e3353e4..0000000000 --- a/packages/ffe-system-message-react/webpack.config.js +++ /dev/null @@ -1,9 +0,0 @@ -var getConfig = require('hjs-webpack'); - -module.exports = getConfig({ - - in: 'dev/dev-app.js', - - out: 'dev' - -}); diff --git a/styleguide.config.js b/styleguide.config.js index c8447ff134..5222bb5d68 100644 --- a/styleguide.config.js +++ b/styleguide.config.js @@ -192,6 +192,12 @@ module.exports = { components: 'packages/ffe-context-message-react/src/[A-Z]+([A-Za-z]).js', }, + { + name: 'Systemmeldinger', + content: 'packages/ffe-system-message-react/USAGE.md', + components: + 'packages/ffe-system-message-react/src/System{Error,Info,News,Success}Message.js', + }, { name: 'Dropdowns', components: () => [