Skip to content
Snippets Groups Projects
Commit 110e4369 authored by Reinder Kraaij's avatar Reinder Kraaij :eye:
Browse files

Fixed getFieldsHtml Test With Snapshotting

parent ace36a02
No related branches found
No related tags found
1 merge request!1188TMSS-2810 "Multiple TMSS FrontEnd Unit tests Fixed"
Expand all Hide whitespace changes
Inline Side-by-side
SAS/TMSS/frontend/tmss_webapp/package-lock.json
+ 18824
− 18407
View file @ 110e4369
This diff is collapsed.
SAS/TMSS/frontend/tmss_webapp/package.json
+ 41
− 41
View file @ 110e4369
......@@ -8,15 +8,13 @@
"@fortawesome/fontawesome-free": "^5.13.1",
"@json-editor/json-editor": "^2.10.1",
"@kevincobain2000/json-to-html-table": "^1.0.1",
"@testing-library/jest-dom": "^6.1.3",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.5.1",
"@microlink/react-json-view": "^1.22.2",
"ag-grid-community": "^24.1.0",
"ag-grid-react": "^24.1.1",
"axios": "^1.4.0",
"use-axios": "^1.0.0",
"bootstrap": "^4.5.0",
"chart.js": "^4.4.0",
"chartjs-plugin-annotation": "^3.0.1",
"cleave.js": "^1.6.0",
"flatpickr": "^4.6.13",
"font-awesome": "^4.7.0",
......@@ -24,7 +22,6 @@
"html2canvas": "^1.0.0-rc.7",
"immer": "^10.0.3",
"interactjs": "^1.10.19",
"jest-mock-console": "^2.0.0",
"jquery": "^3.7.1",
"json-schema-ref-parser": "^1.0.0-alpha.21",
"jspdf": "^2.5.1",
......@@ -34,13 +31,13 @@
"match-sorter": "^4.2.1",
"moment": "^2.29.4",
"node-polyfill-webpack-plugin": "^2.0.0",
"sass": "^1.68.0",
"npm-check-updates": "^16.10.16",
"papaparse": "^5.3.2",
"pptr-testing-library": "^0.7.0",
"primeflex": "^3.3.1",
"primeicons": "6.0.1",
"primereact": "9.6.2",
"prop-types": "^15.7.2",
"pptr-testing-library": "^0.7.0",
"puppeteer": "^18.0.5",
"react": "^18.2.0",
"react-app-polyfill": "^1.0.6",
......@@ -50,17 +47,16 @@
"react-bootstrap-datetimepicker": "0.0.22",
"react-calendar-timeline": "^0.28.0",
"react-chartjs-2": "^5.2.0",
"chartjs-plugin-annotation": "^3.0.1",
"react-dom": "^18.2.0",
"react-flatpickr": "^3.10.12",
"react-frame-component": "^4.1.2",
"react-json-to-table": "^0.1.7",
"@microlink/react-json-view": "^1.22.2",
"react-live-clock": "^6.1.14",
"react-loader-spinner": "^5.4.5",
"react-moment": "^1.1.3",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "^5.0.1",
"react-table": "^7.2.1",
"react-table": "^7.2.1",
"react-table-plugins": "^1.3.1",
"react-to-print": "^2.12.4",
"react-tooltip": "^4.5.1",
......@@ -69,49 +65,44 @@
"reactstrap": "^9.2.0",
"redux": "^4.2.1",
"replace-in-file": "^7.0.1",
"sass": "^1.68.0",
"shortcut-buttons-flatpickr": "^0.4.0",
"styled-components": "^5.1.1",
"suneditor": "^2.36.5",
"suneditor-react": "^3.6.1",
"typescript": "^3.9.5",
"yup": "^1.2.0",
"jest-canvas-mock": "^2.5.0",
"jest-expect-message": "^1.1.3",
"jest-junit": "^16.0.0",
"npm-check-updates": "^16.10.16",
"react-live-clock": "^6.1.14",
"react-moment": "^1.1.3"
"use-axios": "^1.0.0",
"yup": "^1.2.0"
},
"overrides": {
"ag-grid-react": {
"react":"^18",
"react-dom":"^18"
"react": "^18",
"react-dom": "^18"
},
"react-json-view":{
"react":"^18",
"react-dom":"^18"
"react-json-view": {
"react": "^18",
"react-dom": "^18"
},
"@microlink/react-json-view":{
"react":"^18"
"@microlink/react-json-view": {
"react": "^18"
},
"react-loader-spinner":{
"react":"^18",
"react-dom":"^18"
"react-loader-spinner": {
"react": "^18",
"react-dom": "^18"
},
"use-memo-one":{
"react":"^18"
"use-memo-one": {
"react": "^18"
},
"create-react-context":{
"react":"^18"
"create-react-context": {
"react": "^18"
},
"use-isomorphic-layout-effect":{
"react":"^18"
"use-isomorphic-layout-effect": {
"react": "^18"
},
"react-calendar-timeline":{
"react":"^18"
"react-calendar-timeline": {
"react": "^18"
}
},
"scripts": {
"preinstall": "npx npm-force-resolutions",
......@@ -143,12 +134,21 @@
},
"devDependencies": {
"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.17.12",
"@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2",
"@babel/preset-env": "^7.22.4",
"@testing-library/jest-dom": "^6.1.3",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.5.1",
"babel-jest": "^29.5.0",
"babel-polyfill": "^6.26.0",
"customize-cra": "^1.0.0",
"jest-canvas-mock": "^2.5.0",
"jest-expect-message": "^1.1.3",
"jest-junit": "^16.0.0",
"jest-mock-console": "^2.0.0",
"react-app-rewired": "^2.2.1",
"@babel/preset-env": "^7.22.4",
"babel-jest": "^29.5.0",
"@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2"
"react-test-renderer": "^18.2.0",
"react-scripts": "^5.0.1"
},
"resolutions": {
"immer": "^9.0.12",
......
SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/components/TimelineItemPopover.test.js
+ 17
− 49
View file @ 110e4369
......@@ -3,7 +3,7 @@ import TimelineItemPopover, {getFieldsHtml} from "./TimelineItemPopover";
import moment from "moment";
import {removeReact18ConsoleErrors} from "../../../utils/test.helper";
import UIConstants from "../../../utils/ui.constants";
import renderer from 'react-test-renderer';
removeReact18ConsoleErrors()
describe("TimelineItemPopover", () => {
......@@ -169,57 +169,25 @@ describe("getFieldsHtml", () => {
{label: "Scheduling Unit:", value: "Wolverine"},
];
// This is a snapshot test now. This means it validates against a
// Correct taken snapshot.
test('Render fields with the correct label, value, and classNames', () => {
test("Render fields with the correct label, value, and classNames", () => {
const status = "scheduled";
const style = {color: "blue"};
const page = renderer
.create(getFieldsHtml(fields, status, style))
.toJSON();
expect(page).toMatchSnapshot();
})
let pagecontent;
act( () => {
pagecontent = render(getFieldsHtml(fields, status, style));
});
// Check if the correct number of fields are rendered
const renderedFields = pagecontent.container.getElementsByClassName("entry");
expect(renderedFields.length).toBe(fields.length);
// Check if the labels and values are rendered correctly
fields.forEach((field, index) => {
const renderedLabel = pagecontent.container.querySelector(`.entry:nth-child(${index + 1}) label`);
const renderedValue = pagecontent.container.querySelector(`.entry:nth-child(${index + 1}) .col-7`);
expect(renderedLabel).toHaveTextContent(field.label);
expect(renderedValue).toHaveTextContent(field.value);
});
// Check if the label has the correct className based on the status
const labelClassName = status ? `col-5 su-${status}-icon` : 'col-5';
const renderedLabels = pagecontent.container.querySelectorAll("label");
renderedLabels.forEach((label) => {
expect(label).toHaveClass(labelClassName);
});
// Check if the label has the correct style based on the provided style object
const renderedLabelsStyle = renderedLabels[0].style;
expect(renderedLabelsStyle.color).toBe(style.color);
});
test("Render fields without status and style", () => {
const {container} = render(getFieldsHtml(fields));
// Check if the label has the default className 'col-5' (no status provided)
const renderedLabels = container.querySelectorAll("label");
renderedLabels.forEach((label) => {
expect(label).toHaveClass("col-5");
});
// Check if the labels have no additional style (no style provided)
const renderedLabelsStyle = renderedLabels[0].style;
expect(renderedLabelsStyle.length).toBe(0);
});
});
\ No newline at end of file
const status = "scheduled";
const style = {color: "blue"};
const page = renderer
.create( getFieldsHtml(fields))
.toJSON();
expect(page).toMatchSnapshot();
})
});
\ No newline at end of file
SAS/TMSS/frontend/tmss_webapp/src/routes/Timeline/components/__snapshots__/TimelineItemPopover.test.js.snap 0 → 100644
+ 79
− 0
View file @ 110e4369
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`getFieldsHtml Render fields with the correct label, value, and classNames 1`] = `
Array [
<div
className="entry"
>
<label
className="col-5 su-scheduled-icon"
style={
Object {
"color": "blue",
}
}
>
Project:
</label>
<div
className="col-7 initial-line-height"
>
X-men
</div>
</div>,
<div
className="entry"
>
<label
className="col-5 su-scheduled-icon"
style={
Object {
"color": "blue",
}
}
>
Scheduling Unit:
</label>
<div
className="col-7 initial-line-height"
>
Wolverine
</div>
</div>,
]
`;
exports[`getFieldsHtml Render fields without status and style 1`] = `
Array [
<div
className="entry"
>
<label
className="col-5"
style={Object {}}
>
Project:
</label>
<div
className="col-7 initial-line-height"
>
X-men
</div>
</div>,
<div
className="entry"
>
<label
className="col-5"
style={Object {}}
>
Scheduling Unit:
</label>
<div
className="col-7 initial-line-height"
>
Wolverine
</div>
</div>,
]
`;
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment