diff --git a/docs/next.config.js b/docs/next.config.js index a2445799b4630b..29a20de7e60191 100644 --- a/docs/next.config.js +++ b/docs/next.config.js @@ -71,6 +71,7 @@ module.exports = { 'notistack', 'material-table', '@material-ui/pickers', + '@material-ui/x-grid', ].includes(request); if (hasDependencyOnRepoPackages) { @@ -98,7 +99,7 @@ module.exports = { // transpile 3rd party packages with dependencies in this repository { test: /\.(js|mjs|jsx)$/, - include: /node_modules(\/|\\)(material-table|notistack|@material-ui(\/|\\)pickers)/, + include: /node_modules(\/|\\)(material-table|notistack|@material-ui(\/|\\)(pickers|x-grid))/, use: { loader: 'babel-loader', options: { diff --git a/docs/src/pages/components/alert/SimpleAlerts.tsx b/docs/src/pages/components/alert/SimpleAlerts.tsx index cf186d3d848969..b5525af0528599 100644 --- a/docs/src/pages/components/alert/SimpleAlerts.tsx +++ b/docs/src/pages/components/alert/SimpleAlerts.tsx @@ -1,27 +1,21 @@ -import React from 'react'; -import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'; -import Alert from '@material-ui/lab/Alert'; - -const useStyles = makeStyles((theme: Theme) => - createStyles({ - root: { - width: '100%', - '& > * + *': { - marginTop: theme.spacing(2), - }, - }, - }), -); - -export default function SimpleAlerts() { - const classes = useStyles(); +import * as React from 'react'; +import { XGrid } from "@material-ui/x-grid"; +export default function App(props) { return ( -
- This is an error alert — check it out! - This is a warning alert — check it out! - This is an info alert — check it out! - This is a success alert — check it out! +
+
); } diff --git a/package.json b/package.json index d83de4d7029f90..ca0e0a017ec6cf 100644 --- a/package.json +++ b/package.json @@ -55,12 +55,13 @@ "@babel/preset-env": "^7.10.2", "@babel/preset-react": "^7.10.1", "@babel/register": "^7.10.1", + "@material-ui/x-grid": "^0.1.62", "@rollup/plugin-replace": "^2.3.1", "@testing-library/dom": "^7.0.3", - "@testing-library/react-hooks": "3.3.0", "@testing-library/react": "^10.0.1", - "@types/chai-dom": "^0.0.10", + "@testing-library/react-hooks": "3.3.0", "@types/chai": "^4.2.3", + "@types/chai-dom": "^0.0.10", "@types/enzyme": "^3.10.3", "@types/fs-extra": "^9.0.0", "@types/glob": "^7.1.1", @@ -82,8 +83,8 @@ "babel-plugin-tester": "^9.0.0", "babel-plugin-transform-dev-warning": "^0.1.0", "babel-plugin-transform-react-remove-prop-types": "^0.4.21", - "chai-dom": "^1.8.1", "chai": "^4.1.2", + "chai-dom": "^1.8.1", "chalk": "^4.0.0", "compression-webpack-plugin": "^4.0.0", "confusing-browser-globals": "^1.0.9", @@ -92,8 +93,9 @@ "danger": "^10.0.0", "dom-accessibility-api": "^0.4.3", "dtslint": "^3.2.0", - "enzyme-adapter-react-16": "^1.14.0", "enzyme": "^3.9.0", + "enzyme-adapter-react-16": "^1.14.0", + "eslint": "^7.4.0", "eslint-config-airbnb-typescript": "^8.0.2", "eslint-config-prettier": "^6.11.0", "eslint-import-resolver-webpack": "^0.12.2", @@ -101,22 +103,21 @@ "eslint-plugin-import": "^2.22.0", "eslint-plugin-jsx-a11y": "^6.3.1", "eslint-plugin-mocha": "^7.0.1", - "eslint-plugin-react-hooks": "^4.0.7", "eslint-plugin-react": "^7.20.3", - "eslint": "^7.4.0", + "eslint-plugin-react-hooks": "^4.0.7", "expect-puppeteer": "^4.3.0", "format-util": "^1.0.5", "fs-extra": "^9.0.0", - "glob-gitignore": "^1.0.11", "glob": "^7.1.2", + "glob-gitignore": "^1.0.11", "jsdom": "^16.0.0", + "karma": "^5.0.1", "karma-browserstack-launcher": "~1.4.0", "karma-chrome-launcher": "^3.0.0", - "karma-mocha-reporter": "^2.2.5", "karma-mocha": "^2.0.0", + "karma-mocha-reporter": "^2.2.5", "karma-sourcemap-loader": "^0.3.7", "karma-webpack": "^4.0.2", - "karma": "^5.0.1", "lerna": "^3.16.4", "lodash": "^4.17.15", "mocha": "^8.0.1", @@ -126,18 +127,18 @@ "pretty-format-v24": "npm:pretty-format@24", "prop-types": "^15.7.2", "puppeteer": "^5.0.0", + "react": "^16.13.0", "react-dom": "^16.13.0", "react-test-renderer": "^16.13.0", - "react": "^16.13.0", "remark": "^12.0.0", "rimraf": "^3.0.0", + "rollup": "^2.10.8", "rollup-plugin-babel": "^4.3.3", "rollup-plugin-commonjs": "^10.1.0", "rollup-plugin-node-globals": "^1.4.0", "rollup-plugin-node-resolve": "^5.2.0", "rollup-plugin-size-snapshot": "^0.12.0", "rollup-plugin-terser": "^6.1.0", - "rollup": "^2.10.8", "sinon": "^9.0.0", "size-limit": "^0.21.0", "ts-node": "^8.3.0", @@ -146,8 +147,8 @@ "unist-util-visit": "^2.0.2", "url-loader": "^4.1.0", "vrtest-mui": "^0.3.3", - "webpack-cli": "^3.3.9", "webpack": "^4.41.0", + "webpack-cli": "^3.3.9", "yargs": "^15.2.0", "yarn-deduplicate": "^2.0.0" }, diff --git a/packages/material-ui-lab/src/Alert/Alert.test.js b/packages/material-ui-lab/src/Alert/Alert.test.js index d35e44cd931fbf..51e5c30bfd0249 100644 --- a/packages/material-ui-lab/src/Alert/Alert.test.js +++ b/packages/material-ui-lab/src/Alert/Alert.test.js @@ -1,21 +1,56 @@ import * as React from 'react'; -import { getClasses, createMount, describeConformance } from 'test/utils'; -import Paper from '@material-ui/core/Paper'; -import Alert from './Alert'; +import { createClientRender, act } from 'test/utils'; +import { XGrid } from "@material-ui/x-grid"; +import { expect } from 'chai'; -describe('', () => { - const mount = createMount(); - let classes; - - before(() => { - classes = getClasses(); +async function sleep(duration) { + return new Promise((resolve) => { + setTimeout(() => { + resolve(); + }, duration) }); +} + +describe.only('', () => { + const render = createClientRender(); + + it('should resize the width of the columns', async () => { + if (/jsdom/.test(window.navigator.userAgent)) { + // TODO: Unclear why this fails. Not important + // since a browser test gives us more confidence anyway + this.skip(); + } - describeConformance(, () => ({ - classes, - inheritComponent: Paper, - mount, - refInstanceof: window.HTMLDivElement, - skip: ['componentProp'], - })); + function App(props) { + const { width = 300 } = props + return ( +
+ +
+ ); + } + + const { container, setProps } = render(); + let rect; + rect = container.querySelector('[role="row"][data-rowindex="0"]').getBoundingClientRect(); + expect(rect.width).to.equal(300 - 2); + setProps({ width: 400 }); + act(() => { + window.dispatchEvent(new window.Event('resize', {})); + }); + await sleep(200); + rect = container.querySelector('[role="row"][data-rowindex="0"]').getBoundingClientRect(); + expect(rect.width).to.equal(400 - 2); + }); }); diff --git a/test/karma.conf.js b/test/karma.conf.js index decc304fde624d..4a9eab6f7bfc7d 100644 --- a/test/karma.conf.js +++ b/test/karma.conf.js @@ -46,10 +46,21 @@ module.exports = function setKarmaConfig(config) { preprocessors: { 'test/karma.tests.js': ['webpack', 'sourcemap'], }, - reporters: ['dots'], + // reporters: ['dots'], webpack: { mode: 'development', devtool: 'inline-source-map', + externals: [(context, request, callback) => { + const hasDependencyOnRepoPackages = [ + '@material-ui/x-grid', + ].includes(request); + + if (hasDependencyOnRepoPackages) { + return callback(null); + } + + callback(); + },], plugins: [ new webpack.DefinePlugin({ 'process.env': { @@ -60,6 +71,30 @@ module.exports = function setKarmaConfig(config) { ], module: { rules: [ + // transpile 3rd party packages with dependencies in this repository + { + test: /\.(js)$/, + include: /node_modules(\/|\\)(@material-ui(\/|\\)(x-grid))/, + use: { + loader: 'babel-loader', + options: { + // on the server we use the transpiled commonJS build, on client ES6 modules + // babel needs to figure out in what context to parse the file + sourceType: 'unambiguous', + plugins: [ + [ + 'babel-plugin-module-resolver', + { + alias: { + '@material-ui/core': './packages/material-ui/src', + }, + transformFunctions: ['require'], + }, + ], + ], + }, + }, + }, { test: /\.js$/, loader: 'babel-loader', @@ -103,7 +138,7 @@ module.exports = function setKarmaConfig(config) { let newConfig = baseConfig; - if (browserStack.accessKey) { + if (browserStack.accessKey && false) { newConfig = { ...baseConfig, browserStack, diff --git a/yarn.lock b/yarn.lock index 7a7632e9e77bd5..a01c70ee672455 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2074,6 +2074,13 @@ dependencies: "@types/react" "*" +"@material-ui/x-grid@^0.1.62": + version "0.1.62" + resolved "https://registry.yarnpkg.com/@material-ui/x-grid/-/x-grid-0.1.62.tgz#affb8f1d7a665f7c40228ea15750e51e1b8eee37" + integrity sha512-TwYHehAWV2gmYjzdZgSl9S2/QcxnjAn9kQpWZ2anqEeInff0MzvHhgdpTQPX8T8BTCoA8LBSiDCqFtulYBz6UQ== + dependencies: + tslib "^2.0.0" + "@mrmlnc/readdir-enhanced@^2.2.1": version "2.2.1" resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde" @@ -15740,6 +15747,11 @@ tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0: resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043" integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q== +tslib@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.0.tgz#18d13fc2dce04051e20f074cc8387fd8089ce4f3" + integrity sha512-lTqkx847PI7xEDYJntxZH89L2/aXInsyF2luSafe/+0fHOMjlBNXdH6th7f70qxLDhul7KZK0zC8V5ZIyHl0/g== + tslint@5.14.0: version "5.14.0" resolved "https://registry.yarnpkg.com/tslint/-/tslint-5.14.0.tgz#be62637135ac244fc9b37ed6ea5252c9eba1616e"