feat: playwright

src/components/ToolInfo.tsx

@@ -5,7 +5,7 @@ interface ExampleProps {
   description: string;
 }
 
-export default function Example({ title, description }: ExampleProps) {
+export default function ToolInfo({ title, description }: ExampleProps) {
   return (
     <Stack direction={'row'} alignItems={'center'} spacing={2} mt={4}>
       <Box>

src/components/input/ToolTextInput.tsx

@@ -54,6 +54,7 @@ export default function ToolTextInput({
         fullWidth
         multiline
         rows={10}
+        inputProps={{ 'data-testid': 'text-input' }}
       />
       <InputFooter handleCopy={handleCopy} handleImport={handleImportClick} />
       <input

src/components/result/ToolTextResult.tsx

@@ -40,7 +40,13 @@ export default function ToolTextResult({
   return (
     <Box>
       <InputHeader title={title} />
-      <TextField value={value} fullWidth multiline rows={10} />
+      <TextField
+        value={value}
+        fullWidth
+        multiline
+        rows={10}
+        inputProps={{ 'data-testid': 'text-result' }}
+      />
       <ResultFooter handleCopy={handleCopy} handleDownload={handleDownload} />
     </Box>
   );

src/pages/string/join/index.tsx

@@ -1,22 +1,17 @@
-import { Box, Grid, Stack, Typography } from '@mui/material';
-import React, { useContext, useEffect, useState } from 'react';
-import { Formik, useFormikContext } from 'formik';
+import { Box } from '@mui/material';
+import React, { useState } from 'react';
 import * as Yup from 'yup';
 import ToolTextInput from '../../../components/input/ToolTextInput';
 import ToolTextResult from '../../../components/result/ToolTextResult';
 import ToolOptions from '../../../components/options/ToolOptions';
 import { mergeText } from './service';
-import { CustomSnackBarContext } from '../../../contexts/CustomSnackBarContext';
 import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
 import CheckboxWithDesc from '../../../components/options/CheckboxWithDesc';
-import ToolOptionGroups from '../../../components/options/ToolOptionGroups';
 import ToolInputAndResult from '../../../components/ToolInputAndResult';
 
-import Info from './Info';
+import ToolInfo from '../../../components/ToolInfo';
 import Separator from '../../../tools/Separator';
-import AllTools from '../../../components/allTools/AllTools';
 import Examples from '../../../components/examples/Examples';
-import ColorSelector from '../../../components/options/ColorSelector';
 
 const initialValues = {
   joinCharacter: '',
@@ -178,7 +173,7 @@ export default function JoinText() {
         input={input}
         validationSchema={validationSchema}
       />
-      <Info
+      <ToolInfo
         title="What Is a Text Joiner?"
         description="With this tool you can join parts of the text together. It takes a list of text values, separated by newlines, and merges them together. You can set the character that will be placed between the parts of the combined text. Also, you can ignore all empty lines and remove spaces and tabs at the end of all lines. Textabulous!"
       />

src/pages/string/join/string-join.e2e.spec.ts

@@ -0,0 +1,18 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('JoinText Component', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/string/join');
+  });
+
+  test('should merge text pieces with specified join character', async ({
+    page
+  }) => {
+    // Input the text pieces
+    await page.getByTestId('text-input').fill('1\n2');
+
+    const result = await page.getByTestId('text-result').inputValue();
+
+    expect(result).toBe('12');
+  });
+});