forked from hexbear-collective/hexbear-frontend
12 changed files with 2392 additions and 90 deletions
-
3.eslintrc.json
-
14config/jest/cssTransform.js
-
40config/jest/fileTransform.js
-
65jest.config.js
-
17package.json
-
28src/__tests__/RoleBadge.test.tsx
-
20src/components/RoleBadge.tsx
-
20src/components/comment-node.tsx
-
2src/components/post-listing.tsx
-
5src/setupTests.ts
-
4tsconfig.json
-
2264yarn.lock
@ -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'; |
|||
}, |
|||
}; |
|||
@ -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};`; |
|||
}, |
|||
}; |
|||
@ -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" |
|||
] |
|||
} |
|||
@ -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') |
|||
}); |
|||
@ -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> |
|||
); |
|||
} |
|||
@ -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'; |
|||
2264
yarn.lock
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
Write
Preview
Loading…
Cancel
Save
Reference in new issue