0Pricing
Vue Academy · Ders

Kontroller, Actions ve Args

Kontrol arayüzü için argTypes, olay günlüğü için actions eklentisi ve etkileşim testleri için play().

Kontroller, Actions ve Args, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Etkileşimli Denetimler

Storybook'un Denetimler paneli, bir story'nin args değerlerini canlı form alanlarına dönüştürür. Bir özelliği değiştirdiğinizde bileşen anında yeniden görüntülenir — kodu düzenlemeniz gerekmez. Bu alanları argTypes ile şekillendirirsiniz.

argTypes Tanımlama

argTypes her özelliği açıklar: denetim türünü, seçenekleri ve belgelerini. Üst veri nesnesinde args değerlerinin yanında bulunur.

export default {
  component: Button,
  argTypes: {
    label: { control: "text" },
  },
}

Metin ve Boolean Denetimleri

Denetim türü, kullanılacak bileşeni seçer. text bir giriş kutusu; boolean ise bir açma-kapama anahtarı sağlar.

argTypes: {
  label: { control: "text" },
  disabled: { control: "boolean" },
}

options ile Select Denetimleri

Sabit bir değer kümesi için options dizisiyle birlikte select denetimini kullanın. Panel bir açılır liste görüntüler.

argTypes: {
  variant: {
    control: "select",
    options: ["primary", "secondary", "danger"],
  },
}

Renk ve Sayı Denetimleri

Diğer kullanışlı denetimler: color bir renk seçici açar; number (veya range) ise sayısal giriş sağlar.

argTypes: {
  background: { control: "color" },
  count: { control: { type: "range", min: 0, max: 10 } },
}

Actions Eklentisi

Eylemler eklentisi, bir bileşenin doğru şekilde olay yayımladığını doğrulayabilmeniz için olayları bir panelde günlüğe kaydeder. Bir args değerini fn() ile günlük kaydı tutan bir işleve bağlarsınız.

import { fn } from "@storybook/test"

export default {
  component: Button,
  args: {
    onClick: fn(),
  },
}

fn() Nasıl Çalışır?

fn(), çağrıları Actions panelinde günlüğe kaydeden bir gözetleyici oluşturur. Bileşen işleyiciyi çağırdığında (örneğin onClick ile eşlenen bir click olayı yayımlandığında), çağrıyı ve bağımsız değişkenlerini görürsünüz.

args: {
  onSubmit: fn(),
}
// Clicking submit logs "onSubmit" with payload in the Actions panel

Olayları İşleyicilere Eşleme

Vue olaylar yayımlar; Storybook bir on<Event> args değerini bu yayıma eşler. Yayımlanan bir update olayı, onUpdate eylem args değeri üzerinden görünür.

argTypes: {
  onUpdate: { action: "update" },
}

play İşlevi

Bir story, görüntüleme sonrasında çalışarak kullanıcı etkileşimini — tıklama ve yazma gibi — benzeten ve sonucu doğrulayan bir play işlevi içerebilir. Bu, bir story'yi etkileşim testine dönüştürür.

import { expect, userEvent, within } from "@storybook/test"

export const Clicks = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement)
    await userEvent.click(canvas.getByRole("button"))
  },
}

play İçinde Doğrulama

play içinde expect ile doğrulama yapabilir ve bir eylemin çağrıldığını kontrol edebilirsiniz. Böylece etkileşim testleri doğrudan Storybook'ta görünür olur.

export const Submits = {
  args: { onSubmit: fn() },
  play: async ({ args, canvasElement }) => {
    const canvas = within(canvasElement)
    await userEvent.click(canvas.getByRole("button"))
    await expect(args.onSubmit).toHaveBeenCalled()
  },
}

Denetimler + Eylemler + play Neden Önemlidir?

Birlikte story'leri güçlü kılarlar: Denetimler özellikleri keşfetmenizi, Eylemler olayların yayımlandığını doğrulamanızı, play ise etkileşimleri ve doğrulamaları otomatikleştirmenizi sağlar — belgeler ve testler tek bir yerde.

Kısa Kontrol

Denetimler ve eylemler konusunu anlayıp anlamadığınızı kontrol edin.

Özet

Denetimleri, eylemleri ve args değerlerini öğrendiniz:

  • argTypes, Denetimler panelini şekillendirir: text, boolean, select (options ile), color, number/range.
  • Actions eklentisi olayları günlüğe kaydeder; işleyicileri fn() ile bağlayın veya olayları action aracılığıyla eşleyin.
  • play işlevi, userEvent ile etkileşimleri benzetmek ve expect ile doğrulama yapmak üzere görüntüleme sonrasında çalışır.
  • Birlikte story'leri keşfedilebilir, doğrulanabilir ve kendi belgelerini oluşturan yapılar hâline getirirler.

Sıkça Sorulan Sorular

“Kontroller, Actions ve Args” dersi ücretsiz mi?

Evet — “Kontroller, Actions ve Args” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Kontroller, Actions ve Args” dersinde ne öğreneceğim?

Kontrol arayüzü için argTypes, olay günlüğü için actions eklentisi ve etkileşim testleri için play(). Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 3. dersidir.

“Kontroller, Actions ve Args” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Vue 3 için Storybook Kurulumu
  2. Bileşen Hikâyeleri Yazma
  3. Kontroller, Actions ve Args
  4. Storybook Eklentileri ve Erişilebilirlik Testleri
← Vue Academy Sayfasına Dön