RELATED: FET-161 React 16

gooddata · Sep 27, 2018 · 64226ba · 64226ba
1 parent f9f9c33
commit 64226ba
Show file tree

Hide file tree

Showing 23 changed files with 765 additions and 599 deletions.
diff --git a/jest.setup.js b/jest.setup.js
@@ -1,5 +1,8 @@
+const raf = require('raf');
+raf.polyfill();
+
 const enzyme = require('enzyme');
-const Adapter = require('enzyme-adapter-react-15');
+const Adapter = require('enzyme-adapter-react-16');
 
 enzyme.configure({ adapter: new Adapter() });
 

diff --git a/package.json b/package.json
@@ -13,16 +13,17 @@
     "LICENSE"
   ],
   "devDependencies": {
-    "@gooddata/eslint-config": "0.0.20",
+    "@gooddata/eslint-config": "0.1.0",
     "@gooddata/mock-js": "1.8.3",
-    "@gooddata/test-storybook": "1.3.0",
-    "@gooddata/tslint-config": "0.0.13",
-    "@storybook/addon-actions": "3.4.8",
-    "@storybook/addon-options": "3.4.8",
-    "@storybook/react": "3.4.8",
+    "@gooddata/test-storybook": "2.0.0",
+    "@gooddata/tslint-config": "0.0.11",
+    "@storybook/addon-actions": "3.4.10",
+    "@storybook/addon-options": "3.4.10",
+    "@storybook/addons": "3.4.10",
+    "@storybook/react": "3.4.10",
     "@types/classnames": "2.2.3",
-    "@types/enzyme": "3.1.6",
-    "@types/enzyme-adapter-react-15": "1.0.1",
+    "@types/enzyme": "3.1.13",
+    "@types/enzyme-adapter-react-16": "1.0.3",
     "@types/fixed-data-table-2": "0.8.1",
     "@types/invariant": "2.2.29",
     "@types/jest": "20.0.4",
@@ -33,7 +34,7 @@
     "@types/react-dom": "16.0.3",
     "@types/react-intl": "2.3.5",
     "@types/react-measure": "0.4.7",
-    "@types/react-portal": "3.0.4",
+    "@types/react-portal": "4.0.1",
     "@types/react-test-renderer": "16.0.0",
     "@types/storybook__addon-actions": "3.0.1",
     "@types/storybook__react": "3.0.6",
@@ -47,13 +48,14 @@
     "babel-polyfill": "^6.26.0",
     "babel-preset-env": "1.6.1",
     "babel-preset-react": "6.24.1",
+    "babel-runtime": "6.25.0",
     "circular-dependency-plugin": "4.4.0",
     "clean-webpack-plugin": "0.1.17",
     "commander": "2.14.1",
     "compression-webpack-plugin": "1.1.7",
     "css-loader": "0.28.7",
-    "enzyme": "3.3.0",
-    "enzyme-adapter-react-15": "1.0.5",
+    "enzyme": "3.5.0",
+    "enzyme-adapter-react-16": "1.3.1",
     "file-loader": "1.1.6",
     "formik": "^0.11.11",
     "history": "^4.7.2",
@@ -65,18 +67,19 @@
     "moment": "2.22.1",
     "node-sass": "4.7.2",
     "node-sass-magic-importer": "5.1.0",
+    "raf": "3.3.2",
     "raw-loader": "0.5.1",
-    "react": "15.6.2",
+    "react": "16.5.2",
     "react-async-script": "^0.9.1",
     "react-datepicker": "1.1.0",
-    "react-dom": "15.6.2",
+    "react-dom": "16.5.2",
     "react-ga": "^2.5.2",
     "react-google-recaptcha": "^0.11.0",
     "react-helmet": "5.2.0",
     "react-router-dom": "4.2.2",
     "react-select": "1.2.1",
     "react-syntax-highlighter": "6.1.2",
-    "react-test-renderer": "15.6.2",
+    "react-test-renderer": "16.4.2",
     "recharts": "1.0.0-beta.9",
     "sass-loader": "6.0.6",
     "style-loader": "0.19.1",
@@ -93,7 +96,7 @@
   },
   "dependencies": {
     "@gooddata/gooddata-js": "8.2.0",
-    "@gooddata/goodstrap": "56.1.4",
+    "@gooddata/goodstrap": "57.0.0",
     "@gooddata/js-utils": "^2.0.1",
     "@gooddata/numberjs": "^3.1.2",
     "@gooddata/typings": "2.3.1",
@@ -116,8 +119,8 @@
     "rxjs": "^5.5.6"
   },
   "peerDependencies": {
-    "react": "15.6.2",
-    "react-dom": "15.6.2"
+    "react": "16.5.2",
+    "react-dom": "16.5.2"
   },
   "config": {
     "eslint": "./examples/**/*.{js,jsx}",
@@ -248,7 +251,6 @@
       "!**/*.d.ts"
     ],
     "collectCoverage": false,
-    "mapCoverage": true,
     "moduleNameMapper": {
       "\\.(css|less|sass|scss)$": "<rootDir>/__mocks__/styleMock.ts"
     },

diff --git a/src/components/afm/tests/AreaChart.spec.tsx b/src/components/afm/tests/AreaChart.spec.tsx
@@ -9,6 +9,7 @@ import { dummyExecuteAfmAdapterFactory } from './utils/DummyExecuteAfmAdapter';
 
 describe('Area chart', () => {
     const afmWithAttr = {
+        measures: [] as any,
         attributes: [
             {
                 localIdentifier: 'area1',

diff --git a/src/components/afm/tests/BarChart.spec.tsx b/src/components/afm/tests/BarChart.spec.tsx
@@ -8,6 +8,7 @@ import { dummyExecuteAfmAdapterFactory } from './utils/DummyExecuteAfmAdapter';
 
 describe('BarChart', () => {
     const afmWithAttr = {
+        measures: [] as any,
         attributes: [
             {
                 localIdentifier: 'a1',

diff --git a/src/components/afm/tests/ColumnChart.spec.tsx b/src/components/afm/tests/ColumnChart.spec.tsx
@@ -8,6 +8,7 @@ import { dummyExecuteAfmAdapterFactory } from './utils/DummyExecuteAfmAdapter';
 
 describe('ColumnChart', () => {
     const afmWithAttr = {
+        measures: [] as any,
         attributes: [
             {
                 localIdentifier: 'a1',

diff --git a/src/components/afm/tests/ComboChart.spec.tsx b/src/components/afm/tests/ComboChart.spec.tsx
@@ -8,6 +8,7 @@ import { dummyExecuteAfmAdapterFactory } from './utils/DummyExecuteAfmAdapter';
 
 describe('ComboChart', () => {
     const afmWithAttr = {
+        measures: [] as any,
         attributes: [
             {
                 localIdentifier: 'a1',
@@ -20,7 +21,7 @@ describe('ComboChart', () => {
         const wrapper = mount((
             <ComboChart
                 projectId="prId"
-                afm={{}}
+                afm={{ measures: [] }}
                 resultSpec={{}}
                 adapterFactory={dummyExecuteAfmAdapterFactory}
             />));

diff --git a/src/components/afm/tests/DonutChart.spec.tsx b/src/components/afm/tests/DonutChart.spec.tsx
@@ -8,6 +8,7 @@ import { dummyExecuteAfmAdapterFactory } from './utils/DummyExecuteAfmAdapter';
 
 describe('DonutChart', () => {
     const afmWithAttr = {
+        measures: [] as any,
         attributes: [
             {
                 localIdentifier: 'a1',
@@ -20,7 +21,7 @@ describe('DonutChart', () => {
         const wrapper = mount((
             <DonutChart
                 projectId="prId"
-                afm={{}}
+                afm={{ measures: [] }}
                 resultSpec={{}}
                 adapterFactory={dummyExecuteAfmAdapterFactory}
             />));

diff --git a/src/components/afm/tests/FunnelChart.spec.tsx b/src/components/afm/tests/FunnelChart.spec.tsx
@@ -20,7 +20,7 @@ describe('FunnelChart', () => {
         const wrapper = mount((
             <FunnelChart
                 projectId="prId"
-                afm={{}}
+                afm={{ measures: [] }}
                 resultSpec={{}}
                 adapterFactory={dummyExecuteAfmAdapterFactory}
             />));

diff --git a/src/components/afm/tests/LineChart.spec.tsx b/src/components/afm/tests/LineChart.spec.tsx
@@ -8,6 +8,7 @@ import { dummyExecuteAfmAdapterFactory } from './utils/DummyExecuteAfmAdapter';
 
 describe('LineChart', () => {
     const afmWithAttr = {
+        measures: [] as any,
         attributes: [
             {
                 localIdentifier: 'a1',

diff --git a/src/components/afm/tests/PieChart.spec.tsx b/src/components/afm/tests/PieChart.spec.tsx
@@ -20,7 +20,7 @@ describe('PieChart', () => {
         const wrapper = mount((
             <PieChart
                 projectId="prId"
-                afm={{}}
+                afm={{ measures: [] }}
                 resultSpec={{}}
                 adapterFactory={dummyExecuteAfmAdapterFactory}
             />));

diff --git a/src/components/afm/tests/ScatterPlot.spec.tsx b/src/components/afm/tests/ScatterPlot.spec.tsx
@@ -8,6 +8,7 @@ import { dummyExecuteAfmAdapterFactory } from './utils/DummyExecuteAfmAdapter';
 
 describe('ScatterPlot', () => {
     const afmWithAttr = {
+        measures: [] as any,
         attributes: [
             {
                 localIdentifier: 'a1',
@@ -20,7 +21,7 @@ describe('ScatterPlot', () => {
         const wrapper = mount((
             <ScatterPlot
                 projectId="prId"
-                afm={{}}
+                afm={{ measures: [] }}
                 resultSpec={{}}
                 adapterFactory={dummyExecuteAfmAdapterFactory}
             />));

diff --git a/src/components/afm/tests/Table.spec.tsx b/src/components/afm/tests/Table.spec.tsx
@@ -4,7 +4,7 @@ import { mount } from 'enzyme';
 import { testUtils } from '@gooddata/js-utils';
 import { Table } from '../Table';
 import { SortableTable } from '../../core/SortableTable';
-import { dummyExecuteAfmAdapterFactory } from './utils/DummyExecuteAfmAdapter';
+import { dummyExecuteAfmAdapterFactoryTable } from './utils/DummyExecuteAfmAdapter';
 import { executionRequest } from './utils/dummyFixture';
 
 describe('Table', () => {
@@ -13,7 +13,7 @@ describe('Table', () => {
             <Table
                 projectId="prId"
                 afm={executionRequest.execution.afm}
-                adapterFactory={dummyExecuteAfmAdapterFactory}
+                adapterFactory={dummyExecuteAfmAdapterFactoryTable}
             />
         ));
 

diff --git a/src/components/afm/tests/utils/DummyExecuteAfmAdapter.tsx b/src/components/afm/tests/utils/DummyExecuteAfmAdapter.tsx
@@ -1,7 +1,7 @@
 // (C) 2007-2018 GoodData Corporation
 import { SDK, DataLayer } from '@gooddata/gooddata-js';
 import { AFM, Execution } from '@gooddata/typings';
-import { executionResponses } from './dummyFixture';
+import { executionResponses, executionResponsesTable } from './dummyFixture';
 
 export class DummyExecuteAfmAdapter extends DataLayer.ExecuteAfmAdapter {
     public createDataSource(
@@ -23,3 +23,24 @@ export class DummyExecuteAfmAdapter extends DataLayer.ExecuteAfmAdapter {
 export function dummyExecuteAfmAdapterFactory(sdk: SDK, projectId: string) {
     return new DummyExecuteAfmAdapter(sdk, projectId);
 }
+
+export class DummyExecuteAfmAdapterTable extends DataLayer.ExecuteAfmAdapter {
+    public createDataSource(
+        afm: AFM.IAfm,
+        fingerprint?: string
+    ): Promise<DataLayer.DataSource.IDataSource<Execution.IExecutionResponses>> {
+        const execFactory = () => {
+            return Promise.resolve(executionResponsesTable);
+        };
+        const dataSource = new DataLayer.DataSource.DataSource<Execution.IExecutionResponses>(
+            execFactory,
+            afm,
+            fingerprint
+        );
+        return Promise.resolve(dataSource);
+    }
+}
+
+export function dummyExecuteAfmAdapterFactoryTable(sdk: SDK, projectId: string) {
+    return new DummyExecuteAfmAdapterTable(sdk, projectId);
+}
diff --git a/src/components/afm/tests/utils/dummyFixture.ts b/src/components/afm/tests/utils/dummyFixture.ts
@@ -137,3 +137,52 @@ export const executionResponses: Execution.IExecutionResponses = {
     executionResponse,
     executionResult
 };
+
+// different order of headers for table
+export const executionResponsesTable: Execution.IExecutionResponses = {
+    executionResponse: {
+        dimensions: [
+            {
+                headers: [
+                    {
+                        attributeHeader: {
+                            name: 'Department',
+                            localIdentifier: 'departmentAttribute',
+                            uri: '/gdc/md/d20eyb3wfs0xe5l0lfscdnrnyhq1t42q/obj/1027',
+                            identifier: 'label.owner.department',
+                            formOf: {
+                                uri: '/gdc/md/d20eyb3wfs0xe5l0lfscdnrnyhq1t42q/obj/1026',
+                                identifier: 'department',
+                                name: 'Department'
+                            }
+                        }
+                    }
+                ]
+            },
+            {
+                headers: [
+                    {
+                        measureGroupHeader: {
+                            items: [
+                                {
+                                    measureHeaderItem: {
+                                        name: 'Amount',
+                                        format: '#,##0.00',
+                                        localIdentifier: 'amountMetric',
+                                        uri: '/gdc/md/d20eyb3wfs0xe5l0lfscdnrnyhq1t42q/obj/1279',
+                                        identifier: 'ah1EuQxwaCqs'
+                                    }
+                                }
+                            ]
+                        }
+                    }
+                ]
+            }
+        ],
+        links: {
+            executionResult: 'abc'
+        }
+
+    },
+    executionResult
+};
diff --git a/src/components/filters/AttributeFilter/tests/AttributeDropdown.spec.tsx b/src/components/filters/AttributeFilter/tests/AttributeDropdown.spec.tsx
@@ -59,7 +59,7 @@ describe('AttributeDropdown', () => {
     it('should render overlay on click and display loading', () => {
         const attributeDisplayForm = createADF();
         const wrapper = renderComponent({ attributeDisplayForm });
-        wrapper.find('.gd-attribute-filter .button-dropdown .s-country button').simulate('click');
+        wrapper.find('button.s-country').simulate('click');
         expect(
             document.querySelectorAll('.gd-attribute-filter-overlay .s-attribute-filter-list-loading')
         ).toHaveLength(1);

diff --git a/src/components/tests/PivotTable.spec.tsx b/src/components/tests/PivotTable.spec.tsx
@@ -83,9 +83,9 @@ describe('PivotTable', () => {
             ]
         };
 
-        expect(wrapper.find('WrappedComponent')).toHaveLength(1);
-        expect(wrapper.find('WrappedComponent').prop('afm')).toEqual(expectedAfm);
-        expect(wrapper.find('WrappedComponent').prop('resultSpec')).toEqual(expectedResultSpec);
+        expect(wrapper).toHaveLength(1);
+        expect(wrapper.prop('afm')).toEqual(expectedAfm);
+        expect(wrapper.prop('resultSpec')).toEqual(expectedResultSpec);
     });
     it('should render table and convert the buckets to AFM and resultSpec', () => {
         const wrapper = shallow(
@@ -134,9 +134,9 @@ describe('PivotTable', () => {
             ]
         };
 
-        expect(wrapper.find('WrappedComponent')).toHaveLength(1);
-        expect(wrapper.find('WrappedComponent').prop('afm')).toEqual(expectedAfm);
-        expect(wrapper.find('WrappedComponent').prop('resultSpec')).toEqual(expectedResultSpec);
+        expect(wrapper).toHaveLength(1);
+        expect(wrapper.prop('afm')).toEqual(expectedAfm);
+        expect(wrapper.prop('resultSpec')).toEqual(expectedResultSpec);
     });
 
     it('should render table with pivot buckets and convert the buckets to AFM and resultSpec', () => {
@@ -194,8 +194,8 @@ describe('PivotTable', () => {
             ]
         };
 
-        expect(wrapper.find('WrappedComponent')).toHaveLength(1);
-        expect(wrapper.find('WrappedComponent').prop('afm')).toEqual(expectedAfm);
-        expect(wrapper.find('WrappedComponent').prop('resultSpec')).toEqual(expectedResultSpec);
+        expect(wrapper).toHaveLength(1);
+        expect(wrapper.prop('afm')).toEqual(expectedAfm);
+        expect(wrapper.prop('resultSpec')).toEqual(expectedResultSpec);
     });
 });
diff --git a/src/components/visualizations/chart/HighChartsRenderer.tsx b/src/components/visualizations/chart/HighChartsRenderer.tsx
@@ -115,10 +115,11 @@ export default class HighChartsRenderer
             if (this.chartRef) {
                 const chart = this.chartRef.getChart();
 
-                chart.container.style.height = (this.props.height && String(this.props.height)) || '100%';
-                chart.container.style.position = this.props.height ? 'relative' : 'absolute';
-
-                chart.reflow();
+                if (chart.container && chart.container.style) {
+                    chart.container.style.height = (this.props.height && String(this.props.height)) || '100%';
+                    chart.container.style.position = this.props.height ? 'relative' : 'absolute';
+                    chart.reflow();
+                }
             }
         }, 0);
 

diff --git a/src/components/visualizations/chart/chartOptionsBuilder.ts b/src/components/visualizations/chart/chartOptionsBuilder.ts
@@ -1161,7 +1161,7 @@ function getYAxes(
             yAxes = compact([firstAxis, secondAxis]);
         }
     } else if (isScatterPlot(type) || isBubbleChart(type)) {
-        const hasSecondaryMeasure = mdObject.buckets
+        const hasSecondaryMeasure = get(mdObject, 'buckets', [])
             .find(m => m.localIdentifier === SECONDARY_MEASURES && m.items.length > 0);
 
         if (hasSecondaryMeasure) {