Feat/testing

babel.config.json

@@ -8,9 +8,11 @@
         "autoLabel": true,
         "labelFormat": "Uikit-[local]"
       }
-    ]
+    ],
+    "@babel/preset-typescript"
   ],
   "plugins": [
+    "@babel/plugin-transform-runtime",
     "@babel/plugin-proposal-optional-chaining",
     "@babel/plugin-proposal-object-rest-spread",
 

package.json

@@ -1,6 +1,9 @@
 {
   "name": "@icgc-argo/uikit",
   "version": "1.16.0",
+  "description": "ARGO UI component library",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "repository": {
     "type": "git",
     "url": "https://github.com/icgc-argo/uikit"
@@ -9,20 +12,17 @@
     "storybook": "NODE_PATH=./ start-storybook -s ./ -p 6006",
     "build-storybook": "build-storybook",
     "create-component": "plop --plopfile ./src/plopfile.js",
-    "gitmoji-config": "gitmoji -g",
-    "commit": "gitmoji -c",
     "type-check": "tsc -p ./tsconfig.json",
-    "test": "NODE_PATH=./ ts-mocha -p ./tsconfig.test.json ./testSetup.tsx src/testSetup.tsx src/**/*.test.tsx",
-    "test:watch": "NODE_PATH=./ ts-mocha --watch -p ./tsconfig.test.json ./testSetup.tsx src/testSetup.tsx src/**/*.test.tsx",
     "build::assets": "cp ./package.json ./dist/package.json && cp -r ./src/assets ./dist/assets && cp ./README.md ./dist/README.md",
     "build::ts": "tsc -p ./tsconfig.json",
-    "build::babel": "babel ./dist --out-dir ./dist",
-    "build::cleanup": "rm ./dist/**/*.jsx ./dist/*.jsx",
-    "build": "rm -rf ./dist && npm run build::ts && npm run build::babel && npm run build::assets && npm run build::cleanup",
+    "build::babel": "babel ./src --extensions .tsx,.ts,.js --out-dir ./dist",
+    "clean": "rm -rf dist && mkdir dist",
+    "declarations": "ttsc --emitDeclarationOnly",
+    "watch": "npm run clean && npm run build::assets && (npm run build::babel -- --watch --source-maps=inline & npm run declarations -- --watch)",
+    "build": "npm run clean && npm run build::assets && npm run declarations && npm run build::babel",
     "publish-uikit": "cd dist && npm publish --access public",
-    "prewatch": "rm -rf dist && mkdir dist && cd dist && npm link react react-dom",
-    "watch": "rm -rf ./dist && tsc-watch -p ./tsconfig.json --onSuccess \"npm run build::babel\"",
-    "postwatch": "rm -r dist"
+    "test": "jest --config jest.config.ts",
+    "test:watch": "npm run test -- --watch"
   },
   "peerDependencies": {
     "react": "16.x.x || 17.x.x",
@@ -59,18 +59,28 @@
     "@babel/polyfill": "^7.4.4",
     "@babel/preset-env": "^7.16.0",
     "@babel/preset-react": "^7.16.0",
-    "@babel/preset-typescript": "^7.16.0",
+    "@babel/preset-typescript": "^7.18.6",
     "@babel/register": "^7.4.0",
     "@emotion/babel-preset-css-prop": "^10.0.9",
     "babel-loader": "^8.0.5",
     "babel-plugin-module-resolver": "^3.2.0",
     "babel-preset-env": "^1.7.0",
-    "ts-node-dev": "^1.1.8",
-    "tsc-watch": "^4.5.0",
-    "typescript": "^3.9.5",
+    "husky": "^2.2.0",
     "plop": "^2.3.0",
     "prettier": "^2.0.5",
     "pretty-quick": "^2.0.1",
-    "husky": "^2.2.0"
+    "ts-node-dev": "^1.1.8",
+    "ttypescript": "^1.5.13",
+    "typescript": "^3.9.5",
+    "ts-jest": "^27.1.5",
+    "jest": "^27.5.1",
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^14.4.0"
+  },
+  "prettier": {
+    "printWidth": 100,
+    "trailingComma": "all",
+    "singleQuote": true
   }
 }

src/Affix/index.tsx

@@ -19,7 +19,7 @@
 
 import React from 'react';
 
-export default function Affix(props: {
+export function Affix(props: {
   top: number;
   children: React.ReactNode;
   offset?: number;

src/AppBar/index.tsx

@@ -21,10 +21,10 @@ import { css } from '@emotion/core';
 import PropTypes from 'prop-types';
 import React from 'react';
 import logo from '../assets/logo_white.svg';
-import Typography from '../Typography';
+import { Typography } from '../Typography';
+import { useClickAway } from '../utils/useClickAway';
 import useTheme from '../utils/useTheme';
-import useClickAway from '../utils/useClickAway';
-
+import { DropdownMenuItem } from './DropdownMenu';
 import {
   AppBarContainer,
   LogoContainer,
@@ -35,7 +35,6 @@ import {
   SectionDisplay,
   UserBadgeContainer,
 } from './styledComponents';
-import { DropdownMenuItem } from './DropdownMenu';
 
 export const UserBadge = ({
   firstName = '',
@@ -113,7 +112,7 @@ export const Section = (props) => <SectionDisplay {...props} />;
 
 export const MenuGroup = (props) => <MenuGroupDisplay {...props} />;
 
-export const MenuItem = React.forwardRef<
+export const AppBarMenuItem = React.forwardRef<
   HTMLDivElement,
   {
     active?: boolean;
@@ -153,12 +152,10 @@ export const MenuItem = React.forwardRef<
   },
 );
 
-const AppBar = AppBarContainer;
+export const AppBar = AppBarContainer;
 
 AppBar.propTypes = {};
 
-export default AppBar;
-
 export { DropdownMenu, DropdownMenuItem } from './DropdownMenu';
 
 export type NavElement = {
@@ -188,9 +185,9 @@ export const NavBarElement = ({
       {name}
     </DropdownMenuItem>
   ) : (
-    <MenuItem ref={React.createRef()} active={active}>
+    <AppBarMenuItem ref={React.createRef()} active={active}>
       <Typography variant={'default'}>{name}</Typography>
-    </MenuItem>
+    </AppBarMenuItem>
   );
 
   return shouldRender ? (

src/AppBar/styledComponents.tsx

@@ -21,7 +21,7 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { withProps } from 'recompose';
 
-import Typography from '../Typography';
+import { Typography } from '../Typography';
 
 const MenuItemTypography: typeof Typography = withProps(() => ({
   variant: 'navigation',

src/Button/Button.test.tsx

@@ -0,0 +1,107 @@
+/*
+ * Copyright (c) 2022 The Ontario Institute for Cancer Research. All rights reserved
+ *
+ * This program and the accompanying materials are made available under the terms of
+ * the GNU Affero General Public License v3.0. You should have received a copy of the
+ * GNU Affero General Public License along with this program.
+ *  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
+ * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT
+ * SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT,
+ * INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED
+ * TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
+ * OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER
+ * IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN
+ * ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+import { fireEvent, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { EventTargetMock } from '../testUtils';
+import { render } from '../testUtil';
+import Button from './index';
+
+const defaultProps = Object.freeze({
+  onClick: jest.fn(),
+  text: 'Test Button',
+});
+
+const getButtonEl = async () => {
+  const buttonChildNode = await screen.findByText(defaultProps.text);
+  const buttonEl = buttonChildNode.closest('button');
+  return buttonEl;
+};
+
+describe('Button', () => {
+  test('should display children', async () => {
+    render(<Button>{defaultProps.text}</Button>);
+    const buttonChildNode = await screen.findByText(defaultProps.text);
+    expect(buttonChildNode).toBeVisible();
+  });
+
+  test('should be disabled when passed disabled prop', async () => {
+    render(<Button disabled={true}>{defaultProps.text}</Button>);
+    const buttonEl = await getButtonEl();
+    expect(buttonEl).toBeDisabled();
+  });
+
+  test('should fire on click function', async () => {
+    const user = userEvent.setup();
+    const onClick = defaultProps.onClick;
+    render(<Button onClick={onClick}>{defaultProps.text}</Button>);
+    const buttonEl = await getButtonEl();
+    if (buttonEl) {
+      await user.click(buttonEl);
+    }
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  test('should recieve focus', async () => {
+    const user = userEvent.setup();
+    const onClick = defaultProps.onClick;
+    render(<Button onClick={onClick}>{defaultProps.text}</Button>);
+    const buttonEl = await getButtonEl();
+    if (buttonEl) {
+      await user.click(buttonEl);
+    }
+    expect(buttonEl).toHaveFocus();
+  });
+
+  test('full event should be passed to handler', async () => {
+    const user = userEvent.setup();
+
+    const eventTargetMock = new EventTargetMock();
+
+    render(<Button onClick={eventTargetMock.handler}>{defaultProps.text}</Button>);
+
+    const buttonEl = await getButtonEl();
+    if (buttonEl) {
+      await user.click(buttonEl);
+    }
+
+    expect(eventTargetMock.handler).toBeCalledTimes(1);
+    expect(buttonEl).toEqual(eventTargetMock.target);
+  });
+
+  test('full event handler should be bubbled to parent', async () => {
+    const user = userEvent.setup();
+
+    const eventTargetMock = new EventTargetMock();
+
+    render(
+      <div onClick={eventTargetMock.handler}>
+        <Button>{defaultProps.text}</Button>
+      </div>,
+    );
+
+    const buttonEl = await getButtonEl();
+    if (buttonEl) {
+      await user.click(buttonEl);
+    }
+
+    expect(eventTargetMock.handler).toBeCalledTimes(1);
+    expect(buttonEl).toEqual(eventTargetMock.target);
+  });
+});

src/Button/GoogleLogin/index.tsx

@@ -17,14 +17,13 @@
  * ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
-import Button from '../index';
-import Icon from '../../Icon';
 import css from '@emotion/css';
-import useTheme from '../../utils/useTheme';
+import styled from '@emotion/styled';
+import React from 'react';
 import urlJoin from 'url-join';
+import { Icon } from '../../Icon';
+import useTheme from '../../utils/useTheme';
+import { Button } from '../index';
 
 /**
  * Social login for Google
@@ -35,7 +34,7 @@ const StyledLink = styled('a')`
   display: inline-block;
 `;
 
-const GoogleLogin: React.ComponentType<{
+export const GoogleLogin: React.ComponentType<{
   id?: string;
   link: string;
   className?: string;
@@ -67,5 +66,3 @@ const GoogleLogin: React.ComponentType<{
     </StyledLink>
   );
 };
-
-export default GoogleLogin;

src/Button/index.tsx

@@ -17,16 +17,15 @@
  * ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-import React from 'react';
 import { css } from '@emotion/core';
-
-import Icon from '../Icon';
+import React from 'react';
+import { Icon } from '../Icon';
 import useTheme from '../utils/useTheme';
-import { BUTTON_VARIANTS, BUTTON_SIZES } from './constants';
-import StyledButton from './styled';
-import { ButtonVariant, ButtonSize } from './types';
+import { BUTTON_SIZES, BUTTON_VARIANTS } from './constants';
+import { StyledButton } from './styled';
+import { ButtonSize, ButtonVariant } from './types';
 
-const Button = React.forwardRef<
+export const Button = React.forwardRef<
   HTMLButtonElement,
   {
     /**
@@ -141,5 +140,3 @@ const DefaultLoader = ({ variant, theme }) => (
     fill={theme.button.textColors[variant].default}
   />
 );
-
-export default Button;

src/Button/styled.tsx

@@ -19,9 +19,9 @@
 
 import { css } from '@emotion/core';
 import styled from '@emotion/styled';
-import FocusWrapper from 'src/FocusWrapper';
+import { FocusWrapper } from 'src/FocusWrapper';
 
-const StyledButton = styled<
+export const StyledButton = styled<
   typeof FocusWrapper,
   {
     size: 'sm' | 'md';
@@ -69,4 +69,3 @@ const StyledButton = styled<
     color: ${({ theme, variant }) => theme.button.textColors[variant].disabled};
   }
 `;
-export default StyledButton;

src/ClipboardCopyField/index.tsx

@@ -17,15 +17,14 @@
  * ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-import React from 'react';
 import { css } from '@emotion/core';
 import styled from '@emotion/styled';
-
-import { StyledInputWrapper, INPUT_STATES, INPUT_SIZES } from 'src/form/common';
-import Button from 'src/Button';
-import Typography from 'src/Typography';
-import Tag, { TAG_VARIANTS } from 'src/Tag';
-import Icon from 'src/Icon';
+import React from 'react';
+import { Button } from 'src/Button';
+import { INPUT_SIZES, INPUT_STATES, StyledInputWrapper } from 'src/form/common';
+import { Icon } from 'src/Icon';
+import { Tag, TAG_VARIANTS } from 'src/Tag';
+import { Typography } from 'src/Typography';
 
 const TagWrapper = styled('div')`
   margin-right: 5px;
@@ -41,7 +40,7 @@ const copyToClipboard = async (data: string) => {
   await navigator.clipboard.writeText(data);
 };
 
-const ClipboardCopyField = ({
+export const ClipboardCopyField = ({
   value,
   buttonText = 'copy',
   disabled = false,
@@ -149,5 +148,3 @@ const ClipboardCopyField = ({
     </div>
   );
 };
-
-export default ClipboardCopyField;