From dc49db8da904b64bac184b9ab3435c7ff05f6abb Mon Sep 17 00:00:00 2001 From: Dan Morgan Date: Sat, 28 Nov 2020 17:03:12 -0500 Subject: [PATCH 1/3] Ts button w tests --- .vscode/settings.json | 3 ++ package.json | 5 +-- src/components/button.jsx | 46 ------------------------- src/components/button.test.tsx | 58 ++++++++++++++++++++++++++++++++ src/components/button.tsx | 61 ++++++++++++++++++++++++++++++++++ yarn.lock | 34 +++++++++++++++++-- 6 files changed, 157 insertions(+), 50 deletions(-) create mode 100644 .vscode/settings.json delete mode 100644 src/components/button.jsx create mode 100644 src/components/button.test.tsx create mode 100644 src/components/button.tsx diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..3662b37 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "typescript.tsdk": "node_modules/typescript/lib" +} \ No newline at end of file diff --git a/package.json b/package.json index 7b93440..f432934 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "@types/node": "^12.0.0", "@types/react": "^16.9.53", "@types/react-dom": "^16.9.8", + "@types/react-router-dom": "^5.1.6", "classnames": "^2.2.6", "csvtojson": "^2.0.10", "date-fns": "^2.16.1", @@ -25,8 +26,8 @@ "react-dom": "^17.0.1", "react-dropzone": "^11.2.4", "react-router-dom": "^5.2.0", - "react-scripts": "4.0.1", - "typescript": "^4.0.3", + "react-scripts": "^4.0.1", + "typescript": "^4.1.2", "web-vitals": "^0.2.4" }, "scripts": { diff --git a/src/components/button.jsx b/src/components/button.jsx deleted file mode 100644 index 9a5a180..0000000 --- a/src/components/button.jsx +++ /dev/null @@ -1,46 +0,0 @@ -import React from "react"; -import cx from "classnames"; -import { Link } from "react-router-dom"; -import styles from "./button.module.scss"; - -export function Button({ - as = "button", - href = undefined, - to = undefined, - className = undefined, - appearance = "primary", - size = undefined, - theme = "light", - ...props -}) { - let Element = as; - if (to) Element = Link; - if (href) Element = "a"; - return ( - - ); -} - -function Group({ as: Element = "div", className, ...props }) { - return ( - - ); -} - -Button.Group = Group; diff --git a/src/components/button.test.tsx b/src/components/button.test.tsx new file mode 100644 index 0000000..ba25343 --- /dev/null +++ b/src/components/button.test.tsx @@ -0,0 +1,58 @@ +import { render } from '@testing-library/react'; +import { MemoryRouter as Router } from 'react-router-dom'; +import { Button } from './button'; + +const LABELS = { children: 'hello' }; + +test('renders ); + expect(getByText(LABELS.children)).toBeInTheDocument(); +}); + +test('renders as custom element with `as` prop', () => { + const element = 'span'; + const { getByText } = render(); + expect(getByText(LABELS.children).nodeName).toEqual(element.toUpperCase()); +}); + +test('renders as Link with `to` prop', () => { + const element = 'a'; + const { getByText } = render( + + + + ); + expect(getByText(LABELS.children).nodeName).toEqual(element.toUpperCase()); +}); + +test('renders as anchor with `href` prop', () => { + const element = 'a'; + const { getByText } = render( + + + + ); + expect(getByText(LABELS.children).nodeName).toEqual(element.toUpperCase()); +}); + +describe('', () => { + test('renders with required props', () => { + const { getByText } = render( + + + + + + ); + expect(getByText(LABELS.children)).toBeInTheDocument(); + }); + test('renders custom element with `as` prop', () => { + const element = 'span'; + const { getByText } = render( + + + + ); + expect(getByText(LABELS.children).nodeName).toEqual(element.toUpperCase()); + }); +}); diff --git a/src/components/button.tsx b/src/components/button.tsx new file mode 100644 index 0000000..fab533a --- /dev/null +++ b/src/components/button.tsx @@ -0,0 +1,61 @@ +import cx from 'classnames'; +import { Link } from 'react-router-dom'; +import styles from './button.module.scss'; + +interface ButtonProps { + as?: any; + href?: string; + to?: string; + className?: string; + appearance?: 'primary' | 'secondary' | 'ghost'; + size?: 'small' | 'large'; + theme?: 'light' | 'dark'; + [props: string]: any; +} + +export function Button({ + href, + to, + className, + size, + as = 'button', + appearance = 'primary', + theme = 'light', + ...props +}: ButtonProps) { + let Element = as; + if (to) Element = Link; + if (href) Element = 'a'; + return ( + + ); +} + +interface ButtonGroupProps { + as: any; + className?: string; + [props: string]: any; +} + +function Group({ as: Element = 'div', className, ...props }: ButtonGroupProps) { + return ( + + ); +} + +Button.Group = Group; diff --git a/yarn.lock b/yarn.lock index 0c7a187..37bdbb9 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1953,6 +1953,11 @@ dependencies: "@types/node" "*" +"@types/history@*": + version "4.7.8" + resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.8.tgz#49348387983075705fe8f4e02fb67f7daaec4934" + integrity sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA== + "@types/html-minifier-terser@^5.0.0": version "5.1.1" resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz#3c9ee980f1a10d6021ae6632ca3e79ca2ec4fb50" @@ -2047,6 +2052,31 @@ dependencies: "@types/react" "^16" +"@types/react-router-dom@^5.1.6": + version "5.1.6" + resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.6.tgz#07b14e7ab1893a837c8565634960dc398564b1fb" + integrity sha512-gjrxYqxz37zWEdMVvQtWPFMFj1dRDb4TGOcgyOfSXTrEXdF92L00WE3C471O3TV/RF1oskcStkXsOU0Ete4s/g== + dependencies: + "@types/history" "*" + "@types/react" "*" + "@types/react-router" "*" + +"@types/react-router@*": + version "5.1.8" + resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.8.tgz#4614e5ba7559657438e17766bb95ef6ed6acc3fa" + integrity sha512-HzOyJb+wFmyEhyfp4D4NYrumi+LQgQL/68HvJO+q6XtuHSDvw6Aqov7sCAhjbNq3bUPgPqbdvjXC5HeB2oEAPg== + dependencies: + "@types/history" "*" + "@types/react" "*" + +"@types/react@*": + version "17.0.0" + resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.0.tgz#5af3eb7fad2807092f0046a1302b7823e27919b8" + integrity sha512-aj/L7RIMsRlWML3YB6KZiXB3fV2t41+5RBGYF8z+tAKU43Px8C3cYUZsDvf1/+Bm4FK21QWBrDutu8ZJ/70qOw== + dependencies: + "@types/prop-types" "*" + csstype "^3.0.2" + "@types/react@^16", "@types/react@^16.9.53": version "16.14.2" resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.2.tgz#85dcc0947d0645349923c04ccef6018a1ab7538c" @@ -10215,7 +10245,7 @@ react-router@5.2.0: tiny-invariant "^1.0.2" tiny-warning "^1.0.0" -react-scripts@4.0.1: +react-scripts@^4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-4.0.1.tgz#34974c0f4cfdf1655906c95df6a04d80db8b88f0" integrity sha512-NnniMSC/wjwhcJAyPJCWtxx6CWONqgvGgV9+QXj1bwoW/JI++YF1eEf3Upf/mQ9KmP57IBdjzWs1XvnPq7qMTQ== @@ -12150,7 +12180,7 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c= -typescript@^4.0.3: +typescript@^4.1.2: version "4.1.2" resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.1.2.tgz#6369ef22516fe5e10304aae5a5c4862db55380e9" integrity sha512-thGloWsGH3SOxv1SoY7QojKi0tc+8FnOmiarEGMbd/lar7QOEd3hvlx3Fp5y6FlDUGl9L+pd4n2e+oToGMmhRQ== From 2c19ba4d10f057b6f945bb07d3525cba54c293aa Mon Sep 17 00:00:00 2001 From: Dan Morgan Date: Sat, 28 Nov 2020 17:18:46 -0500 Subject: [PATCH 2/3] asdf --- src/components/button.test.tsx | 11 ++++++----- src/components/button.tsx | 2 +- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/src/components/button.test.tsx b/src/components/button.test.tsx index ba25343..6be41dc 100644 --- a/src/components/button.test.tsx +++ b/src/components/button.test.tsx @@ -46,13 +46,14 @@ describe('', () => { ); expect(getByText(LABELS.children)).toBeInTheDocument(); }); - test('renders custom element with `as` prop', () => { + test.skip('renders custom element with `as` prop', () => { const element = 'span'; - const { getByText } = render( - - + const { getByRole, debug } = render( + + ); - expect(getByText(LABELS.children).nodeName).toEqual(element.toUpperCase()); + debug(); + expect(getByRole('group')).toEqual(element.toUpperCase()); }); }); diff --git a/src/components/button.tsx b/src/components/button.tsx index fab533a..45223ff 100644 --- a/src/components/button.tsx +++ b/src/components/button.tsx @@ -47,7 +47,7 @@ export function Button({ } interface ButtonGroupProps { - as: any; + as?: any; className?: string; [props: string]: any; } From fcc68117e4ccd36d6af471cb20995c3710cbaf17 Mon Sep 17 00:00:00 2001 From: Dan Morgan Date: Sat, 28 Nov 2020 17:23:10 -0500 Subject: [PATCH 3/3] oh ok then, it works again --- src/components/button.test.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/components/button.test.tsx b/src/components/button.test.tsx index 6be41dc..6d38d1f 100644 --- a/src/components/button.test.tsx +++ b/src/components/button.test.tsx @@ -1,4 +1,5 @@ import { render } from '@testing-library/react'; +import { debug } from 'console'; import { MemoryRouter as Router } from 'react-router-dom'; import { Button } from './button'; @@ -46,14 +47,17 @@ describe('', () => { ); expect(getByText(LABELS.children)).toBeInTheDocument(); }); - test.skip('renders custom element with `as` prop', () => { + + // skipped, i don't know why this throws for a jest worker error :shrug: + test('renders custom element with `as` prop', () => { const element = 'span'; - const { getByRole, debug } = render( + const { getByRole } = render( - + + + ); - debug(); - expect(getByRole('group')).toEqual(element.toUpperCase()); + expect(getByRole('group').nodeName).toEqual(element.toUpperCase()); }); });