@instructure/ui-tag 9.3.0 → 9.3.1-snapshot-0

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.
 
+## [9.3.1-snapshot-0](https://github.com/instructure/instructure-ui/compare/v9.3.0...v9.3.1-snapshot-0) (2024-07-17)
+
+**Note:** Version bump only for package @instructure/ui-tag
+
+
+
+
+
 # [9.3.0](https://github.com/instructure/instructure-ui/compare/v9.2.0...v9.3.0) (2024-07-17)
 
 **Note:** Version bump only for package @instructure/ui-tag

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

@@ -0,0 +1,125 @@
+var _Tag, _Tag2;
+/*
+ * 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, screen, waitFor } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import { vi } from 'vitest';
+import { Tag } from '../index';
+import { runAxeCheck } from '@instructure/ui-axe-check';
+import { View } from '@instructure/ui-view';
+const originalOmitViewProps = View.omitViewProps;
+describe('<Tag />', async () => {
+  beforeAll(() => {
+    // View component read Component.name instead of Component.displayName
+    // causing [undefined] in error messages
+
+    View.omitViewProps = (props, Component) => {
+      const ModifiedComponent = {
+        ...Component,
+        name: 'Tag'
+      };
+      return originalOmitViewProps(props, ModifiedComponent);
+    };
+  });
+  afterAll(() => {
+    View.omitViewProps = originalOmitViewProps;
+  });
+  it('should display text', async () => {
+    render(_Tag || (_Tag = /*#__PURE__*/React.createElement(Tag, {
+      text: "Summer"
+    })));
+    const tag = screen.getByText('Summer');
+    expect(tag).toBeInTheDocument();
+  });
+  it('should render as a button and respond to onClick event', async () => {
+    const onClick = vi.fn();
+    render( /*#__PURE__*/React.createElement(Tag, {
+      "data-testid": "summer-button",
+      text: "Summer",
+      onClick: onClick
+    }));
+    const button = screen.getByTestId('summer-button');
+    userEvent.click(button);
+    await waitFor(() => {
+      expect(onClick).toHaveBeenCalledTimes(1);
+      expect(button.tagName).toBe('BUTTON');
+    });
+  });
+  it('should render a close icon when it is dismissible and clickable', async () => {
+    const onClick = vi.fn();
+    const _render = render( /*#__PURE__*/React.createElement(Tag, {
+        text: "Summer",
+        onClick: onClick,
+        dismissible: true
+      })),
+      container = _render.container;
+    const icon = container.querySelector('svg');
+    expect(icon).toHaveAttribute('name', 'IconX');
+  });
+  it('should meet a11y standards', async () => {
+    const _render2 = render(_Tag2 || (_Tag2 = /*#__PURE__*/React.createElement(Tag, {
+        text: "Summer"
+      }))),
+      container = _render2.container;
+    const axeCheck = await runAxeCheck(container);
+    expect(axeCheck).toBe(true);
+  });
+  describe('when passing down props to View', async () => {
+    const allowedProps = {
+      margin: 'small',
+      elementRef: () => {}
+    };
+    View.allowedProps.filter(prop => prop !== 'children').forEach(prop => {
+      if (Object.keys(allowedProps).indexOf(prop) < 0) {
+        it(`should NOT allow the '${prop}' prop`, async () => {
+          const props = {
+            [prop]: 'foo'
+          };
+          const consoleError = vi.spyOn(console, 'error').mockImplementation(() => {});
+          render( /*#__PURE__*/React.createElement(Tag, Object.assign({
+            text: "Summer"
+          }, props)));
+          const warning = `Warning: [Tag] prop '${prop}' is not allowed.`;
+          expect(consoleError.mock.calls[0][0]).toBe(warning);
+          consoleError.mockRestore();
+        });
+      } else {
+        it(`should allow the '${prop}' prop`, async () => {
+          const props = {
+            [prop]: allowedProps[prop]
+          };
+          const consoleError = vi.spyOn(console, 'error');
+          render( /*#__PURE__*/React.createElement(Tag, Object.assign({
+            text: "Summer"
+          }, props)));
+          expect(consoleError).not.toHaveBeenCalled();
+          consoleError.mockRestore();
+        });
+      }
+    });
+  });
+});

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

@@ -0,0 +1,127 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _userEvent = require("@testing-library/user-event");
+require("@testing-library/jest-dom");
+var _vitest = require("vitest");
+var _index = require("../index");
+var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
+var _View = require("@instructure/ui-view/lib/View");
+var _Tag, _Tag2;
+/*
+ * 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.
+ */
+const originalOmitViewProps = _View.View.omitViewProps;
+describe('<Tag />', async () => {
+  beforeAll(() => {
+    // View component read Component.name instead of Component.displayName
+    // causing [undefined] in error messages
+
+    _View.View.omitViewProps = (props, Component) => {
+      const ModifiedComponent = {
+        ...Component,
+        name: 'Tag'
+      };
+      return originalOmitViewProps(props, ModifiedComponent);
+    };
+  });
+  afterAll(() => {
+    _View.View.omitViewProps = originalOmitViewProps;
+  });
+  it('should display text', async () => {
+    (0, _react2.render)(_Tag || (_Tag = /*#__PURE__*/_react.default.createElement(_index.Tag, {
+      text: "Summer"
+    })));
+    const tag = _react2.screen.getByText('Summer');
+    expect(tag).toBeInTheDocument();
+  });
+  it('should render as a button and respond to onClick event', async () => {
+    const onClick = _vitest.vi.fn();
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Tag, {
+      "data-testid": "summer-button",
+      text: "Summer",
+      onClick: onClick
+    }));
+    const button = _react2.screen.getByTestId('summer-button');
+    _userEvent.userEvent.click(button);
+    await (0, _react2.waitFor)(() => {
+      expect(onClick).toHaveBeenCalledTimes(1);
+      expect(button.tagName).toBe('BUTTON');
+    });
+  });
+  it('should render a close icon when it is dismissible and clickable', async () => {
+    const onClick = _vitest.vi.fn();
+    const _render = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Tag, {
+        text: "Summer",
+        onClick: onClick,
+        dismissible: true
+      })),
+      container = _render.container;
+    const icon = container.querySelector('svg');
+    expect(icon).toHaveAttribute('name', 'IconX');
+  });
+  it('should meet a11y standards', async () => {
+    const _render2 = (0, _react2.render)(_Tag2 || (_Tag2 = /*#__PURE__*/_react.default.createElement(_index.Tag, {
+        text: "Summer"
+      }))),
+      container = _render2.container;
+    const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
+    expect(axeCheck).toBe(true);
+  });
+  describe('when passing down props to View', async () => {
+    const allowedProps = {
+      margin: 'small',
+      elementRef: () => {}
+    };
+    _View.View.allowedProps.filter(prop => prop !== 'children').forEach(prop => {
+      if (Object.keys(allowedProps).indexOf(prop) < 0) {
+        it(`should NOT allow the '${prop}' prop`, async () => {
+          const props = {
+            [prop]: 'foo'
+          };
+          const consoleError = _vitest.vi.spyOn(console, 'error').mockImplementation(() => {});
+          (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Tag, Object.assign({
+            text: "Summer"
+          }, props)));
+          const warning = `Warning: [Tag] prop '${prop}' is not allowed.`;
+          expect(consoleError.mock.calls[0][0]).toBe(warning);
+          consoleError.mockRestore();
+        });
+      } else {
+        it(`should allow the '${prop}' prop`, async () => {
+          const props = {
+            [prop]: allowedProps[prop]
+          };
+          const consoleError = _vitest.vi.spyOn(console, 'error');
+          (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.Tag, Object.assign({
+            text: "Summer"
+          }, props)));
+          expect(consoleError).not.toHaveBeenCalled();
+          consoleError.mockRestore();
+        });
+      }
+    });
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-tag",
-  "version": "9.3.0",
+  "version": "9.3.1-snapshot-0",
   "description": "A tag component",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,22 +24,27 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/console": "9.3.0",
-    "@instructure/emotion": "9.3.0",
-    "@instructure/shared-types": "9.3.0",
-    "@instructure/ui-color-utils": "9.3.0",
-    "@instructure/ui-dom-utils": "9.3.0",
-    "@instructure/ui-icons": "9.3.0",
-    "@instructure/ui-react-utils": "9.3.0",
-    "@instructure/ui-testable": "9.3.0",
-    "@instructure/ui-view": "9.3.0",
+    "@instructure/console": "9.3.1-snapshot-0",
+    "@instructure/emotion": "9.3.1-snapshot-0",
+    "@instructure/shared-types": "9.3.1-snapshot-0",
+    "@instructure/ui-color-utils": "9.3.1-snapshot-0",
+    "@instructure/ui-dom-utils": "9.3.1-snapshot-0",
+    "@instructure/ui-icons": "9.3.1-snapshot-0",
+    "@instructure/ui-react-utils": "9.3.1-snapshot-0",
+    "@instructure/ui-testable": "9.3.1-snapshot-0",
+    "@instructure/ui-view": "9.3.1-snapshot-0",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-babel-preset": "9.3.0",
-    "@instructure/ui-test-locator": "9.3.0",
-    "@instructure/ui-test-utils": "9.3.0",
-    "@instructure/ui-themes": "9.3.0"
+    "@instructure/ui-axe-check": "9.3.1-snapshot-0",
+    "@instructure/ui-babel-preset": "9.3.1-snapshot-0",
+    "@instructure/ui-test-locator": "9.3.1-snapshot-0",
+    "@instructure/ui-test-utils": "9.3.1-snapshot-0",
+    "@instructure/ui-themes": "9.3.1-snapshot-0",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.7",
+    "@testing-library/user-event": "^14.5.2",
+    "vitest": "^1.6.0"
   },
   "peerDependencies": {
     "react": ">=16.8 <=18"

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

@@ -0,0 +1,132 @@
+/*
+ * 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, { ComponentType } from 'react'
+import { render, screen, waitFor } from '@testing-library/react'
+import { userEvent } from '@testing-library/user-event'
+import '@testing-library/jest-dom'
+import { vi } from 'vitest'
+
+import { Tag } from '../index'
+import { runAxeCheck } from '@instructure/ui-axe-check'
+import type { ViewProps } from '@instructure/ui-view'
+import { View } from '@instructure/ui-view'
+
+const originalOmitViewProps = View.omitViewProps
+
+describe('<Tag />', async () => {
+  beforeAll(() => {
+    // View component read Component.name instead of Component.displayName
+    // causing [undefined] in error messages
+    type TagComponentType = ComponentType & {
+      name: 'Tag'
+    }
+
+    View.omitViewProps = (props, Component) => {
+      const ModifiedComponent = {
+        ...Component,
+        name: 'Tag'
+      } as TagComponentType
+      return originalOmitViewProps(props, ModifiedComponent)
+    }
+  })
+  afterAll(() => {
+    View.omitViewProps = originalOmitViewProps
+  })
+
+  it('should display text', async () => {
+    render(<Tag text="Summer" />)
+    const tag = screen.getByText('Summer')
+
+    expect(tag).toBeInTheDocument()
+  })
+
+  it('should render as a button and respond to onClick event', async () => {
+    const onClick = vi.fn()
+    render(<Tag data-testid="summer-button" text="Summer" onClick={onClick} />)
+
+    const button = screen.getByTestId('summer-button')
+
+    userEvent.click(button)
+
+    await waitFor(() => {
+      expect(onClick).toHaveBeenCalledTimes(1)
+      expect(button.tagName).toBe('BUTTON')
+    })
+  })
+
+  it('should render a close icon when it is dismissible and clickable', async () => {
+    const onClick = vi.fn()
+    const { container } = render(
+      <Tag text="Summer" onClick={onClick} dismissible={true} />
+    )
+    const icon = container.querySelector('svg')
+
+    expect(icon).toHaveAttribute('name', 'IconX')
+  })
+
+  it('should meet a11y standards', async () => {
+    const { container } = render(<Tag text="Summer" />)
+    const axeCheck = await runAxeCheck(container)
+
+    expect(axeCheck).toBe(true)
+  })
+
+  describe('when passing down props to View', async () => {
+    const allowedProps: Partial<ViewProps> = {
+      margin: 'small',
+      elementRef: () => {}
+    }
+    View.allowedProps
+      .filter((prop) => prop !== 'children')
+      .forEach((prop) => {
+        if (Object.keys(allowedProps).indexOf(prop) < 0) {
+          it(`should NOT allow the '${prop}' prop`, async () => {
+            const props = {
+              [prop]: 'foo'
+            }
+            const consoleError = vi
+              .spyOn(console, 'error')
+              .mockImplementation(() => {})
+
+            render(<Tag text="Summer" {...props} />)
+            const warning = `Warning: [Tag] prop '${prop}' is not allowed.`
+
+            expect(consoleError.mock.calls[0][0]).toBe(warning)
+            consoleError.mockRestore()
+          })
+        } else {
+          it(`should allow the '${prop}' prop`, async () => {
+            const props = { [prop]: allowedProps[prop] }
+            const consoleError = vi.spyOn(console, 'error')
+
+            render(<Tag text="Summer" {...props} />)
+
+            expect(consoleError).not.toHaveBeenCalled()
+            consoleError.mockRestore()
+          })
+        }
+      })
+  })
+})

package/tsconfig.build.json

@@ -10,6 +10,7 @@
     { "path": "../console/tsconfig.build.json" },
     { "path": "../emotion/tsconfig.build.json" },
     { "path": "../shared-types/tsconfig.build.json" },
+    { "path": "../ui-axe-check/tsconfig.build.json" },
     { "path": "../ui-color-utils/tsconfig.build.json" },
     { "path": "../ui-dom-utils/tsconfig.build.json" },
     { "path": "../ui-icons/tsconfig.build.json" },
@@ -17,7 +18,6 @@
     { "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-themes/tsconfig.build.json" }
   ]