From 53867b9634cb1ecaf0b76a6938bd5bcbaacef73c Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Fri, 16 Oct 2020 23:20:18 +0200
Subject: [PATCH] [test] Supress 404 img warnings in browser tests (#23106)

---
 .../src/AvatarGroup/AvatarGroup.test.js       | 20 ++++++-------
 .../material-ui/src/Avatar/Avatar.test.js     | 10 +++----
 .../src/CardMedia/CardMedia.test.js           | 28 +++++++++----------
 .../src/ImageList/ImageList.test.js           |  6 ++--
 .../src/ImageListItem/ImageListItem.test.js   |  2 +-
 .../ImageListItemBar/ImageListItemBar.test.js |  2 +-
 test/assets/fake.png                          |  0
 test/assets/fake2.png                         |  0
 test/karma.conf.js                            | 10 +++++++
 9 files changed, 44 insertions(+), 34 deletions(-)
 create mode 100644 test/assets/fake.png
 create mode 100644 test/assets/fake2.png

diff --git a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.test.js b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.test.js
index a88c6464b19f50..7e5e1e9af1a155 100644
--- a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.test.js
+++ b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.test.js
@@ -24,9 +24,9 @@ describe('<AvatarGroup />', () => {
   it('should display all the avatars', () => {
     const { container } = render(
       <AvatarGroup max={3}>
-        <Avatar src="image-url" />
-        <Avatar src="image-url" />
-        <Avatar src="image-url" />
+        <Avatar src="/fake.png" />
+        <Avatar src="/fake.png" />
+        <Avatar src="/fake.png" />
       </AvatarGroup>,
     );
     expect(container.querySelectorAll('.MuiAvatar-root').length).to.equal(3);
@@ -37,10 +37,10 @@ describe('<AvatarGroup />', () => {
   it('should display 2 avatars and "+2"', () => {
     const { container } = render(
       <AvatarGroup max={3}>
-        <Avatar src="image-url" />
-        <Avatar src="image-url" />
-        <Avatar src="image-url" />
-        <Avatar src="image-url" />
+        <Avatar src="/fake.png" />
+        <Avatar src="/fake.png" />
+        <Avatar src="/fake.png" />
+        <Avatar src="/fake.png" />
       </AvatarGroup>,
     );
     expect(container.querySelectorAll('.MuiAvatar-root').length).to.equal(3);
@@ -51,7 +51,7 @@ describe('<AvatarGroup />', () => {
   it('should display all avatars with default (circular) variant', () => {
     const { container } = render(
       <AvatarGroup>
-        <Avatar src="image-url" />
+        <Avatar src="/fake.png" />
       </AvatarGroup>,
     );
     const avatarGroup = container.firstChild;
@@ -67,7 +67,7 @@ describe('<AvatarGroup />', () => {
   it('should display all avatars with the specified variant', () => {
     const { container } = render(
       <AvatarGroup variant="square">
-        <Avatar src="image-url" />
+        <Avatar src="/fake.png" />
       </AvatarGroup>,
     );
     const avatarGroup = container.firstChild;
@@ -83,7 +83,7 @@ describe('<AvatarGroup />', () => {
   it("should respect child's avatar variant prop if specified", () => {
     const { container } = render(
       <AvatarGroup variant="square">
-        <Avatar src="image-url" variant="rounded" />
+        <Avatar src="/fake.png" variant="rounded" />
       </AvatarGroup>,
     );
     const avatarGroup = container.firstChild;
diff --git a/packages/material-ui/src/Avatar/Avatar.test.js b/packages/material-ui/src/Avatar/Avatar.test.js
index 6cc04f4b197682..d5f2b1b093a037 100644
--- a/packages/material-ui/src/Avatar/Avatar.test.js
+++ b/packages/material-ui/src/Avatar/Avatar.test.js
@@ -33,7 +33,7 @@ describe('<Avatar />', () => {
       const { container } = render(
         <Avatar
           className="my-avatar"
-          src="something.jpg"
+          src="/fake.png"
           alt="Hello World!"
           data-my-prop="woofAvatar"
         />,
@@ -48,12 +48,12 @@ describe('<Avatar />', () => {
       expect(avatar).to.not.have.class(classes.colorDefault);
       expect(img).to.have.class(classes.img);
       expect(img).to.have.attribute('alt', 'Hello World!');
-      expect(img).to.have.attribute('src', 'something.jpg');
+      expect(img).to.have.attribute('src', '/fake.png');
     });
 
     it('should be able to add more props to the image', () => {
       const onError = spy();
-      const { container } = render(<Avatar src="something.jpg" imgProps={{ onError }} />);
+      const { container } = render(<Avatar src="/fake.png" imgProps={{ onError }} />);
       const img = container.querySelector('img');
       fireEvent.error(img);
       expect(onError.callCount).to.equal(1);
@@ -62,7 +62,7 @@ describe('<Avatar />', () => {
 
   describe('image avatar with unrendered children', () => {
     it('should render a div containing an img, not children', () => {
-      const { container } = render(<Avatar src="something.jpg">MB</Avatar>);
+      const { container } = render(<Avatar src="/fake.png">MB</Avatar>);
       const avatar = container.firstChild;
       const imgs = container.querySelectorAll('img');
       expect(imgs.length).to.equal(1);
@@ -71,7 +71,7 @@ describe('<Avatar />', () => {
 
     it('should be able to add more props to the image', () => {
       const onError = spy();
-      const { container } = render(<Avatar src="something.jpg" imgProps={{ onError }} />);
+      const { container } = render(<Avatar src="/fake.png" imgProps={{ onError }} />);
       const img = container.querySelector('img');
       fireEvent.error(img);
       expect(onError.callCount).to.equal(1);
diff --git a/packages/material-ui/src/CardMedia/CardMedia.test.js b/packages/material-ui/src/CardMedia/CardMedia.test.js
index 3f23f8ea77ba31..2d6e8c93306dda 100644
--- a/packages/material-ui/src/CardMedia/CardMedia.test.js
+++ b/packages/material-ui/src/CardMedia/CardMedia.test.js
@@ -9,10 +9,10 @@ describe('<CardMedia />', () => {
   let classes;
   const render = createClientRender();
   before(() => {
-    classes = getClasses(<CardMedia image="/foo.jpg" />);
+    classes = getClasses(<CardMedia image="/fake.png" />);
   });
 
-  describeConformance(<CardMedia image="/foo.jpg" />, () => ({
+  describeConformance(<CardMedia image="/fake.png" />, () => ({
     classes,
     inheritComponent: 'div',
     mount,
@@ -21,38 +21,38 @@ describe('<CardMedia />', () => {
   }));
 
   it('should have the backgroundImage specified', () => {
-    const { container } = render(<CardMedia image="/foo.jpg" />);
+    const { container } = render(<CardMedia image="/fake.png" />);
     const cardMedia = container.firstChild;
-    expect(cardMedia.style.backgroundImage).to.match(/\/foo\.jpg/m);
+    expect(cardMedia.style.backgroundImage).to.match(/\/fake.png/m);
   });
 
   it('should have backgroundImage specified even though custom styles got passed', () => {
-    const { container } = render(<CardMedia image="/foo.jpg" style={{ height: 200 }} />);
+    const { container } = render(<CardMedia image="/fake.png" style={{ height: 200 }} />);
     const cardMedia = container.firstChild;
-    expect(cardMedia.style.backgroundImage).to.match(/\/foo\.jpg/m);
+    expect(cardMedia.style.backgroundImage).to.match(/\/fake.png/m);
     expect(cardMedia.style.height).to.equal('200px');
   });
 
   it('should be possible to overwrite backgroundImage via custom styles', () => {
     const { container } = render(
-      <CardMedia image="/foo.jpg" style={{ backgroundImage: 'url(/bar.jpg)' }} />,
+      <CardMedia image="/fake.png" style={{ backgroundImage: 'url(fake2.png)' }} />,
     );
     const cardMedia = container.firstChild;
-    expect(cardMedia.style.backgroundImage).to.match(/\/bar\.jpg/m);
+    expect(cardMedia.style.backgroundImage).to.match(/fake2.png/m);
   });
 
   describe('prop: component', () => {
     it('should have `src` prop when media component specified', () => {
-      const { container } = render(<CardMedia image="/foo.jpg" component="iframe" />);
+      const { container } = render(<CardMedia image="/fake.png" component="iframe" />);
       const cardMedia = container.firstChild;
-      expect(cardMedia).to.have.attribute('src', '/foo.jpg');
+      expect(cardMedia).to.have.attribute('src', '/fake.png');
     });
 
     it('should not have `src` prop when picture media component specified', () => {
       const { container } = render(
         <CardMedia component="picture">
-          <source media="(min-width: 600px)" srcSet="big-cat.jpg" />
-          <img src="cat.jpg" alt="hello" />
+          <source media="(min-width: 600px)" srcSet="/fake.png" />
+          <img src="/fake.png" alt="hello" />
         </CardMedia>,
       );
       const cardMedia = container.firstChild;
@@ -60,13 +60,13 @@ describe('<CardMedia />', () => {
     });
 
     it('should not have default inline style when media component specified', () => {
-      const { container } = render(<CardMedia src="/foo.jpg" component="picture" />);
+      const { container } = render(<CardMedia src="/fake.png" component="picture" />);
       const cardMedia = container.firstChild;
       expect(cardMedia.style.backgroundImage).to.equal('');
     });
 
     it('should not have `src` prop if not media component specified', () => {
-      const { container } = render(<CardMedia image="/foo.jpg" component="table" />);
+      const { container } = render(<CardMedia image="/fake.png" component="table" />);
       const cardMedia = container.firstChild;
       expect(cardMedia).to.not.have.attribute('src');
     });
diff --git a/packages/material-ui/src/ImageList/ImageList.test.js b/packages/material-ui/src/ImageList/ImageList.test.js
index 2f66a7531d22d3..ff4c62d5dbc37f 100644
--- a/packages/material-ui/src/ImageList/ImageList.test.js
+++ b/packages/material-ui/src/ImageList/ImageList.test.js
@@ -5,12 +5,12 @@ import ImageList from './ImageList';
 
 const itemsData = [
   {
-    img: 'images/image-list/00-52-29-429_640.jpg',
+    img: '/fake.png',
     title: 'Breakfast',
     author: 'jill111',
   },
   {
-    img: 'images/image-list/burger-827309_640.jpg',
+    img: '/fake.png',
     title: 'Tasty burger',
     author: 'director90',
   },
@@ -40,7 +40,7 @@ describe('<ImageList />', () => {
 
   const children = itemsData.map((item) => (
     <span
-      key={item.img}
+      key={item.title}
       title={item.title}
       subtitle={<span>by: {item.author}</span>}
       data-testid="test-children"
diff --git a/packages/material-ui/src/ImageListItem/ImageListItem.test.js b/packages/material-ui/src/ImageListItem/ImageListItem.test.js
index a22c0022d150b9..59dc578e922e7c 100644
--- a/packages/material-ui/src/ImageListItem/ImageListItem.test.js
+++ b/packages/material-ui/src/ImageListItem/ImageListItem.test.js
@@ -22,7 +22,7 @@ describe('<ImageListItem />', () => {
   }));
 
   const itemData = {
-    img: 'images/image-list/breakfast.jpg',
+    img: '/fake.png',
     title: 'Breakfast',
     author: 'jill111',
   };
diff --git a/packages/material-ui/src/ImageListItemBar/ImageListItemBar.test.js b/packages/material-ui/src/ImageListItemBar/ImageListItemBar.test.js
index bf68c0f99ced3e..823bb5440c6cda 100644
--- a/packages/material-ui/src/ImageListItemBar/ImageListItemBar.test.js
+++ b/packages/material-ui/src/ImageListItemBar/ImageListItemBar.test.js
@@ -21,7 +21,7 @@ describe('<ImageListItemBar />', () => {
   }));
 
   const itemData = {
-    img: 'images/image-list/00-52-29-429_640.jpg',
+    img: '/fake.png',
     title: 'Breakfast',
     author: 'jill111',
   };
diff --git a/test/assets/fake.png b/test/assets/fake.png
new file mode 100644
index 00000000000000..e69de29bb2d1d6
diff --git a/test/assets/fake2.png b/test/assets/fake2.png
new file mode 100644
index 00000000000000..e69de29bb2d1d6
diff --git a/test/karma.conf.js b/test/karma.conf.js
index df2804f4d639ca..0bfff0358ae368 100644
--- a/test/karma.conf.js
+++ b/test/karma.conf.js
@@ -25,6 +25,12 @@ module.exports = function setKarmaConfig(config) {
         served: true,
         included: true,
       },
+      {
+        pattern: 'test/assets/*.png',
+        watched: false,
+        included: false,
+        served: true,
+      },
     ],
     plugins: ['karma-mocha', 'karma-chrome-launcher', 'karma-sourcemap-loader', 'karma-webpack'],
     /**
@@ -40,6 +46,10 @@ module.exports = function setKarmaConfig(config) {
     preprocessors: {
       'test/karma.tests.js': ['webpack', 'sourcemap'],
     },
+    proxies: {
+      '/fake.png': '/base/test/assets/fake.png',
+      '/fake2.png': '/base/test/assets/fake2.png',
+    },
     reporters: ['dots'],
     webpack: {
       mode: 'development',