diff --git a/.github/ISSUE_TEMPLATE/FEATURE_REQUEST_OR_ENHANCEMENT.yaml b/.github/ISSUE_TEMPLATE/FEATURE_REQUEST_OR_ENHANCEMENT.yaml
index 0d60017597fb..3a9c6e04287a 100644
--- a/.github/ISSUE_TEMPLATE/FEATURE_REQUEST_OR_ENHANCEMENT.yaml
+++ b/.github/ISSUE_TEMPLATE/FEATURE_REQUEST_OR_ENHANCEMENT.yaml
@@ -25,7 +25,9 @@ body:
id: justification
attributes:
label: Justification
- description: 'Provide the business reasons for this request.'
+ description: 'Provide the business reasons for this request. Provide screenshots of what you are unable to accomplish that this enhancement would make possible.'
+ validations:
+ required: true
- type: textarea
id: metrics
attributes:
@@ -48,6 +50,13 @@ body:
description:
'Do you want this work within a specific time period? Is it related to
an upcoming release?'
+ - type: input
+ id: team
+ attributes:
+ label: Your team
+ description: 'Please provide the requesting team you are apart of. @mention design and development members from your team that should be aware of this request.'
+ validations:
+ required: true
- type: input
id: resources
attributes:
diff --git a/config/eslint-config-carbon/package.json b/config/eslint-config-carbon/package.json
index 1d83ec2a16e7..887eedd2a918 100644
--- a/config/eslint-config-carbon/package.json
+++ b/config/eslint-config-carbon/package.json
@@ -1,7 +1,7 @@
{
"name": "eslint-config-carbon",
"description": "ESLint configuration for Carbon",
- "version": "2.14.0-rc.0",
+ "version": "2.14.0",
"license": "Apache-2.0",
"main": "index.js",
"repository": {
diff --git a/config/jest-config-carbon/package.json b/config/jest-config-carbon/package.json
index b665d1c118c0..06bdc5ba529f 100644
--- a/config/jest-config-carbon/package.json
+++ b/config/jest-config-carbon/package.json
@@ -2,7 +2,7 @@
"name": "jest-config-carbon",
"private": true,
"description": "Jest configuration and preset for Carbon",
- "version": "1.4.0-rc.0",
+ "version": "1.4.0",
"license": "Apache-2.0",
"main": "index.js",
"repository": {
diff --git a/examples/codesandbox-styles/package.json b/examples/codesandbox-styles/package.json
index ba604e5a5b46..de9ed8c9d46b 100644
--- a/examples/codesandbox-styles/package.json
+++ b/examples/codesandbox-styles/package.json
@@ -1,7 +1,7 @@
{
"name": "codesandbox-styles",
"private": true,
- "version": "0.11.0-rc.0",
+ "version": "0.11.0",
"scripts": {
"develop": "vite"
},
@@ -9,7 +9,7 @@
"vite": "^2.8.0"
},
"dependencies": {
- "@carbon/styles": "^1.8.0-rc.0",
+ "@carbon/styles": "^1.8.0",
"sass": "^1.51.0"
}
}
diff --git a/examples/codesandbox-with-sass-compilation/package.json b/examples/codesandbox-with-sass-compilation/package.json
index 80762d32995f..50e6a8fbedeb 100644
--- a/examples/codesandbox-with-sass-compilation/package.json
+++ b/examples/codesandbox-with-sass-compilation/package.json
@@ -1,9 +1,9 @@
{
"name": "codesandbox-with-sass-compilation",
- "version": "0.9.0-rc.0",
+ "version": "0.9.0",
"private": true,
"dependencies": {
- "@carbon/react": "^1.8.0-rc.0",
+ "@carbon/react": "^1.8.0",
"react": "^17.0.0",
"react-dom": "^17.0.0"
},
diff --git a/examples/codesandbox/package.json b/examples/codesandbox/package.json
index bf575e95cf52..e4338a60af21 100644
--- a/examples/codesandbox/package.json
+++ b/examples/codesandbox/package.json
@@ -1,9 +1,9 @@
{
"name": "codesandbox",
- "version": "0.9.0-rc.0",
+ "version": "0.9.0",
"private": true,
"dependencies": {
- "@carbon/react": "^1.8.0-rc.0",
+ "@carbon/react": "^1.8.0",
"react": "^17.0.0",
"react-dom": "^17.0.0"
},
diff --git a/examples/light-dark-mode/package.json b/examples/light-dark-mode/package.json
index 44d83c3adf0f..34e318a1f76f 100644
--- a/examples/light-dark-mode/package.json
+++ b/examples/light-dark-mode/package.json
@@ -1,7 +1,7 @@
{
"name": "examples-light-dark",
"private": true,
- "version": "0.6.0-rc.0",
+ "version": "0.6.0",
"scripts": {
"build": "next build",
"dev": "next dev",
@@ -9,7 +9,7 @@
"start": "next start"
},
"dependencies": {
- "@carbon/react": "^1.8.0-rc.0",
+ "@carbon/react": "^1.8.0",
"next": "12.1.4",
"react": "18.0.0",
"react-dom": "18.0.0"
diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
index b61aef86eb34..ffa10c0d1aea 100644
--- a/examples/nextjs/package.json
+++ b/examples/nextjs/package.json
@@ -1,7 +1,7 @@
{
"name": "examples-nextjs",
"private": true,
- "version": "0.8.0-rc.0",
+ "version": "0.8.0",
"scripts": {
"build": "next build",
"dev": "next dev",
@@ -9,7 +9,7 @@
"start": "next start"
},
"dependencies": {
- "@carbon/react": "^1.8.0-rc.0",
+ "@carbon/react": "^1.8.0",
"next": "12.1.4",
"react": "18.0.0",
"react-dom": "18.0.0"
diff --git a/examples/vite/package.json b/examples/vite/package.json
index ae7e323e73df..6c9c0081db22 100644
--- a/examples/vite/package.json
+++ b/examples/vite/package.json
@@ -1,14 +1,14 @@
{
"name": "vite",
"private": true,
- "version": "0.6.0-rc.0",
+ "version": "0.6.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
- "@carbon/react": "^1.8.0-rc.0",
+ "@carbon/react": "^1.8.0",
"react": "^17.0.0",
"react-dom": "^17.0.0"
},
diff --git a/packages/carbon-components-react/package.json b/packages/carbon-components-react/package.json
index 80472b24a6d1..ea484c7a02b4 100644
--- a/packages/carbon-components-react/package.json
+++ b/packages/carbon-components-react/package.json
@@ -1,7 +1,7 @@
{
"name": "carbon-components-react",
"description": "The Carbon Design System is IBM’s open-source design system for products and experiences.",
- "version": "8.8.0-rc.0",
+ "version": "8.8.0",
"license": "Apache-2.0",
"main": "lib/index.js",
"module": "es/index.js",
@@ -39,8 +39,8 @@
"sass": "^1.33.0"
},
"dependencies": {
- "@carbon/react": "^1.8.0-rc.0",
- "@carbon/styles": "^1.8.0-rc.0",
+ "@carbon/react": "^1.8.0",
+ "@carbon/styles": "^1.8.0",
"@carbon/telemetry": "0.1.0"
},
"devDependencies": {
diff --git a/packages/carbon-components/package.json b/packages/carbon-components/package.json
index 5fc604b1c860..ede7a30b1d35 100644
--- a/packages/carbon-components/package.json
+++ b/packages/carbon-components/package.json
@@ -1,7 +1,7 @@
{
"name": "carbon-components",
"description": "The Carbon Design System is IBM’s open-source design system for products and experiences.",
- "version": "11.8.0-rc.0",
+ "version": "11.8.0",
"license": "Apache-2.0",
"repository": {
"type": "git",
@@ -40,7 +40,7 @@
"sass": "^1.33.0"
},
"dependencies": {
- "@carbon/styles": "^1.8.0-rc.0",
+ "@carbon/styles": "^1.8.0",
"@carbon/telemetry": "0.1.0"
},
"devDependencies": {
diff --git a/packages/elements/package.json b/packages/elements/package.json
index 22893030274e..29c030b2591c 100644
--- a/packages/elements/package.json
+++ b/packages/elements/package.json
@@ -1,7 +1,7 @@
{
"name": "@carbon/elements",
"description": "A collection of design elements in code for the IBM Design Language",
- "version": "11.6.0-rc.0",
+ "version": "11.6.0",
"license": "Apache-2.0",
"main": "lib/index.js",
"module": "es/index.js",
@@ -36,12 +36,12 @@
},
"dependencies": {
"@carbon/colors": "^11.3.0",
- "@carbon/grid": "^11.4.0-rc.0",
- "@carbon/icons": "^11.6.0-rc.0",
- "@carbon/layout": "^11.4.0-rc.0",
+ "@carbon/grid": "^11.4.0",
+ "@carbon/icons": "^11.6.0",
+ "@carbon/layout": "^11.4.0",
"@carbon/motion": "^11.2.0",
- "@carbon/themes": "^11.5.0-rc.0",
- "@carbon/type": "^11.5.0-rc.0"
+ "@carbon/themes": "^11.5.0",
+ "@carbon/type": "^11.5.0"
},
"devDependencies": {
"@carbon/cli": "^11.2.0",
diff --git a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
index aa26099afc26..8db103552f2e 100644
--- a/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/elements/src/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -305,6 +305,7 @@ Array [
"textSecondary",
"themes",
"toggleOff",
+ "unstable_metadata",
"unstable_tokens",
"v10",
"warmGray",
diff --git a/packages/grid/package.json b/packages/grid/package.json
index 2eefb0eae6a9..4c89d4face90 100644
--- a/packages/grid/package.json
+++ b/packages/grid/package.json
@@ -1,7 +1,7 @@
{
"name": "@carbon/grid",
"description": "Grid for digital and software products using the Carbon Design System",
- "version": "11.4.0-rc.0",
+ "version": "11.4.0",
"license": "Apache-2.0",
"repository": {
"type": "git",
@@ -32,7 +32,7 @@
"clean": "rimraf scss/_inlined scss/vendor"
},
"dependencies": {
- "@carbon/layout": "^11.4.0-rc.0"
+ "@carbon/layout": "^11.4.0"
},
"devDependencies": {
"@carbon/cli": "^11.2.0",
diff --git a/packages/icons-react/package.json b/packages/icons-react/package.json
index ed91bb5579d6..4a357cff82f3 100644
--- a/packages/icons-react/package.json
+++ b/packages/icons-react/package.json
@@ -1,7 +1,7 @@
{
"name": "@carbon/icons-react",
"description": "React components for icons in digital and software products using the Carbon Design System",
- "version": "11.6.0-rc.0",
+ "version": "11.6.0",
"license": "Apache-2.0",
"main": "lib/index.js",
"module": "es/index.js",
@@ -42,7 +42,7 @@
},
"devDependencies": {
"@carbon/icon-build-helpers": "^1.2.0",
- "@carbon/icons": "^11.6.0-rc.0",
+ "@carbon/icons": "^11.6.0",
"rimraf": "^3.0.2"
},
"sideEffects": false
diff --git a/packages/icons-vue/package.json b/packages/icons-vue/package.json
index eb38382cbf31..0b16f2f164b1 100644
--- a/packages/icons-vue/package.json
+++ b/packages/icons-vue/package.json
@@ -1,7 +1,7 @@
{
"name": "@carbon/icons-vue",
"description": "Vue components for icons in digital and software products using the Carbon Design System",
- "version": "10.55.0-rc.0",
+ "version": "10.55.0",
"license": "Apache-2.0",
"main": "lib/index.js",
"module": "es/index.js",
@@ -32,7 +32,7 @@
},
"devDependencies": {
"@carbon/cli-reporter": "^10.5.0",
- "@carbon/icons": "^11.6.0-rc.0",
+ "@carbon/icons": "^11.6.0",
"fs-extra": "^10.0.0",
"prettier": "^2.6.2",
"rimraf": "^3.0.0",
diff --git a/packages/icons/icons.yml b/packages/icons/icons.yml
index 3ace85742f96..405191349527 100644
--- a/packages/icons/icons.yml
+++ b/packages/icons/icons.yml
@@ -4016,7 +4016,7 @@
sizes:
- 32
- name: cloud--auditing
- friendly_name: Cloud auditing
+ friendly_name: IBM Cloud® Activity Tracker
aliases:
- cloud
- auditing
@@ -8867,7 +8867,7 @@
sizes:
- 32
- name: ibm-cloud--kubernetes-service
- friendly_name: IBM Cloud® Kubernetes Services
+ friendly_name: IBM Cloud® Kubernetes Service
aliases:
- services
- cloud
diff --git a/packages/icons/package.json b/packages/icons/package.json
index e9521dd1e62a..24deff2ac3e9 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,7 +1,7 @@
{
"name": "@carbon/icons",
"description": "Icons for digital and software products using the Carbon Design System",
- "version": "11.6.0-rc.0",
+ "version": "11.6.0",
"license": "Apache-2.0",
"main": "lib/index.js",
"module": "es/index.js",
diff --git a/packages/layout/package.json b/packages/layout/package.json
index e75bc38cfd68..87028fbf448f 100644
--- a/packages/layout/package.json
+++ b/packages/layout/package.json
@@ -1,7 +1,7 @@
{
"name": "@carbon/layout",
"description": "Layout helpers for digital and software products using the Carbon Design System",
- "version": "11.4.0-rc.0",
+ "version": "11.4.0",
"license": "Apache-2.0",
"main": "lib/index.js",
"module": "es/index.js",
diff --git a/packages/pictograms-react/examples/storybook/yarn.lock b/packages/pictograms-react/examples/storybook/yarn.lock
index 838606380a34..ba7be0d86cc8 100644
--- a/packages/pictograms-react/examples/storybook/yarn.lock
+++ b/packages/pictograms-react/examples/storybook/yarn.lock
@@ -2472,9 +2472,9 @@ browserslist@^4.5.2, browserslist@^4.6.0, browserslist@^4.6.1:
node-releases "^1.1.23"
buffer-from@^1.0.0:
- version "1.1.1"
- resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
- integrity sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==
+ version "1.1.2"
+ resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
+ integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
buffer-xor@^1.0.3:
version "1.0.3"
@@ -2794,10 +2794,10 @@ commander@2.17.x:
resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
integrity sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==
-commander@^2.19.0:
- version "2.20.0"
- resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
- integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==
+commander@^2.19.0, commander@^2.20.0:
+ version "2.20.3"
+ resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+ integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
commander@~2.19.0:
version "2.19.0"
@@ -6914,10 +6914,10 @@ source-map-resolve@^0.5.0:
source-map-url "^0.4.0"
urix "^0.1.0"
-source-map-support@~0.5.10:
- version "0.5.12"
- resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.12.tgz#b4f3b10d51857a5af0138d3ce8003b201613d599"
- integrity sha512-4h2Pbvyy15EE02G+JOZpUCmqWJuqrs+sEkzewTm++BPi7Hvn/HwcqLAcNxYAyI0x13CpPPn+kMjl+hplXMHITQ==
+source-map-support@~0.5.12:
+ version "0.5.21"
+ resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
+ integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==
dependencies:
buffer-from "^1.0.0"
source-map "^0.6.0"
@@ -7235,13 +7235,13 @@ terser-webpack-plugin@^1.1.0, terser-webpack-plugin@^1.2.4:
worker-farm "^1.7.0"
terser@^4.0.0:
- version "4.0.0"
- resolved "https://registry.yarnpkg.com/terser/-/terser-4.0.0.tgz#ef356f6f359a963e2cc675517f21c1c382877374"
- integrity sha512-dOapGTU0hETFl1tCo4t56FN+2jffoKyER9qBGoUFyZ6y7WLoKT0bF+lAYi6B6YsILcGF3q1C2FBh8QcKSCgkgA==
+ version "4.8.1"
+ resolved "https://registry.yarnpkg.com/terser/-/terser-4.8.1.tgz#a00e5634562de2239fd404c649051bf6fc21144f"
+ integrity sha512-4GnLC0x667eJG0ewJTa6z/yXrbLGv80D9Ru6HIpCQmO+Q4PfEtBFi0ObSckqwL6VyQv/7ENJieXHo2ANmdQwgw==
dependencies:
- commander "^2.19.0"
+ commander "^2.20.0"
source-map "~0.6.1"
- source-map-support "~0.5.10"
+ source-map-support "~0.5.12"
text-table@0.2.0:
version "0.2.0"
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index dc154b6235a1..b92246026eff 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -1269,7 +1269,12 @@ Map {
"type": "string",
},
"selectorsFloatingMenus": Object {
- "type": "string",
+ "args": Array [
+ Object {
+ "type": "string",
+ },
+ ],
+ "type": "arrayOf",
},
"size": Object {
"args": Array [
@@ -8465,7 +8470,7 @@ Map {
"type": "oneOf",
},
"target": Object {
- "type": "element",
+ "type": "object",
},
"x": Object {
"args": Array [
diff --git a/packages/react/package.json b/packages/react/package.json
index 3296e5d18726..7085aefa6bf3 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,7 +1,7 @@
{
"name": "@carbon/react",
"description": "React components for the Carbon Design System",
- "version": "1.8.0-rc.0",
+ "version": "1.8.0",
"license": "Apache-2.0",
"main": "lib/index.js",
"module": "es/index.js",
@@ -44,9 +44,9 @@
"dependencies": {
"@babel/runtime": "^7.18.3",
"@carbon/feature-flags": "^0.8.0",
- "@carbon/icons-react": "^11.6.0-rc.0",
- "@carbon/layout": "^11.4.0-rc.0",
- "@carbon/styles": "^1.8.0-rc.0",
+ "@carbon/icons-react": "^11.6.0",
+ "@carbon/layout": "^11.4.0",
+ "@carbon/styles": "^1.8.0",
"@carbon/telemetry": "0.1.0",
"classnames": "2.3.1",
"copy-to-clipboard": "^3.3.1",
@@ -73,7 +73,7 @@
"@babel/preset-env": "^7.18.2",
"@babel/preset-react": "^7.17.12",
"@carbon/test-utils": "^10.25.0",
- "@carbon/themes": "^11.5.0-rc.0",
+ "@carbon/themes": "^11.5.0",
"@rollup/plugin-babel": "^5.3.0",
"@rollup/plugin-commonjs": "^21.0.0",
"@rollup/plugin-node-resolve": "^13.0.0",
diff --git a/packages/react/src/components/ComboBox/ComboBox-test.js b/packages/react/src/components/ComboBox/ComboBox-test.js
index 2cd0991d5ce2..fda420019087 100644
--- a/packages/react/src/components/ComboBox/ComboBox-test.js
+++ b/packages/react/src/components/ComboBox/ComboBox-test.js
@@ -6,12 +6,10 @@
*/
import React from 'react';
-import { mount } from 'enzyme';
import { render, screen, within } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import {
findListBoxNode,
- findMenuNode,
assertMenuOpen,
assertMenuClosed,
generateItems,
@@ -19,10 +17,9 @@ import {
} from '../ListBox/test-helpers';
import ComboBox from '../ComboBox';
-const prefix = 'cds';
-const findInputNode = (wrapper) => wrapper.find(`.${prefix}--text-input`);
-const openMenu = (wrapper) => {
- wrapper.find(`[role="combobox"]`).simulate('click');
+const findInputNode = () => screen.getByRole('combobox');
+const openMenu = () => {
+ userEvent.click(findInputNode());
};
describe('ComboBox', () => {
@@ -38,28 +35,23 @@ describe('ComboBox', () => {
};
});
- it('should display the placeholder text when no items are selected and the control is not focused', () => {
- const wrapper = mount();
- expect(findInputNode(wrapper).prop('value')).toBe('');
- expect(findInputNode(wrapper).prop('placeholder')).toBe(
- mockProps.placeholder
- );
- });
-
it('should display the menu of items when a user clicks on the input', () => {
- const wrapper = mount();
- findInputNode(wrapper).simulate('click');
+ render();
- assertMenuOpen(wrapper, mockProps);
+ userEvent.click(findInputNode());
+
+ assertMenuOpen(mockProps);
});
it('should call `onChange` each time an item is selected', () => {
- const wrapper = mount();
+ render();
expect(mockProps.onChange).not.toHaveBeenCalled();
for (let i = 0; i < mockProps.items.length; i++) {
- openMenu(wrapper);
- wrapper.find('ListBoxMenuItem').at(i).simulate('click');
+ openMenu();
+
+ userEvent.click(screen.getAllByRole('option')[i]);
+
expect(mockProps.onChange).toHaveBeenCalledTimes(i + 1);
expect(mockProps.onChange).toHaveBeenCalledWith({
selectedItem: mockProps.items[i],
@@ -69,41 +61,40 @@ describe('ComboBox', () => {
it('capture filter text events', () => {
const onInputChange = jest.fn();
- const wrapper = mount(
-
- );
+ render();
- findInputNode(wrapper).simulate('change', {
- target: { value: 'something' },
- });
+ userEvent.type(findInputNode(), 'something');
expect(onInputChange).toHaveBeenCalledWith('something');
});
it('should render custom item components', () => {
- const wrapper = mount();
- wrapper.setProps({
- itemToElement: (item) => {item.text}
,
+ const itemToElement = jest.fn((item) => {
+ return {item.text}
;
});
- openMenu(wrapper);
+ render();
+ openMenu();
- expect(wrapper.find(`.mock-item`).length).toBe(mockProps.items.length);
+ expect(itemToElement).toHaveBeenCalled();
});
it('should let the user select an option by clicking on the option node', () => {
- const wrapper = mount();
- openMenu(wrapper);
- wrapper.find('ListBoxMenuItem').at(0).simulate('click');
+ render();
+ openMenu();
+
+ userEvent.click(screen.getAllByRole('option')[0]);
+
expect(mockProps.onChange).toHaveBeenCalledTimes(1);
expect(mockProps.onChange).toHaveBeenCalledWith({
selectedItem: mockProps.items[0],
});
- assertMenuClosed(wrapper);
+ assertMenuClosed();
mockProps.onChange.mockClear();
- openMenu(wrapper);
- wrapper.find('ListBoxMenuItem').at(1).simulate('click');
+ openMenu();
+
+ userEvent.click(screen.getAllByRole('option')[1]);
expect(mockProps.onChange).toHaveBeenCalledTimes(1);
expect(mockProps.onChange).toHaveBeenCalledWith({
selectedItem: mockProps.items[1],
@@ -112,12 +103,10 @@ describe('ComboBox', () => {
describe('should display initially selected item found in `initialSelectedItem`', () => {
it('using an object type for the `initialSelectedItem` prop', () => {
- const wrapper = mount(
+ render(
);
- expect(findInputNode(wrapper).prop('value')).toEqual(
- mockProps.items[0].label
- );
+ expect(findInputNode()).toHaveDisplayValue(mockProps.items[0].label);
});
it('using a string type for the `initialSelectedItem` prop', () => {
@@ -127,22 +116,19 @@ describe('ComboBox', () => {
items: ['1', '2', '3'],
};
- const wrapper = mount(
+ render(
);
- expect(findInputNode(wrapper).prop('value')).toEqual(mockProps.items[1]);
+ expect(findInputNode()).toHaveDisplayValue(mockProps.items[1]);
});
});
describe('should display selected item found in `selectedItem`', () => {
it('using an object type for the `selectedItem` prop', () => {
- const wrapper = mount(
-
- );
- expect(findInputNode(wrapper).prop('value')).toEqual(
- mockProps.items[0].label
- );
+ render();
+
+ expect(findInputNode()).toHaveDisplayValue(mockProps.items[0].label);
});
it('using a string type for the `selectedItem` prop', () => {
@@ -152,55 +138,37 @@ describe('ComboBox', () => {
items: ['1', '2', '3'],
};
- const wrapper = mount(
-
- );
+ render();
- expect(findInputNode(wrapper).prop('value')).toEqual(mockProps.items[1]);
+ expect(findInputNode()).toHaveDisplayValue(mockProps.items[1]);
});
});
describe('when disabled', () => {
it('should not let the user edit the input node', () => {
- const wrapper = mount();
- expect(findInputNode(wrapper).prop('disabled')).toBe(true);
- expect(findInputNode(wrapper).prop('value')).toBe('');
-
- findInputNode(wrapper).simulate('change', {
- target: {
- value: 'a',
- },
- });
+ render();
+
+ expect(findInputNode()).toHaveAttribute('disabled');
+
+ expect(findInputNode()).toHaveDisplayValue('');
+
+ userEvent.type(findInputNode(), 'a');
- expect(findInputNode(wrapper).prop('value')).toBe('');
+ expect(findInputNode()).toHaveDisplayValue('');
});
it('should not let the user expand the menu', () => {
- const wrapper = mount();
- openMenu(wrapper);
- expect(findListBoxNode(wrapper).hasClass('bx--list-box--expanded')).toBe(
- false
- );
+ render();
+ openMenu();
+ expect(findListBoxNode()).not.toHaveClass('cds--list-box--expanded');
});
});
describe('downshift quirks', () => {
- it('should not trigger the menu when typing a space in input', () => {
- const wrapper = mount();
-
- openMenu(wrapper);
- findInputNode(wrapper).simulate('change', {
- target: {
- value: ' ',
- },
- });
-
- expect(findMenuNode(wrapper).length).toBe(1);
- });
-
it('should set `inputValue` to an empty string if a false-y value is given', () => {
- const wrapper = mount();
- expect(wrapper.find('input').instance().value).toBe('');
+ render();
+
+ expect(findInputNode()).toHaveDisplayValue('');
});
it('should only render one listbox at a time when multiple comboboxes are present', () => {
diff --git a/packages/react/src/components/ComposedModal/next/ComposedModal.js b/packages/react/src/components/ComposedModal/next/ComposedModal.js
index 9ea219ce08d8..adba8b2543d2 100644
--- a/packages/react/src/components/ComposedModal/next/ComposedModal.js
+++ b/packages/react/src/components/ComposedModal/next/ComposedModal.js
@@ -329,7 +329,7 @@ ComposedModal.propTypes = {
/**
* Specify the CSS selectors that match the floating menus
*/
- selectorsFloatingMenus: PropTypes.string,
+ selectorsFloatingMenus: PropTypes.arrayOf(PropTypes.string),
/**
* Specify the size variant.
diff --git a/packages/react/src/components/Dropdown/Dropdown-story.js b/packages/react/src/components/Dropdown/Dropdown-story.js
deleted file mode 100644
index de14f72b7111..000000000000
--- a/packages/react/src/components/Dropdown/Dropdown-story.js
+++ /dev/null
@@ -1,206 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import React from 'react';
-import { action } from '@storybook/addon-actions';
-import {
- withKnobs,
- boolean,
- object,
- select,
- text,
-} from '@storybook/addon-knobs';
-import Dropdown from '../Dropdown';
-import DropdownSkeleton from './Dropdown.Skeleton';
-import mdx from './Dropdown.mdx';
-import {
- ChartBubble,
- ChartColumnFloating,
- ChartVennDiagram,
-} from '@carbon/icons-react';
-
-const items = [
- {
- id: 'option-0',
- text: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.',
- },
- {
- id: 'option-1',
- text: 'Option 1',
- },
- {
- id: 'option-2',
- text: 'Option 2',
- },
- {
- id: 'option-3',
- text: 'Option 3 - a disabled item',
- disabled: true,
- },
- {
- id: 'option-4',
- text: 'Option 4',
- },
- {
- id: 'option-5',
- text: 'Option 5',
- },
-];
-
-const sizes = {
- 'Small (sm)': 'sm',
- 'Medium (md) - default': undefined,
- 'Large (lg)': 'lg',
-};
-
-const directions = {
- 'Bottom (default)': 'bottom',
- 'Top ': 'top',
-};
-
-const types = {
- Default: 'default',
- Inline: 'inline',
-};
-
-const props = () => ({
- id: text('Dropdown ID (id)', 'carbon-dropdown-example'),
- size: select('Field size (size)', sizes, undefined) || undefined,
- direction: select('Dropdown direction (direction)', directions, 'bottom'),
- label: text('Label (label)', 'Dropdown menu options'),
- ariaLabel: text('Aria Label (ariaLabel)', 'Dropdown'),
- disabled: boolean('Disabled (disabled)', false),
- light: boolean('Light variant (light)', false),
- titleText: text('Title (titleText)', 'Dropdown label'),
- hideLabel: boolean('No title text shown (hideLabel)', false),
- helperText: text('Helper text (helperText)', 'This is some helper text.'),
- invalid: boolean('Show form validation UI (invalid)', false),
- invalidText: text(
- 'Form validation UI content (invalidText)',
- 'A valid value is required'
- ),
- type: select('Type (type)', types, 'default'),
- warn: boolean('Show warning state (warn)', false),
- warnText: text(
- 'Warning state text (warnText)',
- 'This mode may perform worse on older machines'
- ),
- listBoxMenuIconTranslationIds: object(
- 'Listbox menu icon translation IDs (for translateWithId callback)',
- {
- 'close.menu': 'Close menu',
- 'open.menu': 'Open menu',
- }
- ),
-});
-
-export default {
- title: 'Components/Dropdown',
- component: Dropdown,
- subcomponents: {
- DropdownSkeleton,
- },
- decorators: [withKnobs],
- parameters: {
- docs: {
- page: mdx,
- },
- },
-};
-
-export const Default = () => (
-
- (item ? item.text : '')}
- onChange={action('onChange')}
- />
-
-);
-export const RenderSelectedItem = () => (
-
- (item ? item.text : '')}
- itemToElement={(item) => (
- <>
- {React.createElement(item.icon)}
-
- {item.text}
-
-
- )}
- renderSelectedItem={(item) => (
- <>
- {React.createElement(item.icon)}
-
- {item.text}
-
-
- )}
- onChange={action('onChange')}
- />
-
-);
-
-export const Inline = () => (
-
- (item ? item.text : '')}
- onChange={action('onChange')}
- />
-
-);
-
-export const Playground = () => {
- const { listBoxMenuIconTranslationIds, ...dropdownProps } = props();
- return (
-
- (item ? item.text : '')}
- translateWithId={(id) => listBoxMenuIconTranslationIds[id]}
- />
-
- );
-};
-
-export const Skeleton = () => (
-
-
-
-);
diff --git a/packages/react/src/components/Dropdown/Dropdown-test.js b/packages/react/src/components/Dropdown/Dropdown-test.js
index 6e8e26df10be..b4adc91c994e 100644
--- a/packages/react/src/components/Dropdown/Dropdown-test.js
+++ b/packages/react/src/components/Dropdown/Dropdown-test.js
@@ -5,9 +5,9 @@
* LICENSE file in the root directory of this source tree.
*/
-import { cleanup, render } from '@testing-library/react';
import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen, cleanup } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
import {
assertMenuOpen,
assertMenuClosed,
@@ -33,39 +33,38 @@ describe('Dropdown', () => {
};
});
- it('should render', () => {
- const wrapper = mount();
- expect(wrapper).toMatchSnapshot();
- });
-
it('should initially render with the menu not open', () => {
- const wrapper = mount();
- assertMenuClosed(wrapper);
+ render();
+ assertMenuClosed();
});
it('should let the user open the menu by clicking on the control', () => {
- const wrapper = mount();
- openMenu(wrapper);
- assertMenuOpen(wrapper, mockProps);
+ render();
+ openMenu();
+ assertMenuOpen(mockProps);
});
it('should render with strings as items', () => {
- const wrapper = mount();
- openMenu(wrapper);
- expect(wrapper).toMatchSnapshot();
+ render();
+ openMenu();
+
+ expect(screen.getByText('zar')).toBeInTheDocument();
+ expect(screen.getByText('doz')).toBeInTheDocument();
});
it('should render custom item components', () => {
- const wrapper = mount();
- wrapper.setProps({
- itemToElement: (item) => {item.label}
,
+ const itemToElement = jest.fn((item) => {
+ return {item.label}
;
});
- openMenu(wrapper);
- expect(wrapper).toMatchSnapshot();
+
+ render();
+ openMenu();
+
+ expect(itemToElement).toHaveBeenCalled();
});
it('should render selectedItem as an element', () => {
- const wrapper = mount(
+ render(
{
/>
);
// custom element should be rendered for the selected item
- expect(wrapper.find('#a-custom-element-for-selected-item')).toHaveLength(1);
+ expect(
+ document.querySelector('#a-custom-element-for-selected-item')
+ ).toBeDefined();
// the title should use the normal itemToString method
- expect(wrapper.find('button').instance()).toHaveAttribute(
- 'title',
- 'Item 1'
- );
+
+ expect(screen.getByText('Item 1')).toBeInTheDocument();
});
describe('title', () => {
- let wrapper;
- let renderedLabel;
-
- beforeEach(() => {
- wrapper = mount();
- renderedLabel = wrapper.find('label[className="cds--label"]');
- });
-
it('renders a title', () => {
- expect(renderedLabel.length).toBe(1);
+ render();
+ expect(screen.getByText('Email Input')).toBeInTheDocument();
});
it('has the expected classes', () => {
- expect(renderedLabel.hasClass(`${prefix}--label`)).toEqual(true);
- });
-
- it('should set title as expected', () => {
- expect(renderedLabel.text()).toEqual('Email Input');
+ render();
+ expect(screen.getByText('Email Input')).toHaveClass(`${prefix}--label`);
});
});
describe('helper', () => {
it('renders a helper', () => {
- const wrapper = mount(
-
- );
- const renderedHelper = wrapper.find(`.${prefix}--form__helper-text`);
- expect(renderedHelper.length).toEqual(1);
+ render();
+ expect(screen.getByText('Email Input')).toBeInTheDocument();
});
it('renders children as expected', () => {
- const wrapper = mount(
+ render(
@@ -131,43 +117,35 @@ describe('Dropdown', () => {
{...mockProps}
/>
);
- const renderedHelper = wrapper.find(`.${prefix}--form__helper-text`);
- expect(renderedHelper.props().children).toEqual(
-
- This helper text has a link.
-
- );
- });
- it('should set helper text as expected', () => {
- const wrapper = mount();
- wrapper.setProps({ helperText: 'Helper text' });
- const renderedHelper = wrapper.find(`.${prefix}--form__helper-text`);
- expect(renderedHelper.text()).toEqual('Helper text');
+ expect(screen.getByRole('link')).toBeInTheDocument();
});
});
it('should specify light version as expected', () => {
- const wrapper = mount();
- expect(wrapper.props().light).toEqual(false);
- wrapper.setProps({ light: true });
- expect(wrapper.props().light).toEqual(true);
+ render();
+
+ expect(document.querySelector('.cds--list-box')).toHaveClass(
+ 'cds--dropdown--light'
+ );
});
it('should let the user select an option by clicking on the option node', () => {
- const wrapper = mount();
- openMenu(wrapper);
- wrapper.find('ListBoxMenuItem').at(0).simulate('click');
+ render();
+ openMenu();
+
+ userEvent.click(screen.getByText('Item 0'));
expect(mockProps.onChange).toHaveBeenCalledTimes(1);
expect(mockProps.onChange).toHaveBeenCalledWith({
selectedItem: mockProps.items[0],
});
- assertMenuClosed(wrapper);
+ assertMenuClosed();
mockProps.onChange.mockClear();
- openMenu(wrapper);
- wrapper.find('ListBoxMenuItem').at(1).simulate('click');
+ openMenu();
+ userEvent.click(screen.getByText('Item 1'));
+
expect(mockProps.onChange).toHaveBeenCalledTimes(1);
expect(mockProps.onChange).toHaveBeenCalledWith({
selectedItem: mockProps.items[1],
@@ -176,13 +154,11 @@ describe('Dropdown', () => {
describe('should display initially selected item found in `initialSelectedItem`', () => {
it('using an object type for the `initialSelectedItem` prop', () => {
- const wrapper = mount(
+ render(
);
- expect(wrapper.find(`span.${prefix}--list-box__label`).text()).toEqual(
- mockProps.items[0].label
- );
+ expect(screen.getByText(mockProps.items[0].label)).toBeInTheDocument();
});
it('using a string type for the `initialSelectedItem` prop', () => {
@@ -192,13 +168,11 @@ describe('Dropdown', () => {
items: ['1', '2', '3'],
};
- const wrapper = mount(
+ render(
);
- expect(wrapper.find(`span.${prefix}--list-box__label`).text()).toEqual(
- mockProps.items[1]
- );
+ expect(screen.getByText(mockProps.items[1])).toBeInTheDocument();
});
});
@@ -216,14 +190,9 @@ describe('Dropdown', () => {
describe('DropdownSkeleton', () => {
describe('Renders as expected', () => {
it('Has the expected classes', () => {
- const wrapper = mount();
- expect(wrapper.childAt(0).hasClass(`${prefix}--skeleton`)).toEqual(true);
- expect(wrapper.childAt(0).hasClass(`${prefix}--dropdown-v2`)).toEqual(
- true
- );
- expect(wrapper.childAt(0).hasClass(`${prefix}--list-box--sm`)).toEqual(
- true
- );
+ render();
+
+ expect(document.querySelector(`${prefix}--skeleton`)).toBeDefined();
});
});
});
diff --git a/packages/react/src/components/Dropdown/next/Dropdown.stories.js b/packages/react/src/components/Dropdown/Dropdown.stories.js
similarity index 60%
rename from packages/react/src/components/Dropdown/next/Dropdown.stories.js
rename to packages/react/src/components/Dropdown/Dropdown.stories.js
index e78168493da7..4fb7009bef49 100644
--- a/packages/react/src/components/Dropdown/next/Dropdown.stories.js
+++ b/packages/react/src/components/Dropdown/Dropdown.stories.js
@@ -1,14 +1,14 @@
/**
* Copyright IBM Corp. 2016, 2018
- *
+ *dropdow.stor
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
-import { default as Dropdown, DropdownSkeleton } from '../';
-import { Layer } from '../../Layer';
-import mdx from '../Dropdown.mdx';
+import { default as Dropdown, DropdownSkeleton } from './';
+import { Layer } from '../Layer';
+import mdx from './Dropdown.mdx';
export default {
title: 'Components/Dropdown',
@@ -17,9 +17,20 @@ export default {
DropdownSkeleton,
},
argTypes: {
- size: {
- options: ['sm', 'md', 'lg'],
- control: { type: 'select' },
+ items: {
+ table: { disable: true },
+ },
+ initialSelectedItem: {
+ table: { disable: true },
+ },
+ itemToElement: {
+ table: { disable: true },
+ },
+ className: {
+ table: { disable: true },
+ },
+ id: {
+ table: { disable: true },
},
},
parameters: {
@@ -57,7 +68,7 @@ const items = [
},
];
-export const Default = (args) => (
+export const Playground = (args) => (
(
);
-export const Inline = (args) => (
+Playground.argTypes = {
+ invalid: {
+ control: {
+ type: 'boolean',
+ },
+ defaultValue: false,
+ },
+ invalidText: {
+ control: {
+ type: 'text',
+ },
+ defaultValue: 'invalid selection',
+ },
+ disabled: {
+ control: {
+ type: 'boolean',
+ },
+ defaultValue: false,
+ },
+ hideLabel: {
+ control: {
+ type: 'boolean',
+ },
+ defaultValue: false,
+ },
+ helperText: {
+ control: {
+ type: 'text',
+ },
+ },
+ label: {
+ control: {
+ type: 'text',
+ },
+ defaultValue: 'this is an example label',
+ },
+ warn: {
+ control: {
+ type: 'boolean',
+ },
+ defaultValue: false,
+ },
+ warnText: {
+ control: {
+ type: 'text',
+ },
+ defaultValue: 'please notice the warning',
+ },
+ titleText: {
+ control: {
+ type: 'text',
+ },
+ defaultValue: 'this is an example title',
+ },
+ size: {
+ options: ['sm', 'md', 'lg'],
+ control: { type: 'select' },
+ },
+ type: {
+ control: { type: 'select' },
+ options: ['default', 'inline'],
+ defaultValue: 'default',
+ },
+};
+
+export const Default = () => (
+
+ (item ? item.text : '')}
+ />
+
+);
+
+export const Inline = () => (
(
type="inline"
items={items}
itemToString={(item) => (item ? item.text : '')}
- {...args}
/>
);
-export const WithLayer = (args) => (
+export const WithLayer = () => (
(
label="Dropdown menu options"
items={items}
itemToString={(item) => (item ? item.text : '')}
- {...args}
/>
(
label="Dropdown menu options"
items={items}
itemToString={(item) => (item ? item.text : '')}
- {...args}
/>
(
label="Dropdown menu options"
items={items}
itemToString={(item) => (item ? item.text : '')}
- {...args}
/>
);
-export const InlineWithLayer = (args) => (
+export const InlineWithLayer = () => (
(
type="inline"
items={items}
itemToString={(item) => (item ? item.text : '')}
- {...args}
/>
(
type="inline"
items={items}
itemToString={(item) => (item ? item.text : '')}
- {...args}
/>
(
type="inline"
items={items}
itemToString={(item) => (item ? item.text : '')}
- {...args}
/>
);
-export const Skeleton = (args) => (
+export const Skeleton = () => (
-
+
);
diff --git a/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap b/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap
deleted file mode 100644
index 368e56917620..000000000000
--- a/packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap
+++ /dev/null
@@ -1,663 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Dropdown should render 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
{
);
};
-export const WithInitialSelectedItems = (args) => {
+Playground.argTypes = {
+ selectionFeedback: {
+ options: ['top', 'fixed', 'top-after-reopen'],
+ control: { type: 'select' },
+ },
+ size: {
+ options: ['sm', 'md', 'lg'],
+ control: { type: 'select' },
+ defaultValue: 'md',
+ },
+ direction: {
+ options: ['top', 'bottom'],
+ control: { type: 'radio' },
+ },
+ type: {
+ options: ['inline', 'default'],
+ control: { type: 'radio' },
+ defaultValue: 'default',
+ },
+ titleText: {
+ control: {
+ type: 'text',
+ },
+ defaultValue: 'This is a MultiSelect Title',
+ },
+ disabled: {
+ control: {
+ type: 'boolean',
+ },
+ defaultValue: false,
+ },
+ hideLabel: {
+ control: {
+ type: 'boolean',
+ },
+ defaultValue: false,
+ },
+ invalid: {
+ control: {
+ type: 'boolean',
+ },
+ defaultValue: false,
+ },
+ light: {
+ control: {
+ type: 'boolean',
+ },
+ defaultValue: false,
+ },
+ warn: {
+ control: {
+ type: 'boolean',
+ },
+ defaultValue: false,
+ },
+ warnText: {
+ control: {
+ type: 'text',
+ },
+ defaultValue: 'whoopsie!',
+ },
+ invalidText: {
+ control: {
+ type: 'text',
+ },
+ defaultValue: 'whoopsie!',
+ },
+ label: {
+ control: {
+ type: 'text',
+ },
+ defaultValue: 'This is a label',
+ },
+ clearSelectionDescription: {
+ control: {
+ type: 'text',
+ },
+ defaultValue: 'Total items selected: ',
+ },
+ useTitleInItem: {
+ control: {
+ type: 'text',
+ },
+ defaultValue: 'this is the item title',
+ },
+ clearSelectionText: {
+ control: {
+ type: 'text',
+ },
+ defaultValue: 'To clear selection, press Delete or Backspace,',
+ },
+};
+
+export const Default = () => {
+ return (
+
+ (item ? item.text : '')}
+ selectionFeedback="top-after-reopen"
+ />
+
+ );
+};
+
+export const WithInitialSelectedItems = () => {
return (
{
itemToString={(item) => (item ? item.text : '')}
initialSelectedItems={[items[0], items[1]]}
selectionFeedback="top-after-reopen"
- {...args}
/>
);
};
-export const _Filterable = (args) => {
+export const _Filterable = () => {
return (
{
items={items}
itemToString={(item) => (item ? item.text : '')}
selectionFeedback="top-after-reopen"
- {...args}
/>
);
};
-export const WithLayer = (args) => {
+export const WithLayer = () => {
return (
{
items={items}
itemToString={(item) => (item ? item.text : '')}
selectionFeedback="top-after-reopen"
- {...args}
/>
{
items={items}
itemToString={(item) => (item ? item.text : '')}
selectionFeedback="top-after-reopen"
- {...args}
/>
{
items={items}
itemToString={(item) => (item ? item.text : '')}
selectionFeedback="top-after-reopen"
- {...args}
/>
@@ -143,7 +292,7 @@ export const WithLayer = (args) => {
);
};
-export const _FilterableWithLayer = (args) => {
+export const _FilterableWithLayer = () => {
return (
{
items={items}
itemToString={(item) => (item ? item.text : '')}
selectionFeedback="top-after-reopen"
- {...args}
/>
{
items={items}
itemToString={(item) => (item ? item.text : '')}
selectionFeedback="top-after-reopen"
- {...args}
/>
{
items={items}
itemToString={(item) => (item ? item.text : '')}
selectionFeedback="top-after-reopen"
- {...args}
/>
diff --git a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
index 633ffa3f5e76..ce474b6214f6 100644
--- a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
+++ b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js
@@ -6,7 +6,8 @@
*/
import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
import FilterableMultiSelect from '../FilterableMultiSelect';
import {
assertMenuOpen,
@@ -16,9 +17,8 @@ import {
generateGenericItem,
} from '../../ListBox/test-helpers';
-const listItemName = 'ListBoxMenuItem';
-const openMenu = (wrapper) => {
- wrapper.find(`[role="combobox"]`).simulate('click');
+const openMenu = () => {
+ userEvent.click(screen.getByRole('combobox'));
};
describe('FilterableMultiSelect', () => {
@@ -36,76 +36,67 @@ describe('FilterableMultiSelect', () => {
};
});
- it('should render', () => {
- const wrapper = mount();
- expect(wrapper).toMatchSnapshot();
- });
-
- it('should display all items when the menu is open initially', () => {
- const wrapper = mount();
- openMenu(wrapper);
- expect(wrapper.find(listItemName).length).toBe(mockProps.items.length);
+ it('should display all items when the menu is open', () => {
+ render();
+ openMenu();
+ expect(screen.getAllByRole('option').length).toBe(mockProps.items.length);
});
it('should initially have the menu open when open prop is provided', () => {
- const wrapper = mount();
- assertMenuOpen(wrapper, mockProps);
+ render();
+ assertMenuOpen(mockProps);
});
it('should open the menu with a down arrow', () => {
- const wrapper = mount();
- const menuIconNode = findMenuIconNode(wrapper);
+ render();
+ const menuIconNode = findMenuIconNode();
- menuIconNode.simulate('keyDown', { key: 'ArrowDown' });
- assertMenuOpen(wrapper, mockProps);
+ userEvent.type(menuIconNode, '{arrowdown}');
+ expect(screen.getAllByRole('option').length).toBe(mockProps.items.length);
});
it('should let the user toggle the menu by the menu icon', () => {
- const wrapper = mount();
- findMenuIconNode(wrapper).simulate('click');
- assertMenuOpen(wrapper, mockProps);
- findMenuIconNode(wrapper).simulate('click');
- assertMenuClosed(wrapper);
+ render();
+ userEvent.click(findMenuIconNode());
+
+ assertMenuOpen(mockProps);
+ userEvent.click(findMenuIconNode());
+
+ assertMenuClosed();
});
it('should not close the menu after a user makes a selection', () => {
- const wrapper = mount();
- openMenu(wrapper);
+ render();
+ openMenu();
- const firstListItem = wrapper.find(listItemName).at(0);
+ userEvent.click(screen.getAllByRole('option')[0]);
- firstListItem.simulate('click');
- assertMenuOpen(wrapper, mockProps);
+ assertMenuOpen(mockProps);
});
it('should filter a list of items by the input value', () => {
- const wrapper = mount();
- openMenu(wrapper);
- expect(wrapper.find(listItemName).length).toBe(mockProps.items.length);
+ render();
+ openMenu();
+ expect(screen.getAllByRole('option').length).toBe(mockProps.items.length);
- wrapper
- .find('[placeholder="Placeholder..."]')
- .at(1)
- .simulate('change', { target: { value: '3' } });
+ userEvent.type(screen.getByPlaceholderText('test'), '3');
- expect(wrapper.find(listItemName).length).toBe(1);
+ expect(screen.getAllByRole('option').length).toBe(1);
});
it('should call `onChange` with each update to selected items', () => {
- const wrapper = mount(
-
- );
- openMenu(wrapper);
+ render();
+ openMenu();
// Select the first two items
- wrapper.find(listItemName).at(0).simulate('click');
+ userEvent.click(screen.getAllByRole('option')[0]);
expect(mockProps.onChange).toHaveBeenCalledTimes(1);
expect(mockProps.onChange).toHaveBeenCalledWith({
selectedItems: [mockProps.items[0]],
});
- wrapper.find(listItemName).at(1).simulate('click');
+ userEvent.click(screen.getAllByRole('option')[1]);
expect(mockProps.onChange).toHaveBeenCalledTimes(2);
expect(mockProps.onChange).toHaveBeenCalledWith({
@@ -113,13 +104,13 @@ describe('FilterableMultiSelect', () => {
});
// Un-select the next two items
- wrapper.find(listItemName).at(0).simulate('click');
+ userEvent.click(screen.getAllByRole('option')[0]);
expect(mockProps.onChange).toHaveBeenCalledTimes(3);
expect(mockProps.onChange).toHaveBeenCalledWith({
selectedItems: [mockProps.items[0]],
});
- wrapper.find(listItemName).at(0).simulate('click');
+ userEvent.click(screen.getAllByRole('option')[0]);
expect(mockProps.onChange).toHaveBeenCalledTimes(4);
expect(mockProps.onChange).toHaveBeenCalledWith({
selectedItems: [],
@@ -127,20 +118,18 @@ describe('FilterableMultiSelect', () => {
});
it('should let items stay at their position after selecting', () => {
- const wrapper = mount(
-
- );
- openMenu(wrapper);
+ render();
+ openMenu();
// Select the first two items
- wrapper.find(listItemName).at(1).simulate('click');
+ userEvent.click(screen.getAllByRole('option')[1]);
expect(mockProps.onChange).toHaveBeenCalledTimes(1);
expect(mockProps.onChange).toHaveBeenCalledWith({
selectedItems: [mockProps.items[1]],
});
- wrapper.find(listItemName).at(1).simulate('click');
+ userEvent.click(screen.getAllByRole('option')[1]);
expect(mockProps.onChange).toHaveBeenCalledTimes(2);
expect(mockProps.onChange).toHaveBeenCalledWith({
@@ -149,18 +138,13 @@ describe('FilterableMultiSelect', () => {
});
it('should not clear input value after a user makes a selection', () => {
- const wrapper = mount();
- openMenu(wrapper);
+ render();
+ openMenu();
- wrapper
- .find('[placeholder="Placeholder..."]')
- .at(1)
- .simulate('change', { target: { value: '3' } });
+ userEvent.type(screen.getByPlaceholderText('test'), '3');
- wrapper.find(listItemName).at(0).simulate('click');
+ userEvent.click(screen.getAllByRole('option')[0]);
- expect(
- wrapper.find('[placeholder="Placeholder..."]').at(1).props().value
- ).toEqual('3');
+ expect(screen.getByPlaceholderText('test')).toHaveDisplayValue(3);
});
});
diff --git a/packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap b/packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap
deleted file mode 100644
index 166398a5594e..000000000000
--- a/packages/react/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap
+++ /dev/null
@@ -1,187 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FilterableMultiSelect should render 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-