mirror of
https://github.com/Nezumi-2711/react-training.git
synced 2026-09-22 05:32:07 +00:00
Merge pull request #33 from Nez27/feat/unit-test-for-components
Add unit test for all components
This commit is contained in:
Loi Phan
@@ -12,6 +12,7 @@ dist
|
||||
dist-ssr
|
||||
*.local
|
||||
.vscode
|
||||
coverage
|
||||
|
||||
src/db.json
|
||||
|
||||
|
||||
@@ -1,11 +1,20 @@
|
||||
export default {
|
||||
testEnvironment: "jsdom",
|
||||
testEnvironment: 'jsdom',
|
||||
transform: {
|
||||
"^.+\\.tsx?$": "ts-jest",
|
||||
'^.+\\.tsx?$': 'ts-jest',
|
||||
},
|
||||
moduleNameMapper: {
|
||||
"\\.(gif|ttf|eot|svg|png)$": "<rootDir>/test/__mocks__/fileMock.ts",
|
||||
"\\.(css|less|sass|scss)$": "identity-obj-proxy",
|
||||
'\\.(gif|ttf|eot|svg|png)$': '<rootDir>/test/__mocks__/fileMock.ts',
|
||||
'\\.(css|less|sass|scss)$': 'identity-obj-proxy',
|
||||
'@service/(.*)': ['<rootDir>/src/services/$1'],
|
||||
'@constant/(.*)': ['<rootDir>/src/constants/$1'],
|
||||
'@hook/(.*)': ['<rootDir>/src/hooks/$1'],
|
||||
'@helper/(.*)': ['<rootDir>/src/helpers/$1'],
|
||||
'@context/(.*)': ['<rootDir>/src/contexts/$1'],
|
||||
'@component/(.*)': ['<rootDir>/src/components/$1'],
|
||||
'@commonStyle/(.*)': ['<rootDir>/src/commons/styles/$1'],
|
||||
'@type/(.*)': ['<rootDir>/src/types/$1'],
|
||||
'@page/(.*)': ['<rootDir>/src/pages/$1'],
|
||||
},
|
||||
setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
|
||||
};
|
||||
|
||||
@@ -10,16 +10,21 @@
|
||||
"preview": "vite preview",
|
||||
"test": "jest"
|
||||
},
|
||||
"coverageReporters": [
|
||||
"html"
|
||||
],
|
||||
"dependencies": {
|
||||
"@emotion/is-prop-valid": "^1.2.1",
|
||||
"@supabase/supabase-js": "^2.38.4",
|
||||
"@tanstack/react-query": "^5.8.4",
|
||||
"@types/react-test-renderer": "^18.0.6",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-hook-form": "^7.47.0",
|
||||
"react-hot-toast": "^2.4.1",
|
||||
"react-icons": "^4.11.0",
|
||||
"react-router-dom": "^6.17.0",
|
||||
"react-test-renderer": "^18.2.0",
|
||||
"styled-components": "^6.1.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
Generated
+38
-4
@@ -14,6 +14,9 @@ dependencies:
|
||||
'@tanstack/react-query':
|
||||
specifier: ^5.8.4
|
||||
version: 5.8.4(react-dom@18.2.0)(react@18.2.0)
|
||||
'@types/react-test-renderer':
|
||||
specifier: ^18.0.6
|
||||
version: 18.0.6
|
||||
react:
|
||||
specifier: ^18.2.0
|
||||
version: 18.2.0
|
||||
@@ -32,6 +35,9 @@ dependencies:
|
||||
react-router-dom:
|
||||
specifier: ^6.17.0
|
||||
version: 6.17.0(react-dom@18.2.0)(react@18.2.0)
|
||||
react-test-renderer:
|
||||
specifier: ^18.2.0
|
||||
version: 18.2.0(react@18.2.0)
|
||||
styled-components:
|
||||
specifier: ^6.1.0
|
||||
version: 6.1.0(react-dom@18.2.0)(react@18.2.0)
|
||||
@@ -1313,7 +1319,6 @@ packages:
|
||||
|
||||
/@types/prop-types@15.7.9:
|
||||
resolution: {integrity: sha512-n1yyPsugYNSmHgxDFjicaI2+gCNjsBck8UX9kuofAKlc0h1bL+20oSF72KeNaW2DUlesbEVCFgyV2dPGTiY42g==}
|
||||
dev: true
|
||||
|
||||
/@types/react-dom@18.2.14:
|
||||
resolution: {integrity: sha512-V835xgdSVmyQmI1KLV2BEIUgqEuinxp9O4G6g3FqO/SqLac049E53aysv0oEFD2kHfejeKU+ZqL2bcFWj9gLAQ==}
|
||||
@@ -1321,17 +1326,21 @@ packages:
|
||||
'@types/react': 18.2.29
|
||||
dev: true
|
||||
|
||||
/@types/react-test-renderer@18.0.6:
|
||||
resolution: {integrity: sha512-O2JT1J3/v/NaYHYmPf2DXBSqUGmp6iwhFPicES6Pc1Y90B9Qgu99mmaBGqfZFpVuXLzF/pNJB4K9ySL3iqFeXA==}
|
||||
dependencies:
|
||||
'@types/react': 18.2.29
|
||||
dev: false
|
||||
|
||||
/@types/react@18.2.29:
|
||||
resolution: {integrity: sha512-Z+ZrIRocWtdD70j45izShRwDuiB4JZqDegqMFW/I8aG5DxxLKOzVNoq62UIO82v9bdgi+DO1jvsb9sTEZUSm+Q==}
|
||||
dependencies:
|
||||
'@types/prop-types': 15.7.9
|
||||
'@types/scheduler': 0.16.5
|
||||
csstype: 3.1.2
|
||||
dev: true
|
||||
|
||||
/@types/scheduler@0.16.5:
|
||||
resolution: {integrity: sha512-s/FPdYRmZR8SjLWGMCuax7r3qCWQw9QKHzXVukAuuIJkXkDRwp+Pu5LMIVFi0Fxbav35WURicYr8u1QsoybnQw==}
|
||||
dev: true
|
||||
|
||||
/@types/semver@7.5.3:
|
||||
resolution: {integrity: sha512-OxepLK9EuNEIPxWNME+C6WwbRAOOI2o2BaQEGzz5Lu2e4Z5eDnEo+/aVEDMIXywoJitJ7xWd641wrGLZdtwRyw==}
|
||||
@@ -3706,6 +3715,11 @@ packages:
|
||||
resolution: {integrity: sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==}
|
||||
dev: true
|
||||
|
||||
/object-assign@4.1.1:
|
||||
resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
dev: false
|
||||
|
||||
/object-inspect@1.13.1:
|
||||
resolution: {integrity: sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==}
|
||||
dev: true
|
||||
@@ -3968,7 +3982,6 @@ packages:
|
||||
|
||||
/react-is@18.2.0:
|
||||
resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
|
||||
dev: true
|
||||
|
||||
/react-refresh@0.14.0:
|
||||
resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==}
|
||||
@@ -3998,6 +4011,27 @@ packages:
|
||||
react: 18.2.0
|
||||
dev: false
|
||||
|
||||
/react-shallow-renderer@16.15.0(react@18.2.0):
|
||||
resolution: {integrity: sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==}
|
||||
peerDependencies:
|
||||
react: ^16.0.0 || ^17.0.0 || ^18.0.0
|
||||
dependencies:
|
||||
object-assign: 4.1.1
|
||||
react: 18.2.0
|
||||
react-is: 18.2.0
|
||||
dev: false
|
||||
|
||||
/react-test-renderer@18.2.0(react@18.2.0):
|
||||
resolution: {integrity: sha512-JWD+aQ0lh2gvh4NM3bBM42Kx+XybOxCpgYK7F8ugAlpaTSnWsX+39Z4XkOykGZAHrjwwTZT3x3KxswVWxHPUqA==}
|
||||
peerDependencies:
|
||||
react: ^18.2.0
|
||||
dependencies:
|
||||
react: 18.2.0
|
||||
react-is: 18.2.0
|
||||
react-shallow-renderer: 16.15.0(react@18.2.0)
|
||||
scheduler: 0.23.0
|
||||
dev: false
|
||||
|
||||
/react@18.2.0:
|
||||
resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
import renderer from 'react-test-renderer';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
|
||||
// Components
|
||||
import AppLayout from '.';
|
||||
|
||||
describe('AppLayout', () => {
|
||||
const wrapper = renderer.create(
|
||||
<BrowserRouter>
|
||||
<AppLayout />
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
test('Should render correctly', () => {
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,207 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`AppLayout Should render correctly 1`] = `
|
||||
<div
|
||||
className="sc-iCoHzw jFLeHb"
|
||||
>
|
||||
<header
|
||||
className="sc-dlniIP cClxoS"
|
||||
>
|
||||
<p>
|
||||
Hi,
|
||||
Admin
|
||||
!
|
||||
</p>
|
||||
<ul
|
||||
className="sc-gtsqUy gOWXQs"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
className="sc-bdnyFh bxHnoO"
|
||||
iconStyle={
|
||||
{
|
||||
"size": "23px",
|
||||
}
|
||||
}
|
||||
isHaveChildren={false}
|
||||
style={
|
||||
{
|
||||
"backgroundColor": undefined,
|
||||
"color": undefined,
|
||||
"fontSize": undefined,
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
stroke="currentColor"
|
||||
strokeWidth="0"
|
||||
style={
|
||||
{
|
||||
"color": undefined,
|
||||
}
|
||||
}
|
||||
viewBox="0 0 512 512"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M258.9 48C141.92 46.42 46.42 141.92 48 258.9c1.56 112.19 92.91 203.54 205.1 205.1 117 1.6 212.48-93.9 210.88-210.88C462.44 140.91 371.09 49.56 258.9 48zm126.42 327.25a4 4 0 01-6.14-.32 124.27 124.27 0 00-32.35-29.59C321.37 329 289.11 320 256 320s-65.37 9-90.83 25.34a124.24 124.24 0 00-32.35 29.58 4 4 0 01-6.14.32A175.32 175.32 0 0180 259c-1.63-97.31 78.22-178.76 175.57-179S432 158.81 432 256a175.32 175.32 0 01-46.68 119.25z"
|
||||
/>
|
||||
<path
|
||||
d="M256 144c-19.72 0-37.55 7.39-50.22 20.82s-19 32-17.57 51.93C191.11 256 221.52 288 256 288s64.83-32 67.79-71.24c1.48-19.74-4.8-38.14-17.68-51.82C293.39 151.44 275.59 144 256 144z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
className="sc-bdnyFh bxHnoO"
|
||||
iconStyle={
|
||||
{
|
||||
"size": "23px",
|
||||
}
|
||||
}
|
||||
isHaveChildren={false}
|
||||
style={
|
||||
{
|
||||
"backgroundColor": undefined,
|
||||
"color": undefined,
|
||||
"fontSize": undefined,
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
height="1em"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
style={
|
||||
{
|
||||
"color": undefined,
|
||||
}
|
||||
}
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
<aside
|
||||
className="sc-jSFipO ejTmsl"
|
||||
>
|
||||
<h1
|
||||
className="sc-gKAaef hNxcoF"
|
||||
>
|
||||
Hotel Management
|
||||
</h1>
|
||||
<nav
|
||||
className="sc-hKFymg eIMPQI"
|
||||
>
|
||||
<a
|
||||
className="sc-eCAqax hQZHUY"
|
||||
href="/dashboard"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
stroke="currentColor"
|
||||
strokeWidth="0"
|
||||
style={
|
||||
{
|
||||
"color": undefined,
|
||||
}
|
||||
}
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M0 0h24v24H0z"
|
||||
fill="none"
|
||||
/>
|
||||
<path
|
||||
d="M11 21H5c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h6v18zm2 0h6c1.1 0 2-.9 2-2v-7h-8v9zm8-11V5c0-1.1-.9-2-2-2h-6v7h8z"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
Dashboard
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
className="sc-eCAqax hQZHUY"
|
||||
href="/user"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
stroke="currentColor"
|
||||
strokeWidth="0"
|
||||
style={
|
||||
{
|
||||
"color": undefined,
|
||||
}
|
||||
}
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M4.5 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM14.25 8.625a3.375 3.375 0 116.75 0 3.375 3.375 0 01-6.75 0zM1.5 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM17.25 19.128l-.001.144a2.25 2.25 0 01-.233.96 10.088 10.088 0 005.06-1.01.75.75 0 00.42-.643 4.875 4.875 0 00-6.957-4.611 8.586 8.586 0 011.71 5.157v.003z"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
User
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
className="sc-eCAqax hQZHUY"
|
||||
href="/room"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
stroke="currentColor"
|
||||
strokeWidth="0"
|
||||
style={
|
||||
{
|
||||
"color": undefined,
|
||||
}
|
||||
}
|
||||
viewBox="0 0 16 16"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
Room
|
||||
</span>
|
||||
</a>
|
||||
</nav>
|
||||
</aside>
|
||||
<main
|
||||
className="sc-fujznN cdRedX"
|
||||
/>
|
||||
</div>
|
||||
`;
|
||||
@@ -0,0 +1,19 @@
|
||||
import renderer from 'react-test-renderer';
|
||||
|
||||
// Components
|
||||
import ButtonIcon from '.';
|
||||
import { HiOutlineLogout } from 'react-icons/hi';
|
||||
|
||||
describe('ButtonIcon', () => {
|
||||
const wrapper = renderer.create(
|
||||
<ButtonIcon
|
||||
aria-label="Logout"
|
||||
icon={<HiOutlineLogout />}
|
||||
iconStyle={{ size: '23px' }}
|
||||
/>
|
||||
);
|
||||
|
||||
test('Should render correctly', () => {
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,44 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`ButtonIcon Should render correctly 1`] = `
|
||||
<button
|
||||
className="sc-bdnyFh bxHnoO"
|
||||
iconStyle={
|
||||
{
|
||||
"size": "23px",
|
||||
}
|
||||
}
|
||||
isHaveChildren={false}
|
||||
style={
|
||||
{
|
||||
"backgroundColor": undefined,
|
||||
"color": undefined,
|
||||
"fontSize": undefined,
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
height="1em"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
style={
|
||||
{
|
||||
"color": undefined,
|
||||
}
|
||||
}
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span />
|
||||
</button>
|
||||
`;
|
||||
@@ -0,0 +1,22 @@
|
||||
import renderer from 'react-test-renderer';
|
||||
|
||||
// Components
|
||||
import ConfirmMessage from '.';
|
||||
|
||||
describe('ConfirmMessage', () => {
|
||||
const isDisable = true;
|
||||
const message = 'Hello World!';
|
||||
const handleOnConfirm = jest.fn();
|
||||
|
||||
const wrapper = renderer.create(
|
||||
<ConfirmMessage
|
||||
disabled={isDisable}
|
||||
message={message}
|
||||
onConfirm={handleOnConfirm}
|
||||
/>
|
||||
);
|
||||
|
||||
test('Should render correctly', () => {
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
+28
@@ -0,0 +1,28 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`ConfirmMessage Should render correctly 1`] = `
|
||||
<div
|
||||
className="sc-bdnyFh dukbvo"
|
||||
>
|
||||
<p>
|
||||
Hello World!
|
||||
</p>
|
||||
<div>
|
||||
<button
|
||||
className="sc-gtsqUy eZzwwl"
|
||||
disabled={true}
|
||||
onClick={[MockFunction]}
|
||||
variations="danger"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
<button
|
||||
className="sc-gtsqUy JDRgw"
|
||||
disabled={true}
|
||||
variations="secondary"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -0,0 +1,40 @@
|
||||
import renderer from 'react-test-renderer';
|
||||
|
||||
// Components
|
||||
import Form from '.';
|
||||
import Input from '@commonStyle/Input';
|
||||
|
||||
// Styled
|
||||
import { FormBtn } from '@page/User/styled';
|
||||
|
||||
describe('Form ', () => {
|
||||
const isDisable = true;
|
||||
const errorMessage = 'This is error message';
|
||||
const handleOnSubmit = jest.fn();
|
||||
const handleOnClick = jest.fn();
|
||||
|
||||
const wrapper = renderer.create(
|
||||
<Form onSubmit={handleOnSubmit}>
|
||||
<Form.Row label="Name" error={errorMessage}>
|
||||
<Input type="text" id="name" />
|
||||
</Form.Row>
|
||||
|
||||
<Form.Row label="Price" error={errorMessage}>
|
||||
<Input type="text" id="price" />
|
||||
</Form.Row>
|
||||
|
||||
<Form.Action>
|
||||
<FormBtn type="submit" name="submit" disabled={isDisable}>
|
||||
Confirm
|
||||
</FormBtn>
|
||||
<FormBtn type="button" variations="secondary" onClick={handleOnClick}>
|
||||
Close
|
||||
</FormBtn>
|
||||
</Form.Action>
|
||||
</Form>
|
||||
);
|
||||
|
||||
test('Should render correctly', () => {
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,72 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Form Should render correctly 1`] = `
|
||||
<form
|
||||
className="sc-bdnyFh bzxSLR"
|
||||
onSubmit={[MockFunction]}
|
||||
>
|
||||
<div
|
||||
className="sc-dlniIP gZHESL"
|
||||
>
|
||||
<label
|
||||
className="sc-hKFymg ddFGOI"
|
||||
>
|
||||
Name
|
||||
</label>
|
||||
<div>
|
||||
<input
|
||||
className="sc-jSFipO enjwJE"
|
||||
id="name"
|
||||
type="text"
|
||||
/>
|
||||
<p
|
||||
className="sc-eCAqax bvOWPP"
|
||||
>
|
||||
This is error message
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="sc-dlniIP gZHESL"
|
||||
>
|
||||
<label
|
||||
className="sc-hKFymg ddFGOI"
|
||||
>
|
||||
Price
|
||||
</label>
|
||||
<div>
|
||||
<input
|
||||
className="sc-jSFipO enjwJE"
|
||||
id="price"
|
||||
type="text"
|
||||
/>
|
||||
<p
|
||||
className="sc-eCAqax bvOWPP"
|
||||
>
|
||||
This is error message
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="sc-gtsqUy idhRSV"
|
||||
>
|
||||
<button
|
||||
className="sc-gKAaef sc-jrsKJM gifCOZ KLoQf"
|
||||
disabled={true}
|
||||
name="submit"
|
||||
type="submit"
|
||||
variations="primary"
|
||||
>
|
||||
Confirm
|
||||
</button>
|
||||
<button
|
||||
className="sc-gKAaef sc-jrsKJM gbgZUe KLoQf"
|
||||
onClick={[MockFunction]}
|
||||
type="button"
|
||||
variations="secondary"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
`;
|
||||
@@ -0,0 +1,12 @@
|
||||
import renderer from 'react-test-renderer';
|
||||
|
||||
// Components
|
||||
import Header from '.';
|
||||
|
||||
describe('Header', () => {
|
||||
const wrapper = renderer.create(<Header accountName="Nezumi" />);
|
||||
|
||||
test('Should render correctly', () => {
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,101 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Header Should render correctly 1`] = `
|
||||
<header
|
||||
className="sc-dlniIP cClxoS"
|
||||
>
|
||||
<p>
|
||||
Hi,
|
||||
Nezumi
|
||||
!
|
||||
</p>
|
||||
<ul
|
||||
className="sc-gtsqUy gOWXQs"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
className="sc-bdnyFh bxHnoO"
|
||||
iconStyle={
|
||||
{
|
||||
"size": "23px",
|
||||
}
|
||||
}
|
||||
isHaveChildren={false}
|
||||
style={
|
||||
{
|
||||
"backgroundColor": undefined,
|
||||
"color": undefined,
|
||||
"fontSize": undefined,
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
stroke="currentColor"
|
||||
strokeWidth="0"
|
||||
style={
|
||||
{
|
||||
"color": undefined,
|
||||
}
|
||||
}
|
||||
viewBox="0 0 512 512"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M258.9 48C141.92 46.42 46.42 141.92 48 258.9c1.56 112.19 92.91 203.54 205.1 205.1 117 1.6 212.48-93.9 210.88-210.88C462.44 140.91 371.09 49.56 258.9 48zm126.42 327.25a4 4 0 01-6.14-.32 124.27 124.27 0 00-32.35-29.59C321.37 329 289.11 320 256 320s-65.37 9-90.83 25.34a124.24 124.24 0 00-32.35 29.58 4 4 0 01-6.14.32A175.32 175.32 0 0180 259c-1.63-97.31 78.22-178.76 175.57-179S432 158.81 432 256a175.32 175.32 0 01-46.68 119.25z"
|
||||
/>
|
||||
<path
|
||||
d="M256 144c-19.72 0-37.55 7.39-50.22 20.82s-19 32-17.57 51.93C191.11 256 221.52 288 256 288s64.83-32 67.79-71.24c1.48-19.74-4.8-38.14-17.68-51.82C293.39 151.44 275.59 144 256 144z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
className="sc-bdnyFh bxHnoO"
|
||||
iconStyle={
|
||||
{
|
||||
"size": "23px",
|
||||
}
|
||||
}
|
||||
isHaveChildren={false}
|
||||
style={
|
||||
{
|
||||
"backgroundColor": undefined,
|
||||
"color": undefined,
|
||||
"fontSize": undefined,
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
height="1em"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
style={
|
||||
{
|
||||
"color": undefined,
|
||||
}
|
||||
}
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</header>
|
||||
`;
|
||||
@@ -0,0 +1,12 @@
|
||||
import renderer from 'react-test-renderer';
|
||||
|
||||
// Components
|
||||
import HeaderMenu from '.';
|
||||
|
||||
describe('HeaderMenu', () => {
|
||||
const wrapper = renderer.create(<HeaderMenu />);
|
||||
|
||||
test('Should render correctly', () => {
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,92 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`HeaderMenu Should render correctly 1`] = `
|
||||
<ul
|
||||
className="sc-gtsqUy gOWXQs"
|
||||
>
|
||||
<li>
|
||||
<button
|
||||
className="sc-bdnyFh bxHnoO"
|
||||
iconStyle={
|
||||
{
|
||||
"size": "23px",
|
||||
}
|
||||
}
|
||||
isHaveChildren={false}
|
||||
style={
|
||||
{
|
||||
"backgroundColor": undefined,
|
||||
"color": undefined,
|
||||
"fontSize": undefined,
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
stroke="currentColor"
|
||||
strokeWidth="0"
|
||||
style={
|
||||
{
|
||||
"color": undefined,
|
||||
}
|
||||
}
|
||||
viewBox="0 0 512 512"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M258.9 48C141.92 46.42 46.42 141.92 48 258.9c1.56 112.19 92.91 203.54 205.1 205.1 117 1.6 212.48-93.9 210.88-210.88C462.44 140.91 371.09 49.56 258.9 48zm126.42 327.25a4 4 0 01-6.14-.32 124.27 124.27 0 00-32.35-29.59C321.37 329 289.11 320 256 320s-65.37 9-90.83 25.34a124.24 124.24 0 00-32.35 29.58 4 4 0 01-6.14.32A175.32 175.32 0 0180 259c-1.63-97.31 78.22-178.76 175.57-179S432 158.81 432 256a175.32 175.32 0 01-46.68 119.25z"
|
||||
/>
|
||||
<path
|
||||
d="M256 144c-19.72 0-37.55 7.39-50.22 20.82s-19 32-17.57 51.93C191.11 256 221.52 288 256 288s64.83-32 67.79-71.24c1.48-19.74-4.8-38.14-17.68-51.82C293.39 151.44 275.59 144 256 144z"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span />
|
||||
</button>
|
||||
</li>
|
||||
<li>
|
||||
<button
|
||||
className="sc-bdnyFh bxHnoO"
|
||||
iconStyle={
|
||||
{
|
||||
"size": "23px",
|
||||
}
|
||||
}
|
||||
isHaveChildren={false}
|
||||
style={
|
||||
{
|
||||
"backgroundColor": undefined,
|
||||
"color": undefined,
|
||||
"fontSize": undefined,
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
height="1em"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
style={
|
||||
{
|
||||
"color": undefined,
|
||||
}
|
||||
}
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
`;
|
||||
@@ -0,0 +1,31 @@
|
||||
import renderer from 'react-test-renderer';
|
||||
|
||||
// Components
|
||||
import Menus from '.';
|
||||
import { RiEditBoxFill, RiDeleteBin2Line } from 'react-icons/ri';
|
||||
|
||||
describe('Menus', () => {
|
||||
const id = '123';
|
||||
const handleOnClick = jest.fn();
|
||||
|
||||
const wrapper = renderer.create(
|
||||
<Menus>
|
||||
<Menus.Menu>
|
||||
<Menus.Toggle id={id} />
|
||||
|
||||
<Menus.List id={id.toString()}>
|
||||
<Menus.Button onClick={handleOnClick} icon={<RiEditBoxFill />}>
|
||||
Edit
|
||||
</Menus.Button>
|
||||
<Menus.Button onClick={handleOnClick} icon={<RiDeleteBin2Line />}>
|
||||
Delete
|
||||
</Menus.Button>
|
||||
</Menus.List>
|
||||
</Menus.Menu>
|
||||
</Menus>
|
||||
);
|
||||
|
||||
test('Should render correctly', () => {
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,35 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Menus Should render correctly 1`] = `
|
||||
<div
|
||||
className="sc-gtsqUy lbsvcs"
|
||||
>
|
||||
<button
|
||||
aria-label="Menu item 123"
|
||||
className="sc-hKFymg cjUckY"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
stroke="currentColor"
|
||||
strokeWidth="0"
|
||||
style={
|
||||
{
|
||||
"color": undefined,
|
||||
}
|
||||
}
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
clipRule="evenodd"
|
||||
d="M10.5 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm0 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zm0 6a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"
|
||||
fillRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
@@ -0,0 +1,12 @@
|
||||
import renderer from 'react-test-renderer';
|
||||
|
||||
// Components
|
||||
import Message from '.';
|
||||
|
||||
describe('Message', () => {
|
||||
const wrapper = renderer.create(<Message>This is a message!</Message>);
|
||||
|
||||
test('Should render correctly', () => {
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,9 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Message Should render correctly 1`] = `
|
||||
<p
|
||||
className="sc-bdnyFh fIKUZt"
|
||||
>
|
||||
This is a message!
|
||||
</p>
|
||||
`;
|
||||
@@ -0,0 +1,25 @@
|
||||
import renderer from 'react-test-renderer';
|
||||
|
||||
// Components
|
||||
import Modal from '.';
|
||||
import Button from '@commonStyle/Button';
|
||||
|
||||
describe('Modal', () => {
|
||||
const wrapper = renderer.create(
|
||||
<Modal>
|
||||
<Modal.Open
|
||||
modalName="room-form"
|
||||
renderChildren={(onCloseModal) => (
|
||||
<Button onClick={onCloseModal}>Add room</Button>
|
||||
)}
|
||||
/>
|
||||
<Modal.Window name="room-form" title="Add form">
|
||||
<p>This is a windows</p>
|
||||
</Modal.Window>
|
||||
</Modal>
|
||||
);
|
||||
|
||||
test('Should render correctly', () => {
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,11 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Modal Should render correctly 1`] = `
|
||||
<button
|
||||
className="sc-eCAqax jeAcqZ"
|
||||
onClick={[Function]}
|
||||
variations="primary"
|
||||
>
|
||||
Add room
|
||||
</button>
|
||||
`;
|
||||
@@ -0,0 +1,17 @@
|
||||
import renderer from 'react-test-renderer';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
|
||||
// Components
|
||||
import Nav from '.';
|
||||
|
||||
describe('Nav', () => {
|
||||
const wrapper = renderer.create(
|
||||
<BrowserRouter>
|
||||
<Nav />
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
test('Should render correctly', () => {
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,94 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Nav Should render correctly 1`] = `
|
||||
<nav
|
||||
className="sc-bdnyFh gGCifp"
|
||||
>
|
||||
<a
|
||||
className="sc-gtsqUy gbSQWi"
|
||||
href="/dashboard"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
stroke="currentColor"
|
||||
strokeWidth="0"
|
||||
style={
|
||||
{
|
||||
"color": undefined,
|
||||
}
|
||||
}
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M0 0h24v24H0z"
|
||||
fill="none"
|
||||
/>
|
||||
<path
|
||||
d="M11 21H5c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h6v18zm2 0h6c1.1 0 2-.9 2-2v-7h-8v9zm8-11V5c0-1.1-.9-2-2-2h-6v7h8z"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
Dashboard
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
className="sc-gtsqUy gbSQWi"
|
||||
href="/user"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
stroke="currentColor"
|
||||
strokeWidth="0"
|
||||
style={
|
||||
{
|
||||
"color": undefined,
|
||||
}
|
||||
}
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M4.5 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM14.25 8.625a3.375 3.375 0 116.75 0 3.375 3.375 0 01-6.75 0zM1.5 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM17.25 19.128l-.001.144a2.25 2.25 0 01-.233.96 10.088 10.088 0 005.06-1.01.75.75 0 00.42-.643 4.875 4.875 0 00-6.957-4.611 8.586 8.586 0 011.71 5.157v.003z"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
User
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
className="sc-gtsqUy gbSQWi"
|
||||
href="/room"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
stroke="currentColor"
|
||||
strokeWidth="0"
|
||||
style={
|
||||
{
|
||||
"color": undefined,
|
||||
}
|
||||
}
|
||||
viewBox="0 0 16 16"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
Room
|
||||
</span>
|
||||
</a>
|
||||
</nav>
|
||||
`;
|
||||
@@ -0,0 +1,28 @@
|
||||
import renderer from 'react-test-renderer';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
|
||||
// Components
|
||||
import Order from '.';
|
||||
|
||||
describe('Order', () => {
|
||||
const options = [
|
||||
{
|
||||
value: 'Value 1',
|
||||
label: 'Option 1',
|
||||
},
|
||||
{
|
||||
value: 'Value 2',
|
||||
label: 'Option 2',
|
||||
},
|
||||
];
|
||||
|
||||
const wrapper = renderer.create(
|
||||
<BrowserRouter>
|
||||
<Order options={options} />
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
test('Should render correctly', () => {
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,24 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Order Should render correctly 1`] = `
|
||||
<div
|
||||
className="sc-bdnyFh aZFGz"
|
||||
>
|
||||
<button
|
||||
active={true}
|
||||
className="sc-gtsqUy fohQqJ"
|
||||
disabled={true}
|
||||
onClick={[Function]}
|
||||
>
|
||||
Option 1
|
||||
</button>
|
||||
<button
|
||||
active={false}
|
||||
className="sc-gtsqUy bwnpRq"
|
||||
disabled={false}
|
||||
onClick={[Function]}
|
||||
>
|
||||
Option 2
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
@@ -0,0 +1,18 @@
|
||||
import renderer from 'react-test-renderer';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
|
||||
// Components
|
||||
import Search from '.';
|
||||
|
||||
describe('Search', () => {
|
||||
const placeHolder = 'Search placeholder...';
|
||||
const wrapper = renderer.create(
|
||||
<BrowserRouter>
|
||||
<Search setPlaceHolder={placeHolder} />
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
test('Should render correctly', () => {
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,9 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Search Should render correctly 1`] = `
|
||||
<input
|
||||
className="sc-bdnyFh eAgOPb"
|
||||
onChange={[Function]}
|
||||
placeholder="Search placeholder..."
|
||||
/>
|
||||
`;
|
||||
@@ -0,0 +1,32 @@
|
||||
import renderer from 'react-test-renderer';
|
||||
|
||||
// Components
|
||||
import Select from '.';
|
||||
|
||||
describe('Select', () => {
|
||||
const options = [
|
||||
{
|
||||
label: 'Option 1',
|
||||
value: 'Value 1',
|
||||
},
|
||||
{
|
||||
label: 'Option 2',
|
||||
value: 'Value 2'
|
||||
}
|
||||
];
|
||||
const value = 'Temp value';
|
||||
const handleOnChange = jest.fn();
|
||||
|
||||
const wrapper = renderer.create(
|
||||
<Select
|
||||
options={options}
|
||||
value={value}
|
||||
onChange={handleOnChange}
|
||||
ariaLabel="Sort"
|
||||
/>
|
||||
);
|
||||
|
||||
test('Should render correctly', () => {
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,21 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Select Should render correctly 1`] = `
|
||||
<select
|
||||
aria-label="Sort"
|
||||
className="sc-bdnyFh dqXTRP"
|
||||
onChange={[MockFunction]}
|
||||
value="Temp value"
|
||||
>
|
||||
<option
|
||||
value="Value 1"
|
||||
>
|
||||
Option 1
|
||||
</option>
|
||||
<option
|
||||
value="Value 2"
|
||||
>
|
||||
Option 2
|
||||
</option>
|
||||
</select>
|
||||
`;
|
||||
@@ -0,0 +1,17 @@
|
||||
import renderer from 'react-test-renderer';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
|
||||
// Components
|
||||
import Sidebar from '.';
|
||||
|
||||
describe('Sidebar', () => {
|
||||
const wrapper = renderer.create(
|
||||
<BrowserRouter>
|
||||
<Sidebar heading="Hotel Management" />
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
test('Should render correctly', () => {
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,103 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Sidebar Should render correctly 1`] = `
|
||||
<aside
|
||||
className="sc-dlniIP dfcuiS"
|
||||
>
|
||||
<h1
|
||||
className="sc-hKFymg iQEJzQ"
|
||||
>
|
||||
Hotel Management
|
||||
</h1>
|
||||
<nav
|
||||
className="sc-bdnyFh gGCifp"
|
||||
>
|
||||
<a
|
||||
className="sc-gtsqUy gbSQWi"
|
||||
href="/dashboard"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
stroke="currentColor"
|
||||
strokeWidth="0"
|
||||
style={
|
||||
{
|
||||
"color": undefined,
|
||||
}
|
||||
}
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M0 0h24v24H0z"
|
||||
fill="none"
|
||||
/>
|
||||
<path
|
||||
d="M11 21H5c-1.1 0-2-.9-2-2V5c0-1.1.9-2 2-2h6v18zm2 0h6c1.1 0 2-.9 2-2v-7h-8v9zm8-11V5c0-1.1-.9-2-2-2h-6v7h8z"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
Dashboard
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
className="sc-gtsqUy gbSQWi"
|
||||
href="/user"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
stroke="currentColor"
|
||||
strokeWidth="0"
|
||||
style={
|
||||
{
|
||||
"color": undefined,
|
||||
}
|
||||
}
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M4.5 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM14.25 8.625a3.375 3.375 0 116.75 0 3.375 3.375 0 01-6.75 0zM1.5 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM17.25 19.128l-.001.144a2.25 2.25 0 01-.233.96 10.088 10.088 0 005.06-1.01.75.75 0 00.42-.643 4.875 4.875 0 00-6.957-4.611 8.586 8.586 0 011.71 5.157v.003z"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
User
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
className="sc-gtsqUy gbSQWi"
|
||||
href="/room"
|
||||
onClick={[Function]}
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
stroke="currentColor"
|
||||
strokeWidth="0"
|
||||
style={
|
||||
{
|
||||
"color": undefined,
|
||||
}
|
||||
}
|
||||
viewBox="0 0 16 16"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z"
|
||||
/>
|
||||
</svg>
|
||||
<span>
|
||||
Room
|
||||
</span>
|
||||
</a>
|
||||
</nav>
|
||||
</aside>
|
||||
`;
|
||||
@@ -0,0 +1,27 @@
|
||||
import renderer from 'react-test-renderer';
|
||||
import { BrowserRouter } from 'react-router-dom';
|
||||
|
||||
// Components
|
||||
import SortBy from '.';
|
||||
|
||||
describe('SortBy', () => {
|
||||
const options = [
|
||||
{
|
||||
label: 'Option 1',
|
||||
value: 'Value 1',
|
||||
},
|
||||
{
|
||||
label: 'Option 2',
|
||||
value: 'Value 2',
|
||||
},
|
||||
];
|
||||
const wrapper = renderer.create(
|
||||
<BrowserRouter>
|
||||
<SortBy options={options} />
|
||||
</BrowserRouter>
|
||||
);
|
||||
|
||||
test('Should render correctly', () => {
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,21 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`SortBy Should render correctly 1`] = `
|
||||
<select
|
||||
aria-label="Sort"
|
||||
className="sc-bdnyFh dqXTRP"
|
||||
onChange={[Function]}
|
||||
value=""
|
||||
>
|
||||
<option
|
||||
value="Value 1"
|
||||
>
|
||||
Option 1
|
||||
</option>
|
||||
<option
|
||||
value="Value 2"
|
||||
>
|
||||
Option 2
|
||||
</option>
|
||||
</select>
|
||||
`;
|
||||
@@ -0,0 +1,53 @@
|
||||
import renderer from 'react-test-renderer';
|
||||
|
||||
// Components
|
||||
import Table from '.';
|
||||
|
||||
// Types
|
||||
import { IUser } from '@type/users';
|
||||
|
||||
interface ITableRow {
|
||||
user: IUser;
|
||||
}
|
||||
|
||||
describe('Table', () => {
|
||||
const columnName = ['Column 1', 'Column 2'];
|
||||
const tempUser: IUser[] = [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Nezumi',
|
||||
phone: '123',
|
||||
isBooked: true,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Loi Phan',
|
||||
phone: '453',
|
||||
isBooked: false,
|
||||
},
|
||||
];
|
||||
const TableRow = ({ user }: ITableRow) => {
|
||||
const { id, name, phone, isBooked } = user;
|
||||
|
||||
return (
|
||||
<Table.Row>
|
||||
<div>{id}</div>
|
||||
<div>{name}</div>
|
||||
<div>{phone}</div>
|
||||
<div>{isBooked}</div>
|
||||
</Table.Row>
|
||||
);
|
||||
};
|
||||
const renderRow = (user: IUser) => <TableRow user={user} key={user.id} />;
|
||||
|
||||
const wrapper = renderer.create(
|
||||
<Table columns="10% 35% 30% 15% 10%">
|
||||
<Table.Header headerColumn={columnName} />
|
||||
<Table.Body<IUser> data={tempUser} render={renderRow} />
|
||||
</Table>
|
||||
);
|
||||
|
||||
test('Should render correctly', () => {
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,53 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Table Should render correctly 1`] = `
|
||||
<div
|
||||
className="sc-bdnyFh eEibLN"
|
||||
>
|
||||
<div
|
||||
className="sc-gtsqUy sc-eCAqax eucOOU hcIWQg"
|
||||
columns="10% 35% 30% 15% 10%"
|
||||
>
|
||||
<div>
|
||||
Column 1
|
||||
</div>
|
||||
<div>
|
||||
Column 2
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="sc-dlniIP EYkDq"
|
||||
>
|
||||
<div
|
||||
className="sc-gtsqUy sc-hKFymg eucOOU jwwTFT"
|
||||
columns="10% 35% 30% 15% 10%"
|
||||
>
|
||||
<div>
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
Nezumi
|
||||
</div>
|
||||
<div>
|
||||
123
|
||||
</div>
|
||||
<div />
|
||||
</div>
|
||||
<div
|
||||
className="sc-gtsqUy sc-hKFymg eucOOU jwwTFT"
|
||||
columns="10% 35% 30% 15% 10%"
|
||||
>
|
||||
<div>
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
Loi Phan
|
||||
</div>
|
||||
<div>
|
||||
453
|
||||
</div>
|
||||
<div />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -0,0 +1,12 @@
|
||||
import renderer from 'react-test-renderer';
|
||||
|
||||
// Components
|
||||
import Toast from '.';
|
||||
|
||||
describe('Toast', () => {
|
||||
const wrapper = renderer.create(<Toast />);
|
||||
|
||||
test('Should render correctly', () => {
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,20 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Toast Should render correctly 1`] = `
|
||||
<div
|
||||
onMouseEnter={[Function]}
|
||||
onMouseLeave={[Function]}
|
||||
style={
|
||||
{
|
||||
"bottom": 16,
|
||||
"left": 16,
|
||||
"margin": "8px",
|
||||
"pointerEvents": "none",
|
||||
"position": "fixed",
|
||||
"right": 16,
|
||||
"top": 16,
|
||||
"zIndex": 2000,
|
||||
}
|
||||
}
|
||||
/>
|
||||
`;
|
||||
Reference in New Issue
Block a user