ch09-NotFound
Last updated
Last updated
Angular sürümündeki uygulamada, bileşen esas olarak stil için div'lerle sarılı bir simge ve span'dan oluşur.
feat/NotFound
adında bir dal oluşturun. src/components/
klasörü altında 2 dosya oluşturun; NotFound.cy.tsx
, NotFound.tsx
. Her zamanki gibi, bir bileşeni işlemeye başlamak için minimal başlayın; dosyalara aşağıdakileri kopyalayın ve yarn cy:open-ct
ile çalıştırıcıyı açtıktan sonra testi çalıştırın.
Testi geçmek için minimal bir bileşen oluşturuyoruz (Yeşil 1).
Bu basit bir bileşendir, eklemeye değer başka testler yoktur. Geriye kalan tek şey stillerdir. Bunları uygulamanın Angular sürümünden kopyalayabiliriz (Düzenleme 1).
Bu, geçmişte öğrendiklerimizi pekiştirdiğimiz basit bir bileşendi.
Bir bileşen testinde, stilleri hemen ayarlayabiliriz. Şimdiye kadar ki örneklerimizde bu basit bir içe aktarma olmuştur.
react-icons
ve/veya styles-icons
kullanmanın avantajlarından yararlanmak faydalıdır.
Cypress bileşen testleri, RedGreenRefactor döngülerinde görsel tasarımımıza yardımcı olabilir.
Bileşenin iskeleti için bir test yazın (Kırmızı 1). Şimdiye kadar Cypress'in kullanıyorduk. Bir bileşeni test ediyoruz ve her şey tek bir etiketin altında olduğu için içinde kullanmak isteğe bağlıdır. Ayrıca başlangıçta, her bileşenle olduğu gibi daha sonra da stilleri bileşene aktarabiliriz.
Bu svg
'nin gerçek bir simge olmasını istiyoruz. adresinden içinde ünlem olan bir üçgen simge içe aktaralım. Burada önemli olan, test aracının RedGreenRefactor döngüsünde tasarımımıza yardımcı olmasıdır (Düzenleme 1).