feat: testes de renderização (#300)

* feat: testes de renderização

* feat: testes de renderização

* feat: novos testes

* fix: erro nos testes e criado uploadimage stories

* refactor: ajustes nos parametros e testes removidos

* feat: testes de renderização

* feat: novos testes

* fix: erro nos testes e criado uploadimage stories

* refactor: ajustes nos parametros e testes removidos

---------

Co-authored-by: Matheus Domingos <134434652+DominMFD@users.noreply.github.com>

src/components/TextInput/index.spec.js

@@ -0,0 +1,81 @@
+import { describe, expect, it } from 'vitest';
+import { render, screen, userEvent } from '@testing-library/vanilla';
+import TextInput from '.';
+
+const propsMock = {
+  id: 'test',
+  placeholder: 'Write something',
+  assetUrl: '',
+  assetPosition: 'prefix',
+  variation: 'standard',
+  value: 'Something',
+  type: 'text',
+};
+
+const renderTextInput = (parameters) => render(new TextInput(parameters));
+
+describe('TextInput', () => {
+  it('renders with props', () => {
+    renderTextInput(propsMock);
+    const textInput = screen.getByPlaceholderText(propsMock.placeholder);
+
+    expect(textInput).toBeInTheDocument();
+  });
+
+  it('renders without props', () => {
+    renderTextInput();
+    const textInput = screen.getByRole('textbox');
+
+    expect(textInput).toBeInTheDocument();
+  });
+
+  it('sets placeholder correctly', () => {
+    renderTextInput({ placeholder: 'Write something' });
+    const textInput = screen.getByPlaceholderText('Write something');
+
+    expect(textInput.placeholder).toBe('Write something');
+  });
+
+  it('sets value correctly', () => {
+    renderTextInput({ value: 'Something' });
+    const textInput = screen.getByRole('textbox');
+
+    expect(textInput.value).toBe('Something');
+  });
+
+  it('changes input value', async () => {
+    renderTextInput();
+    const textInput = screen.getByRole('textbox');
+
+    await userEvent.type(textInput, 'New value');
+
+    expect(textInput.value).toBe('New value');
+  });
+
+  it('toggles password visibility', async () => {
+    renderTextInput({ type: 'password', placeholder: 'Write something' });
+    const textInput = screen.getByPlaceholderText('Write something');
+    const toggleButton = screen.getByRole('button');
+
+    expect(textInput.type).toBe('password');
+
+    await userEvent.click(toggleButton);
+    expect(textInput.type).toBe('text');
+
+    await userEvent.click(toggleButton);
+    expect(textInput.type).toBe('password');
+  });
+
+  it('disables and enables input correctly', () => {
+    const textInput = renderTextInput();
+    const element = screen.getByRole('textbox');
+
+    expect(element).toBeEnabled();
+
+    textInput.disable();
+    expect(element).toBeDisabled();
+
+    textInput.enable();
+    expect(element).toBeEnabled();
+  });
+});

src/components/UploadImage/index.js

@@ -18,17 +18,17 @@ const html = `
         <img class="container-upload-image__preview-image hidden" data-select="image-preview" alt="Imagem carregada">
       </div>
       <div class='container-upload-image__button'>
-        <img data-select="button-icon" src="${plusIcon}">
+        <img data-select="button-icon" src="${plusIcon}" alt="Botão com ícone">
       </div>
-      <input class="container-upload-image__input" id="input-file" name="input-file" type="file" accept="image/*" data-select="upload-input">
+      <input class="container-upload-image__input" id="input-file" name="input-file" type="file" accept="image/*" data-select="upload-input" aria-label="Carregar imagem">
     </label>
   </div>
 `;
 
 export default function UploadImage() {
   Component.call(this, { html, events });
 
-  const previewImage = this.selected.get('image-preview');
+  const imagePreview = this.selected.get('image-preview');
   const buttonIcon = this.selected.get('button-icon');
   const uploadInput = this.selected.get('upload-input');
 
@@ -37,8 +37,8 @@ export default function UploadImage() {
   const readAndDisplayImage = (file) => {
     this.reader.addEventListener('load', (e) => {
       const readerTarget = e.target;
-      previewImage.src = readerTarget.result;
-      previewImage.classList.remove('hidden');
+      imagePreview.src = readerTarget.result;
+      imagePreview.classList.remove('hidden');
       buttonIcon.src = photoIcon;
       this.emit('value:change', readerTarget.result);
     });

src/components/UploadImage/index.spec.js

@@ -0,0 +1,77 @@
+import { describe, expect, it } from 'vitest';
+import { render, screen, userEvent, waitFor } from '@testing-library/vanilla';
+import UploadImage from '.';
+import plusIcon from './img/plus-icon.svg';
+import photoIcon from './img/photo-icon.svg';
+
+const renderUploadImage = () => render(new UploadImage());
+
+describe('UploadImage', () => {
+  it('renders correctly', () => {
+    renderUploadImage();
+    const uploadInput = screen.getByLabelText('Carregar imagem');
+
+    expect(uploadInput).toBeInTheDocument();
+  });
+
+  describe('Upload input', () => {
+    it('file loaded', async () => {
+      renderUploadImage();
+      const user = userEvent.setup();
+
+      const file = new File(['hello'], 'hello.png', { type: 'image/png' });
+      const uploadInput = screen.getByLabelText('Carregar imagem');
+
+      await user.upload(uploadInput, file);
+
+      expect(uploadInput.files[0]).toBe(file);
+    });
+  });
+
+  describe('Button icon', () => {
+    it('renders with the correct initial icon', async () => {
+      renderUploadImage();
+      const buttonIcon = screen.getByAltText('Botão com ícone');
+
+      expect(buttonIcon).toHaveAttribute('src', plusIcon);
+    });
+
+    it('changes icon after file upload', async () => {
+      renderUploadImage();
+      const user = userEvent.setup();
+
+      const uploadInput = screen.getByLabelText('Carregar imagem');
+      const buttonIcon = screen.getByAltText('Botão com ícone');
+      const file = new File(['hello'], 'hello.png', { type: 'image/png' });
+
+      await user.upload(uploadInput, file);
+
+      await waitFor(() => {
+        expect(buttonIcon).toHaveAttribute('src', photoIcon);
+      });
+    });
+  });
+
+  describe('Image preview', () => {
+    it('does not display preview if no file is selected', () => {
+      renderUploadImage();
+      const imagePreview = screen.getByAltText('Imagem carregada');
+
+      expect(imagePreview).toHaveClass('hidden');
+    });
+
+    it('display preview if file is selected', async () => {
+      renderUploadImage();
+      const user = userEvent.setup();
+
+      const imagePreview = screen.getByAltText('Imagem carregada');
+      const uploadInput = screen.getByLabelText('Carregar imagem');
+      const file = new File(['hello'], 'hello.png', { type: 'image/png' });
+
+      await user.upload(uploadInput, file);
+      await waitFor(() => {
+        expect(imagePreview).toBeInTheDocument();
+      });
+    });
+  });
+});

src/stories/UploadImage.stories.js

@@ -0,0 +1,14 @@
+import UploadImage from '../components/UploadImage';
+
+export default {
+  title: 'Components/UploadImage',
+
+  render: () => {
+    const $container = document.createElement('div');
+    const uploadImage = new UploadImage();
+    uploadImage.mount($container);
+    return $container;
+  },
+};
+
+export const Default = {};