Testing Integration & E2E

Testy integracyjne sprawdzają współpracę systemów - jak systemy rakiety współpracują przed startem na Marsa.

Component Integration Tests

1// ArtworkGallery.spec.js
2import { describe, it, expect, beforeEach } from 'vitest'
3import { mount } from '@vue/test-utils'
4import { createPinia, setActivePinia } from 'pinia'
5import ArtworkGallery from './ArtworkGallery.vue'
6import { useGalleryStore } from '@/stores/gallery'
7
8describe('ArtworkGallery Integration', () => {
9  beforeEach(() => {
10    setActivePinia(createPinia())
11  })
12
13  it('displays artworks from store', async () => {
14    const wrapper = mount(ArtworkGallery, {
15      global: {
16        plugins: [createPinia()]
17      }
18    })
19
20    const store = useGalleryStore()
21
22    store.artworks = [
23      { id: 1, title: 'Mona Lisa', artist: 'Leonardo' },
24      { id: 2, title: 'David', artist: 'Michelangelo' }
25    ]
26
27    await wrapper.vm.$nextTick()
28
29    const cards = wrapper.findAll('.artwork-card')
30    expect(cards).toHaveLength(2)
31  })
32
33  it('filters artworks on search input', async () => {
34    const wrapper = mount(ArtworkGallery, {
35      global: {
36        plugins: [createPinia()]
37      }
38    })
39
40    const store = useGalleryStore()
41    store.artworks = [
42      { id: 1, title: 'Mona Lisa', artist: 'Leonardo' },
43      { id: 2, title: 'David', artist: 'Michelangelo' }
44    ]
45
46    await wrapper.vm.$nextTick()
47
48    const searchInput = wrapper.find('input[type="search"]')
49    await searchInput.setValue('mona')
50
51    await wrapper.vm.$nextTick()
52
53    const cards = wrapper.findAll('.artwork-card')
54    expect(cards).toHaveLength(1)
55    expect(cards[0].text()).toContain('Mona Lisa')
56  })
57})

Router Integration

1import { mount } from '@vue/test-utils'
2import { createRouter, createMemoryHistory } from 'vue-router'
3import App from './App.vue'
4
5describe('App with Router', () => {
6  it('navigates to gallery page', async () => {
7    const router = createRouter({
8      history: createMemoryHistory(),
9      routes: [
10        { path: '/', component: { template: '<div>Home</div>' } },
11        { path: '/gallery', component: { template: '<div>Gallery</div>' } }
12      ]
13    })
14
15    const wrapper = mount(App, {
16      global: {
17        plugins: [router]
18      }
19    })
20
21    await router.push('/gallery')
22    await router.isReady()
23
24    expect(wrapper.html()).toContain('Gallery')
25  })
26})

E2E Tests (Cypress/Playwright)

1// cypress/e2e/gallery.cy.js
2describe('Gallery E2E', () => {
3  beforeEach(() => {
4    cy.visit('/')
5  })
6
7  it('displays artworks', () => {
8    cy.get('.artwork-card').should('have.length.greaterThan', 0)
9  })
10
11  it('filters artworks by search', () => {
12    cy.get('input[type="search"]').type('mona')
13
14    cy.get('.artwork-card').should('have.length', 1)
15    cy.get('.artwork-card').first().should('contain', 'Mona Lisa')
16  })
17
18  it('opens artwork detail on click', () => {
19    cy.get('.artwork-card').first().click()
20
21    cy.url().should('include', '/artwork/')
22    cy.get('.artwork-detail').should('be.visible')
23  })
24
25  it('adds artwork to favorites', () => {
26    cy.get('.artwork-card').first().find('.favorite-btn').click()
27
28    cy.get('.favorites-count').should('contain', '1')
29  })
30})

Playwright Example

1// tests/gallery.spec.js
2import { test, expect } from '@playwright/test'
3
4test.describe('Gallery', () => {
5  test('should display artworks', async ({ page }) => {
6    await page.goto('/')
7
8    const cards = page.locator('.artwork-card')
9    await expect(cards).toHaveCount(12)
10  })
11
12  test('should filter artworks', async ({ page }) => {
13    await page.goto('/')
14
15    await page.fill('input[type="search"]', 'leonardo')
16
17    const cards = page.locator('.artwork-card')
18    await expect(cards).toHaveCount(2)
19  })
20
21  test('should navigate to artwork detail', async ({ page }) => {
22    await page.goto('/')
23
24    await page.click('.artwork-card:first-child')
25
26    await expect(page).toHaveURL(/.*artwork\/\d+/)
27    await expect(page.locator('.artwork-detail')).toBeVisible()
28  })
29})