Merge pull request #1835 from carbon-design-system/upgrade-carbon-charts

Upgrade carbon charts
carbon-design-system · Nov 30, 2020 · 4575a5c · 4575a5c
2 parents eb2944d + 6cd604e
commit 4575a5c
Show file tree

Hide file tree

Showing 17 changed files with 135 additions and 104 deletions.
diff --git a/__mocks__/@carbon/charts-react/bar-chart-grouped.js b/__mocks__/@carbon/charts-react/bar-chart-grouped.js
@@ -0,0 +1,4 @@
+const React = require('react');
+
+module.exports = () =>
+  React.createElement('div', { id: 'mock-bar-chart-grouped' });
diff --git a/__mocks__/@carbon/charts-react/bar-chart-simple.js b/__mocks__/@carbon/charts-react/bar-chart-simple.js
@@ -0,0 +1,4 @@
+const React = require('react');
+
+module.exports = () =>
+  React.createElement('div', { id: 'mock-bar-chart-simple' });
diff --git a/__mocks__/@carbon/charts-react/bar-chart-stacked.js b/__mocks__/@carbon/charts-react/bar-chart-stacked.js
@@ -0,0 +1,4 @@
+const React = require('react');
+
+module.exports = () =>
+  React.createElement('div', { id: 'mock-bar-chart-stacked' });
diff --git a/__mocks__/@carbon/charts-react/line-chart.js b/__mocks__/@carbon/charts-react/line-chart.js
@@ -0,0 +1,3 @@
+const React = require('react');
+
+module.exports = () => React.createElement('div', { id: 'mock-line-chart' });
diff --git a/__mocks__/@carbon/charts-react/pie-chart.js b/__mocks__/@carbon/charts-react/pie-chart.js
@@ -0,0 +1,3 @@
+const React = require('react');
+
+module.exports = () => React.createElement('div', { id: 'mock-pie-chart' });
diff --git a/jest.config.js b/jest.config.js
@@ -135,7 +135,10 @@ module.exports = {
     '^(?!.*\\.(js|jsx|css|json)$)': '<rootDir>/config/jest/fileTransform.js',
   },
   testPathIgnorePatterns: ['/config/', '/lib/'],
-  transformIgnorePatterns: ['/node_modules/(?!(@carbon/charts)).+(.jsx?)'],
+  transformIgnorePatterns: [
+    '/node_modules/(?!(@carbon/charts)).+(.jsx?)',
+    '/__mocks__/.+(.jsx?)',
+  ],
   watchPathIgnorePatterns: ['/coverage/', '/results/', '/.git/'],
   moduleFileExtensions: ['js', 'json', 'jsx'],
   snapshotSerializers: ['enzyme-to-json/serializer'],

diff --git a/package.json b/package.json
@@ -126,8 +126,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.10.2",
-    "@carbon/charts": "^0.41.1",
-    "@carbon/charts-react": "^0.40.13",
+    "@carbon/charts": "^0.41.6",
+    "@carbon/charts-react": "^0.41.6",
     "@carbon/colors": "10.15.0",
     "@carbon/icons-react": "10.17.0",
     "@carbon/layout": "10.12.0",

diff --git a/src/components/BarChartCard/BarChartCard.test.jsx b/src/components/BarChartCard/BarChartCard.test.jsx
@@ -50,7 +50,7 @@ describe('BarChartCard', () => {
 
   it('does not show bar chart when loading', () => {
     const wrapper = mount(<BarChartCard {...barChartCardProps} isLoading />);
-    expect(wrapper.find('SimpleBarChart')).toHaveLength(0);
+    expect(wrapper.find('#mock-bar-chart-simple')).toHaveLength(0);
   });
 
   it('does not show bar chart when empty data', () => {
@@ -60,7 +60,7 @@ describe('BarChartCard', () => {
         values={barChartData.quarters.filter((q) => q.quarter === 'NOT_VALID')}
       />
     );
-    expect(wrapper.find('SimpleBarChart')).toHaveLength(0);
+    expect(wrapper.find('#mock-bar-chart-simple')).toHaveLength(0);
   });
 
   it('shows table when isExpanded', () => {
@@ -103,7 +103,7 @@ describe('BarChartCard', () => {
         values={barChartData.quarters.filter((a) => a.quarter === '2020-Q1')}
       />
     );
-    expect(wrapper.find('GroupedBarChart')).toHaveLength(1);
+    expect(wrapper.find('#mock-bar-chart-grouped')).toHaveLength(1);
   });
 
   it('shows stackedBarChart', () => {
@@ -130,7 +130,7 @@ describe('BarChartCard', () => {
         values={barChartData.quarters.filter((a) => a.quarter === '2020-Q3')}
       />
     );
-    expect(wrapper.find('StackedBarChart')).toHaveLength(1);
+    expect(wrapper.find('#mock-bar-chart-stacked')).toHaveLength(1);
   });
 
   it('shows a timeSeries chart', () => {
@@ -152,7 +152,7 @@ describe('BarChartCard', () => {
         values={barChartData.timestamps.filter((t) => t.city === 'Amsterdam')}
       />
     );
-    expect(wrapper.find('StackedBarChart')).toHaveLength(1);
+    expect(wrapper.find('#mock-bar-chart-stacked')).toHaveLength(1);
   });
 
   it('shows a horizontal chart', () => {
@@ -180,7 +180,7 @@ describe('BarChartCard', () => {
         values={barChartData.quarters.filter((a) => a.quarter === '2020-Q1')}
       />
     );
-    expect(wrapper.find('GroupedBarChart')).toHaveLength(1);
+    expect(wrapper.find('#mock-bar-chart-grouped')).toHaveLength(1);
   });
 
   it('i18n string test', () => {

diff --git a/src/components/BarChartCard/__snapshots__/BarChartCard.story.storyshot b/src/components/BarChartCard/__snapshots__/BarChartCard.story.storyshot
@@ -90,7 +90,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh
             className="iot--bar-chart-container"
           >
             <div
-              className="chart-holder"
+              id="mock-bar-chart-grouped"
             />
           </div>
         </div>
@@ -213,7 +213,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh
             className="iot--bar-chart-container"
           >
             <div
-              className="chart-holder"
+              id="mock-bar-chart-grouped"
             />
           </div>
         </div>
@@ -507,7 +507,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh
             className="iot--bar-chart-container"
           >
             <div
-              className="chart-holder"
+              id="mock-bar-chart-simple"
             />
           </div>
         </div>
@@ -675,7 +675,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh
             className="iot--bar-chart-container"
           >
             <div
-              className="chart-holder"
+              id="mock-bar-chart-simple"
             />
           </div>
         </div>
@@ -798,7 +798,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh
             className="iot--bar-chart-container"
           >
             <div
-              className="chart-holder"
+              id="mock-bar-chart-simple"
             />
           </div>
         </div>
@@ -921,7 +921,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh
             className="iot--bar-chart-container"
           >
             <div
-              className="chart-holder"
+              id="mock-bar-chart-stacked"
             />
           </div>
         </div>
@@ -1089,7 +1089,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh
             className="iot--bar-chart-container"
           >
             <div
-              className="chart-holder"
+              id="mock-bar-chart-stacked"
             />
           </div>
         </div>
@@ -1257,7 +1257,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh
             className="iot--bar-chart-container"
           >
             <div
-              className="chart-holder"
+              id="mock-bar-chart-stacked"
             />
           </div>
         </div>
@@ -1380,7 +1380,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh
             className="iot--bar-chart-container"
           >
             <div
-              className="chart-holder"
+              id="mock-bar-chart-stacked"
             />
           </div>
         </div>
@@ -1470,7 +1470,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh
             className="iot--bar-chart-container iot--bar-chart-container--editable"
           >
             <div
-              className="chart-holder"
+              id="mock-bar-chart-grouped"
             />
           </div>
         </div>
@@ -1641,7 +1641,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh
               className="iot--bar-chart-container iot--bar-chart-container--expanded"
             >
               <div
-                className="chart-holder"
+                id="mock-bar-chart-stacked"
               />
               <div
                 className="iot--bar-chart-card--stateful-table iot--table-container bx--data-table-container"
@@ -2839,7 +2839,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/BarCh
             className="iot--bar-chart-container"
           >
             <div
-              className="chart-holder"
+              id="mock-bar-chart-stacked"
             />
           </div>
         </div>

diff --git a/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot b/src/components/Dashboard/__snapshots__/Dashboard.story.storyshot
@@ -333,7 +333,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb
                     className="iot--bar-chart-container"
                   >
                     <div
-                      className="chart-holder"
+                      id="mock-bar-chart-simple"
                     />
                   </div>
                 </div>
@@ -1336,7 +1336,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb
                     className="iot--time-series-card--wrapper"
                   >
                     <div
-                      className="chart-holder"
+                      id="mock-line-chart"
                     />
                   </div>
                 </div>
@@ -2008,7 +2008,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb
                     className="iot--time-series-card--wrapper"
                   >
                     <div
-                      className="chart-holder"
+                      id="mock-line-chart"
                     />
                   </div>
                 </div>
@@ -2752,7 +2752,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb
                     className="iot--bar-chart-container"
                   >
                     <div
-                      className="chart-holder"
+                      id="mock-bar-chart-simple"
                     />
                   </div>
                 </div>
@@ -3755,7 +3755,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb
                     className="iot--time-series-card--wrapper"
                   >
                     <div
-                      className="chart-holder"
+                      id="mock-line-chart"
                     />
                   </div>
                 </div>
@@ -4427,7 +4427,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb
                     className="iot--time-series-card--wrapper"
                   >
                     <div
-                      className="chart-holder"
+                      id="mock-line-chart"
                     />
                   </div>
                 </div>
@@ -5199,7 +5199,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb
                     className="iot--bar-chart-container"
                   >
                     <div
-                      className="chart-holder"
+                      id="mock-bar-chart-simple"
                     />
                   </div>
                 </div>
@@ -6202,7 +6202,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb
                     className="iot--time-series-card--wrapper"
                   >
                     <div
-                      className="chart-holder"
+                      id="mock-line-chart"
                     />
                   </div>
                 </div>
@@ -6874,7 +6874,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb
                     className="iot--time-series-card--wrapper"
                   >
                     <div
-                      className="chart-holder"
+                      id="mock-line-chart"
                     />
                   </div>
                 </div>
@@ -7428,7 +7428,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb
                   className="iot--bar-chart-container"
                 >
                   <div
-                    className="chart-holder"
+                    id="mock-bar-chart-grouped"
                   />
                 </div>
               </div>
@@ -7898,7 +7898,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb
                   className="iot--time-series-card--wrapper"
                 >
                   <div
-                    className="chart-holder"
+                    id="mock-line-chart"
                   />
                 </div>
               </div>
@@ -10223,7 +10223,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb
                     className="iot--bar-chart-container"
                   >
                     <div
-                      className="chart-holder"
+                      id="mock-bar-chart-simple"
                     />
                   </div>
                 </div>
@@ -11226,7 +11226,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb
                     className="iot--time-series-card--wrapper"
                   >
                     <div
-                      className="chart-holder"
+                      id="mock-line-chart"
                     />
                   </div>
                 </div>
@@ -11898,7 +11898,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb
                     className="iot--time-series-card--wrapper"
                   >
                     <div
-                      className="chart-holder"
+                      id="mock-line-chart"
                     />
                   </div>
                 </div>
@@ -12419,7 +12419,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb
                   className="iot--time-series-card--wrapper"
                 >
                   <div
-                    className="chart-holder"
+                    id="mock-line-chart"
                   />
                 </div>
               </div>
@@ -25045,7 +25045,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb
                     className="iot--bar-chart-container"
                   >
                     <div
-                      className="chart-holder"
+                      id="mock-bar-chart-simple"
                     />
                   </div>
                 </div>
@@ -26048,7 +26048,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb
                     className="iot--time-series-card--wrapper"
                   >
                     <div
-                      className="chart-holder"
+                      id="mock-line-chart"
                     />
                   </div>
                 </div>
@@ -26720,7 +26720,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb
                     className="iot--time-series-card--wrapper"
                   >
                     <div
-                      className="chart-holder"
+                      id="mock-line-chart"
                     />
                   </div>
                 </div>

diff --git a/src/components/Dashboard/__snapshots__/DashboardGrid.story.storyshot b/src/components/Dashboard/__snapshots__/DashboardGrid.story.storyshot
@@ -971,7 +971,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb
                 className="iot--pie-chart-container"
               >
                 <div
-                  className="chart-holder"
+                  id="mock-pie-chart"
                 />
               </div>
               <span
@@ -2671,7 +2671,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb
                 className="iot--time-series-card--wrapper"
               >
                 <div
-                  className="chart-holder"
+                  id="mock-line-chart"
                 />
               </div>
             </div>
@@ -2965,7 +2965,7 @@ exports[`Storybook Snapshot tests and console checks Storyshots Watson IoT/Dashb
                 className="iot--bar-chart-container"
               >
                 <div
-                  className="chart-holder"
+                  id="mock-bar-chart-simple"
                 />
               </div>
             </div>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		const React = require('react');

		module.exports = () => React.createElement('div', { id: 'mock-line-chart' });