Bulk update JS dependencies and fix tests (#6397)

* Bulk update js dependencies and fix tests

This PR is a combination of #6346 and #6384. Both PRs upgraded seperate
js dependencies that caused breaking changes in our testing library.
Specifically, in the internationalization part of our codebase. This
change, in addition to upgrading the library, also fixes our frontend
tests.

Signed-off-by: Dennis Adjei-Baah <dennis@buoyant.io>
This commit is contained in:
Dennis Adjei-Baah 2021-06-29 11:39:50 -05:00 committed by GitHub
parent 138aff5434
commit 25d4f900ce
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 914 additions and 1205 deletions

View File

@ -45,7 +45,7 @@ jobs:
export PATH="$HOME/.yarn/bin:$PATH"
export NODE_ENV=test
bin/web --frozen-lockfile
bin/web test --reporters="jest-dot-reporter" --reporters="./gh_ann_reporter.js" --coverage
bin/web test --reporters="jest-progress-bar-reporter" --reporters="./gh_ann_reporter.js" --coverage
- name: Upload coverage to Codecov
uses: codecov/codecov-action@29386c70ef20e286228c72b668a06fd0e8399192
with:

View File

@ -12,7 +12,8 @@
["@babel/preset-env",
{ // Copied from https://newbedev.com/babel-7-referenceerror-regeneratorruntime-is-not-defined
"useBuiltIns": "entry",
"corejs": 3
"corejs": 3,
"targets": {"node": "current"}
}
], "@babel/preset-react"]
}

View File

@ -4,8 +4,9 @@ import BaseTable from './BaseTable.jsx';
import TableBody from '@material-ui/core/TableBody';
import FilterListIcon from '@material-ui/icons/FilterList';
import TableRow from '@material-ui/core/TableRow';
import { routerWrap } from '../../test/testHelpers.jsx';
import { mount } from 'enzyme';
import { routerWrap, i18nWrap } from '../../test/testHelpers.jsx';
import { mount, shallow } from 'enzyme';
import React from 'react';
describe("Tests for <BaseTable>", () => {
const defaultProps = {
@ -78,7 +79,7 @@ describe("Tests for <BaseTable>", () => {
tableColumns: tableColumns,
});
const component = mount(routerWrap(BaseTable, extraProps));
const component = mount(i18nWrap(routerWrap(BaseTable, extraProps)));
const table = component.find("BaseTable");
expect(table).toBeDefined();
const emptyCard = table.find("EmptyCard");

View File

@ -1,7 +1,7 @@
import _merge from 'lodash/merge';
import ApiHelpers from './util/ApiHelpers.jsx';
import MetricsTable from './MetricsTable.jsx';
import { routerWrap } from '../../test/testHelpers.jsx';
import { i18nAndRouterWrap } from '../../test/testHelpers.jsx';
import { mount } from 'enzyme';
describe('Tests for <MetricsTable>', () => {
@ -20,7 +20,7 @@ describe('Tests for <MetricsTable>', () => {
}],
resource: "deployment"
});
const component = mount(routerWrap(MetricsTable, extraProps));
const component = mount(i18nAndRouterWrap(MetricsTable, extraProps));
const table = component.find("BaseTable");
@ -45,7 +45,7 @@ describe('Tests for <MetricsTable>', () => {
resource: 'deployment',
enableFilter: true
});
const component = mount(routerWrap(MetricsTable, extraProps));
const component = mount(i18nAndRouterWrap(MetricsTable, extraProps));
const table = component.find('BaseTable');
@ -62,7 +62,7 @@ describe('Tests for <MetricsTable>', () => {
it('omits the namespace column for the namespace resource', () => {
let extraProps = _merge({}, defaultProps, { metrics: [], resource: "namespace"});
const component = mount(routerWrap(MetricsTable, extraProps));
const component = mount(i18nAndRouterWrap(MetricsTable, extraProps));
const table = component.find("BaseTable");
@ -76,7 +76,7 @@ describe('Tests for <MetricsTable>', () => {
resource: "deployment",
showNamespaceColumn: false
});
const component = mount(routerWrap(MetricsTable, extraProps));
const component = mount(i18nAndRouterWrap(MetricsTable, extraProps));
const table = component.find("BaseTable");
@ -91,7 +91,7 @@ describe('Tests for <MetricsTable>', () => {
showNamespaceColumn: false,
jaeger: 'jaeger.xyz'
});
const component = mount(routerWrap(MetricsTable, extraProps));
const component = mount(i18nAndRouterWrap(MetricsTable, extraProps));
const table = component.find("BaseTable");
expect(table).toBeDefined();
@ -105,7 +105,7 @@ describe('Tests for <MetricsTable>', () => {
showNamespaceColumn: false,
grafana: 'grafana.xyz'
});
const component = mount(routerWrap(MetricsTable, extraProps));
const component = mount(i18nAndRouterWrap(MetricsTable, extraProps));
const table = component.find("BaseTable");
expect(table).toBeDefined();
@ -120,7 +120,7 @@ describe('Tests for <MetricsTable>', () => {
jaeger: 'jaeger.xyz',
grafana: 'grafana.xyz'
});
const component = mount(routerWrap(MetricsTable, extraProps));
const component = mount(i18nAndRouterWrap(MetricsTable, extraProps));
const table = component.find("BaseTable");
expect(table).toBeDefined();
@ -129,7 +129,7 @@ describe('Tests for <MetricsTable>', () => {
it('adds apex, leaf and weight columns, and omits meshed and grafana column, for a trafficsplit resource', () => {
let extraProps = _merge({}, defaultProps, { metrics: [], resource: "trafficsplit"});
const component = mount(routerWrap(MetricsTable, extraProps));
const component = mount(i18nAndRouterWrap(MetricsTable, extraProps));
const table = component.find("BaseTable");

View File

@ -8,6 +8,7 @@ import sinon from 'sinon';
import sinonStubPromise from 'sinon-stub-promise';
import { mount } from 'enzyme';
import { createMemoryHistory } from 'history';
import { i18nWrap } from '../../test/testHelpers.jsx';
function createMatchMedia(width) {
return query => ({
@ -132,9 +133,11 @@ describe('Namespace Select Button', () => {
});
const component = mount(
<BrowserRouter>
<Navigation {...extraProps} />
</BrowserRouter>
i18nWrap(
<BrowserRouter>
<Navigation {...extraProps} />
</BrowserRouter>
)
);
const input = component.find("input");
@ -143,9 +146,11 @@ describe('Namespace Select Button', () => {
it('renders emojivoto text', () => {
const component = mount(
<BrowserRouter>
<Navigation {...defaultProps} />
</BrowserRouter>
i18nWrap(
<BrowserRouter>
<Navigation {...defaultProps} />
</BrowserRouter>
)
);
const input = component.find("input");

View File

@ -2,13 +2,12 @@ import _cloneDeep from 'lodash/cloneDeep';
import _each from 'lodash/each';
import nsFixtures from '../../test/fixtures/namespaces.json';
import podFixtures from '../../test/fixtures/podRollup.json';
import { routerWrap } from '../../test/testHelpers.jsx';
import { i18nAndRouterWrap } from '../../test/testHelpers.jsx';
import ServiceMesh from './ServiceMesh.jsx';
import sinon from 'sinon';
import sinonStubPromise from 'sinon-stub-promise';
import Spinner from './util/Spinner.jsx';
import { mount } from 'enzyme';
import { i18nWrap } from '../../test/testHelpers.jsx';
sinonStubPromise(sinon);
@ -42,7 +41,7 @@ describe('ServiceMesh', () => {
statusText: errorMsg
});
component = mount(routerWrap(ServiceMesh));
component = mount(i18nAndRouterWrap(ServiceMesh));
return withPromise(() => {
expect(component).toIncludeText(errorMsg);
@ -50,7 +49,7 @@ describe('ServiceMesh', () => {
});
it("renders the spinner before metrics are loaded", () => {
component = mount(routerWrap(ServiceMesh));
component = mount(i18nAndRouterWrap(ServiceMesh));
expect(component.find(Spinner)).toHaveLength(1);
expect(component.find("ServiceMesh")).toHaveLength(1);
@ -62,7 +61,7 @@ describe('ServiceMesh', () => {
ok: true,
json: () => Promise.resolve({ metrics: [] })
});
component = mount(routerWrap(ServiceMesh));
component = mount(i18nAndRouterWrap(ServiceMesh));
return withPromise(() => {
component.update();
@ -78,7 +77,7 @@ describe('ServiceMesh', () => {
ok: true,
json: () => Promise.resolve(podFixtures)
});
component = mount(routerWrap(ServiceMesh));
component = mount(i18nAndRouterWrap(ServiceMesh));
return withPromise(() => {
component.update();
@ -92,7 +91,7 @@ describe('ServiceMesh', () => {
ok: true,
json: () => Promise.resolve({ metrics: [] })
});
component = mount(i18nWrap(routerWrap(ServiceMesh)));
component = mount(i18nAndRouterWrap(ServiceMesh));
return withPromise(() => {
component.update();
@ -108,7 +107,7 @@ describe('ServiceMesh', () => {
ok: true,
json: () => Promise.resolve({ metrics: [] })
});
component = mount(i18nWrap(routerWrap(ServiceMesh)));
component = mount(i18nAndRouterWrap(ServiceMesh));
return withPromise(() => {
component.update();
@ -123,7 +122,7 @@ describe('ServiceMesh', () => {
ok: true,
json: () => Promise.resolve({ metrics: [] })
});
component = mount(i18nWrap(routerWrap(ServiceMesh)));
component = mount(i18nAndRouterWrap(ServiceMesh));
return withPromise(() => {
component.update();
@ -139,7 +138,7 @@ describe('ServiceMesh', () => {
ok: true,
json: () => Promise.resolve({})
});
component = mount(i18nWrap(routerWrap(ServiceMesh)));
component = mount(i18nAndRouterWrap(ServiceMesh));
return withPromise(() => {
expect(component).toIncludeText("No namespaces detected");
@ -164,7 +163,7 @@ describe('ServiceMesh', () => {
ok: true,
json: () => Promise.resolve(nsAllResourcesAdded)
});
component = mount(i18nWrap(routerWrap(ServiceMesh)));
component = mount(i18nAndRouterWrap(ServiceMesh));
return withPromise(() => {
expect(component).toIncludeText("4 namespaces have no meshed resources.");
@ -184,7 +183,7 @@ describe('ServiceMesh', () => {
ok: true,
json: () => Promise.resolve(nsOneResourceNotAdded)
});
component = mount(i18nWrap(routerWrap(ServiceMesh)));
component = mount(i18nAndRouterWrap(ServiceMesh));
return withPromise(() => {
expect(component).toIncludeText("1 namespace has no meshed resources.");
@ -201,7 +200,7 @@ describe('ServiceMesh', () => {
ok: true,
json: () => Promise.resolve(nsAllResourcesAdded)
});
component = mount(i18nWrap(routerWrap(ServiceMesh)));
component = mount(i18nAndRouterWrap(ServiceMesh));
return withPromise(() => {
expect(component).toIncludeText("All namespaces have a ShinyProductName install.");

View File

@ -1,7 +1,7 @@
import _merge from 'lodash/merge';
import ApiHelpers from './util/ApiHelpers.jsx';
import TopRoutesTable from './TopRoutesTable.jsx';
import { routerWrap } from '../../test/testHelpers.jsx';
import { i18nAndRouterWrap } from '../../test/testHelpers.jsx';
import { mount } from 'enzyme';
describe("Tests for <TopRoutesTable>", () => {
@ -22,7 +22,7 @@ describe("Tests for <TopRoutesTable>", () => {
name: "authors:7001"
}],
});
const component = mount(routerWrap(TopRoutesTable, extraProps));
const component = mount(i18nAndRouterWrap(TopRoutesTable, extraProps));
const table = component.find("BaseTable");
expect(table).toBeDefined();
@ -52,7 +52,7 @@ describe("Tests for <TopRoutesTable>", () => {
}],
enableFilter: true
});
const component = mount(routerWrap(TopRoutesTable, extraProps));
const component = mount(i18nAndRouterWrap(TopRoutesTable, extraProps));
const table = component.find("BaseTable");

View File

@ -11,7 +11,7 @@
"@fortawesome/react-fontawesome": "0.1.9",
"@lingui/core": "^3.10.4",
"@lingui/macro": "3.10.2",
"@lingui/react": "2.9.2",
"@lingui/react": "3.10.2",
"@material-ui/core": "4.11.4",
"@material-ui/icons": "4.11.2",
"@material-ui/lab": "^4.0.0-alpha.58",
@ -23,6 +23,7 @@
"d3-format": "3.0.1",
"d3-selection": "3.0.0",
"date-fns": "2.22.1",
"jest-progress-bar-reporter": "^1.0.21",
"locales-detector": "2.26.0",
"lodash": "4.17.21",
"make-plural": "^6.2.2",
@ -37,7 +38,7 @@
"react-router-prop-types": "1.0.5",
"regenerator-runtime": "^0.13.7",
"use-query-params": "1.2.2",
"whatwg-fetch": "3.0.0"
"whatwg-fetch": "3.6.2"
},
"devDependencies": {
"@babel/core": "^7.14.6",
@ -75,8 +76,7 @@
"file-loader": "^6.2.0",
"history": "5.0.0",
"html-webpack-plugin": "^5.3.2",
"jest": "^26.6.3",
"jest-dot-reporter": "1.0.14",
"jest": "^27.0.5",
"jest-enzyme": "7.1.2",
"lodash-webpack-plugin": "^0.11.6",
"react-test-renderer": "16.13.1",
@ -97,8 +97,9 @@
"webpack-dev-server/selfsigned/node-forge": ">=0.10.0"
},
"jest": {
"testEnvironment": "enzyme",
"testEnvironment": "jsdom",
"setupFilesAfterEnv": [
"<rootDir>/setupTests.js",
"./node_modules/jest-enzyme/lib/index.js"
],
"transformIgnorePatterns": [

6
web/app/setupTests.js Normal file
View File

@ -0,0 +1,6 @@
import 'core-js/stable';
import 'regenerator-runtime/runtime';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });

View File

@ -38,3 +38,5 @@ export function i18nWrap(Component) {
</I18nProvider>
);
}
export function i18nAndRouterWrap(component, props) { return i18nWrap(routerWrap(component, props))};

File diff suppressed because it is too large Load Diff