[test] Supress 404 img warnings in browser tests (mui#23106)

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;

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);

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,52 +21,52 @@ 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;
       expect(cardMedia).to.not.have.attribute('src');
     });
 
     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');
     });

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"

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',
   };

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',
   };

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',