Skip to content

Commit

Permalink
Merge pull request #80 from launchrctl/tests
Browse files Browse the repository at this point in the history
Trying to write first test
  • Loading branch information
iberdinsky-skilld authored Aug 16, 2024
2 parents 4151002 + 1c3d399 commit 6a24e52
Show file tree
Hide file tree
Showing 16 changed files with 4,951 additions and 1,661 deletions.
7 changes: 7 additions & 0 deletions client/.babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"presets": [
"@babel/preset-env",
"@babel/preset-react",
"@babel/preset-typescript"
]
}
1 change: 1 addition & 0 deletions client/.eslintignore
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,4 @@ node_modules/
.snapshots/
*.min.js
**/**/coverage
jest.config.ts
75 changes: 75 additions & 0 deletions client/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,81 @@
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="app-preloader" class="preloader">
<svg id="app-preloader" class="preloader__svg" xmlns="http://www.w3.org/2000/svg" width="62.7" height="11.8" viewBox="0 0 62.7 11.8">
<path d="m0,9.2V.5h1.8v7.2h3.8v1.5H0Zm10.3.1c-.7,0-1.2-.1-1.7-.4s-.9-.7-1.1-1.2-.4-1.1-.4-1.8.1-1.3.4-1.8.6-.9,1.1-1.2,1-.4,1.7-.4,1.2.1,1.7.4.8.7,1.1,1.2.4,1.1.4,1.8-.1,1.3-.4,1.8-.6.9-1.1,1.2-1,.4-1.7.4Zm0-1.4c.3,0,.6,0,.8-.3s.4-.4.5-.7.2-.6.2-1,0-.7-.2-1-.3-.5-.5-.7-.5-.3-.8-.3-.6,0-.8.3-.4.4-.5.7-.2.6-.2,1,0,.7.2,1,.3.5.5.7.5.3.8.3Zm7,1.4c-.4,0-.8,0-1.1-.2s-.6-.4-.8-.7-.3-.7-.3-1.1,0-.7.2-.9.3-.4.6-.6.5-.3.8-.3.6-.1.9-.2c.4,0,.7,0,.9-.1s.4,0,.5-.2.2-.2.2-.3h0c0-.2,0-.4-.1-.5s-.2-.2-.3-.3-.3-.1-.6-.1-.4,0-.6.1-.3.2-.4.3-.2.2-.2.4l-1.6-.3c.1-.4.3-.7.6-1s.6-.5,1-.6.8-.2,1.3-.2.7,0,1,.1.6.2.9.4.5.4.6.7.2.6.2,1v4.4h-1.7v-.9h0c-.1.2-.2.4-.4.5s-.4.3-.6.4-.5.1-.9.1Zm.5-1.2c.3,0,.5,0,.7-.2s.4-.3.5-.4.2-.4.2-.6v-.7c0,0-.1,0-.2.1s-.2,0-.4,0-.3,0-.4,0-.2,0-.3,0c-.2,0-.4,0-.6.2s-.3.2-.4.3-.1.3-.1.4,0,.3.1.4.2.2.4.3.3,0,.5,0Zm7.6,1.2c-.5,0-1-.1-1.4-.4s-.7-.6-1-1.1-.4-1.1-.4-1.8.1-1.4.4-1.9.6-.9,1-1.1.8-.4,1.3-.4.7,0,.9.2.4.3.6.5.3.4.3.5h0V.5h1.8v8.7h-1.7v-1h0c0,.2-.2.4-.3.5s-.4.3-.6.4-.5.2-.9.2Zm.5-1.4c.3,0,.6,0,.8-.2s.4-.4.5-.7.2-.6.2-1,0-.7-.2-1-.3-.5-.5-.7-.5-.2-.8-.2-.6,0-.8.3-.4.4-.5.7-.2.6-.2,1,0,.7.2,1,.3.5.5.7.5.3.8.3Zm6.1-6.1c-.3,0-.5,0-.7-.3s-.3-.4-.3-.6,0-.5.3-.6.4-.3.7-.3.5,0,.7.3.3.4.3.6,0,.5-.3.6-.4.3-.7.3Zm-.9,7.4V2.7h1.8v6.6h-1.8Zm5.6-3.8v3.8h-1.8V2.7h1.7v1.6s0,0,0,0c.2-.5.4-1,.8-1.3s.8-.4,1.4-.4.8,0,1.2.3.6.5.8.8.3.8.3,1.3v4.2h-1.8v-3.9c0-.4-.1-.7-.3-1s-.5-.3-.9-.3-.5,0-.7.2-.3.3-.5.5-.2.5-.2.7Zm9.2,6.4c-.5,0-1,0-1.4-.2s-.7-.3-1-.6-.4-.5-.5-.8l1.5-.4c0,.1.1.2.3.4s.3.2.5.3.4.1.7.1c.4,0,.8-.1,1.1-.3s.4-.5.4-1v-1.2h-.1c0,.2-.2.3-.3.5s-.3.3-.6.4-.5.2-.9.2-.9-.1-1.3-.3-.7-.6-1-1.1-.4-1.1-.4-1.8.1-1.4.4-1.9.6-.9,1-1.1.8-.4,1.3-.4.7,0,.9.2.5.3.6.5.3.4.3.5h0v-1.1h1.7v6.5c0,.6-.1,1.1-.4,1.5s-.6.7-1.1.9-1,.3-1.6.3Zm0-4c.3,0,.6,0,.8-.2s.4-.4.5-.6.2-.6.2-1,0-.7-.2-1-.3-.5-.5-.7-.5-.2-.8-.2-.6,0-.8.2-.4.4-.5.7-.2.6-.2,1,0,.7.2,1,.3.5.5.6.5.2.8.2Zm6.5,1.5c-.3,0-.5,0-.7-.3s-.3-.4-.3-.7,0-.5.3-.7.4-.3.7-.3.5,0,.7.3.3.4.3.7,0,.5-.3.7-.4.3-.7.3Z"/>
<path class="preloader__dot preloader__dot-2" d="m57.1,9.3c-.3,0-.5,0-.7-.3s-.3-.4-.3-.7,0-.5.3-.7.4-.3.7-.3.5,0,.7.3.3.4.3.7,0,.5-.3.7-.4.3-.7.3Z"/>
<path class="preloader__dot preloader__dot-3" d="m61.7,9.3c-.3,0-.5,0-.7-.3s-.3-.4-.3-.7,0-.5.3-.7.4-.3.7-.3.5,0,.7.3.3.4.3.7,0,.5-.3.7-.4.3-.7.3Z"/>
</svg>
</div>
<style>
.preloader {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: white;
}
.preloader--dark {
background-color: #121212;
color: white;
}
.preloader__svg {
fill: currentColor;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(1.3);
}
.preloader__dot {
animation-duration: 0.8s;
animation-timing-function: steps(1, end);
animation-iteration-count: infinite;
opacity: 0;
}
.preloader__dot-2 {
animation-name: preloader-dot-2;
}

.preloader__dot-3 {
animation-name: preloader-dot-3;
}
@keyframes preloader-dot-2 {
0% {
opacity: 0;
}
33% {
opacity: 1;
}
66% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes preloader-dot-3 {
0% {
opacity: 0;
}
33% {
opacity: 0;
}
66% {
opacity: 1;
}
100% {
opacity: 0;
}
}
</style>
<script>
const preloader = document.querySelector('.preloader');
if (window.localStorage.darkMode === 'true') {
preloader.classList.add('preloader--dark');
}
</script>
<div id="root"></div>
<script type="module" src="/src/index.tsx"></script>
<!--
Expand Down
16 changes: 16 additions & 0 deletions client/jest.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import type { Config } from 'jest'

const config: Config = {
preset: 'ts-jest',
transform: {
'^.+\\.(ts|tsx)?$': 'ts-jest',
},
testEnvironment: 'jsdom',
moduleNameMapper: {
'\\.(css|less|scss|sass|svg)$': 'identity-obj-proxy',
nanoid: '<rootDir>/node_modules/nanoid/index.browser.cjs',
},
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
}

export default config
19 changes: 18 additions & 1 deletion client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,15 @@
"websocket": "^1.0.35"
},
"devDependencies": {
"@babel/preset-env": "^7.25.3",
"@babel/preset-react": "^7.24.7",
"@babel/preset-typescript": "^7.24.7",
"@testing-library/dom": "^10.4.0",
"@testing-library/jest-dom": "^6.4.8",
"@testing-library/react": "^16.0.0",
"@types/babel__preset-env": "^7",
"@types/identity-obj-proxy": "^3",
"@types/jest": "^29.5.12",
"@types/lodash": "^4",
"@types/node": "^18.19.34",
"@types/react": "^18.3.3",
Expand All @@ -58,13 +67,20 @@
"eslint-config-prettier": "^9.1.0",
"eslint-import-resolver-typescript": "^3.6.1",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-jest": "^28.7.0",
"eslint-plugin-prettier": "^5.1.3",
"eslint-plugin-react-hooks": "^4.6.2",
"eslint-plugin-react-refresh": "^0.4.7",
"eslint-plugin-simple-import-sort": "^12.1.0",
"eslint-plugin-testing-library": "^6.2.2",
"eslint-plugin-unicorn": "^51.0.1",
"husky": "^9.0.11",
"identity-obj-proxy": "^3.0.0",
"jest": "^29.7.0",
"jest-environment-jsdom": "^29.7.0",
"prettier": "^3.3.1",
"ts-jest": "^29.2.4",
"ts-node": "^10.9.2",
"typescript": "^4.9.5",
"vite": "^5.2.12"
},
Expand All @@ -75,7 +91,8 @@
"build": "eslint . && tsc && refine build",
"preview": "refine start",
"refine": "refine",
"postinstall": "cd ../ && husky"
"postinstall": "cd ../ && husky",
"test": "jest"
},
"browserslist": {
"production": [
Expand Down
5 changes: 5 additions & 0 deletions client/public/images/loading.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
36 changes: 36 additions & 0 deletions client/src/components/AlertBanner.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
import { Alert, AlertTitle } from '@mui/material'
import { AlertColor } from '@mui/material/Alert/Alert'
import { Box } from '@mui/system'
import { FC } from 'react'

export const AlertBanner: FC<{
data: {
title: string
content?: string
type?: AlertColor
}
}> = ({ data }) => {
return (
<Box
sx={{
position: 'fixed',
top: (theme) => ({
xs: theme.spacing(9),
sm: theme.spacing(11),
}),
left: (theme) => ({
xs: theme.spacing(2),
sm: theme.spacing(3),
}),
zIndex: 'modal',
}}
>
<Alert severity={data.type || 'error'}>
{data.title && <AlertTitle>{data.title}</AlertTitle>}
{data.content && (
<span dangerouslySetInnerHTML={{ __html: data.content }} />
)}
</Alert>
</Box>
)
}
2 changes: 1 addition & 1 deletion client/src/components/SidebarActions.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export const SidebarActions: FC<{
actions: GetListResponse | undefined
}> = ({ actions }) => {
return (
<List>
<List className={'list-of-actions'}>
{actions?.data
.sort((a, b) => (a.id as string).localeCompare(b.id as string))
.map(({ id, title, description }) => (
Expand Down
1 change: 1 addition & 0 deletions client/src/components/SidebarFlow.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ export const SidebarFlow: FC<ISidebarFlowProps> = ({ actions }) => {
onChange={handleChange}
size="small"
sx={{ display: 'flex' }}
className={'sidebar-flow-tabs'}
>
<ToggleButton
value="1"
Expand Down
20 changes: 20 additions & 0 deletions client/src/components/SidebarTree.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -211,6 +211,8 @@ const CustomTreeItem = forwardRef(function CustomTreeItem(
status,
publicAPI,
} = useTreeItem2({ id, itemId, children, label, disabled, rootRef: ref })
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const item = publicAPI.getItem(itemId)
const expandable = isExpandable(children)
const icon = getIconFromFileType(item.fileType)
Expand Down Expand Up @@ -351,10 +353,14 @@ export const SidebarTree: FC<{
})()
setExpandedItems(expandItems.reverse())
if (selectedAction) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const prevSelectedAction = apiRef.current?.getItem(selectedAction)
prevSelectedAction.selected = false
setSelectedAction('')
}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const curSelectedAction = apiRef.current?.getItem(flowClickedActionId.id)
curSelectedAction.selected = flowClickedActionId.isActive
setSelectedAction(
Expand All @@ -373,10 +379,14 @@ export const SidebarTree: FC<{
}
if (itemIds.includes(':')) {
if (selectedAction) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const prevSelectedActionData = apiRef.current?.getItem(selectedAction)
prevSelectedActionData.selected = false
handleUnselect(selectedAction)
}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const item = apiRef.current?.getItem(itemIds)
item.selected = selectedAction !== itemIds
if (item.selected) {
Expand All @@ -395,6 +405,8 @@ export const SidebarTree: FC<{
})
} else {
if (Object.keys(selectedActionsGroup).length > 0) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const prevSelectedActionData = apiRef.current?.getItem(
selectedActionsGroup.id
)
Expand All @@ -406,11 +418,15 @@ export const SidebarTree: FC<{
selectedActionsGroup.isActionsGroup
)
}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const item = apiRef.current?.getItem(itemIds)
if (selectedActionsGroup.id === itemIds) {
item.selected = false
handleUnselect(itemIds, item.isActionsGroup)
if (selectedAction) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const prevSelectedActionData = apiRef.current?.getItem(selectedAction)
prevSelectedActionData.selected = false
handleUnselect(selectedAction)
Expand All @@ -431,6 +447,8 @@ export const SidebarTree: FC<{
} else {
handleUnselect(itemIds, item.isActionsGroup)
if (selectedAction) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const prevSelectedActionData = apiRef.current?.getItem(selectedAction)
prevSelectedActionData.selected = false
handleUnselect(selectedAction)
Expand All @@ -449,6 +467,8 @@ export const SidebarTree: FC<{
}

const deselectAction = (id: string) => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const selectedActionData = apiRef.current?.getItem(id)
selectedActionData.selected = false
setSelectedAction('')
Expand Down
11 changes: 8 additions & 3 deletions client/src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,21 @@ import './I18n'

import * as React from 'react'
import { createRoot } from 'react-dom/client'

import { App } from './App'

const container = document.getElementById('root') as HTMLElement
const root = createRoot(container)

root.render(
<React.StrictMode>
<React.Suspense fallback="loading">
<React.Suspense fallback="Loading">
<App />
</React.Suspense>
</React.StrictMode>
)

window.onload = () => {
const preloader = document.getElementById('app-preloader')
if (preloader) {
preloader.remove()
}
}
Loading

0 comments on commit 6a24e52

Please sign in to comment.