issue #627: fortifying dense and added test cases for pill + dense

Vonage · Feb 2, 2021 · 19ec385 · 19ec385
1 parent e13a8e2
commit 19ec385
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 16 deletions.
diff --git a/components/button/test/button.test.js b/components/button/test/button.test.js
@@ -372,7 +372,7 @@ describe('button', () => {
 
 	describe('shape', () => {
 		shapeRoundedTestCases(COMPONENT_NAME);
-		shapePillTestCases(COMPONENT_NAME);
+		shapePillTestCases(COMPONENT_NAME, false);
 	});
 
 	describe('button connotation', () => {

diff --git a/components/select/test/select.test.js b/components/select/test/select.test.js
@@ -53,6 +53,14 @@ describe('select', () => {
 			await waitNextTask();
 			expect(addedElements).dom.to.equalSnapshot();
 		});
+
+		it('should be outlined by default', async () => {
+			const [addedElements] = addElement(
+				textToDomToParent(`<${COMPONENT_NAME}></${COMPONENT_NAME}>`)
+			);
+			await waitNextTask();
+			expect(addedElements.outlined).true;
+		});
 	});
 
 	describe(`form association`, function () {
@@ -262,7 +270,7 @@ describe('select', () => {
 		beforeEach(async () => {
 			addedElements = addElement(
 				textToDomToParent(`
-				<${COMPONENT_NAME} outlined label="VWC Select">
+				<${COMPONENT_NAME} label="VWC Select">
 					<vwc-list-item value="0">Item 1</vwc-list-item>
 					<vwc-list-item value="1">Item 2</vwc-list-item>
 				</${COMPONENT_NAME}>
@@ -312,7 +320,7 @@ describe('select', () => {
 		it('should have normal size by default', async () => {
 			const addedElements = addElement(
 				textToDomToParent(`
-				<${COMPONENT_NAME} outlined>
+				<${COMPONENT_NAME}>
 					<vwc-list-item>Item 1</vwc-list-item>
 					<vwc-list-item>Item 2</vwc-list-item>
 				</${COMPONENT_NAME}>
@@ -327,20 +335,18 @@ describe('select', () => {
 			assertDenseStyles(COMPONENT_NAME);
 		});
 
-		it('should have 16px space between edge and the selection (outlined)', async () => {
+		it('should have 16px space between edge and the selection', async () => {
 			const [e] = addElement(
-				textToDomToParent(`<${COMPONENT_NAME} outlined></${COMPONENT_NAME}>`)
+				textToDomToParent(`<${COMPONENT_NAME}></${COMPONENT_NAME}>`)
 			);
 			await waitNextTask();
 			const i = e.shadowRoot.querySelector('.mdc-select__selected-text');
 			assertDistancePixels(e, i, 'left', 16);
 		});
 
-		it('should have 16px space between edge and the label (outlined)', async () => {
+		it('should have 16px space between edge and the label', async () => {
 			const [e] = addElement(
-				textToDomToParent(
-					`<${COMPONENT_NAME} outlined label="Label"></${COMPONENT_NAME}>`
-				)
+				textToDomToParent(`<${COMPONENT_NAME} label="Label"></${COMPONENT_NAME}>`)
 			);
 			await waitNextTask();
 			const l = e.shadowRoot.querySelector('.mdc-floating-label');

diff --git a/test/shared/shape.test.js b/test/shared/shape.test.js
@@ -6,7 +6,7 @@ import {
 } from '../test-helpers.js';
 import {
 	shapeStyles,
-  topLevelSelectors,
+	topLevelSelectors,
 } from '../style-utils.js';
 
 export async function shapeRoundedTestCases(COMPONENT_NAME) {
@@ -30,24 +30,29 @@ export async function shapeRoundedTestCases(COMPONENT_NAME) {
 	});
 }
 
-export async function shapePillTestCases(COMPONENT_NAME) {
+export async function shapePillTestCases(COMPONENT_NAME, assertDense = true) {
 	const addElement = isolatedElementsCreation();
 
-	const addedElements = addElement(
+	const [e] = addElement(
 		textToDomToParent(`<${COMPONENT_NAME} shape="pill"></${COMPONENT_NAME}>`)
 	);
 	await waitNextTask();
-	const formElement = addedElements[0];
-	const actualElement = formElement.shadowRoot.querySelector(topLevelSelectors[COMPONENT_NAME]);
+	const actualElement = e.shadowRoot.querySelector(topLevelSelectors[COMPONENT_NAME]);
 
-	it('should have pill shape when shape set to pill', async () => {
+	it(`${COMPONENT_NAME} should have pill shape when shape set to pill`, async () => {
 		assertComputedStyle(actualElement, shapeStyles('pill'));
 	});
+
+	if (assertDense) {
+		it(`${COMPONENT_NAME} should be dense when have pill shape`, async () => {
+			expect(e.dense).true;
+		});
+	}
 }
 
 export async function shapeCircledTestCases(COMPONENT_NAME) {
 	const addElement = isolatedElementsCreation();
-	
+
 	const addedElements = addElement(
 		textToDomToParent(`<${COMPONENT_NAME} shape="circled"></${COMPONENT_NAME}>`)
 	);