feat: Add Modals and Text Inputs (#7023)

Co-authored-by: Vlad Frangu <kingdgrizzle@gmail.com>
Co-authored-by: Jiralite <33201955+Jiralite@users.noreply.github.com>
Co-authored-by: Ryan Munro <monbrey@gmail.com>
Co-authored-by: Vitor <milagre.vitor@gmail.com>

packages/builders/__tests__/components/actionRow.test.ts

@@ -1,4 +1,10 @@
-import { APIActionRowComponent, APIMessageComponent, ButtonStyle, ComponentType } from 'discord-api-types/v9';
+import {
+	APIActionRowComponent,
+	APIActionRowComponentTypes,
+	APIMessageActionRowComponent,
+	ButtonStyle,
+	ComponentType,
+} from 'discord-api-types/v9';
 import { ActionRow, ButtonComponent, createComponent, SelectMenuComponent, SelectMenuOption } from '../../src';
 
 const rowWithButtonData: APIActionRowComponent<APIMessageComponent> = {
@@ -43,7 +49,7 @@ describe('Action Row Components', () => {
 		});
 
 		test('GIVEN valid JSON input THEN valid JSON output is given', () => {
-			const actionRowData: APIActionRowComponent<APIMessageComponent> = {
+			const actionRowData: APIActionRowComponent<APIMessageActionRowComponent> = {
 				type: ComponentType.ActionRow,
 				components: [
 					{
@@ -75,10 +81,43 @@ describe('Action Row Components', () => {
 			expect(new ActionRow(actionRowData).toJSON()).toEqual(actionRowData);
 			expect(new ActionRow().toJSON()).toEqual({ type: ComponentType.ActionRow, components: [] });
 			expect(() => createComponent({ type: ComponentType.ActionRow, components: [] })).not.toThrowError();
-			// @ts-expect-error
 			expect(() => createComponent({ type: 42, components: [] })).toThrowError();
 		});
 		test('GIVEN valid builder options THEN valid JSON output is given', () => {
+			const rowWithButtonData: APIActionRowComponent<APIActionRowComponentTypes> = {
+				type: ComponentType.ActionRow,
+				components: [
+					{
+						type: ComponentType.Button,
+						label: 'test',
+						custom_id: '123',
+						style: ButtonStyle.Primary,
+					},
+				],
+			};
+
+			const rowWithSelectMenuData: APIActionRowComponent<APIActionRowComponentTypes> = {
+				type: ComponentType.ActionRow,
+				components: [
+					{
+						type: ComponentType.SelectMenu,
+						custom_id: '1234',
+						options: [
+							{
+								label: 'one',
+								value: 'one',
+							},
+							{
+								label: 'two',
+								value: 'two',
+							},
+						],
+						max_values: 10,
+						min_values: 12,
+					},
+				],
+			};
+
 			const button = new ButtonComponent().setLabel('test').setStyle(ButtonStyle.Primary).setCustomId('123');
 			const selectMenu = new SelectMenuComponent()
 				.setCustomId('1234')

packages/builders/__tests__/components/textInput.test.ts

@@ -0,0 +1,126 @@
+import { APITextInputComponent, ComponentType, TextInputStyle } from 'discord-api-types/v9';
+import {
+	labelValidator,
+	maxLengthValidator,
+	minLengthValidator,
+	placeholderValidator,
+	valueValidator,
+	textInputStyleValidator,
+} from '../../src/components/textInput/Assertions';
+import { TextInputComponent } from '../../src/components/textInput/TextInput';
+
+const superLongStr = 'a'.repeat(5000);
+
+const textInputComponent = () => new TextInputComponent();
+
+describe('Text Input Components', () => {
+	describe('Assertion Tests', () => {
+		test('GIVEN valid label THEN validator does not throw', () => {
+			expect(() => labelValidator.parse('foobar')).not.toThrowError();
+		});
+
+		test('GIVEN invalid label THEN validator does throw', () => {
+			expect(() => labelValidator.parse(24)).toThrowError();
+			expect(() => labelValidator.parse(undefined)).toThrowError();
+		});
+
+		test('GIVEN valid style THEN validator does not throw', () => {
+			expect(() => textInputStyleValidator.parse(TextInputStyle.Paragraph)).not.toThrowError();
+			expect(() => textInputStyleValidator.parse(TextInputStyle.Short)).not.toThrowError();
+		});
+
+		test('GIVEN invalid style THEN validator does throw', () => {
+			expect(() => textInputStyleValidator.parse(24)).toThrowError();
+		});
+
+		test('GIVEN valid min length THEN validator does not throw', () => {
+			expect(() => minLengthValidator.parse(10)).not.toThrowError();
+		});
+
+		test('GIVEN invalid min length THEN validator does throw', () => {
+			expect(() => minLengthValidator.parse(-1)).toThrowError();
+		});
+
+		test('GIVEN valid max length THEN validator does not throw', () => {
+			expect(() => maxLengthValidator.parse(10)).not.toThrowError();
+		});
+
+		test('GIVEN invalid min length THEN validator does throw', () => {
+			expect(() => maxLengthValidator.parse(4001)).toThrowError();
+		});
+
+		test('GIVEN valid value THEN validator does not throw', () => {
+			expect(() => valueValidator.parse('foobar')).not.toThrowError();
+		});
+
+		test('GIVEN invalid value THEN validator does throw', () => {
+			expect(() => valueValidator.parse(superLongStr)).toThrowError();
+		});
+
+		test('GIVEN valid placeholder THEN validator does not throw', () => {
+			expect(() => placeholderValidator.parse('foobar')).not.toThrowError();
+		});
+
+		test('GIVEN invalid value THEN validator does throw', () => {
+			expect(() => placeholderValidator.parse(superLongStr)).toThrowError();
+		});
+
+		test('GIVEN valid fields THEN builder does not throw', () => {
+			expect(() => {
+				textInputComponent().setCustomId('foobar').setLabel('test').setStyle(TextInputStyle.Paragraph).toJSON();
+			}).not.toThrowError();
+
+			expect(() => {
+				textInputComponent()
+					.setCustomId('foobar')
+					.setLabel('test')
+					.setMaxLength(100)
+					.setMinLength(1)
+					.setPlaceholder('bar')
+					.setRequired(true)
+					.setStyle(TextInputStyle.Paragraph)
+					.toJSON();
+			}).not.toThrowError();
+		});
+	});
+
+	test('GIVEN invalid fields THEN builder throws', () => {
+		expect(() => textInputComponent().toJSON()).toThrowError();
+		expect(() => {
+			textInputComponent()
+				.setCustomId('test')
+				.setMaxLength(100)
+				.setPlaceholder('hello')
+				.setStyle(TextInputStyle.Paragraph)
+				.toJSON();
+		}).toThrowError();
+	});
+
+	test('GIVEN valid input THEN valid JSON outputs are given', () => {
+		const textInputData: APITextInputComponent = {
+			type: ComponentType.TextInput,
+			label: 'label',
+			custom_id: 'custom id',
+			placeholder: 'placeholder',
+			max_length: 100,
+			min_length: 10,
+			value: 'value',
+			required: false,
+			style: TextInputStyle.Paragraph,
+		};
+
+		expect(new TextInputComponent(textInputData).toJSON()).toEqual(textInputData);
+		expect(
+			textInputComponent()
+				.setCustomId(textInputData.custom_id)
+				.setLabel(textInputData.label)
+				.setPlaceholder(textInputData.placeholder)
+				.setMaxLength(textInputData.max_length)
+				.setMinLength(textInputData.min_length)
+				.setValue(textInputData.value)
+				.setRequired(textInputData.required)
+				.setStyle(textInputData.style)
+				.toJSON(),
+		).toEqual(textInputData);
+	});
+});