fix: Correct play rigth imports

n

src/components/CharacterLimitMainText/components/CharacterLimit.module.scss

@@ -1,4 +1,4 @@
-@use '~styles/global.scss';
+@use '../../../styles/global.scss';
 
 .specificFill {
   fill: global.$primaryWhite !important;

src/components/ComposerEditor/ComposerEditor.module.scss

@@ -1,4 +1,4 @@
-@use '~styles/global';
+@use '../../styles/global.scss';
 
 .inputContainer {
   width: 100%;

src/components/ComposerEditor/ComposerEditor.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 
-import CharacterLimitMainText from '~components/CharacterLimitMainText/CharacterLimitMainText'; // Importe o componente CharacterLimitMainText aqui
-import CustomTextArea from '~components/TextArea/TextArea'; // Importe o componente CustomTextArea aqui
+import CharacterLimitMainText from '../CharacterLimitMainText/CharacterLimitMainText'; // Importe o componente CharacterLimitMainText aqui
+import CustomTextArea from '../TextArea/TextArea'; // Importe o componente CustomTextArea aqui
 
 import scss from './ComposerEditor.module.scss';
 

src/components/MainComposer/MainComposer.module.scss

@@ -1,4 +1,4 @@
-@use '~styles/global.scss';
+@use '../../styles/global.scss';
 
 .wrapper {
   width: 100%;

src/components/MainComposer/MainComposer.spec.ct.tsx

@@ -0,0 +1,68 @@
+import { test, expect } from '@playwright/experimental-ct-react';
+
+import MainComposer from './MainComposer';
+
+test.describe('MainComposer', () => {
+  test.describe('MediaInputs', () => {
+    test('upload the image', async ({ mount }) => {
+      const component = await mount(<MainComposer />);
+
+      await component
+        .getByTestId('imageInput')
+        .setInputFiles('src/assets/logo.png');
+
+      await expect(
+        component.getByAltText('uploaded image logo.png')
+      ).toBeVisible();
+    });
+
+    test('upload two images', async ({ mount }) => {
+      const component = await mount(<MainComposer />);
+
+      await component
+        .getByTestId('imageInput')
+        .setInputFiles(['src/assets/logo.png', 'src/assets/imagetest.jpg']);
+
+      await expect(
+        component.getByAltText('uploaded image logo.png')
+      ).toBeVisible();
+      await expect(
+        component.getByAltText('uploaded image imagetest.jpg')
+      ).toBeVisible();
+    });
+
+    test.describe('when the file is diferent from image or video', () => {
+      test('doesnt select the file', async ({ mount }) => {
+        const mediaSelected: string | null = null;
+
+        const component = await mount(<MainComposer />);
+
+        await component
+          .getByTestId('imageInput')
+          .setInputFiles('public/robots.txt');
+
+        await expect(mediaSelected).toBeNull();
+      });
+    });
+
+    test.describe('when add img and click on remove button', () => {
+      test('remove image', async ({ mount }) => {
+        const component = await mount(<MainComposer />);
+
+        await component
+          .getByTestId('imageInput')
+          .setInputFiles('src/assets/logo.png');
+
+        await expect(
+          component.getByAltText('uploaded image logo.png')
+        ).toBeVisible();
+
+        await component.getByRole('button', { name: 'X' }).click();
+
+        await expect(
+          component.getByAltText('uploaded image logo.png')
+        ).not.toBeVisible();
+      });
+    });
+  });
+});

src/components/MainComposer/MainComposer.tsx

@@ -1,8 +1,8 @@
 import { useTranslation } from 'react-i18next';
 
-import ComposerEditor from '~components/ComposerEditor/ComposerEditor';
-import '../../i18n';
-import MediaInputs from '~components/MediaInputs/MediaInput';
+import ComposerEditor from '../ComposerEditor/ComposerEditor';
+import '../i18n/index';
+import MediaInputs from '../MediaInputs/MediaInput';
 
 import scss from './MainComposer.module.scss';
 

src/components/MediaInputs/MediaInput.spec.tsx

@@ -1,18 +1,69 @@
-import { render, screen } from '@testing-library/react';
+import { test, expect } from '@playwright/experimental-ct-react';
 
-import MediaInputs from './MediaInput';
+import MainComposer from './MainComposer';
+i;
 
-jest.mock('nanoid', () => {
-  return {
-    nanoid: jest.fn(() => 'sua-string-especifica-aqui'),
-  };
-});
+test.describe('MainComposer', () => {
+  test.describe('MediaInputs', () => {
+    test('upload the image', async ({ mount }) => {
+      const component = await mount(<MainComposer />);
+
+      await component
+        .getByTestId('imageInput')
+        .setInputFiles('src/assets/logo.png');
+
+      await expect(
+        component.getByAltText('uploaded image logo.png')
+      ).toBeVisible();
+    });
+
+    test('upload two images', async ({ mount }) => {
+      const component = await mount(<MainComposer />);
+
+      await component
+        .getByTestId('imageInput')
+        .setInputFiles(['src/assets/logo.png', 'src/assets/imagetest.jpg']);
+
+      await expect(
+        component.getByAltText('uploaded image logo.png')
+      ).toBeVisible();
+      await expect(
+        component.getByAltText('uploaded image imagetest.jpg')
+      ).toBeVisible();
+    });
+
+    test.describe('when the file is diferent from image or video', () => {
+      test('doesnt select the file', async ({ mount }) => {
+        const mediaSelected: string | null = null;
+
+        const component = await mount(<MainComposer />);
+
+        await component
+          .getByTestId('imageInput')
+          .setInputFiles('public/robots.txt');
+
+        await expect(mediaSelected).toBeNull();
+      });
+    });
+
+    test.describe('when add img and click on remove button', () => {
+      test('remove image', async ({ mount }) => {
+        const component = await mount(<MainComposer />);
+
+        await component
+          .getByTestId('imageInput')
+          .setInputFiles('src/assets/logo.png');
+
+        await expect(
+          component.getByAltText('uploaded image logo.png')
+        ).toBeVisible();
 
-describe('MediaInputs', () => {
-  it('renders the  media inputs', () => {
-    render(<MediaInputs />);
+        await component.getByRole('button', { name: 'X' }).click();
 
-    const manyMediaComponent = screen.getAllByTestId('manyMediaInputs');
-    expect(manyMediaComponent.length).toBeGreaterThan(0);
+        await expect(
+          component.getByAltText('uploaded image logo.png')
+        ).not.toBeVisible();
+      });
+    });
   });
 });