mirror of
https://github.com/iib0011/omni-tools.git
synced 2025-09-13 02:59:35 +02:00
feat: use vite and ts
This commit is contained in:
Ibrahima G. Coulibaly
9
.editorconfig
Normal file
9
.editorconfig
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
root = true
|
||||||
|
|
||||||
|
[*]
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
end_of_line = lf
|
||||||
|
charset = utf-8
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
insert_final_newline = true
|
||||||
41
.eslintrc
Normal file
41
.eslintrc
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
{
|
||||||
|
"env": {
|
||||||
|
"browser": true,
|
||||||
|
"es2020": true,
|
||||||
|
"jest": true,
|
||||||
|
"node": true
|
||||||
|
},
|
||||||
|
"settings": {
|
||||||
|
"react": {
|
||||||
|
"version": "detect"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"extends": [
|
||||||
|
"eslint:recommended",
|
||||||
|
"plugin:react/recommended",
|
||||||
|
"plugin:@typescript-eslint/eslint-recommended",
|
||||||
|
"plugin:@typescript-eslint/recommended",
|
||||||
|
"plugin:prettier/recommended",
|
||||||
|
"plugin:tailwindcss/recommended"
|
||||||
|
],
|
||||||
|
"parser": "@typescript-eslint/parser",
|
||||||
|
"parserOptions": {
|
||||||
|
"ecmaFeatures": {
|
||||||
|
"jsx": true
|
||||||
|
},
|
||||||
|
"ecmaVersion": 11,
|
||||||
|
"sourceType": "module"
|
||||||
|
},
|
||||||
|
"plugins": ["react", "react-hooks", "@typescript-eslint", "tailwindcss"],
|
||||||
|
"rules": {
|
||||||
|
"react-hooks/rules-of-hooks": "error",
|
||||||
|
"react-hooks/exhaustive-deps": "warn",
|
||||||
|
"react/prop-types": "off",
|
||||||
|
"react/react-in-jsx-scope": "off",
|
||||||
|
"@typescript-eslint/explicit-module-boundary-types": "off",
|
||||||
|
"@typescript-eslint/no-non-null-assertion": "off",
|
||||||
|
"tailwindcss/classnames-order": "warn",
|
||||||
|
"tailwindcss/no-custom-classname": "warn",
|
||||||
|
"tailwindcss/no-contradicting-classname": "error"
|
||||||
|
}
|
||||||
|
}
|
||||||
38
.github/ISSUE_TEMPLATE/bug_report.md
vendored
Normal file
38
.github/ISSUE_TEMPLATE/bug_report.md
vendored
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
---
|
||||||
|
name: Bug report
|
||||||
|
about: Create a report to help us improve
|
||||||
|
title: ''
|
||||||
|
labels: ''
|
||||||
|
assignees: ''
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Describe the bug**
|
||||||
|
A clear and concise description of what the bug is.
|
||||||
|
|
||||||
|
**To Reproduce**
|
||||||
|
Steps to reproduce the behavior:
|
||||||
|
1. Go to '...'
|
||||||
|
2. Click on '....'
|
||||||
|
3. Scroll down to '....'
|
||||||
|
4. See error
|
||||||
|
|
||||||
|
**Expected behavior**
|
||||||
|
A clear and concise description of what you expected to happen.
|
||||||
|
|
||||||
|
**Screenshots**
|
||||||
|
If applicable, add screenshots to help explain your problem.
|
||||||
|
|
||||||
|
**Desktop (please complete the following information):**
|
||||||
|
- OS: [e.g. iOS]
|
||||||
|
- Browser [e.g. chrome, safari]
|
||||||
|
- Version [e.g. 22]
|
||||||
|
|
||||||
|
**Smartphone (please complete the following information):**
|
||||||
|
- Device: [e.g. iPhone6]
|
||||||
|
- OS: [e.g. iOS8.1]
|
||||||
|
- Browser [e.g. stock browser, safari]
|
||||||
|
- Version [e.g. 22]
|
||||||
|
|
||||||
|
**Additional context**
|
||||||
|
Add any other context about the problem here.
|
||||||
20
.github/ISSUE_TEMPLATE/feature_request.md
vendored
Normal file
20
.github/ISSUE_TEMPLATE/feature_request.md
vendored
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
---
|
||||||
|
name: Feature request
|
||||||
|
about: Suggest an idea for this project
|
||||||
|
title: ''
|
||||||
|
labels: ''
|
||||||
|
assignees: ''
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
**Is your feature request related to a problem? Please describe.**
|
||||||
|
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
|
||||||
|
|
||||||
|
**Describe the solution you'd like**
|
||||||
|
A clear and concise description of what you want to happen.
|
||||||
|
|
||||||
|
**Describe alternatives you've considered**
|
||||||
|
A clear and concise description of any alternative solutions or features you've considered.
|
||||||
|
|
||||||
|
**Additional context**
|
||||||
|
Add any other context or screenshots about the feature request here.
|
||||||
37
.gitignore
vendored
Normal file
37
.gitignore
vendored
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
/.pnp
|
||||||
|
.pnp.js
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# next.js
|
||||||
|
/.next/
|
||||||
|
/out/
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
*.pem
|
||||||
|
|
||||||
|
# debug
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env
|
||||||
|
.env.local
|
||||||
|
.env.development.local
|
||||||
|
.env.test.local
|
||||||
|
.env.production.local
|
||||||
|
|
||||||
|
# vercel
|
||||||
|
.vercel
|
||||||
5
.prettierrc
Normal file
5
.prettierrc
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"trailingComma": "none",
|
||||||
|
"semi": false,
|
||||||
|
"singleQuote": true
|
||||||
|
}
|
||||||
1
.vitest/setup.ts
Normal file
1
.vitest/setup.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
import '@testing-library/jest-dom/vitest'
|
||||||
8
.vscode/settings.json
vendored
Normal file
8
.vscode/settings.json
vendored
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"editor.codeActionsOnSave": {
|
||||||
|
"source.fixAll.eslint": "explicit"
|
||||||
|
},
|
||||||
|
"files.associations": {
|
||||||
|
"*.css": "tailwindcss"
|
||||||
|
}
|
||||||
|
}
|
||||||
13
index.html
Normal file
13
index.html
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>React 18, TypeScript, Jest, Testing Library, TailwindCSS 3, Vite, Eslint and Prettier boilerplate</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/index.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
6865
package-lock.json
generated
Normal file
6865
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
54
package.json
Normal file
54
package.json
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
{
|
||||||
|
"name": "omni-tools",
|
||||||
|
"description": "This project offers a variety of online tools to help with everyday tasks, \nall available for free and open for community contributions",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"author": {
|
||||||
|
"name": "Ibrahima Gaye Coulibaly",
|
||||||
|
"email": "ibracool99@gmail.com",
|
||||||
|
"url": "https://github.com/iib0011"
|
||||||
|
},
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/iib0011/omni-tools/issues",
|
||||||
|
"email": "ibracool99@gmail.com"
|
||||||
|
},
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc && vite build",
|
||||||
|
"serve": "vite preview",
|
||||||
|
"test": "vitest",
|
||||||
|
"test:ui": "vitest --ui",
|
||||||
|
"lint": "eslint src --max-warnings=0",
|
||||||
|
"typecheck": "tsc --project tsconfig.json --noEmit"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"react": "^18.3.1",
|
||||||
|
"react-dom": "^18.3.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@testing-library/jest-dom": "^6.4.5",
|
||||||
|
"@testing-library/react": "^14.3.1",
|
||||||
|
"@types/node": "^20.12.12",
|
||||||
|
"@types/react": "^18.3.3",
|
||||||
|
"@types/react-dom": "^18.3.0",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^6.21.0",
|
||||||
|
"@typescript-eslint/parser": "^6.21.0",
|
||||||
|
"@vitejs/plugin-react-swc": "^3.7.0",
|
||||||
|
"@vitest/ui": "^1.6.0",
|
||||||
|
"autoprefixer": "^10.4.19",
|
||||||
|
"eslint": "^8.57.0",
|
||||||
|
"eslint-config-prettier": "^9.1.0",
|
||||||
|
"eslint-plugin-prettier": "^5.1.3",
|
||||||
|
"eslint-plugin-react": "^7.34.1",
|
||||||
|
"eslint-plugin-react-hooks": "^4.6.2",
|
||||||
|
"eslint-plugin-tailwindcss": "^3.17.0",
|
||||||
|
"happy-dom": "^12.10.3",
|
||||||
|
"postcss": "^8.4.38",
|
||||||
|
"prettier": "3.1.1",
|
||||||
|
"tailwindcss": "^3.4.3",
|
||||||
|
"typescript": "^5.4.5",
|
||||||
|
"vite": "^5.2.11",
|
||||||
|
"vite-tsconfig-paths": "^4.3.2",
|
||||||
|
"vitest": "^1.6.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
4401
pnpm-lock.yaml
generated
Normal file
4401
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
6
postcss.config.mjs
Normal file
6
postcss.config.mjs
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {}
|
||||||
|
}
|
||||||
|
}
|
||||||
3
public/favicon.svg
Normal file
3
public/favicon.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="410" height="410" viewBox="0 0 410 410" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M205 410C318.218 410 410 318.218 410 205C410 91.7816 318.218 0 205 0C91.7816 0 0 91.7816 0 205C0 318.218 91.7816 410 205 410ZM205 360C290.604 360 360 290.604 360 205C360 119.396 290.604 50 205 50C119.396 50 50 119.396 50 205C50 290.604 119.396 360 205 360Z" fill="#4F46E5" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 434 B |
3
public/robots.txt
Normal file
3
public/robots.txt
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
|
||||||
|
User-Agent: *
|
||||||
|
Allow: /
|
||||||
3
src/assets/logo.svg
Normal file
3
src/assets/logo.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg width="410" height="410" viewBox="0 0 410 410" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" clip-rule="evenodd" d="M205 410C318.218 410 410 318.218 410 205C410 91.7816 318.218 0 205 0C91.7816 0 0 91.7816 0 205C0 318.218 91.7816 410 205 410ZM205 360C290.604 360 360 290.604 360 205C360 119.396 290.604 50 205 50C119.396 50 50 119.396 50 205C50 290.604 119.396 360 205 360Z" fill="#4F46E5" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 434 B |
71
src/components/App.tsx
Normal file
71
src/components/App.tsx
Normal file
@@ -0,0 +1,71 @@
|
|||||||
|
import Avatar from 'components/Avatar'
|
||||||
|
import logo from 'assets/logo.svg'
|
||||||
|
|
||||||
|
const randoms = [
|
||||||
|
[1, 2],
|
||||||
|
[3, 4, 5],
|
||||||
|
[6, 7]
|
||||||
|
]
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
return (
|
||||||
|
<div className="relative overflow-hidden bg-white">
|
||||||
|
<div className="h-screen sm:pb-40 sm:pt-24 lg:pb-48 lg:pt-40">
|
||||||
|
<div className="relative mx-auto max-w-7xl px-4 sm:static sm:px-6 lg:px-8">
|
||||||
|
<div className="sm:max-w-lg">
|
||||||
|
<div className="my-4">
|
||||||
|
<Avatar size="large" src={logo} />
|
||||||
|
</div>
|
||||||
|
<h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
|
||||||
|
Welcome!
|
||||||
|
</h1>
|
||||||
|
<p className="mt-4 text-xl text-gray-500">
|
||||||
|
This is a boilerplate build with Vite, React 18, TypeScript,
|
||||||
|
Vitest, Testing Library, TailwindCSS 3, Eslint and Prettier.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div className="my-10">
|
||||||
|
<a
|
||||||
|
href="vscode://"
|
||||||
|
className="inline-block rounded-md border border-transparent bg-indigo-600 px-8 py-3 text-center font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-700 focus:ring-offset-2"
|
||||||
|
>
|
||||||
|
Start building for free
|
||||||
|
</a>
|
||||||
|
<div
|
||||||
|
aria-hidden="true"
|
||||||
|
className="pointer-events-none mt-10 md:mt-0 lg:absolute lg:inset-y-0 lg:mx-auto lg:w-full lg:max-w-7xl"
|
||||||
|
>
|
||||||
|
<div className="absolute sm:left-1/2 sm:top-0 sm:translate-x-8 lg:left-1/2 lg:top-1/2 lg:-translate-y-1/2 lg:translate-x-8">
|
||||||
|
<div className="flex items-center space-x-6 lg:space-x-8">
|
||||||
|
{randoms.map((random, number) => (
|
||||||
|
<div
|
||||||
|
key={`random-${random[number]}`}
|
||||||
|
className="grid shrink-0 grid-cols-1 gap-y-6 lg:gap-y-8"
|
||||||
|
>
|
||||||
|
{random.map((number) => (
|
||||||
|
<div
|
||||||
|
key={`random-${number}`}
|
||||||
|
className="h-64 w-44 overflow-hidden rounded-lg sm:opacity-0 lg:opacity-100"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={`https://picsum.photos/600?random=${number}`}
|
||||||
|
alt=""
|
||||||
|
className="size-full bg-indigo-100 object-cover object-center"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App
|
||||||
42
src/components/Avatar/__snapshots__/test.tsx.snap
Normal file
42
src/components/Avatar/__snapshots__/test.tsx.snap
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||||
|
|
||||||
|
exports[`<Avatar /> > should render the empty Avatar 1`] = `
|
||||||
|
<span
|
||||||
|
class="inline-block overflow-hidden bg-gray-100 rounded-full w-12 h-12"
|
||||||
|
data-testid="empty-avatar"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="size-full text-gray-300"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`<Avatar /> > should render the large Avatar 1`] = `
|
||||||
|
<img
|
||||||
|
alt="Avatar"
|
||||||
|
class="inline-block rounded-full w-14 h-14"
|
||||||
|
src="https://gravatar.com/4405735f6f3129e0286d9d43e7b460d0"
|
||||||
|
/>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`<Avatar /> > should render the medium Avatar as default 1`] = `
|
||||||
|
<img
|
||||||
|
alt="Avatar"
|
||||||
|
class="inline-block rounded-full w-12 h-12"
|
||||||
|
src="https://gravatar.com/4405735f6f3129e0286d9d43e7b460d0"
|
||||||
|
/>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`<Avatar /> > should render the small Avatar 1`] = `
|
||||||
|
<img
|
||||||
|
alt="Avatar"
|
||||||
|
class="inline-block rounded-full w-10 h-10"
|
||||||
|
src="https://gravatar.com/4405735f6f3129e0286d9d43e7b460d0"
|
||||||
|
/>
|
||||||
|
`;
|
||||||
47
src/components/Avatar/index.tsx
Normal file
47
src/components/Avatar/index.tsx
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
import { classNames } from 'utils'
|
||||||
|
|
||||||
|
type Size = 'small' | 'medium' | 'large'
|
||||||
|
|
||||||
|
type AvatarProps = {
|
||||||
|
size?: Size
|
||||||
|
src?: string
|
||||||
|
alt?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const sizes: Record<Size, string> = {
|
||||||
|
small: 'w-10 h-10',
|
||||||
|
medium: 'w-12 h-12',
|
||||||
|
large: 'w-14 h-14'
|
||||||
|
}
|
||||||
|
|
||||||
|
const EmptyAvatar = ({ size = 'medium' }: Pick<AvatarProps, 'size'>) => (
|
||||||
|
<span
|
||||||
|
data-testid="empty-avatar"
|
||||||
|
className={classNames(
|
||||||
|
'inline-block overflow-hidden bg-gray-100 rounded-full',
|
||||||
|
sizes[size]
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className="size-full text-gray-300"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path d="M24 20.993V24H0v-2.996A14.977 14.977 0 0112.004 15c4.904 0 9.26 2.354 11.996 5.993zM16.002 8.999a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
)
|
||||||
|
|
||||||
|
export default function Avatar({ size = 'medium', src, alt }: AvatarProps) {
|
||||||
|
if (!src) {
|
||||||
|
return <EmptyAvatar size={size} />
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<img
|
||||||
|
className={classNames('inline-block rounded-full', sizes[size])}
|
||||||
|
src={src}
|
||||||
|
alt={alt}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
64
src/components/Avatar/test.tsx
Normal file
64
src/components/Avatar/test.tsx
Normal file
@@ -0,0 +1,64 @@
|
|||||||
|
import { render, screen } from '@testing-library/react'
|
||||||
|
|
||||||
|
import Avatar from '.'
|
||||||
|
|
||||||
|
describe('<Avatar />', () => {
|
||||||
|
const props = {
|
||||||
|
src: 'https://gravatar.com/4405735f6f3129e0286d9d43e7b460d0',
|
||||||
|
alt: 'Avatar'
|
||||||
|
}
|
||||||
|
|
||||||
|
it('should render the medium Avatar as default', () => {
|
||||||
|
const { container } = render(<Avatar {...props} />)
|
||||||
|
|
||||||
|
expect(screen.getByRole('img', { name: /Avatar/i })).toBeInTheDocument()
|
||||||
|
|
||||||
|
expect(container.firstChild).toHaveClass(
|
||||||
|
'inline-block w-12 h-12 rounded-full'
|
||||||
|
)
|
||||||
|
|
||||||
|
expect(container.firstChild).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should render the small Avatar', () => {
|
||||||
|
const { container } = render(<Avatar size="small" {...props} />)
|
||||||
|
|
||||||
|
expect(screen.getByRole('img', { name: /Avatar/i })).toBeInTheDocument()
|
||||||
|
|
||||||
|
expect(container.firstChild).toHaveClass(
|
||||||
|
'inline-block w-10 h-10 rounded-full'
|
||||||
|
)
|
||||||
|
|
||||||
|
expect(container.firstChild).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should render the medium Avatar', () => {
|
||||||
|
const { container } = render(<Avatar size="medium" {...props} />)
|
||||||
|
|
||||||
|
expect(screen.getByRole('img', { name: /Avatar/i })).toBeInTheDocument()
|
||||||
|
|
||||||
|
expect(container.firstChild).toHaveClass(
|
||||||
|
'inline-block w-12 h-12 rounded-full'
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should render the large Avatar', () => {
|
||||||
|
const { container } = render(<Avatar size="large" {...props} />)
|
||||||
|
|
||||||
|
expect(screen.getByRole('img', { name: /Avatar/i })).toBeInTheDocument()
|
||||||
|
|
||||||
|
expect(container.firstChild).toHaveClass(
|
||||||
|
'inline-block w-14 h-14 rounded-full'
|
||||||
|
)
|
||||||
|
|
||||||
|
expect(container.firstChild).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should render the empty Avatar', () => {
|
||||||
|
const { container } = render(<Avatar />)
|
||||||
|
|
||||||
|
expect(screen.getByTestId('empty-avatar')).toBeInTheDocument()
|
||||||
|
|
||||||
|
expect(container.firstChild).toMatchSnapshot()
|
||||||
|
})
|
||||||
|
})
|
||||||
32
src/components/test.tsx
Normal file
32
src/components/test.tsx
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
import { render, screen } from '@testing-library/react'
|
||||||
|
|
||||||
|
import App from './App'
|
||||||
|
|
||||||
|
describe('<App />', () => {
|
||||||
|
it('should render the App', () => {
|
||||||
|
const { container } = render(<App />)
|
||||||
|
|
||||||
|
expect(
|
||||||
|
screen.getByRole('heading', {
|
||||||
|
name: /Welcome!/i,
|
||||||
|
level: 1
|
||||||
|
})
|
||||||
|
).toBeInTheDocument()
|
||||||
|
|
||||||
|
expect(
|
||||||
|
screen.getByText(
|
||||||
|
/This is a boilerplate build with Vite, React 18, TypeScript, Vitest, Testing Library, TailwindCSS 3, Eslint and Prettier./i
|
||||||
|
)
|
||||||
|
).toBeInTheDocument()
|
||||||
|
|
||||||
|
expect(
|
||||||
|
screen.getByRole('link', {
|
||||||
|
name: /start building for free/i
|
||||||
|
})
|
||||||
|
).toBeInTheDocument()
|
||||||
|
|
||||||
|
expect(screen.getByRole('img')).toBeInTheDocument()
|
||||||
|
|
||||||
|
expect(container.firstChild).toBeInTheDocument()
|
||||||
|
})
|
||||||
|
})
|
||||||
8
src/index.tsx
Normal file
8
src/index.tsx
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
import { createRoot } from 'react-dom/client'
|
||||||
|
import 'tailwindcss/tailwind.css'
|
||||||
|
import App from 'components/App'
|
||||||
|
|
||||||
|
const container = document.getElementById('root') as HTMLDivElement
|
||||||
|
const root = createRoot(container)
|
||||||
|
|
||||||
|
root.render(<App />)
|
||||||
3
src/utils/index.ts
Normal file
3
src/utils/index.ts
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
export function classNames(...classes: unknown[]): string {
|
||||||
|
return classes.filter(Boolean).join(' ')
|
||||||
|
}
|
||||||
9
tailwind.config.mjs
Normal file
9
tailwind.config.mjs
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
|
||||||
|
export default {
|
||||||
|
content: ['./src/**/*.{mjs,js,ts,jsx,tsx}'],
|
||||||
|
theme: {
|
||||||
|
extend: {}
|
||||||
|
},
|
||||||
|
plugins: []
|
||||||
|
}
|
||||||
22
tsconfig.json
Normal file
22
tsconfig.json
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": "./src",
|
||||||
|
"target": "esnext",
|
||||||
|
"lib": ["dom", "dom.iterable", "esnext"],
|
||||||
|
"allowJs": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"strict": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"types": ["vite/client", "vitest/globals", "@testing-library/jest-dom"]
|
||||||
|
},
|
||||||
|
"include": ["src"],
|
||||||
|
"exclude": ["node_modules"]
|
||||||
|
}
|
||||||
15
vite.config.ts
Normal file
15
vite.config.ts
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
/// <reference types="vitest" />
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react-swc'
|
||||||
|
import tsconfigPaths from 'vite-tsconfig-paths'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config https://vitest.dev/config
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react(), tsconfigPaths()],
|
||||||
|
test: {
|
||||||
|
globals: true,
|
||||||
|
environment: 'happy-dom',
|
||||||
|
setupFiles: '.vitest/setup',
|
||||||
|
include: ['**/test.{ts,tsx}']
|
||||||
|
}
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user