From b03074ecee40c7decfe02e258fe2595ae6e5755d Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Mon, 15 Apr 2019 23:30:35 +0200 Subject: [PATCH] fix test --- README.md | 14 ++++++-- client/src/App.test.tsx | 11 ++++--- .../components/atoms/CategoryImage.test.tsx | 33 +++++++++++++++++++ client/src/components/atoms/CategoryImage.tsx | 1 + client/src/components/atoms/Form/Input.tsx | 2 +- .../src/components/molecules/Pagination.tsx | 6 ++-- package.json | 1 + server/package.json | 2 +- 8 files changed, 58 insertions(+), 12 deletions(-) create mode 100644 client/src/components/atoms/CategoryImage.test.tsx diff --git a/README.md b/README.md index 50b9c62..12122f7 100644 --- a/README.md +++ b/README.md @@ -79,10 +79,20 @@ To run all tests, including all linting tests: npm test ``` -For local development, you can start the test runner in interactive watch mode: +For local development, you can start the test runners for client & server in a watch mode. ```bash -npm test:watch +npm run test:watch +``` + +This will work for daily development but it misses the full interactivity of the test runner. If you need that, you will need to run them in individual terminal sessions: + +```bash +cd client/ +npm run test:watch + +cd server/ +npm run test:watch ``` ## ✨ Code Style diff --git a/client/src/App.test.tsx b/client/src/App.test.tsx index fe9b671..fa6de58 100644 --- a/client/src/App.test.tsx +++ b/client/src/App.test.tsx @@ -1,9 +1,10 @@ import React from 'react' -import ReactDOM from 'react-dom' +import { render } from 'react-testing-library' import App from './App' -it('renders without crashing', () => { - const div = document.createElement('div') - ReactDOM.render(, div) - ReactDOM.unmountComponentAtNode(div) +describe('App', () => { + it('renders without crashing', () => { + const { container } = render() + expect(container.firstChild).toBeInTheDocument() + }) }) diff --git a/client/src/components/atoms/CategoryImage.test.tsx b/client/src/components/atoms/CategoryImage.test.tsx new file mode 100644 index 0000000..8e9fca4 --- /dev/null +++ b/client/src/components/atoms/CategoryImage.test.tsx @@ -0,0 +1,33 @@ +import React from 'react' +import { render } from 'react-testing-library' +import slugify from 'slugify' +import CategoryImage from './CategoryImage' +import formPublish from '../../data/form-publish.json' + +describe('CategoryImage', () => { + it('renders fallback image', () => { + const { container, getByTestId } = render( + + ) + expect(container.firstChild).toBeInTheDocument() + expect(getByTestId('image').style.backgroundImage).toMatch( + /jellyfish-back/ + ) + }) + + it('renders all the category images', () => { + const { options } = formPublish.steps[1].fields + ? formPublish.steps[1].fields.categories + : [] + + options.map((category: string) => { + const { getByTestId } = render( + + ) + expect(getByTestId('image')).toBeInTheDocument() + // expect(getByTestId('image').style.backgroundImage).toMatch( + // slugify(category, { lower: true }) + // ) + }) + }) +}) diff --git a/client/src/components/atoms/CategoryImage.tsx b/client/src/components/atoms/CategoryImage.tsx index a02df06..52c77c4 100644 --- a/client/src/components/atoms/CategoryImage.tsx +++ b/client/src/components/atoms/CategoryImage.tsx @@ -148,6 +148,7 @@ export default class CategoryImage extends PureComponent<{ category: string }> { style={{ backgroundImage: `url(${image})` }} + {...this.props} /> ) } diff --git a/client/src/components/atoms/Form/Input.tsx b/client/src/components/atoms/Form/Input.tsx index 74dd26d..047d32f 100644 --- a/client/src/components/atoms/Form/Input.tsx +++ b/client/src/components/atoms/Form/Input.tsx @@ -70,7 +70,7 @@ export default class Input extends PureComponent { value: date } } - this.props.onChange!(event as any) + this.props.onChange!(event as any) // eslint-disable-line @typescript-eslint/no-non-null-assertion } public InputComponent = () => { diff --git a/client/src/components/molecules/Pagination.tsx b/client/src/components/molecules/Pagination.tsx index bf5c3a2..235da30 100644 --- a/client/src/components/molecules/Pagination.tsx +++ b/client/src/components/molecules/Pagination.tsx @@ -17,17 +17,17 @@ export default class Pagination extends PureComponent< PaginationState > { public state = { smallViewport: true } - private mq = matchMedia && window.matchMedia('(min-width: 600px)') + private mq = window.matchMedia && window.matchMedia('(min-width: 600px)') public componentDidMount() { - if (matchMedia) { + if (window.matchMedia) { this.mq.addListener(this.viewportChange) this.viewportChange(this.mq) } } public componentWillUnmount() { - if (matchMedia) { + if (window.matchMedia) { this.mq.removeListener(this.viewportChange) } } diff --git a/package.json b/package.json index 6a184e2..1a9d95b 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "start": "concurrently \"cd client && npm start\" \"cd server && npm start\"", "build": "./scripts/build.sh", "test": "npm run lint && scripts/test.sh", + "test:watch": "npm run lint && concurrently \"cd client && npm run test:watch\" \"cd server && npm run test:watch\"", "format:js": "prettier --parser typescript --write '**/*.{js,jsx,ts,tsx}'", "format:css": "prettier-stylelint --ignore-path .gitignore --write --quiet '**/*.{css,scss}'", "format": "npm run format:js && npm run format:css", diff --git a/server/package.json b/server/package.json index 655a3de..abfe96b 100644 --- a/server/package.json +++ b/server/package.json @@ -9,7 +9,7 @@ "serve": "node dist/server.js", "build": "tsc", "test": "jest --coverage", - "test-watch": "npm run test --watchAll" + "test:watch": "jest --coverage --watch" }, "dependencies": { "body-parser": "^1.18.3",