Browse Source

Add basic RoleBadge test example

feature/settings-cleanup
GreatBearShark 11 months ago
parent
commit
8d7229c595
  1. 3
      .eslintrc.json
  2. 14
      config/jest/cssTransform.js
  3. 40
      config/jest/fileTransform.js
  4. 65
      jest.config.js
  5. 17
      package.json
  6. 28
      src/__tests__/RoleBadge.test.tsx
  7. 20
      src/components/RoleBadge.tsx
  8. 20
      src/components/comment-node.tsx
  9. 2
      src/components/post-listing.tsx
  10. 5
      src/setupTests.ts
  11. 4
      tsconfig.json
  12. 2264
      yarn.lock

3
.eslintrc.json

@ -1,7 +1,8 @@
{
"root": true,
"env": {
"browser": true
"browser": true,
"jest": true
},
"plugins": [
"@typescript-eslint",

14
config/jest/cssTransform.js

@ -0,0 +1,14 @@
'use strict';
// This is a custom Jest transformer turning style imports into empty objects.
// http://facebook.github.io/jest/docs/en/webpack.html
module.exports = {
process() {
return 'module.exports = {};';
},
getCacheKey() {
// The output is always the same.
return 'cssTransform';
},
};

40
config/jest/fileTransform.js

@ -0,0 +1,40 @@
'use strict';
const path = require('path');
const camelcase = require('camelcase');
// This is a custom Jest transformer turning file imports into filenames.
// http://facebook.github.io/jest/docs/en/webpack.html
module.exports = {
process(src, filename) {
const assetFilename = JSON.stringify(path.basename(filename));
if (filename.match(/\.svg$/)) {
// Based on how SVGR generates a component name:
// https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
const pascalCaseFilename = camelcase(path.parse(filename).name, {
pascalCase: true,
});
const componentName = `Svg${pascalCaseFilename}`;
return `const React = require('react');
module.exports = {
__esModule: true,
default: ${assetFilename},
ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
return {
$$typeof: Symbol.for('react.element'),
type: 'svg',
ref: ref,
key: null,
props: Object.assign({}, props, {
children: ${assetFilename}
})
};
}),
};`;
}
return `module.exports = ${assetFilename};`;
},
};

65
jest.config.js

@ -1,10 +1,59 @@
// module.exports = {
// preset: 'ts-jest',
// testEnvironment: 'node',
// testTimeout: 30000,
// globals: {
// 'ts-jest': {
// diagnostics: false,
// },
// },
// testPathIgnorePatterns: ["/node_modules/", "/src\/api_tests/"]
// };
module.exports = {
preset: 'ts-jest',
testEnvironment: 'node',
testTimeout: 30000,
globals: {
'ts-jest': {
diagnostics: false,
"roots": [
"<rootDir>/src"
],
"collectCoverageFrom": [
"src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"
],
"setupFiles": [
"react-app-polyfill/jsdom"
],
"setupFilesAfterEnv": [
"<rootDir>/src/setupTests.ts"
],
"testMatch": [
"<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
],
"testEnvironment": "jest-environment-jsdom-fourteen",
"transform": {
"^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
"^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
"^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
},
},
};
"testPathIgnorePatterns": ["/node_modules/", "/src\/api_tests/"],
"transformIgnorePatterns": [
"[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
"^.+\\.module\\.(css|sass|scss)$",
],
"moduleFileExtensions": [
"web.js",
"js",
"web.ts",
"ts",
"web.tsx",
"tsx",
"json",
"web.jsx",
"jsx",
"node"
],
"watchPlugins": [
"jest-watch-typeahead/filename",
"jest-watch-typeahead/testname"
]
}

17
package.json

@ -6,6 +6,7 @@
"license": "AGPL-3.0-or-later",
"scripts": {
"api-test": "jest src/api_tests/api.spec.ts",
"test": "jest",
"build": "node generate_translations.js && tsc --noEmit && NODE_ENV=production vite build --base=/static/",
"lint": "tsc --noEmit && eslint --report-unused-disable-directives --ext .js,.ts,.tsx src",
"start": "node generate_translations.js && vite --port 4444 --open",
@ -29,6 +30,7 @@
"@types/react": "^16.9.44",
"@types/react-dom": "^16.9.8",
"@types/react-router-dom": "^5.1.5",
"@types/testing-library__jest-dom": "^5.9.2",
"@types/theme-ui": "^0.3.6",
"autosize": "^4.0.2",
"body-scroll-lock": "^3.0.3",
@ -39,6 +41,7 @@
"emoji-short-name": "^1.0.0",
"husky": "^4.2.5",
"i18next": "^19.6.3",
"jest": "^26.4.0",
"js-cookie": "^2.2.1",
"jwt-decode": "^2.2.0",
"lodash.isequal": "^4.5.0",
@ -53,6 +56,7 @@
"psl": "^1.8.0",
"qs": "^6.9.4",
"react": "^16.13.1",
"react-app-polyfill": "^1.0.6",
"react-dom": "^16.13.1",
"react-i18next": "^11.7.0",
"react-router-dom": "^5.2.0",
@ -72,15 +76,21 @@
"@babel/core": "^7.11.1",
"@storybook/addon-info": "^5.3.19",
"@storybook/react": "^6.0.12",
"@types/jest": "^26.0.8",
"@testing-library/jest-dom": "^5.11.3",
"@testing-library/react": "^10.4.8",
"@testing-library/user-event": "^12.1.1",
"@types/jest": "^26.0.10",
"@types/node-fetch": "^2.5.7",
"@typescript-eslint/eslint-plugin": "^3.9.0",
"babel-jest": "^26.3.0",
"babel-loader": "^8.1.0",
"babel-preset-react-app": "^9.1.2",
"cssnano": "^4.1.10",
"eslint": "^7.6.0",
"eslint-plugin-inferno": "^7.20.1",
"eslint-plugin-jane": "^8.0.5",
"jest-environment-jsdom-fourteen": "^1.0.1",
"jest-watch-typeahead": "^0.6.0",
"lint-staged": "^10.2.11",
"node-fetch": "^2.6.0",
"react-docgen-typescript-loader": "^3.7.2",
@ -116,5 +126,10 @@
"package.json": [
"sortpack"
]
},
"babel": {
"presets": [
"react-app"
]
}
}

28
src/__tests__/RoleBadge.test.tsx

@ -0,0 +1,28 @@
import React from 'react';
import { render, fireEvent, waitFor, screen } from '@testing-library/react';
import { RoleBadge } from '../components/RoleBadge';
// import { RoleBadge } from '../components/comment-node';
test('<RoleBadge /> to render', async () => {
const { container } = render(
<RoleBadge tooltipText="admin" role="admin">
Admin
</RoleBadge>
);
expect(container).toMatchInlineSnapshot(`
<div>
<div
class="badge badge-light mx-1 comment-badge admin-badge"
data-tippy-content="admin"
>
Admin
</div>
</div>
`);
expect(container).toHaveTextContent('Admin');
expect(container.firstChild).toHaveClass('admin-badge');
expect(container.firstChild).toHaveAttribute('data-tippy-content', 'admin')
});

20
src/components/RoleBadge.tsx

@ -0,0 +1,20 @@
import React from 'react';
export function RoleBadge({
role,
tooltipText,
children,
}: {
role: 'mod' | 'admin' | 'sitemod' | 'creator';
children: any;
tooltipText: string;
}) {
return (
<div
className={`badge badge-light mx-1 comment-badge ${role}-badge`}
data-tippy-content={tooltipText}
>
{children}
</div>
);
}

20
src/components/comment-node.tsx

@ -42,6 +42,7 @@ import { CommunityLink } from './community-link';
import { i18n } from '../i18next';
import { Icon } from './icon';
import { linkEvent } from '../linkEvent';
import { RoleBadge } from './RoleBadge';
interface CommentNodeState {
showReply: boolean;
@ -89,25 +90,6 @@ interface CommentNodeProps {
enableDownvotes: boolean;
}
export function RoleBadge({
role,
tooltipText,
children,
}: {
role: 'mod' | 'admin' | 'sitemod' | 'creator';
children: any;
tooltipText: string;
}) {
return (
<div
className={`badge badge-light mx-1 comment-badge ${role}-badge`}
data-tippy-content={tooltipText}
>
{children}
</div>
);
}
export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
private emptyState: CommentNodeState = {
showReply: false,

2
src/components/post-listing.tsx

@ -40,7 +40,7 @@ import {
} from '../utils';
import { i18n } from '../i18next';
import { Icon } from './icon';
import { RoleBadge } from './comment-node';
import { RoleBadge } from "./RoleBadge";
import { linkEvent } from '../linkEvent';
import { Box, Flex, Heading, Text } from 'theme-ui';
import Button from './elements/Button';

5
src/setupTests.ts

@ -0,0 +1,5 @@
// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom/extend-expect';

4
tsconfig.json

@ -6,7 +6,7 @@
"DOM.Iterable",
"ESNext"
],
"types": ["node"],
"types": ["node", "jest"],
"allowJs": false,
"skipLibCheck": false,
"esModuleInterop": false,
@ -21,7 +21,7 @@
"jsx": "react"
},
"include": [
"src", "public/assets", "types.d.ts"
"src", "public/assets", "types.d.ts", "src/setupTests.ts", "./node_modules/@testing-library/jest-dom/extend-expect.d.ts"
],
"exclude": ["node_modules", "**/*.spec.ts", "src/components/welcome.tsx"]
}

2264
yarn.lock
File diff suppressed because it is too large
View File

Loading…
Cancel
Save