From 7499e31d48e5b4a143bfb5dd624d3adf0f6bc3d8 Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Thu, 7 Dec 2017 14:46:02 +0000 Subject: [PATCH 01/21] Port collapse component --- src/ts/components/collapse.tsx | 146 +++++++++++++++++++++++++++++++++ 1 file changed, 146 insertions(+) create mode 100644 src/ts/components/collapse.tsx diff --git a/src/ts/components/collapse.tsx b/src/ts/components/collapse.tsx new file mode 100644 index 000000000..aa0718756 --- /dev/null +++ b/src/ts/components/collapse.tsx @@ -0,0 +1,146 @@ +import * as classNames from 'classnames'; +import * as React from 'react'; + +const ENOUGH_TIME_FOR_RERENDER = 50; +const DEFAULT_HEIGHT = 0; +const DEFAULT_DURATION = 200; +const DEFAULT_FADE_HEIGHT = 50; +const DEFAULT_FADE_COLOR = '#FFF'; + +interface FadePropsActive { + fadeOut: true; + fadeColor?: string; + fadeHeight?: number; +} + +interface FadePropsDisabled { + fadeOut?: false; + fadeColor?: undefined; + fadeHeight?: undefined; +} + +interface ExternalProps extends React.HTMLAttributes { + open: boolean; + animationDuration?: number; + maxCollapsedHeight?: number; +} + +interface CollapseState { // tslint:disable-line:no-unused-variable + height: number; + opened: boolean; + opening: boolean; +} + +export type CollapseProps = ExternalProps & (FadePropsActive | FadePropsDisabled); + +export class Collapse extends React.PureComponent { + private element: Element; + private timeout: number; + + public constructor (props: CollapseProps) { + super(props); + + const { maxCollapsedHeight = DEFAULT_HEIGHT } = props; + + this.state = { + height: maxCollapsedHeight, + opening: false, + opened: false + }; + } + + public componentDidUpdate (previousProps: CollapseProps) { + if (this.props.open !== previousProps.open) { + window.clearTimeout(this.timeout); + + const { maxCollapsedHeight = DEFAULT_HEIGHT, animationDuration = DEFAULT_DURATION } = this.props; + + this.setState({ + opened: false, + opening: previousProps.open, + height: this.props.open ? maxCollapsedHeight : this.element.scrollHeight + }); + + this.timeout = window.setTimeout(() => { + this.setState({ + opened: false, + opening: this.props.open, + height: this.props.open ? this.element.scrollHeight : maxCollapsedHeight + }); + + this.timeout = window.setTimeout(() => { + this.setState({ + opened: this.props.open, + opening: this.props.open + }); + }, animationDuration); + }, ENOUGH_TIME_FOR_RERENDER); + } + } + + public componentDidMount () { + const { maxCollapsedHeight = DEFAULT_HEIGHT } = this.props; + + this.setState({ + height: this.props.open ? this.element.scrollHeight : maxCollapsedHeight + }); + } + + public componentWillMount () { + window.clearTimeout(this.timeout); + } + + public render () { + const { opening, opened, height } = this.state; + + const { + children, + className, + fadeOut, + fadeColor = DEFAULT_FADE_COLOR, + fadeHeight = DEFAULT_FADE_HEIGHT, + open, + maxCollapsedHeight, + animationDuration = DEFAULT_DURATION, + ...remainingProps + } = this.props; + + const collapseStyle = { + height: opened ? 'auto' : height, + position: 'relative' as 'relative', + overflow: 'hidden' as 'hidden', + transition: `ease-in-out ${animationDuration}ms height` + }; + + const fadeStyle = { + height: fadeHeight, + width: '100%', + position: 'absolute' as 'absolute', + bottom: 0, + opacity: opening ? 0 : 1, + background: `linear-gradient(transparent, ${fadeColor} 80%)`, + transition: `ease-in-out ${animationDuration}ms opacity` + }; + + return ( +
this.element = element} + {...remainingProps} + className={classNames('clearfix collapse', height ? 'collapse-open' : null, className)} + style={collapseStyle} + > + {children} + { + fadeOut && !opened && ( +
+ ) + } +
+ ); + } +} + +export default Collapse; From b0713566f59ee29710617f0a3804f91e183c2a6a Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Thu, 7 Dec 2017 14:46:29 +0000 Subject: [PATCH 02/21] Add collapse example --- src/ts/components/collapse.examples.md | 47 ++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 src/ts/components/collapse.examples.md diff --git a/src/ts/components/collapse.examples.md b/src/ts/components/collapse.examples.md new file mode 100644 index 000000000..7a838c5e9 --- /dev/null +++ b/src/ts/components/collapse.examples.md @@ -0,0 +1,47 @@ +#### Examples + +```js +class CollapseExample extends React.Component { + constructor (props) { + super(props); + + this.state = { + open: false + }; + + this.onClickToggleCollapse = this.onClickToggleCollapse.bind(this); + } + + onClickToggleCollapse () { + const { open } = this.state; + + this.setState({ + open: !open + }); + } + + render () { + const { open } = this.state; + + return ( +
+ + + + +
+ ); + } +} + + +``` From 38290ec2550516eb0ae1da652dc8ab380fa4a4ff Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Thu, 7 Dec 2017 14:55:31 +0000 Subject: [PATCH 03/21] Descriptions --- src/ts/components/collapse.tsx | 33 +++++++++++++++++++++++++++++++-- 1 file changed, 31 insertions(+), 2 deletions(-) diff --git a/src/ts/components/collapse.tsx b/src/ts/components/collapse.tsx index aa0718756..c69d8ebef 100644 --- a/src/ts/components/collapse.tsx +++ b/src/ts/components/collapse.tsx @@ -8,8 +8,20 @@ const DEFAULT_FADE_HEIGHT = 50; const DEFAULT_FADE_COLOR = '#FFF'; interface FadePropsActive { + /** + * Whether to fade out the content + * @default false + */ fadeOut: true; + /** + * Color to fade to + * @default white + */ fadeColor?: string; + /** + * Height of the faded area + * @default 50 + */ fadeHeight?: number; } @@ -19,9 +31,21 @@ interface FadePropsDisabled { fadeHeight?: undefined; } -interface ExternalProps extends React.HTMLAttributes { +interface ExternalProps { + /** + * Whether the collapse is open or not + * @default false + */ open: boolean; + /** + * Duration of the animation (milliseconds) + * @default 200 + */ animationDuration?: number; + /** + * Maximum height when collapsed + * @default 0 + */ maxCollapsedHeight?: number; } @@ -31,8 +55,13 @@ interface CollapseState { // tslint:disable-line:no-unused-variable opening: boolean; } -export type CollapseProps = ExternalProps & (FadePropsActive | FadePropsDisabled); +export type CollapseProps = ExternalProps & + (FadePropsActive | FadePropsDisabled) & + React.HTMLAttributes; +/** + * Component to expand and collapse content, optionally displaying a small preview. + */ export class Collapse extends React.PureComponent { private element: Element; private timeout: number; From 995f3124962a4a4ddb6c96389fd3c4c58398bc23 Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Thu, 7 Dec 2017 14:58:56 +0000 Subject: [PATCH 04/21] Fix prop documentation --- src/ts/components/collapse.tsx | 45 ++++++++++++---------------------- 1 file changed, 16 insertions(+), 29 deletions(-) diff --git a/src/ts/components/collapse.tsx b/src/ts/components/collapse.tsx index c69d8ebef..2b37d1c6f 100644 --- a/src/ts/components/collapse.tsx +++ b/src/ts/components/collapse.tsx @@ -7,31 +7,7 @@ const DEFAULT_DURATION = 200; const DEFAULT_FADE_HEIGHT = 50; const DEFAULT_FADE_COLOR = '#FFF'; -interface FadePropsActive { - /** - * Whether to fade out the content - * @default false - */ - fadeOut: true; - /** - * Color to fade to - * @default white - */ - fadeColor?: string; - /** - * Height of the faded area - * @default 50 - */ - fadeHeight?: number; -} - -interface FadePropsDisabled { - fadeOut?: false; - fadeColor?: undefined; - fadeHeight?: undefined; -} - -interface ExternalProps { +export interface CollapseProps extends React.HTMLAttributes { /** * Whether the collapse is open or not * @default false @@ -47,6 +23,21 @@ interface ExternalProps { * @default 0 */ maxCollapsedHeight?: number; + /** + * Whether to fade out the content + * @default false + */ + fadeOut?: boolean; + /** + * Color to fade to + * @default white + */ + fadeColor?: string; + /** + * Height of the faded area + * @default 50 + */ + fadeHeight?: number; } interface CollapseState { // tslint:disable-line:no-unused-variable @@ -55,10 +46,6 @@ interface CollapseState { // tslint:disable-line:no-unused-variable opening: boolean; } -export type CollapseProps = ExternalProps & - (FadePropsActive | FadePropsDisabled) & - React.HTMLAttributes; - /** * Component to expand and collapse content, optionally displaying a small preview. */ From 6b2cf0a23a91b951f846b620b31b7af5b5df6d71 Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Thu, 7 Dec 2017 15:02:00 +0000 Subject: [PATCH 05/21] Fix initial state --- src/ts/components/collapse.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/ts/components/collapse.tsx b/src/ts/components/collapse.tsx index 2b37d1c6f..9f18c9a10 100644 --- a/src/ts/components/collapse.tsx +++ b/src/ts/components/collapse.tsx @@ -56,12 +56,12 @@ export class Collapse extends React.PureComponent public constructor (props: CollapseProps) { super(props); - const { maxCollapsedHeight = DEFAULT_HEIGHT } = props; + const { maxCollapsedHeight = DEFAULT_HEIGHT, open } = props; this.state = { height: maxCollapsedHeight, opening: false, - opened: false + opened: open }; } From 483be9bf4a79077d58556c8c9c543fc8bdf3b98b Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Thu, 7 Dec 2017 15:02:39 +0000 Subject: [PATCH 06/21] Primary button --- src/ts/components/collapse.examples.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ts/components/collapse.examples.md b/src/ts/components/collapse.examples.md index 7a838c5e9..3004ed968 100644 --- a/src/ts/components/collapse.examples.md +++ b/src/ts/components/collapse.examples.md @@ -35,7 +35,7 @@ class CollapseExample extends React.Component { > -
From 88833c733c4abce76aa3ef3f498e4a9f28a3f45a Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Thu, 7 Dec 2017 15:07:37 +0000 Subject: [PATCH 07/21] Change export style --- src/ts/index.ts | 63 +++++++++++++++++++++++++------------------------ 1 file changed, 32 insertions(+), 31 deletions(-) diff --git a/src/ts/index.ts b/src/ts/index.ts index a40404ce6..b2ef072da 100644 --- a/src/ts/index.ts +++ b/src/ts/index.ts @@ -1,31 +1,32 @@ -export { Alert } from './components/alert'; -export { Anchor } from './components/anchor'; -export { Button } from './components/forms/button'; -export { CodeBlock } from './components/code-block'; -export { Column } from './components/grid/column'; -export { Container } from './components/grid/container'; -export { ContentBox } from './components/content/content-box'; -export { ContentBoxHeader } from './components/content/content-box-header'; -export { ContentBoxFooter } from './components/content/content-box-footer'; -export { DabIpsum } from './components/prototyping/dab-ipsum'; -export { FormGroup } from './components/forms/form-group'; -export { InputGroup } from './components/forms/input-group'; -export { InputGroupAddon } from './components/forms/input-group-addon'; -export { Modal } from './components/modals/modal'; -export { ModalBody } from './components/modals/modal-body'; -export { ModalCloseIcon } from './components/modals/modal-close-icon'; -export { ModalFooter } from './components/modals/modal-footer'; -export { ModalHeader } from './components/modals/modal-header'; -export { ModalRenderer } from './components/modals/modal-renderer'; -export { Row } from './components/grid/row'; -export { Section } from './components/content/section'; -export { SpacedGroup } from './components/spaced-group'; -export { Tabs } from './components/tabs/tabs'; -export { Tab } from './components/tabs/tab'; -export { Table } from './components/tables/table'; -export { TableBody } from './components/tables/table-body'; -export { TableCell } from './components/tables/table-cell'; -export { TableHead } from './components/tables/table-head'; -export { TableHeader } from './components/tables/table-header'; -export { TableRow } from './components/tables/table-row'; -export { Well } from './components/well'; +export { default as Alert } from './components/alert'; +export { default as Anchor } from './components/anchor'; +export { default as Button } from './components/forms/button'; +export { default as CodeBlock } from './components/code-block'; +export { default as Collapse } from './components/collapse'; +export { default as Column } from './components/grid/column'; +export { default as Container } from './components/grid/container'; +export { default as ContentBox } from './components/content/content-box'; +export { default as ContentBoxHeader } from './components/content/content-box-header'; +export { default as ContentBoxFooter } from './components/content/content-box-footer'; +export { default as DabIpsum } from './components/prototyping/dab-ipsum'; +export { default as FormGroup } from './components/forms/form-group'; +export { default as InputGroup } from './components/forms/input-group'; +export { default as InputGroupAddon } from './components/forms/input-group-addon'; +export { default as Modal } from './components/modals/modal'; +export { default as ModalBody } from './components/modals/modal-body'; +export { default as ModalCloseIcon } from './components/modals/modal-close-icon'; +export { default as ModalFooter } from './components/modals/modal-footer'; +export { default as ModalHeader } from './components/modals/modal-header'; +export { default as ModalRenderer } from './components/modals/modal-renderer'; +export { default as Row } from './components/grid/row'; +export { default as Section } from './components/content/section'; +export { default as SpacedGroup } from './components/spaced-group'; +export { default as Tabs } from './components/tabs/tabs'; +export { default as Tab } from './components/tabs/tab'; +export { default as Table } from './components/tables/table'; +export { default as TableBody } from './components/tables/table-body'; +export { default as TableCell } from './components/tables/table-cell'; +export { default as TableHead } from './components/tables/table-head'; +export { default as TableHeader } from './components/tables/table-header'; +export { default as TableRow } from './components/tables/table-row'; +export { default as Well } from './components/well'; From 30f998cb07eca928f583e771bd4946a66d9c5447 Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Thu, 7 Dec 2017 15:08:21 +0000 Subject: [PATCH 08/21] Allow collapse to take a component prop --- src/ts/components/collapse.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/ts/components/collapse.tsx b/src/ts/components/collapse.tsx index 9f18c9a10..9f9fc66c6 100644 --- a/src/ts/components/collapse.tsx +++ b/src/ts/components/collapse.tsx @@ -1,5 +1,6 @@ import * as classNames from 'classnames'; import * as React from 'react'; +import { ComponentProps } from '../types'; const ENOUGH_TIME_FOR_RERENDER = 50; const DEFAULT_HEIGHT = 0; @@ -7,7 +8,7 @@ const DEFAULT_DURATION = 200; const DEFAULT_FADE_HEIGHT = 50; const DEFAULT_FADE_COLOR = '#FFF'; -export interface CollapseProps extends React.HTMLAttributes { +export interface CollapseProps extends ComponentProps, React.HTMLAttributes { /** * Whether the collapse is open or not * @default false @@ -110,6 +111,7 @@ export class Collapse extends React.PureComponent const { opening, opened, height } = this.state; const { + component: Component = 'div', children, className, fadeOut, @@ -139,7 +141,7 @@ export class Collapse extends React.PureComponent }; return ( -
this.element = element} {...remainingProps} className={classNames('clearfix collapse', height ? 'collapse-open' : null, className)} @@ -154,7 +156,7 @@ export class Collapse extends React.PureComponent /> ) } -
+ ); } } From b2fbc739d50d0b9b2cc08efed44c8ddd07030910 Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Thu, 7 Dec 2017 15:17:05 +0000 Subject: [PATCH 09/21] Begin testing collapse component --- tests/__snapshots__/collapse.tsx.snap | 43 +++++++++++++++++++++++++++ tests/collapse.tsx | 37 +++++++++++++++++++++++ 2 files changed, 80 insertions(+) create mode 100644 tests/__snapshots__/collapse.tsx.snap create mode 100644 tests/collapse.tsx diff --git a/tests/__snapshots__/collapse.tsx.snap b/tests/__snapshots__/collapse.tsx.snap new file mode 100644 index 000000000..d19bfc685 --- /dev/null +++ b/tests/__snapshots__/collapse.tsx.snap @@ -0,0 +1,43 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Collapse should match snapshot when collapsed 1`] = ` +
+`; + +exports[`Collapse should match snapshot when expanded 1`] = ` +
+`; + +exports[`Collapse should take regular element attributes 1`] = ` +
+`; diff --git a/tests/collapse.tsx b/tests/collapse.tsx new file mode 100644 index 000000000..9606fb34c --- /dev/null +++ b/tests/collapse.tsx @@ -0,0 +1,37 @@ +import * as React from 'react'; +import * as renderer from 'react-test-renderer'; + +import { Collapse } from '../src/ts/'; + +describe('Collapse', () => { + + const createNodeMock = () => ({ + scrollHeight: 500 + }); + + it('should match snapshot when collapsed', () => { + const tree = renderer.create( + + ); + + expect(tree).toMatchSnapshot(); + }); + + it('should match snapshot when expanded', () => { + const tree = renderer.create( + , + {createNodeMock} + ); + + expect(tree).toMatchSnapshot(); + }); + + it('should take regular element attributes', () => { + const tree = renderer.create( + + ); + + expect(tree).toMatchSnapshot(); + }); + +}); From 90733821f17932f1f07ac1c42ab36a2ae6448a2c Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Thu, 7 Dec 2017 15:50:33 +0000 Subject: [PATCH 10/21] Test custom height & fade out --- tests/__snapshots__/collapse.tsx.snap | 43 +++++++++++++++++++++++++++ tests/collapse.tsx | 16 ++++++++++ 2 files changed, 59 insertions(+) diff --git a/tests/__snapshots__/collapse.tsx.snap b/tests/__snapshots__/collapse.tsx.snap index d19bfc685..403354213 100644 --- a/tests/__snapshots__/collapse.tsx.snap +++ b/tests/__snapshots__/collapse.tsx.snap @@ -28,6 +28,49 @@ exports[`Collapse should match snapshot when expanded 1`] = ` /> `; +exports[`Collapse should match snapshot with custom collapsed height 1`] = ` +
+`; + +exports[`Collapse should match snapshot with fade out 1`] = ` +
+
+
+`; + exports[`Collapse should take regular element attributes 1`] = `
{ expect(tree).toMatchSnapshot(); }); + it('should match snapshot with custom collapsed height', () => { + const tree = renderer.create( + + ); + + expect(tree).toMatchSnapshot(); + }); + + it('should match snapshot with fade out', () => { + const tree = renderer.create( + + ); + + expect(tree).toMatchSnapshot(); + }); + it('should take regular element attributes', () => { const tree = renderer.create( From 86b503e67d4ef923912f6139e3ee466c6d2e5586 Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Thu, 7 Dec 2017 16:38:21 +0000 Subject: [PATCH 11/21] Setup enzyme --- package.json | 16 +++++++++++++++- tests/__snapshots__/collapse.tsx.snap | 18 ++++++++++++++++++ tests/collapse.tsx | 7 +++++++ tests/helpers/setup.ts | 4 ++++ 4 files changed, 44 insertions(+), 1 deletion(-) create mode 100644 tests/helpers/setup.ts diff --git a/package.json b/package.json index a08a01b71..18087a5cc 100644 --- a/package.json +++ b/package.json @@ -55,6 +55,8 @@ "typescript": "2.3.3" }, "devDependencies": { + "@types/enzyme": "3.1.5", + "@types/enzyme-adapter-react-15": "1.0.1", "@types/jest": "19.2.3", "@types/node": "7.0.13", "@types/react-test-renderer": "15.4.5", @@ -62,6 +64,9 @@ "concurrently": "3.4.0", "css-loader": "0.28.7", "envify": "4.0.0", + "enzyme": "3.2.0", + "enzyme-adapter-react-15": "1.0.5", + "enzyme-to-json": "3.2.2", "http-server": "0.9.0", "jest": "20.0.3", "less-loader": "4.0.5", @@ -87,6 +92,9 @@ "typescript": ">= 2.3.3 < 3" }, "jest": { + "setupFiles": [ + "/tests/helpers/setup.ts" + ], "coverageThreshold": { "global": { "branches": 100, @@ -99,12 +107,18 @@ "^.+\\.tsx?$": "/node_modules/ts-jest/preprocessor.js" }, "testRegex": "(/tests/.*|\\.(test|spec))\\.(ts|tsx|js|jsx)$", + "testPathIgnorePatterns": [ + "/tests/helpers/" + ], "moduleFileExtensions": [ "ts", "tsx", "js", "jsx" ], - "mapCoverage": true + "mapCoverage": true, + "snapshotSerializers": [ + "enzyme-to-json/serializer" + ] } } diff --git a/tests/__snapshots__/collapse.tsx.snap b/tests/__snapshots__/collapse.tsx.snap index 403354213..0ea4b5bfc 100644 --- a/tests/__snapshots__/collapse.tsx.snap +++ b/tests/__snapshots__/collapse.tsx.snap @@ -71,6 +71,24 @@ exports[`Collapse should match snapshot with fade out 1`] = `
`; +exports[`Collapse should open 1`] = ` + +
+ +`; + exports[`Collapse should take regular element attributes 1`] = `
{ expect(tree).toMatchSnapshot(); }); + it('should open', () => { + const instance = enzyme.mount(); + + expect(instance).toMatchSnapshot(); + }); + }); diff --git a/tests/helpers/setup.ts b/tests/helpers/setup.ts new file mode 100644 index 000000000..75e47e619 --- /dev/null +++ b/tests/helpers/setup.ts @@ -0,0 +1,4 @@ +import * as enzyme from 'enzyme'; +import * as Adapter from 'enzyme-adapter-react-15'; + +enzyme.configure({ adapter: new Adapter() }); From c8a15f54a8ee4ad530e0364154915d20597448b6 Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Thu, 7 Dec 2017 17:06:42 +0000 Subject: [PATCH 12/21] Test opening collapse --- tests/__snapshots__/collapse.tsx.snap | 103 ++++++++++++++++++++++++++ tests/collapse.tsx | 32 +++++++- 2 files changed, 134 insertions(+), 1 deletion(-) diff --git a/tests/__snapshots__/collapse.tsx.snap b/tests/__snapshots__/collapse.tsx.snap index 0ea4b5bfc..df7332fb5 100644 --- a/tests/__snapshots__/collapse.tsx.snap +++ b/tests/__snapshots__/collapse.tsx.snap @@ -73,6 +73,7 @@ exports[`Collapse should match snapshot with fade out 1`] = ` exports[`Collapse should open 1`] = `
+
+
+ +`; + +exports[`Collapse should open 2`] = ` + +
+
+
+ +`; + +exports[`Collapse should open 3`] = ` + +
+
+
+ +`; + +exports[`Collapse should open 4`] = ` + +
`; diff --git a/tests/collapse.tsx b/tests/collapse.tsx index 57bee78ab..856f2d33b 100644 --- a/tests/collapse.tsx +++ b/tests/collapse.tsx @@ -52,8 +52,38 @@ describe('Collapse', () => { }); it('should open', () => { - const instance = enzyme.mount(); + jest.useFakeTimers(); + const instance = enzyme.mount(); + const node = instance.getDOMNode(); + + // Set a scrollHeight + Object.defineProperty(node, 'scrollHeight', { + get: () => 500 + }); + + // Initial state + instance.update(); + expect(instance).toMatchSnapshot(); + + instance.setProps({ + open: true + }); + + // Prepare to open + instance.update(); + expect(instance).toMatchSnapshot(); + + jest.runOnlyPendingTimers(); + + // Begin open sequence + instance.update(); + expect(instance).toMatchSnapshot(); + + jest.runOnlyPendingTimers(); + + // Complete open sequence + instance.update(); expect(instance).toMatchSnapshot(); }); From 0125e6ce5a43377199fdea211d39fb6a7837dba2 Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Thu, 7 Dec 2017 17:08:03 +0000 Subject: [PATCH 13/21] Test opening from custom height --- tests/__snapshots__/collapse.tsx.snap | 133 +++++++++++++++++++++++++- tests/collapse.tsx | 38 +++++++- 2 files changed, 166 insertions(+), 5 deletions(-) diff --git a/tests/__snapshots__/collapse.tsx.snap b/tests/__snapshots__/collapse.tsx.snap index df7332fb5..6419b6b27 100644 --- a/tests/__snapshots__/collapse.tsx.snap +++ b/tests/__snapshots__/collapse.tsx.snap @@ -71,7 +71,132 @@ exports[`Collapse should match snapshot with fade out 1`] = `
`; -exports[`Collapse should open 1`] = ` +exports[`Collapse should open from custom height 1`] = ` + +
+
+
+ +`; + +exports[`Collapse should open from custom height 2`] = ` + +
+
+
+ +`; + +exports[`Collapse should open from custom height 3`] = ` + +
+
+
+ +`; + +exports[`Collapse should open from custom height 4`] = ` + +
+ +`; + +exports[`Collapse should open from default height 1`] = ` `; -exports[`Collapse should open 2`] = ` +exports[`Collapse should open from default height 2`] = ` `; -exports[`Collapse should open 3`] = ` +exports[`Collapse should open from default height 3`] = ` `; -exports[`Collapse should open 4`] = ` +exports[`Collapse should open from default height 4`] = ` { expect(tree).toMatchSnapshot(); }); - it('should open', () => { + it('should open from default height', () => { jest.useFakeTimers(); const instance = enzyme.mount(); @@ -87,4 +87,40 @@ describe('Collapse', () => { expect(instance).toMatchSnapshot(); }); + it('should open from custom height', () => { + jest.useFakeTimers(); + + const instance = enzyme.mount(); + const node = instance.getDOMNode(); + + // Set a scrollHeight + Object.defineProperty(node, 'scrollHeight', { + get: () => 500 + }); + + // Initial state + instance.update(); + expect(instance).toMatchSnapshot(); + + instance.setProps({ + open: true + }); + + // Prepare to open + instance.update(); + expect(instance).toMatchSnapshot(); + + jest.runOnlyPendingTimers(); + + // Begin open sequence + instance.update(); + expect(instance).toMatchSnapshot(); + + jest.runOnlyPendingTimers(); + + // Complete open sequence + instance.update(); + expect(instance).toMatchSnapshot(); + }); + }); From 63ca242b0e7bb86ce941d6acfea96a90d524b539 Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Thu, 7 Dec 2017 17:11:15 +0000 Subject: [PATCH 14/21] Test closing collapse component --- tests/__snapshots__/collapse.tsx.snap | 246 ++++++++++++++++++++++++++ tests/collapse.tsx | 72 ++++++++ 2 files changed, 318 insertions(+) diff --git a/tests/__snapshots__/collapse.tsx.snap b/tests/__snapshots__/collapse.tsx.snap index 6419b6b27..f0775f714 100644 --- a/tests/__snapshots__/collapse.tsx.snap +++ b/tests/__snapshots__/collapse.tsx.snap @@ -1,5 +1,251 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`Collapse should close to custom height 1`] = ` + +
+ +`; + +exports[`Collapse should close to custom height 2`] = ` + +
+
+
+ +`; + +exports[`Collapse should close to custom height 3`] = ` + +
+
+
+ +`; + +exports[`Collapse should close to custom height 4`] = ` + +
+
+
+ +`; + +exports[`Collapse should close to default height 1`] = ` + +
+ +`; + +exports[`Collapse should close to default height 2`] = ` + +
+
+
+ +`; + +exports[`Collapse should close to default height 3`] = ` + +
+
+
+ +`; + +exports[`Collapse should close to default height 4`] = ` + +
+
+
+ +`; + exports[`Collapse should match snapshot when collapsed 1`] = `
{ expect(instance).toMatchSnapshot(); }); + it('should close to default height', () => { + jest.useFakeTimers(); + + const instance = enzyme.mount(); + const node = instance.getDOMNode(); + + // Set a scrollHeight + Object.defineProperty(node, 'scrollHeight', { + get: () => 500 + }); + + // Initial state + instance.update(); + expect(instance).toMatchSnapshot(); + + instance.setProps({ + open: false + }); + + // Prepare to close + instance.update(); + expect(instance).toMatchSnapshot(); + + jest.runOnlyPendingTimers(); + + // Begin close sequence + instance.update(); + expect(instance).toMatchSnapshot(); + + jest.runOnlyPendingTimers(); + + // Complete close sequence + instance.update(); + expect(instance).toMatchSnapshot(); + }); + + it('should close to custom height', () => { + jest.useFakeTimers(); + + const instance = enzyme.mount(); + const node = instance.getDOMNode(); + + // Set a scrollHeight + Object.defineProperty(node, 'scrollHeight', { + get: () => 500 + }); + + // Initial state + instance.update(); + expect(instance).toMatchSnapshot(); + + instance.setProps({ + open: false + }); + + // Prepare to close + instance.update(); + expect(instance).toMatchSnapshot(); + + jest.runOnlyPendingTimers(); + + // Begin close sequence + instance.update(); + expect(instance).toMatchSnapshot(); + + jest.runOnlyPendingTimers(); + + // Complete close sequence + instance.update(); + expect(instance).toMatchSnapshot(); + }); + }); From 0d0413c32432bf5ea7f07eafed16e1ca76fc95c2 Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Thu, 7 Dec 2017 17:21:29 +0000 Subject: [PATCH 15/21] Add collapse-open class when open is true --- src/ts/components/collapse.tsx | 8 ++++---- tests/__snapshots__/collapse.tsx.snap | 18 +++++++++--------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/ts/components/collapse.tsx b/src/ts/components/collapse.tsx index 9f9fc66c6..cc2347f23 100644 --- a/src/ts/components/collapse.tsx +++ b/src/ts/components/collapse.tsx @@ -108,10 +108,7 @@ export class Collapse extends React.PureComponent } public render () { - const { opening, opened, height } = this.state; - const { - component: Component = 'div', children, className, fadeOut, @@ -120,9 +117,12 @@ export class Collapse extends React.PureComponent open, maxCollapsedHeight, animationDuration = DEFAULT_DURATION, + component: Component = 'div', ...remainingProps } = this.props; + const { opening, opened, height } = this.state; + const collapseStyle = { height: opened ? 'auto' : height, position: 'relative' as 'relative', @@ -144,7 +144,7 @@ export class Collapse extends React.PureComponent this.element = element} {...remainingProps} - className={classNames('clearfix collapse', height ? 'collapse-open' : null, className)} + className={classNames('clearfix collapse', open ? 'collapse-open' : null, className)} style={collapseStyle} > {children} diff --git a/tests/__snapshots__/collapse.tsx.snap b/tests/__snapshots__/collapse.tsx.snap index f0775f714..bbe750991 100644 --- a/tests/__snapshots__/collapse.tsx.snap +++ b/tests/__snapshots__/collapse.tsx.snap @@ -7,7 +7,7 @@ exports[`Collapse should close to custom height 1`] = ` open={true} >
Date: Thu, 7 Dec 2017 17:25:02 +0000 Subject: [PATCH 16/21] 100% coverage --- tests/__snapshots__/collapse.tsx.snap | 43 +++++++++++++++++++++++++++ tests/collapse.tsx | 16 ++++++++++ 2 files changed, 59 insertions(+) diff --git a/tests/__snapshots__/collapse.tsx.snap b/tests/__snapshots__/collapse.tsx.snap index bbe750991..960f8ed1b 100644 --- a/tests/__snapshots__/collapse.tsx.snap +++ b/tests/__snapshots__/collapse.tsx.snap @@ -274,6 +274,20 @@ exports[`Collapse should match snapshot when expanded 1`] = ` /> `; +exports[`Collapse should match snapshot with custom animation duration 1`] = ` +
+`; + exports[`Collapse should match snapshot with custom collapsed height 1`] = `
`; +exports[`Collapse should match snapshot with customized fade out 1`] = ` +
+
+
+`; + exports[`Collapse should match snapshot with fade out 1`] = `
{ expect(tree).toMatchSnapshot(); }); + it('should match snapshot with custom animation duration', () => { + const tree = renderer.create( + + ); + + expect(tree).toMatchSnapshot(); + }); + it('should match snapshot with fade out', () => { const tree = renderer.create( @@ -43,6 +51,14 @@ describe('Collapse', () => { expect(tree).toMatchSnapshot(); }); + it('should match snapshot with customized fade out', () => { + const tree = renderer.create( + + ); + + expect(tree).toMatchSnapshot(); + }); + it('should take regular element attributes', () => { const tree = renderer.create( From 80e56d446dee725f0543ac9a93a38bbf4a14970a Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Thu, 7 Dec 2017 17:28:49 +0000 Subject: [PATCH 17/21] Export state interface --- src/ts/components/collapse.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ts/components/collapse.tsx b/src/ts/components/collapse.tsx index cc2347f23..7d44630cf 100644 --- a/src/ts/components/collapse.tsx +++ b/src/ts/components/collapse.tsx @@ -41,7 +41,7 @@ export interface CollapseProps extends ComponentProps, React.HTMLAttributes Date: Thu, 7 Dec 2017 17:31:22 +0000 Subject: [PATCH 18/21] Update tsconfigs --- scripts/dist | 2 +- src/ts/tsconfig.json | 7 ++++++- tsconfig.json | 4 +++- 3 files changed, 10 insertions(+), 3 deletions(-) diff --git a/scripts/dist b/scripts/dist index 363a0603d..047e53667 100755 --- a/scripts/dist +++ b/scripts/dist @@ -6,4 +6,4 @@ rm -rf dist/ mkdir -p dist/js/ -tsc --sourceMap --declaration --listFiles --project 'src/ts/tsconfig.json' --rootDir 'src/ts/' --outDir 'dist/js/' --module 'CommonJS' +tsc --project 'src/ts/tsconfig.json' diff --git a/src/ts/tsconfig.json b/src/ts/tsconfig.json index c3107b6df..6cd13be52 100644 --- a/src/ts/tsconfig.json +++ b/src/ts/tsconfig.json @@ -7,6 +7,11 @@ "typeRoots": [ "../../node_modules/@types/", "../../types/" - ] + ], + "declaration": true, + "sourceMap": true, + "listFiles": true, + "rootDir": "./", + "outDir": "../../dist/" } } diff --git a/tsconfig.json b/tsconfig.json index 4d2f0e886..0e7e3e054 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,9 +1,11 @@ { "compilerOptions": { - "noImplicitAny": true, "strictNullChecks": true, + "noImplicitAny": true, + "pretty": true, "jsx": "react", "target": "es5", + "module": "commonjs", "typeRoots": [ "node_modules/@types/", "types/" From 0f5feddb3fb0a499b09503709042cd801d446937 Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Thu, 7 Dec 2017 17:32:28 +0000 Subject: [PATCH 19/21] Increment patch number --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 18087a5cc..85794833e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "roe", - "version": "0.8.24", + "version": "0.8.25", "description": "A Collection of React Components for Project Development", "main": "dist/js/index.js", "types": "dist/js/index.d.ts", From 2fd206b9b138c143e75eaba63a8fa09d8b1f3b01 Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Thu, 7 Dec 2017 17:49:23 +0000 Subject: [PATCH 20/21] Exclude enzyme types from dist --- src/ts/tsconfig.json | 9 ++++++--- tsconfig.json | 4 ++-- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/ts/tsconfig.json b/src/ts/tsconfig.json index 6cd13be52..54b64fe1a 100644 --- a/src/ts/tsconfig.json +++ b/src/ts/tsconfig.json @@ -5,13 +5,16 @@ "jsx": "react", "target": "es5", "typeRoots": [ - "../../node_modules/@types/", - "../../types/" + "../../node_modules/@types/*", + "../../types/*" ], "declaration": true, "sourceMap": true, "listFiles": true, "rootDir": "./", "outDir": "../../dist/" - } + }, + "exclude": [ + "../../node_modules/@types/enzyme/*" + ] } diff --git a/tsconfig.json b/tsconfig.json index 0e7e3e054..e6e2cacd9 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -7,8 +7,8 @@ "target": "es5", "module": "commonjs", "typeRoots": [ - "node_modules/@types/", - "types/" + "node_modules/@types/*", + "types/*" ] }, "exclude": [ From 8454ad45824f7c510318882f16c21f3f9dd8f107 Mon Sep 17 00:00:00 2001 From: Jake 'Sid' Smith Date: Thu, 7 Dec 2017 17:52:08 +0000 Subject: [PATCH 21/21] Adjust example animation duration --- src/ts/components/collapse.examples.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ts/components/collapse.examples.md b/src/ts/components/collapse.examples.md index 3004ed968..b579128f4 100644 --- a/src/ts/components/collapse.examples.md +++ b/src/ts/components/collapse.examples.md @@ -31,7 +31,7 @@ class CollapseExample extends React.Component { fadeOut fadeColor="#FFF" fadeHeight={50} - animationDuration={1000} + animationDuration={200} >