Vue JS Test

• Birim: Belirli bir fonksiyona, sınıfa veya bileşime yönelik farklı girdilerin etkinliğini değerlendirir.

• Bileşen: Bileşeninizin yeteneklerini, işlemelerini, etkileşimlerini ve amaçlandığı şekilde davranışını inceler. Bu testler, birim testlerden daha yüksek kod hacmine sahiptir, daha karmaşıktır ve yürütülmesi daha uzun sürer.

• Uçtan uca: Birden fazla sayfaya yayılan ve üretim için oluşturulmuş Vue uygulamanıza yönelik gerçek isteklerde bulunan kontroller. Bu prosedürler genellikle bir veritabanı veya başka bir depolama cihazının oluşturulmasını içerir.

Her test türünün test stratejinizde bir rolü vardır ve her test türü, farklı türdeki sorunlardan kaçınmanıza yardımcı olur.

BİRİM TESTİ

Birim testleri, kodun küçük, izole bölümlerinin etkinliğini değerlendirmek için kullanılır. Birim testi genellikle tek bir işlev, sınıf, oluşturulabilir veya modülle sınırlıdır. Birim testleri, bir sistemin bileşenlerinin mantıksal doğruluğunu değerlendirmeyi amaçlamaktadır ve uygulamanın genel işlevselliğinin yalnızca küçük bir kısmıyla ilgilidir. Uygulamanızın ortamının büyük bölümlerini (örneğin başlangıç ​​durumu, karmaşık sınıflar, 3. taraf bileşenleri ve ağ istekleri) yeniden ifade edebilirler.:

Tipik olarak birim testleri, bir prosedürün iş mantığı veya mantıksal doğruluğu ile ilgili sorunları gösterecektir.

Geçerli değeri alma ve onu yüzde bir oranında artırma işlevini kullanın:

// helpers.js export function increment (current, max = 10) { if (current < max) { return current + 1 } return current }

Tipik olarak yalıtılmış olduğundan, artış işlevini çağırmak ve olması gerekeni döndürdüğünü iddia etmek kolaydır, bu nedenle bir Birim Testi oluşturacağız. Bu iddialardan herhangi biri yanlışsa sorunun artırma fonksiyonunda olduğu açıktır.

Bu iddialardan herhangi biri yanlışsa sorunun artırma fonksiyonunda olduğu açıktır.

// helpers.spec.js import { increment } from './helpers' describe('increment', () => { test('increments the current number by 1', () => { expect(increment(0, 10)).toBe(1) }) test('does not increment the current number over the max', () => { expect(increment(10, 10)).toBe(10) }) test('has a default max of 10', () => { expect(increment(10)).toBe(10) }) })

Daha önce birim testinin genellikle kullanıcı arayüzü tasarımı, ağ yardımı talepleri veya çevresel kaygılar içermeyen bireysel iş mantığı, bileşenler, sınıflar, modüller veya işlevler için kullanıldığı belirtilmişti.

Bunlar genellikle Vue.js ile hiçbir ilişkisi olmayan basit JavaScript/TypeScript modülleridir. Genel olarak, Vue uygulamalarında iş mantığı için birim testleri yazma süreci, diğer çerçevelerde yazılan diğer uygulamalara benzer.

Birim Testine Sahip Bileşenler

Bir alt sistem iki şekilde değerlendirilir.

"Beyaz kutu testleri"bir bileşenin özelliklerinin ve gereksinimlerinin farkındadır. Test konusunun bir kısmını izole etmeye odaklanırlar. Bu değerlendirmeler genellikle eklentilerin durumunu ve bağımlılıklarını değiştirmeyi içerecektir (örn. Bunun dışında çocuğunuza sizin gibi davranması, konuşması ve düşünmesi talimatını verebilme yeteneğine sahipsiniz. Ancak bu, tüm yavrularınız için geçerli değildir.

"Kara kutu testleri" bir bileşenin uygulanmasının özelliklerini tanıyamaz. Bu değerlendirmeler, bileşeninizin ve tüm sistemin etkinliğini değerlendirmek amacıyla gerçeğe mümkün olduğunca yakındır. Tipik olarak tüm bileşenleri oluştururlar ve daha çok bir "entegrasyon testi" olarak kabul edilirler.

BİLEŞEN TESTİ

Vue.js bileşenlerini test etmek, uygulamanızın amaçlandığı gibi çalıştığının doğrulanması açısından çok önemlidir. Vue Test Utils ve Jest'i kullanarak işlevlerini test etmek için Vue bileşenlerini kullanabiliriz. Aşağıda her bir bileşen test adımına ilişkin prosedürü inceleyebilirsiniz.

1. Gerekli Paketlerin Kurulumu

Vue CLI'yi kullanıyorsanız Jest ve Vue Test Utilities paketlerini aşağıdaki komutla yükleyebilirsiniz:

vue add unit-jest

Vue CLI'yi kullanmıyorsanız Jest ve Vue Test Yardımcı Programlarını manuel olarak ekleyebilirsiniz:

npm install --save-dev jest vue-jest @vue/test-utils babel-jest

2. Jest Yapılandırması

Jest yapılandırma dosyası oluşturmak için projenin kök dizininde jest.config.js adlı bir dosya oluşturun ve bu dosyaya aşağıdaki içeriği ekleyin:

module.exports = { preset: '@vue/cli-plugin-unit-jest/presets/no-babel', testEnvironment: 'jsdom', };

3. Basit bir Bileşen Oluşturmak

Örneğin basit bir Counter bileşeni oluşturalım:

<!-- src/components/Counter.vue --> <template> <div> <p>{{ count }}</p> <button @click="increment">Increment</button> </div> </template> <script> export default { data() { return { count: 0 }; }, methods: { increment() { this.count++; } } }; </script>

4. Test Edilecek Dosya Oluşturma

Counter bileşeni için bir test dosyası oluşturun:

// tests/unit/Counter.spec.js import { shallowMount } from '@vue/test-utils'; import Counter from '@/components/Counter.vue'; describe('Counter.vue', () => { it('renders the initial count', () => { const wrapper = shallowMount(Counter); expect(wrapper.text()).toContain('0'); }); it('increments the count when button is clicked', async () => { const wrapper = shallowMount(Counter); const button = wrapper.find('button'); await button.trigger('click'); expect(wrapper.text()).toContain('1'); }); });

5. Testleri Çalıştırma

Testleri yürütmek için aşağıdaki komutu kullanın:

npm run test:unit

Jest kurulumunu kendiniz başlattıysanız aşağıdaki komutu çalıştırabilirsiniz:

npx jest

6. Testlerde Kullanılan Temel Fonksiyonlar ve Yöntemler

• shallowMount: Bileşenin temel oluşturulması. Bu, bileşenin alt bileşenlerini hesaba katmaz; bunun yerine yalnızca bileşenin dahili işleyişini değerlendirmek için kullanılır.

• mount: Tüm alt bileşenleri ve işlevleri de dahil olmak üzere bileşenin oluşturulmasını tamamlayın.

• wrapper.find(selector): Bu, belirli bir bileşen öğesini seçmek için kullanılır.

• wrapper.text(): Bileşenin içindeki metni döndürür.

• trigger('click'): Bir olayın oluşmasına neden olur (örneğin, 'click' olayı).

7. Daha İlgili Konular

• Jest.mock: Bu yöntemi dış yükümlülükleri (örneğin API istekleri) taklit etmek için kullanabilirsiniz.

• Snapshots: Bileşenlerin etkinliğini anlık görüntülerle karşılaştırarak değerlendirebilirsiniz.

• Coverage: Jest'in ne derece kapsadığını gözlemleyerek hangi kodların incelendiğini görmek mümkündür.

Test için Daha Fazla Örnek

Props Testi

Bir bileşenin props aldığı ve buna göre render olduğu durumları test etmek önemlidir.

<!-- src/components/Message.vue --> <template> <div> <p>{{ msg }}</p> </div> </template> <script> export default { props: { msg: { type: String, required: true } } }; </script>

Test dosyasını oluşturun:

// tests/unit/Message.spec.js import { shallowMount } from '@vue/test-utils'; import Message from '@/components/Message.vue'; describe('Message.vue', () => { it('renders props.msg when passed', () => { const msg = 'Hello, World!'; const wrapper = shallowMount(Message, { propsData: { msg } }); expect(wrapper.text()).toBe(msg); }); });

Event Emission Testi

Bir bileşenin olay yayıp yaymadığını test etmek de önemlidir.

<!-- src/components/Button.vue --> <template> <button @click="handleClick">Click me</button> </template> <script> export default { methods: { handleClick() { this.$emit('customEvent'); } } }; </script>

Test dosyasını oluşturun:

// tests/unit/Button.spec.js import { shallowMount } from '@vue/test-utils'; import Button from '@/components/Button.vue'; describe('Button.vue', () => { it('emits an event when clicked', async () => { const wrapper = shallowMount(Button); await wrapper.find('button').trigger('click'); expect(wrapper.emitted().customEvent).toBeTruthy(); }); });

UÇTAN UCA TEST

Vue.js uygulamalarında uçtan uca (E2E) testler, kullanıcılar ile uygulamanız arasındaki etkileşimi simüle etmenin bir yolunu sağlayarak uygulamanızın işlevselliğinin doğrulanmasını kolaylaştırır. E2E testi genellikle uygulamanın tamamının yüklenmesi ve ardından kullanıcı eylemlerinin simüle edilmesiyle gerçekleştirilir. Vue.js projelerinde uçtan uca test yapmak için iki popüler araç Cypress ve Nightwatch.js'dir. Bu makalede, Cypress kullanarak bir Vue.js uygulaması için gerekli tüm testlerin nasıl yürütüleceğini göstereceğim.

Cypress Kurulumu

Cypress'i proje bağımlılıklarınıza ekleyin:

npm install cypress --save-dev

Cypress'i ilk kez başlatın:

npx cypress open

Bu komut, Cypress'i açacak ve testleriniz için gerekli dosya yapısını oluşturacaktır. cypress adında bir klasör oluşturulur ve bu klasörde integration, fixtures, support gibi alt klasörler bulunur.

Cypress Yapılandırması

Cypress yapılandırmasını özelleştirmek için cypress.json dosyasını kullanabilirsiniz. Örneğin, baseUrl ayarını ekleyerek tüm testlerde kullanılacak olan temel URL'yi tanımlayabilirsiniz:

{ "baseUrl": "http://localhost:8080" }

Basit Bir Uçtan Uca Test Oluşturma

Örnek olarak, basit bir Todo uygulaması için uçtan uca testler oluşturalım. Uygulamanızda bir Todo bileşeni olduğunu varsayalım:

<!-- src/components/Todo.vue --> <template> <div> <input v-model="newTodo" @keyup.enter="addTodo" placeholder="Add a new todo" /> <ul> <li v-for="todo in todos" :key="todo">{{ todo }}</li> </ul> </div> </template> <script> export default { data() { return { newTodo: '', todos: [] }; }, methods: { addTodo() { if (this.newTodo.trim() !== '') { this.todos.push(this.newTodo.trim()); this.newTodo = ''; } } } }; </script>

Uçtan Uca Test Dosyası Oluşturma

cypress/integration klasöründe todo.spec.js adında bir dosya oluşturun ve aşağıdaki testi ekleyin:

// cypress/integration/todo.spec.js describe('Todo App', () => { beforeEach(() => { cy.visit('/'); }); it('displays two todo items by default', () => { cy.get('input').type('Buy milk{enter}'); cy.get('input').type('Learn Vue{enter}'); cy.get('ul').children().should('have.length', 2); }); it('adds a new todo item', () => { const newItem = 'Feed the cat'; cy.get('input').type(`${newItem}{enter}`); cy.get('ul').children().should('contain', newItem); }); });

Testleri Çalıştırma

Cypress testlerini çalıştırmak için aşağıdaki komutu kullanabilirsiniz:

npx cypress open

Bu komut, Cypress Test Runner'ı açacaktır. Buradan test dosyanızı seçip testleri çalıştırabilirsiniz.

Cypress Testlerinin Temel Kavramları

• cy.visit(url): Belirtilen URL'yi ziyaret eder.

• cy.get(selector): Belirtilen CSS seçiciyi kullanarak DOM elemanını seçer.

• cy.type(text): Girdi alanına metin yazar.

• cy.click(): Seçilen öğeye tıklar.

• cy.contains(text): Belirtilen metni içeren öğeyi seçer.

• cy.should(assertion): Belirtilen koşulun doğru olduğunu doğrular.