refactor: refactor sliding tests

src/components/Sliding/index.js

@@ -12,7 +12,7 @@ const events = [
 
 const html = `
 <div class="sliding" data-select="sliding">
-  <div class="sliding__content" data-select="sliding-content">
+  <div class="sliding__content" data-select="sliding-content" data-testid="sliding-content">
   </div>
 </div>`;
 
@@ -38,22 +38,21 @@ export default function Sliding({ slides = [] }) {
 
   slides.forEach((item) => this.add(item));
 
-  makeSwipable(this.selected.get('sliding-content'));
+  const $sliding = this.selected.get('sliding-content');
+
+  makeSwipable($sliding);
   initializeSwiper();
 
-  this.selected
-    .get('sliding-content')
-    .addEventListener('swipe-left', () => this.next());
-  this.selected
-    .get('sliding-content')
-    .addEventListener('swipe-right', () => this.prev());
-
-  this.listen('mount', () =>
-    document.addEventListener('click', this.setSlide(this.slides[0])),
-  );
-  this.listen('unmount', () =>
-    document.addEventListener('click', this.clearItems()),
-  );
+  this.listen('mount', () => {
+    $sliding.addEventListener('swipe-left', () => this.next());
+    $sliding.addEventListener('swipe-right', () => this.prev());
+    $sliding.addEventListener('click', this.setSlide(this.slides[0]));
+  });
+  this.listen('unmount', () => {
+    $sliding.removeEventListener('swipe-left', () => this.next());
+    $sliding.removeEventListener('swipe-right', () => this.prev());
+    $sliding.removeEventListener('click', this.setSlide(this.slides[0]));
+  });
 }
 
 Sliding.prototype = Object.assign(Sliding.prototype, Component.prototype, {

src/components/Sliding/index.spec.js

@@ -1,97 +1,114 @@
-import { describe, expect, it, beforeEach } from 'vitest';
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/vanilla';
 import Slinding from '.';
 
 const $slide1 = document.createElement('div');
 $slide1.style.height = '200px';
 $slide1.style.backgroundColor = 'red';
+$slide1.textContent = 'slide 1';
 
 const $slide2 = document.createElement('div');
 $slide2.style.height = '200px';
 $slide2.style.backgroundColor = 'pink';
+$slide2.textContent = 'slide 2';
 
 const $slide3 = document.createElement('div');
 $slide3.style.height = '200px';
 $slide3.style.backgroundColor = 'green';
+$slide3.textContent = 'slide 3';
 
 const $slide4 = document.createElement('div');
 $slide4.style.height = '200px';
 $slide4.style.backgroundColor = 'black';
+$slide4.textContent = 'slide 4';
 
 const propsMock = {
   slides: [$slide1, $slide2, $slide3],
 };
 
-describe('Sliding', () => {
-  let sliding;
-  const $container = document.createElement('div');
+const makeSut = (parameters) => render(new Slinding(parameters));
 
-  beforeEach(() => {
-    sliding = new Slinding(propsMock);
-    sliding.mount($container);
+describe('Sliding', () => {
+  describe('when mount', () => {
+    it('render with 3 itens', async () => {
+      makeSut(propsMock);
+      const slide1 = await screen.findByText('slide 1');
+      const slide2 = await screen.findByText('slide 2');
+      const slide3 = await screen.findByText('slide 3');
+
+      expect(slide1).toBeInTheDocument();
+      expect(slide2).toBeInTheDocument();
+      expect(slide3).toBeInTheDocument();
+    });
   });
 
-  it('has three slides', () => {
-    expect(sliding.selected.get('sliding-content').children.length).toBe(3);
-  });
+  describe('when call functions', () => {
+    it('add item programmatically', async () => {
+      const sliding = makeSut(propsMock);
+      sliding.add($slide4);
 
-  it('add slide programmatically', () => {
-    sliding.add($slide4);
+      const slide4 = await screen.findByText('slide 4');
 
-    expect(sliding.selected.get('sliding-content').children.length).toBe(4);
-    expect(sliding.selected.get('sliding-content').children).toContain($slide4);
-    expect(
-      sliding.selected.get('sliding-content').children[3].classList,
-    ).toContain('sliding__content__slide');
-  });
+      expect(slide4).toBeInTheDocument();
+    });
 
-  it('remove slide programmatically', () => {
-    sliding.remove($slide3);
+    it('remove item programmatically', async () => {
+      const sliding = makeSut(propsMock);
+      sliding.remove($slide2);
 
-    expect(sliding.selected.get('sliding-content').children.length).toBe(2);
-    expect(sliding.selected.get('sliding-content').children).not.toContain(
-      $slide3,
-    );
-  });
+      const slide2 = screen.queryByText('slide 2');
 
-  it('move to the next slide programmatically', () => {
-    const startingPosition =
-      sliding.selected.get('sliding-content').style.transform;
+      expect(slide2).not.toBeInTheDocument();
+    });
 
-    sliding.next();
+    it('next item programmatically', async () => {
+      const sliding = makeSut(propsMock);
 
-    const currentPosition =
-      sliding.selected.get('sliding-content').style.transform;
+      const slide1 = await screen.findByText('slide 1');
+      expect(slide1).toHaveClass('sliding__content__slide--active');
 
-    expect(currentPosition).toEqual(expect.stringContaining('translateX'));
-    expect(startingPosition).not.toBe(currentPosition);
-    expect(
-      sliding.selected.get('sliding-content').children[0].classList,
-    ).not.toContain('sliding__content__slide--active');
-    expect(
-      sliding.selected.get('sliding-content').children[1].classList,
-    ).toContain('sliding__content__slide--active');
-  });
+      sliding.next();
+
+      const slide2 = await screen.findByText('slide 2');
+      expect(slide2).toHaveClass('sliding__content__slide--active');
+    });
+
+    it('previous item programmatically', async () => {
+      const sliding = makeSut(propsMock);
 
-  it('move to the previous slide programmatically', () => {
-    const startingPosition =
-      sliding.selected.get('sliding-content').style.transform;
-    sliding.prev();
-    const currentPosition =
-      sliding.selected.get('sliding-content').style.transform;
-
-    expect(currentPosition).toEqual(expect.stringContaining('translateX'));
-    expect(startingPosition).not.toBe(currentPosition);
-    expect(
-      sliding.selected.get('sliding-content').children[0].classList,
-    ).not.toContain('sliding__content__slide--active');
-    expect(
-      sliding.selected.get('sliding-content').children[2].classList,
-    ).toContain('sliding__content__slide--active');
+      const slide1 = await screen.findByText('slide 1');
+      expect(slide1).toHaveClass('sliding__content__slide--active');
+
+      sliding.prev();
+
+      const slide3 = await screen.findByText('slide 3');
+      expect(slide3).toHaveClass('sliding__content__slide--active');
+    });
+
+    it('clear items programmatically', () => {
+      const sliding = makeSut(propsMock);
+      sliding.clear();
+
+      const slide1 = screen.queryByText('slide 1');
+      const slide2 = screen.queryByText('slide 2');
+      const slide3 = screen.queryByText('slide 3');
+
+      expect(slide1).not.toBeInTheDocument();
+      expect(slide2).not.toBeInTheDocument();
+      expect(slide3).not.toBeInTheDocument();
+    });
   });
 
-  it('clear slides programmatically', () => {
-    sliding.clear();
+  describe('when unmount', () => {
+    it('clear items', () => {
+      const element = makeSut(propsMock);
+      const sliding = screen.getByTestId('sliding-content');
+
+      const slidingSpy = vi.spyOn(sliding, 'removeEventListener');
+
+      element.unmount();
 
-    expect(sliding.selected.get('sliding-content').children.length).toBe(0);
+      expect(slidingSpy).toHaveBeenCalled();
+    });
   });
 });