2.0.3 release

.travis.yml

@@ -22,8 +22,13 @@ install:
     - npm install
     - enact link
 script:
+    - echo -e "\x1b\x5b35;1m*** Starting tests...\x1b\x5b0m"
+    - npm test -- --runInBand --coverage
+    - codecov
+    - echo -e "\x1b\x5b35;1m*** Tests complete\x1b\x5b0m"
+    - echo -e "\x1b\x5b35;1m*** Starting eslint...\x1b\x5b0m"
     - npm run lint -- -- --report-unused-disable-directives --max-warnings 0 .
-    - npm run test
+    - echo -e "\x1b\x5b35;1m*** eslint complete\x1b\x5b0m"
     - echo -e "\x1b\x5b35;1m*** Starting docs validation...\x1b\x5b0m"
     - npm run validate-docs
     - echo -e "\x1b\x5b35;1m*** Docs validation complete\x1b\x5b0m"

Button/tests/Button-specs.js

@@ -5,7 +5,7 @@ import userEvent from '@testing-library/user-event';
 import Button, {ButtonBase} from '../Button';
 
 describe('Button Specs', () => {
-	test('should have \'disabled\' HTML attribute when \'disabled\' prop is provided', () => {
+	test('should have `disabled` HTML attribute when `disabled` prop is provided', () => {
 		render(<Button disabled>I am a disabled Button</Button>);
 		const button = screen.getByRole('button');
 
@@ -21,7 +21,7 @@ describe('Button Specs', () => {
 		expect(button).toHaveClass(expected);
 	});
 
-	test('should have default `size` \'large\'', () => {
+	test('should have default `size` `large`', () => {
 		render(<ButtonBase />);
 		const button = screen.getByRole('button');
 
@@ -30,8 +30,26 @@ describe('Button Specs', () => {
 		expect(button).toHaveClass(expected);
 	});
 
+	test('should have `joinedCenter` class', () => {
+		render(<ButtonBase joinedPosition="center" />);
+		const button = screen.getByRole('button');
+
+		const expected = 'joinedCenter';
+
+		expect(button).toHaveClass(expected);
+	});
+
+	test('should have `grid` class', () => {
+		render(<ButtonBase type="grid" />);
+		const button = screen.getByRole('button');
+
+		const expected = 'grid';
+
+		expect(button).toHaveClass(expected);
+	});
+
 	describe('with no `minWidth`', () => {
-		test('should not have \'minWidth\' class', () => {
+		test('should not have `minWidth` class', () => {
 			render(<ButtonBase minWidth={false} />);
 			const button = screen.getByRole('button');
 
@@ -41,8 +59,8 @@ describe('Button Specs', () => {
 		});
 	});
 
-	describe('with \'transparent\' `backgroundOpacity`', () => {
-		test('should have \'transparent\' class', () => {
+	describe('with `transparent` `backgroundOpacity`', () => {
+		test('should have `transparent` class', () => {
 			render(<ButtonBase backgroundOpacity="transparent" />);
 			const button = screen.getByRole('button');
 
@@ -53,15 +71,22 @@ describe('Button Specs', () => {
 	});
 
 	describe('with icon', () => {
-		test('should have \'check\' icon when specified', () => {
+		test('should have `check` icon when specified', () => {
 			render(<Button icon="check">abc</Button>);
 			const icon = screen.getByText('✓');
 
 			expect(icon).toBeInTheDocument();
 			expect(icon).toHaveClass('icon');
 		});
 
-		test('should have \'iconAfter\' class with text and icon', () => {
+		test('should have `iconOnly` class', () => {
+			render(<Button icon="check" />);
+			const button = screen.getByRole('button');
+
+			expect(button).toHaveClass('iconOnly');
+		});
+
+		test('should have `iconAfter` class with text and icon', () => {
 			render(<Button icon="check" iconPosition="after">text</Button>);
 			const button = screen.getByRole('button');
 
@@ -70,7 +95,7 @@ describe('Button Specs', () => {
 			expect(button).toHaveClass(expected);
 		});
 
-		test('should have \'iconBefore\' class with text and icon', () => {
+		test('should have `iconBefore` class with text and icon', () => {
 			render(<Button icon="check" iconPosition="before">text</Button>);
 			const button = screen.getByRole('button');
 
@@ -80,6 +105,19 @@ describe('Button Specs', () => {
 		});
 	});
 
+	describe('with badge', () => {
+		test('should have `badge` with text="1"', () => {
+			render(<Button badge="1" badgeColor="#986AAD">text</Button>);
+			const badge = screen.getByRole('button').children[0].children[0];
+			const badgeText = screen.getByText('1');
+
+			const expected = 'badge';
+
+			expect(badge).toHaveClass(expected);
+			expect(badgeText).toBeInTheDocument();
+		});
+	});
+
 	describe('events', () => {
 		test('should call onClick when not disabled', () => {
 			const handleClick = jest.fn();

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 The following is a curated list of changes in the Enact agate module, newest changes on the top.
 
+## [2.0.3] - 2022-12-14
+
+### Added
+
+- `agate/IncrementSlider` `sliderRef` prop to pass reference to the slider node
+- `agate/Slider` `sliderRef` prop to pass reference to the slider node
+
 ## [2.0.2] - 2022-10-28
 
 ### Fixed

ColorPicker/tests/ColorPicker-specs.js

@@ -11,6 +11,45 @@ const leftKeyDown = keyDown(37);
 const rightKeyDown = keyDown(39);
 
 describe('ColorPicker', () => {
+	test('should have transitionContainer with `right` class when `direction` is set to  `left`', () => {
+		render(
+			<ColorPicker direction="left" open>
+				{[]}
+			</ColorPicker>
+		);
+
+		const actual = screen.getAllByRole('button')[0].nextElementSibling;
+		const expected = 'right';
+
+		expect(actual).toHaveClass(expected);
+	});
+
+	test('should have transitionContainer with `down` class when `direction` is set to  `up`', () => {
+		render(
+			<ColorPicker direction="up" open>
+				{[]}
+			</ColorPicker>
+		);
+
+		const actual = screen.getAllByRole('button')[0].nextElementSibling;
+		const expected = 'down';
+
+		expect(actual).toHaveClass(expected);
+	});
+
+	test('should have transitionContainer with `up` class when `direction` is set to  `down`', () => {
+		render(
+			<ColorPicker direction="down" open>
+				{[]}
+			</ColorPicker>
+		);
+
+		const actual = screen.getAllByRole('button')[0].nextElementSibling;
+		const expected = 'up';
+
+		expect(actual).toHaveClass(expected);
+	});
+
 	test('should change value when selecting a different color', () => {
 		const handleChange = jest.fn();
 		render(
@@ -30,6 +69,25 @@ describe('ColorPicker', () => {
 		expect(actual).toBe(expected);
 	});
 
+	test('should change backgroundColor of swatchButton when selecting a different color', () => {
+		render(
+			<ColorPicker>
+				{['red', 'blue', 'yellow', 'pink']}
+			</ColorPicker>
+		);
+
+		// First extend color picker
+		userEvent.click(screen.getAllByRole('button')[0]);
+		// Now click on blue color
+		userEvent.click(screen.getByLabelText('blue'));
+
+		const expected = 'blue';
+		const actual = screen.getAllByRole('button')[0].children[1].children[0];
+
+		expect(actual).toHaveClass('colorSwatch');
+		expect(actual).toHaveStyle({'background-color': expected});
+	});
+
 	test('should emit an onChange event when changing hue', () => {
 		const handleChange = jest.fn();
 		render(
@@ -93,6 +151,28 @@ describe('ColorPicker', () => {
 		expect(handleChange).toHaveBeenCalledTimes(expected);
 	});
 
+	test('should close palette on second click on primary swatchButton', () => {
+		const handleChange = jest.fn();
+		render(
+			<ColorPicker onChange={handleChange} value="pink">
+				{['red', 'blue', 'yellow', 'pink']}
+			</ColorPicker>
+		);
+
+		// Extend color picker
+		userEvent.click(screen.getAllByRole('button')[0]);
+
+		const actual = screen.getAllByRole('button')[0].nextElementSibling;
+		const expected = 'shown';
+
+		expect(actual).toHaveClass(expected);
+
+		// Hide color picker
+		userEvent.click(screen.getAllByRole('button')[0]);
+
+		expect(actual).not.toHaveClass(expected);
+	});
+
 	test('should not extend palette when disabled', () => {
 		const handleChange = jest.fn();
 		render(