Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unit test and documentation #20

Merged
Show file tree
Hide file tree
Changes from 11 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ bash script/install.bash

## For Client app (serves React Website)

See these [instructions](client/README.md)
[README.md](client/README.md) for client GUI is found in `./client`

---

## Infrastructure Components

Expand Down Expand Up @@ -49,4 +51,4 @@ yarn clean #clean the directory of temporary files

## License

This software is owned by [The INTO-CPS Association](https://into-cps.org/) and is licensed under the terms of the INTO-CPS Association.
This software is owned by [The INTO-CPS Association](https://into-cps.org/) and is licensed under the terms of the INTO-CPS Association.
3 changes: 2 additions & 1 deletion client/.eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,10 @@
},
"parser": "@typescript-eslint/parser",
"parserOptions": {
"parser": "@babel/eslint-parser",
"requireConfigFile": false,
"ecmaFeatures": {
"emacVersion": 6,
"sourceType": "module",
"jsx": true
},
"ecmaVersion": 2018,
Expand Down
4 changes: 2 additions & 2 deletions client/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ yarn syntax #perform linting and static analysis
yarn build #build the react app into build/ directory

#specify the environment; specify only one
yarn configapp #prod | dev | test
yarn configapp #prod | dev

yarn start #start the application
yarn test #UI testing of the application
Expand All @@ -29,7 +29,7 @@ To customize the configuration of endpoints to your preference, it is recommende
Once the configuration file has been updated, please rerun the configuration bash to apply the changes.

```bash
yarn configapp #prod | dev | test
yarn configapp #prod | dev
```

---
14 changes: 0 additions & 14 deletions client/babel.config.cjs

This file was deleted.

19 changes: 8 additions & 11 deletions client/jest.config.json
Original file line number Diff line number Diff line change
@@ -1,19 +1,13 @@
{
"preset": "ts-jest",
"testEnvironment": "jsdom",
"transform": {
"^.+\\.jsx?$": "babel-jest",
"^.+\\.tsx?$": "ts-jest"
},
"transformIgnorePatterns": ["/node_modules/(?![d3-shape|recharts]).+\\.js$"],
"collectCoverage": true,
"coverageReporters": [
"text",
"cobertura",
"clover",
"lcov",
"json"
],
"collectCoverageFrom": ["src/**/*.[jt]sx?"],
"coverageReporters": ["text", "cobertura", "clover", "lcov", "json"],
"collectCoverageFrom": ["src/**/*.tsx"],
"coveragePathIgnorePatterns": ["node_modules", "build"],
"modulePathIgnorePatterns": ["test/e2e"],
"coverageDirectory": "<rootDir>/coverage/",
Expand All @@ -30,7 +24,10 @@
"window.ENV.SERVER_PORT": 3500
},
"verbose": true,
"testRegex": "/test/.*\\.[jt]sx?$",
"testRegex": "/test/.*\\.test.tsx?$",
"modulePaths": ["<rootDir>/src/"],
"setupFilesAfterEnv": ["<rootDir>/config/test.js"]
"setupFilesAfterEnv": [
"<rootDir>/config/test.js",
"<rootDir>/test/config/importJestDom.ts"
]
}
32 changes: 15 additions & 17 deletions client/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@
"build": "script/build.bash",
"configapp": "script/config.bash",
"start": "script/start.bash",
"clean": "script/clean.bash"
"clean": "script/clean.bash",
"format": "prettier --ignore-path ../.gitignore --write \"**/*.{ts,tsx,css,scss}\""
},
"eslintConfig": {
"extends": [
Expand All @@ -37,37 +38,34 @@
"recharts": "^2.1.13",
"resize-observer-polyfill": "^1.5.1",
"serve": "^14.0.1",
"typescript": "^4.7.4"
"typescript": "^4.9.5"
},
"devDependencies": {
"@babel/cli": "^7.18.10",
"@babel/core": "^7.18.10",
"@babel/eslint-parser": "^7.18.9",
"@babel/preset-env": "^7.18.10",
"@babel/preset-react": "^7.18.6",
"@jest/globals": "^28.1.3",
"@babel/core": "^7.21.3",
"@babel/plugin-syntax-flow": "^7.18.6",
"@babel/plugin-transform-react-jsx": "^7.21.0",
"@playwright/test": "^1.25.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^14.4.3",
"@types/jest": "^28.1.7",
"@testing-library/react": "^14.0.0",
"@types/jest": "^29.5.0",
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"@typescript-eslint/eslint-plugin": "^5.34.0",
"@typescript-eslint/parser": "^5.34.0",
"babel-jest": "^28.1.3",
"eslint": "^8.22.0",
"eslint-config-airbnb-base": "^15.0.0",
"eslint-config-prettier": "^8.6.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jest": "^26.8.2",
"eslint-plugin-jest": "^27.2.1",
"eslint-plugin-jsx-a11y": "^6.6.1",
"eslint-plugin-react": "^7.30.1",
"jest": "^28.1.3",
"jest-environment-jsdom": "^28.1.3",
"husky": "^8.0.3",
"jest": "^29.5.0",
"jest-environment-jsdom": "^29.5.0",
"playwright": "^1.25.0",
"prettier": "^2.7.1",
"react-scripts": "^5.0.1",
"react-test-renderer": "^18.2.0",
"ts-jest": "^28.0.8"
"ts-jest": "^29.0.5"
},
"browserslist": {
"production": [
Expand Down
6 changes: 3 additions & 3 deletions client/playwright.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,10 @@ const config = {
testDir: './test/e2e',
testMatch: /.*\.test\.ts/,
reporter: [
['html', { outputFile: 'playwright-report/index.html' }],
['list'],
['html', { outputFile: 'playwright-report/index.html' }],
['list'],
['junit', { outputFile: 'playwright-report/results.xml' }],
['json', { outputFile: 'playwright-report/results.json' }]
['json', { outputFile: 'playwright-report/results.json' }],
],
use: {
baseURL: 'http://localhost:4000',
Expand Down
16 changes: 6 additions & 10 deletions client/public/static/css/MaterialIcon.css
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,10 @@
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(/static/font/MaterialIcons-Regular.woff2) format('woff2'),
url(/static/font/MaterialIcons-Regular.woff) format('woff'),
url(/static/font/MaterialIcons-Regular.ttf) format('truetype');

src: local('Material Icons'), local('MaterialIcons-Regular'),
url(/static/font/MaterialIcons-Regular.woff2) format('woff2'),
url(/static/font/MaterialIcons-Regular.woff) format('woff'),
url(/static/font/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
Expand All @@ -25,7 +23,6 @@
word-wrap: normal;
direction: ltr;


/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
Expand All @@ -36,9 +33,8 @@

/* Support for IE. */
font-feature-settings: 'liga';

}

body {
font-family: "Roboto", sans-serif;
}
font-family: 'Roboto', sans-serif;
}
2 changes: 1 addition & 1 deletion client/src/route/digitaltwins/DigitalTwins.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import Workflows from './Workflows';
function DTContent() {
return (
<Grid item xs={12} md={12} lg={12}>
<Workflows />
<Workflows />
</Grid>
);
}
Expand Down
3 changes: 1 addition & 2 deletions client/src/route/history/Logs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,7 @@ function LogContents() {
}

function preventDefault(
event: React.MouseEvent<HTMLAnchorElement> &
React.MouseEvent<HTMLSpanElement>,
event: React.MouseEvent<HTMLAnchorElement> & React.MouseEvent<HTMLSpanElement>
) {
event.preventDefault();
}
Expand Down
3 changes: 1 addition & 2 deletions client/src/route/history/RecentRuns.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,7 @@ function createData(id: number, date: string, name: string) {
}

function preventDefault(
event: React.MouseEvent<HTMLAnchorElement> &
React.MouseEvent<HTMLSpanElement>,
event: React.MouseEvent<HTMLAnchorElement> & React.MouseEvent<HTMLSpanElement>
) {
event.preventDefault();
}
Expand Down
2 changes: 1 addition & 1 deletion client/src/route/library/Library.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import LibComponents from './Components';
function LibraryContent() {
return (
<Grid item xs={12} md={12} lg={12}>
<LibComponents />
<LibComponents />
</Grid>
);
}
Expand Down
45 changes: 20 additions & 25 deletions client/test/Dashboard.test.tsx
Original file line number Diff line number Diff line change
@@ -1,32 +1,27 @@
/**
* @jest-environment jsdom
*/
/* eslint-disable @typescript-eslint/no-empty-function */
/* eslint-disable class-methods-use-this */
import { expect, describe, it } from '@jest/globals';
import Grid from '@mui/material/Grid';
import { render } from '@testing-library/react';
import * as React from 'react';
import Dashboard from '../src/route/dashboard/Dashboard';
import 'resize-observer-polyfill';
import { render, screen } from '@testing-library/react';
import Dashboard from 'route/dashboard/Dashboard';

class ResizeObserverMock {
observe() {}

unobserve() {}

disconnect() {}
}
jest.mock('route/history/Chart', () => ({
default: () => <div>chart-mock</div>,
}));
jest.mock('route/history/RecentRuns', () => ({
default: () => <div>recent-runs-mock</div>,
}));

describe('Dashboard', () => {
it('renders Dashboard without crashing', () => {
window.ResizeObserver =
ResizeObserverMock as unknown as typeof ResizeObserver;
render(
<Grid container spacing={3} sx={{ minHeight: '100%' }}>
<Dashboard />
</Grid>
);
beforeEach(() => {
jest.resetAllMocks();
});

it('renders Dashboard', () => {
render(<Dashboard />);
expect(true);
});

it('renders Chart and RecentRuns components', () => {
render(<Dashboard />);
expect(screen.queryByText('chart-mock')).toBeInTheDocument();
expect(screen.queryByText('recent-runs-mock')).toBeInTheDocument();
});
});
21 changes: 12 additions & 9 deletions client/test/DigitalTwins.test.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,19 @@
/**
* @jest-environment jsdom
*/
import { expect, describe, it } from '@jest/globals';
import { render } from '@testing-library/react';
import * as React from 'react';
import { render, screen } from '@testing-library/react';
import DigitalTwins from '../src/route/digitaltwins/DigitalTwins';

jest.mock('route/digitaltwins/Workflows', () => ({
default: () => <div>workflows-mock</div>,
}));

describe('Digital Twins', () => {
it('Reder OK', () => {
render(
<DigitalTwins />
);
it('reder DigitalTwin', () => {
render(<DigitalTwins />);
expect(true);
});

it('renders Dashboard woth components', () => {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similar blocks of code found in 2 locations. Consider refactoring.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@prasadtalasila So codeclimate is kind of dumb when it comes to test... Is it okay if we exclude test from codeclimate or how do we prevent this redunt code smell?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@SyntaxXeror
Please check codeclimate config docs. If I am not mistaken, there must be a way to skip this problem.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@prasadtalasila you already replyed to this early where you wrote directly from email, so this is fixed :)

render(<DigitalTwins />);
expect(screen.queryByText('workflows-mock')).toBeInTheDocument();
});
});
54 changes: 23 additions & 31 deletions client/test/Iframe.test.tsx
Original file line number Diff line number Diff line change
@@ -1,42 +1,34 @@
/**
* @jest-environment jsdom
*/
import * as React from 'react';
import { render } from '@testing-library/react';
import { describe, expect, it } from '@jest/globals';
import '@testing-library/jest-dom/extend-expect';

import { render, screen } from '@testing-library/react';
import Iframe from '../src/components/Iframe';

describe('Iframe', () => {
const url = 'https://example.com/';
const title = 'Example website';
var iframe: HTMLIFrameElement;

beforeEach(() => {
render(<Iframe url="https://example.com/" title="Example" />);
iframe = screen.getByTitle('Example') as HTMLIFrameElement;
});

it('renders an iframe element with correct src and title', () => {
const { getByTitle } = render(<Iframe url={url} title={title} />);
const iframe = getByTitle(title);
expect(iframe).toHaveProperty('src', url);
it('renders an iframe element with the correct src and title', () => {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similar blocks of code found in 2 locations. Consider refactoring.

expect(iframe.src).toBe('https://example.com/');
});

it('renders an iframe element with correct width', () => {
const { getByTitle } = render(<Iframe url={url} title={title} />);
const iframe = getByTitle(title);
expect(iframe).toHaveProperty('width', '100%');
it('sets the iframe width to 100%', () => {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Similar blocks of code found in 2 locations. Consider refactoring.

expect(iframe.width).toBe('100%');
});

// it('renders an iframe element with fullsize style when fullsize prop is true', () => {
// const { getByTitle } = render(
// <Iframe url={url} title={title} fullsize={true} />
// );
// const iframe = getByTitle(title);
// expect(iframe).toHaveStyle({ flexGrow: 1 });
// });
it('sets the iframe height to 100% if fullsize prop is not provided', () => {
expect(iframe.style.height).toBe('100%');
expect(iframe.style.flexGrow).toBe('');
});
});

// it('renders an iframe element with height style when fullsize prop is false', () => {
// const { getByTitle } = render(
// <Iframe url={url} title={title} fullsize={false} />
// );
// const iframe = getByTitle(title);
// expect(iframe).toHaveStyle({ height: '100%' });
// });
describe('Iframe fullsize', () => {
it('sets the iframe height to auto if fullsize prop is provided', () => {
render(<Iframe url="https://example.com/" title="Example" fullsize />);
const iframe = screen.getByTitle('Example') as HTMLIFrameElement;
expect(iframe.style.flexGrow).toBe('1');
expect(iframe.style.height).toBe('');
});
});
Loading