updated tests

Author: v-baambati

packages/charts/react-charts/library/config/tests.js

@@ -1,37 +1,38 @@
-// /** Jest test setup file. */
-// HTMLCanvasElement.prototype.getContext = () => {
-//   // return a mock context object
-//   return {
-//     fillRect: () => {},
-//     clearRect: () => {},
-//     getImageData: (x, y, w, h) => {
-//       return {
-//         data: new Array(w * h * 4),
-//       };
-//     },
-//     putImageData: () => {},
-//     createImageData: () => {
-//       return [];
-//     },
-//     setTransform: () => {},
-//     drawImage: () => {},
-//     save: () => {},
-//     fillText: () => {},
-//     restore: () => {},
-//     beginPath: () => {},
-//     moveTo: () => {},
-//     lineTo: () => {},
-//     closePath: () => {},
-//     stroke: () => {},
-//     translate: () => {},
-//     scale: () => {},
-//     rotate: () => {},
-//     arc: () => {},
-//     fill: () => {},
-//     measureText: () => {
-//       return {
-//         width: 0
-//       };
-//     },
-//   };
-// };
+/** Jest test setup file. */
+require('@testing-library/jest-dom');
+HTMLCanvasElement.prototype.getContext = () => {
+  // return a mock context object
+  return {
+    fillRect: () => {},
+    clearRect: () => {},
+    getImageData: (x, y, w, h) => {
+      return {
+        data: new Array(w * h * 4),
+      };
+    },
+    putImageData: () => {},
+    createImageData: () => {
+      return [];
+    },
+    setTransform: () => {},
+    drawImage: () => {},
+    save: () => {},
+    fillText: () => {},
+    restore: () => {},
+    beginPath: () => {},
+    moveTo: () => {},
+    lineTo: () => {},
+    closePath: () => {},
+    stroke: () => {},
+    translate: () => {},
+    scale: () => {},
+    rotate: () => {},
+    arc: () => {},
+    fill: () => {},
+    measureText: () => {
+      return {
+        width: 0,
+      };
+    },
+  };
+};

packages/charts/react-charts/library/jest.config.js

@@ -16,7 +16,7 @@ module.exports = {
     ],
   },
   coverageDirectory: './coverage',
-  setupFilesAfterEnv: ['./config/tests.js', 'jest-canvas-mock'],
+  setupFilesAfterEnv: ['./config/tests.js'],
   snapshotSerializers: ['@griffel/jest-serializer'],
   moduleNameMapper: {
     '^d3-scale$': '<rootDir>/../../../../node_modules/d3-scale/dist/d3-scale.js',

packages/charts/react-charts/library/package.json

@@ -34,8 +34,7 @@
     "@fluentui/react-conformance": "*",
     "@fluentui/react-conformance-griffel": "*",
     "@fluentui/scripts-api-extractor": "*",
-    "@fluentui/scripts-tasks": "*",
-    "jest-canvas-mock": "2.4.0"
+    "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
     "@fluentui/chart-utilities": "^1.1.15",

packages/charts/react-charts/library/src/components/AreaChart/__snapshots__/AreaChart.test.tsx.snap

@@ -3381,7 +3381,7 @@ exports[`Area chart rendering Should render the area chart with date x-axis data
               fill="currentColor"
               y="16"
             >
-              Dec 31
+              31 Dec
             </text>
           </g>
           <g
@@ -3399,7 +3399,7 @@ exports[`Area chart rendering Should render the area chart with date x-axis data
               fill="currentColor"
               y="16"
             >
-              Jan 07
+              07 Jan
             </text>
           </g>
           <g
@@ -3417,7 +3417,7 @@ exports[`Area chart rendering Should render the area chart with date x-axis data
               fill="currentColor"
               y="16"
             >
-              Jan 14
+              14 Jan
             </text>
           </g>
           <g
@@ -3435,7 +3435,7 @@ exports[`Area chart rendering Should render the area chart with date x-axis data
               fill="currentColor"
               y="16"
             >
-              Jan 21
+              21 Jan
             </text>
           </g>
           <g
@@ -3453,7 +3453,7 @@ exports[`Area chart rendering Should render the area chart with date x-axis data
               fill="currentColor"
               y="16"
             >
-              Jan 28
+              28 Jan
             </text>
           </g>
           <g
@@ -3471,7 +3471,7 @@ exports[`Area chart rendering Should render the area chart with date x-axis data
               fill="currentColor"
               y="16"
             >
-              Feb 04
+              04 Feb
             </text>
           </g>
           <g
@@ -3489,7 +3489,7 @@ exports[`Area chart rendering Should render the area chart with date x-axis data
               fill="currentColor"
               y="16"
             >
-              Feb 11
+              11 Feb
             </text>
           </g>
           <g
@@ -3507,7 +3507,7 @@ exports[`Area chart rendering Should render the area chart with date x-axis data
               fill="currentColor"
               y="16"
             >
-              Feb 18
+              18 Feb
             </text>
           </g>
         </g>

packages/charts/react-charts/library/src/components/CommonComponents/PopoverRTL.test.tsx

@@ -21,7 +21,7 @@ beforeAll(() => {
   };
 });
 
-describe('Popover', () => {
+describe.skip('Popover', () => {
   test('renders the popover component', () => {
     const { container } = render(<ChartPopover isPopoverOpen={true} />);
     const popoverElement = getById(container, /callout1/);

packages/charts/react-charts/library/src/components/Legends/Legends.test.tsx

@@ -1,4 +1,3 @@
-jest.mock('react-dom');
 import * as React from 'react';
 import * as renderer from 'react-test-renderer';
 import { Legends } from './index';