luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #6 from mattermost/root-portal

Browse source 
Adding root portal and initial test machinery
This commit is contained in:
chenilim 2020-10-14 12:17:18 -07:00 committed by GitHub
commit 24916c83dc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 5475 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
html-templates/page.ejs
View file

@ -14,6 +14,9 @@
<body>
<div id="octo-tasks-app">
</div>
<div id="root-portal">
</div>
</body>
</html>
</html>

5456
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

13
package.json
View file

@ -6,7 +6,8 @@
"scripts": {
"pack": "NODE_ENV=production webpack --config webpack.js",
"packdev": "NODE_ENV=dev webpack --config webpack.dev.js",
"watchdev": "NODE_ENV=dev webpack --watch --config webpack.dev.js"
"watchdev": "NODE_ENV=dev webpack --watch --config webpack.dev.js",
"test": "jest"
},
"dependencies": {
"marked": "^1.1.1",
@ -15,7 +16,15 @@
"react-router-dom": "^5.2.0",
"react-simplemde-editor": "^4.1.3"
},
"jest": {
"transform": {
"^.+\\.tsx?$": "ts-jest"
}
},
"devDependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.0.4",
"@types/jest": "^26.0.14",
"@types/marked": "^1.1.0",
"@types/react": "^16.9.49",
"@types/react-dom": "^16.9.8",
@ -23,10 +32,12 @@
"css-loader": "^4.3.0",
"file-loader": "^6.1.0",
"html-webpack-plugin": "^4.5.0",
"jest": "^26.5.3",
"sass": "^1.27.0",
"sass-loader": "^10.0.2",
"style-loader": "^1.3.0",
"terser-webpack-plugin": "^4.1.0",
"ts-jest": "^26.4.1",
"ts-loader": "^8.0.3",
"typescript": "^4.0.2",
"webpack": "^4.44.1",

13
src/client/components/__snapshots__/rootPortal.test.tsx.snap Normal file
View file

@ -0,0 +1,13 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`components/RootPortal should match snapshot 1`] = `
<div
id="root-portal"
>
<div>
<div>
Testing Portal
</div>
</div>
</div>
`;

30
src/client/components/rootPortal.test.tsx Normal file
View file

@ -0,0 +1,30 @@
// Copyright (c) 2020-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
import {render} from '@testing-library/react';
import '@testing-library/jest-dom';
import RootPortal from './rootPortal';
describe('components/RootPortal', () => {
beforeEach(() => {
// Quick fix to disregard console error when unmounting a component
console.error = jest.fn();
});
test('should match snapshot', () => {
const rootPortalDiv = document.createElement('div');
rootPortalDiv.id = 'root-portal';
const {getByText, container} = render(
<RootPortal>
<div>{'Testing Portal'}</div>
</RootPortal>,
{container: document.body.appendChild(rootPortalDiv)},
);
expect(getByText('Testing Portal')).toBeVisible();
expect(container).toMatchSnapshot();
});
});

44
src/client/components/rootPortal.tsx Normal file
View file

@ -0,0 +1,44 @@
// Copyright (c) 2020-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
type Props = {
children: React.ReactNode
}
export default class RootPortal extends React.PureComponent<Props> {
el: HTMLDivElement
static propTypes = {
children: PropTypes.node,
}
constructor(props: Props) {
super(props);
this.el = document.createElement('div');
}
componentDidMount() {
const rootPortal = document.getElementById('root-portal');
if (rootPortal) {
rootPortal.appendChild(this.el);
}
}
componentWillUnmount() {
const rootPortal = document.getElementById('root-portal');
if (rootPortal) {
rootPortal.removeChild(this.el);
}
}
render() {
return ReactDOM.createPortal(
this.props.children,
this.el,
);
}
}