@instructure/ui-img 10.6.0 → 10.6.1-snapshot-1

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.6.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v10.6.0...v10.6.1-snapshot-1) (2024-11-19)
+
+**Note:** Version bump only for package @instructure/ui-img
+
+
+
+
+
 # [10.6.0](https://github.com/instructure/instructure-ui/compare/v10.5.0...v10.6.0) (2024-11-18)
 
 **Note:** Version bump only for package @instructure/ui-img

package/es/Img/__new-tests__/Img.test.js

@@ -0,0 +1,165 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React from 'react';
+import { render } from '@testing-library/react';
+import { vi } from 'vitest';
+import '@testing-library/jest-dom';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+import { Img } from '../index';
+describe('<Img />', () => {
+  var _Img, _Img2, _Img3, _Img4, _Img5, _Img6, _Img7;
+  const image = 'data:image/gif;base64,R0lGODlhFAAUAJEAAP/9/fYQEPytrflWViH5BAAAAAAALAAAAAAUABQAQAJKhI+pGe09lnhBnEETfodatVHNh1BR+ZzH9LAOCYrVYpiAfWWJOxrC/5MASbyZT4d6AUIBlUYGoR1FsAXUuTN5YhxAEYbrpKRkQwEAOw==';
+  let consoleWarningMock;
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution and expect for messages
+    consoleWarningMock = vi.spyOn(console, 'warn').mockImplementation(() => {});
+    consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleWarningMock.mockRestore();
+    consoleErrorMock.mockRestore();
+  });
+  describe('for a11y', () => {
+    it('should meet a11y standards', async () => {
+      const _render = render(_Img || (_Img = /*#__PURE__*/React.createElement(Img, {
+          src: image
+        }))),
+        container = _render.container;
+      const axeCheck = await runAxeCheck(container);
+      expect(axeCheck).toBe(true);
+    });
+    it('should render an empty alt attribute by default', async () => {
+      const _render2 = render(_Img2 || (_Img2 = /*#__PURE__*/React.createElement(Img, {
+          src: image
+        }))),
+        container = _render2.container;
+      const img = container.querySelector('img');
+      expect(img).toHaveAttribute('alt', '');
+    });
+    it('should render the provided alt attribute', async () => {
+      const altValue = 'Foo';
+      const _render3 = render(/*#__PURE__*/React.createElement(Img, {
+          src: image,
+          alt: altValue
+        })),
+        container = _render3.container;
+      const img = container.querySelector('img');
+      expect(img).toHaveAttribute('alt', altValue);
+    });
+  });
+  it('should render an overlay color', async () => {
+    const _render4 = render(/*#__PURE__*/React.createElement(Img, {
+        src: image,
+        overlay: {
+          color: '#ff0000',
+          opacity: 7
+        }
+      })),
+      container = _render4.container;
+    const overlay = container.querySelector('[class*="-img__overlay"]');
+    expect(overlay).toBeInTheDocument();
+  });
+  it('should render a blur filter', async () => {
+    const _render5 = render(_Img3 || (_Img3 = /*#__PURE__*/React.createElement(Img, {
+        src: image,
+        withBlur: true
+      }))),
+      container = _render5.container;
+    const img = container.querySelector('img');
+    const style = getComputedStyle(img);
+    expect(style.filter).toContain('blur');
+  });
+  it('should render a grayscale filter', async () => {
+    const _render6 = render(_Img4 || (_Img4 = /*#__PURE__*/React.createElement(Img, {
+        src: image,
+        withGrayscale: true
+      }))),
+      container = _render6.container;
+    const img = container.querySelector('img');
+    const style = getComputedStyle(img);
+    expect(style.filter).toContain('grayscale');
+  });
+
+  // // If component renders as simple image
+  it('should display block-level when display="block"', async () => {
+    const _render7 = render(_Img5 || (_Img5 = /*#__PURE__*/React.createElement(Img, {
+        src: image,
+        display: "block"
+      }))),
+      container = _render7.container;
+    const img = container.querySelector('img');
+    const style = getComputedStyle(img);
+    expect(style.display).toBe('block');
+  });
+
+  // // If component has an overlay and renders as image inside containing element
+  it('should display block-level with overlay when display="block"', async () => {
+    const _render8 = render(/*#__PURE__*/React.createElement(Img, {
+        src: image,
+        display: "block",
+        overlay: {
+          color: 'tomato',
+          opacity: 7
+        }
+      })),
+      container = _render8.container;
+    const img = container.querySelector('img');
+    const imgContainer = container.querySelector('[class*="-img__container"]');
+    const imgStyle = getComputedStyle(img);
+    const imgContainerStyle = getComputedStyle(imgContainer);
+    expect(imgStyle.display).toBe('block');
+    expect(imgContainerStyle.display).toBe('block');
+  });
+  it('should apply CSS object-fit: cover when constrain="cover"', async () => {
+    const _render9 = render(/*#__PURE__*/React.createElement("div", {
+        style: {
+          width: 16,
+          height: 16
+        }
+      }, _Img6 || (_Img6 = /*#__PURE__*/React.createElement(Img, {
+        src: image,
+        constrain: "cover"
+      })))),
+      container = _render9.container;
+    const img = container.querySelector('img');
+    const imgStyle = getComputedStyle(img);
+    expect(imgStyle.objectFit).toBe('cover');
+  });
+  it('should apply CSS object-fit: contain when constrain="contain"', async () => {
+    const _render10 = render(/*#__PURE__*/React.createElement("div", {
+        style: {
+          width: 16,
+          height: 16
+        }
+      }, _Img7 || (_Img7 = /*#__PURE__*/React.createElement(Img, {
+        src: image,
+        constrain: "contain"
+      })))),
+      container = _render10.container;
+    const img = container.querySelector('img');
+    const imgStyle = getComputedStyle(img);
+    expect(imgStyle.objectFit).toBe('contain');
+  });
+});

package/lib/Img/__new-tests__/Img.test.js

@@ -0,0 +1,169 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _vitest = require("vitest");
+require("@testing-library/jest-dom");
+var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
+var _index = require("../index");
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+describe('<Img />', () => {
+  var _Img, _Img2, _Img3, _Img4, _Img5, _Img6, _Img7;
+  const image = 'data:image/gif;base64,R0lGODlhFAAUAJEAAP/9/fYQEPytrflWViH5BAAAAAAALAAAAAAUABQAQAJKhI+pGe09lnhBnEETfodatVHNh1BR+ZzH9LAOCYrVYpiAfWWJOxrC/5MASbyZT4d6AUIBlUYGoR1FsAXUuTN5YhxAEYbrpKRkQwEAOw==';
+  let consoleWarningMock;
+  let consoleErrorMock;
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution and expect for messages
+    consoleWarningMock = _vitest.vi.spyOn(console, 'warn').mockImplementation(() => {});
+    consoleErrorMock = _vitest.vi.spyOn(console, 'error').mockImplementation(() => {});
+  });
+  afterEach(() => {
+    consoleWarningMock.mockRestore();
+    consoleErrorMock.mockRestore();
+  });
+  describe('for a11y', () => {
+    it('should meet a11y standards', async () => {
+      const _render = (0, _react2.render)(_Img || (_Img = /*#__PURE__*/_react.default.createElement(_index.Img, {
+          src: image
+        }))),
+        container = _render.container;
+      const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+      expect(axeCheck).toBe(true);
+    });
+    it('should render an empty alt attribute by default', async () => {
+      const _render2 = (0, _react2.render)(_Img2 || (_Img2 = /*#__PURE__*/_react.default.createElement(_index.Img, {
+          src: image
+        }))),
+        container = _render2.container;
+      const img = container.querySelector('img');
+      expect(img).toHaveAttribute('alt', '');
+    });
+    it('should render the provided alt attribute', async () => {
+      const altValue = 'Foo';
+      const _render3 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Img, {
+          src: image,
+          alt: altValue
+        })),
+        container = _render3.container;
+      const img = container.querySelector('img');
+      expect(img).toHaveAttribute('alt', altValue);
+    });
+  });
+  it('should render an overlay color', async () => {
+    const _render4 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Img, {
+        src: image,
+        overlay: {
+          color: '#ff0000',
+          opacity: 7
+        }
+      })),
+      container = _render4.container;
+    const overlay = container.querySelector('[class*="-img__overlay"]');
+    expect(overlay).toBeInTheDocument();
+  });
+  it('should render a blur filter', async () => {
+    const _render5 = (0, _react2.render)(_Img3 || (_Img3 = /*#__PURE__*/_react.default.createElement(_index.Img, {
+        src: image,
+        withBlur: true
+      }))),
+      container = _render5.container;
+    const img = container.querySelector('img');
+    const style = getComputedStyle(img);
+    expect(style.filter).toContain('blur');
+  });
+  it('should render a grayscale filter', async () => {
+    const _render6 = (0, _react2.render)(_Img4 || (_Img4 = /*#__PURE__*/_react.default.createElement(_index.Img, {
+        src: image,
+        withGrayscale: true
+      }))),
+      container = _render6.container;
+    const img = container.querySelector('img');
+    const style = getComputedStyle(img);
+    expect(style.filter).toContain('grayscale');
+  });
+
+  // // If component renders as simple image
+  it('should display block-level when display="block"', async () => {
+    const _render7 = (0, _react2.render)(_Img5 || (_Img5 = /*#__PURE__*/_react.default.createElement(_index.Img, {
+        src: image,
+        display: "block"
+      }))),
+      container = _render7.container;
+    const img = container.querySelector('img');
+    const style = getComputedStyle(img);
+    expect(style.display).toBe('block');
+  });
+
+  // // If component has an overlay and renders as image inside containing element
+  it('should display block-level with overlay when display="block"', async () => {
+    const _render8 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.Img, {
+        src: image,
+        display: "block",
+        overlay: {
+          color: 'tomato',
+          opacity: 7
+        }
+      })),
+      container = _render8.container;
+    const img = container.querySelector('img');
+    const imgContainer = container.querySelector('[class*="-img__container"]');
+    const imgStyle = getComputedStyle(img);
+    const imgContainerStyle = getComputedStyle(imgContainer);
+    expect(imgStyle.display).toBe('block');
+    expect(imgContainerStyle.display).toBe('block');
+  });
+  it('should apply CSS object-fit: cover when constrain="cover"', async () => {
+    const _render9 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          width: 16,
+          height: 16
+        }
+      }, _Img6 || (_Img6 = /*#__PURE__*/_react.default.createElement(_index.Img, {
+        src: image,
+        constrain: "cover"
+      })))),
+      container = _render9.container;
+    const img = container.querySelector('img');
+    const imgStyle = getComputedStyle(img);
+    expect(imgStyle.objectFit).toBe('cover');
+  });
+  it('should apply CSS object-fit: contain when constrain="contain"', async () => {
+    const _render10 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          width: 16,
+          height: 16
+        }
+      }, _Img7 || (_Img7 = /*#__PURE__*/_react.default.createElement(_index.Img, {
+        src: image,
+        constrain: "contain"
+      })))),
+      container = _render10.container;
+    const img = container.querySelector('img');
+    const imgStyle = getComputedStyle(img);
+    expect(imgStyle.objectFit).toBe('contain');
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-img",
-  "version": "10.6.0",
+  "version": "10.6.1-snapshot-1",
   "description": "An accessible image component.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,19 +24,23 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.25.6",
-    "@instructure/console": "10.6.0",
-    "@instructure/emotion": "10.6.0",
-    "@instructure/shared-types": "10.6.0",
-    "@instructure/ui-dom-utils": "10.6.0",
-    "@instructure/ui-react-utils": "10.6.0",
-    "@instructure/ui-testable": "10.6.0",
-    "@instructure/ui-view": "10.6.0",
+    "@instructure/console": "10.6.1-snapshot-1",
+    "@instructure/emotion": "10.6.1-snapshot-1",
+    "@instructure/shared-types": "10.6.1-snapshot-1",
+    "@instructure/ui-dom-utils": "10.6.1-snapshot-1",
+    "@instructure/ui-react-utils": "10.6.1-snapshot-1",
+    "@instructure/ui-testable": "10.6.1-snapshot-1",
+    "@instructure/ui-view": "10.6.1-snapshot-1",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "10.6.0",
-    "@instructure/ui-test-locator": "10.6.0",
-    "@instructure/ui-test-utils": "10.6.0"
+    "@instructure/ui-axe-check": "10.6.1-snapshot-1",
+    "@instructure/ui-babel-preset": "10.6.1-snapshot-1",
+    "@instructure/ui-test-utils": "10.6.1-snapshot-1",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "vitest": "^2.1.1"
   },
   "peerDependencies": {
     "react": ">=16.8 <=18"

package/src/Img/__new-tests__/Img.test.tsx

@@ -0,0 +1,155 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React from 'react'
+import { render } from '@testing-library/react'
+import type { MockInstance } from 'vitest'
+import { vi } from 'vitest'
+
+import '@testing-library/jest-dom'
+import { runAxeCheck } from '@instructure/ui-axe-check'
+import { Img } from '../index'
+
+describe('<Img />', () => {
+  const image =
+    'data:image/gif;base64,R0lGODlhFAAUAJEAAP/9/fYQEPytrflWViH5BAAAAAAALAAAAAAUABQAQAJKhI+pGe09lnhBnEETfodatVHNh1BR+ZzH9LAOCYrVYpiAfWWJOxrC/5MASbyZT4d6AUIBlUYGoR1FsAXUuTN5YhxAEYbrpKRkQwEAOw=='
+  let consoleWarningMock: ReturnType<typeof vi.spyOn>
+  let consoleErrorMock: ReturnType<typeof vi.spyOn>
+
+  beforeEach(() => {
+    // Mocking console to prevent test output pollution and expect for messages
+    consoleWarningMock = vi
+      .spyOn(console, 'warn')
+      .mockImplementation(() => {}) as MockInstance
+    consoleErrorMock = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => {}) as MockInstance
+  })
+
+  afterEach(() => {
+    consoleWarningMock.mockRestore()
+    consoleErrorMock.mockRestore()
+  })
+
+  describe('for a11y', () => {
+    it('should meet a11y standards', async () => {
+      const { container } = render(<Img src={image} />)
+      const axeCheck = await runAxeCheck(container)
+
+      expect(axeCheck).toBe(true)
+    })
+
+    it('should render an empty alt attribute by default', async () => {
+      const { container } = render(<Img src={image} />)
+      const img = container.querySelector('img')
+
+      expect(img).toHaveAttribute('alt', '')
+    })
+
+    it('should render the provided alt attribute', async () => {
+      const altValue = 'Foo'
+      const { container } = render(<Img src={image} alt={altValue} />)
+      const img = container.querySelector('img')
+
+      expect(img).toHaveAttribute('alt', altValue)
+    })
+  })
+
+  it('should render an overlay color', async () => {
+    const { container } = render(
+      <Img src={image} overlay={{ color: '#ff0000', opacity: 7 }} />
+    )
+    const overlay = container.querySelector('[class*="-img__overlay"]')
+
+    expect(overlay).toBeInTheDocument()
+  })
+
+  it('should render a blur filter', async () => {
+    const { container } = render(<Img src={image} withBlur={true} />)
+
+    const img = container.querySelector('img')!
+    const style = getComputedStyle(img)
+
+    expect(style.filter).toContain('blur')
+  })
+
+  it('should render a grayscale filter', async () => {
+    const { container } = render(<Img src={image} withGrayscale={true} />)
+
+    const img = container.querySelector('img')!
+    const style = getComputedStyle(img)
+
+    expect(style.filter).toContain('grayscale')
+  })
+
+  // // If component renders as simple image
+  it('should display block-level when display="block"', async () => {
+    const { container } = render(<Img src={image} display="block" />)
+    const img = container.querySelector('img')!
+    const style = getComputedStyle(img)
+
+    expect(style.display).toBe('block')
+  })
+
+  // // If component has an overlay and renders as image inside containing element
+  it('should display block-level with overlay when display="block"', async () => {
+    const { container } = render(
+      <Img
+        src={image}
+        display="block"
+        overlay={{ color: 'tomato', opacity: 7 }}
+      />
+    )
+    const img = container.querySelector('img')!
+    const imgContainer = container.querySelector('[class*="-img__container"]')!
+    const imgStyle = getComputedStyle(img)
+    const imgContainerStyle = getComputedStyle(imgContainer)
+
+    expect(imgStyle.display).toBe('block')
+    expect(imgContainerStyle.display).toBe('block')
+  })
+
+  it('should apply CSS object-fit: cover when constrain="cover"', async () => {
+    const { container } = render(
+      <div style={{ width: 16, height: 16 }}>
+        <Img src={image} constrain="cover" />
+      </div>
+    )
+    const img = container.querySelector('img')!
+    const imgStyle = getComputedStyle(img)
+
+    expect(imgStyle.objectFit).toBe('cover')
+  })
+
+  it('should apply CSS object-fit: contain when constrain="contain"', async () => {
+    const { container } = render(
+      <div style={{ width: 16, height: 16 }}>
+        <Img src={image} constrain="contain" />
+      </div>
+    )
+    const img = container.querySelector('img')!
+    const imgStyle = getComputedStyle(img)
+
+    expect(imgStyle.objectFit).toBe('contain')
+  })
+})

package/tsconfig.build.json

@@ -15,7 +15,7 @@
     { "path": "../ui-testable/tsconfig.build.json" },
     { "path": "../ui-view/tsconfig.build.json" },
     { "path": "../ui-babel-preset/tsconfig.build.json" },
-    { "path": "../ui-test-locator/tsconfig.build.json" },
-    { "path": "../ui-test-utils/tsconfig.build.json" }
+    { "path": "../ui-test-utils/tsconfig.build.json" },
+    { "path": "../ui-axe-check/tsconfig.build.json" }
   ]
 }