4shared

Test-Driven Development visuelle Pour Responsive Interface Design

By  |  1 Comment

Test sites sensibles est une tâche laborieuse. Jusqu’à présent, la mise en œuvre d’une solution stable et maintenable automatisé pour cross-browser et les tests multi-appareils d’une disposition sensible a été presque impossible. Mais que faire si nous avions l’occasion d’écrire des tests visuels pour les sites sensibles ? Et si nous pouvions décrire le look and feel d’une application et de mettre ce directement dans nos tests?

Lors de l’examen de cette question, je décidai d’examiner aussi un autre aspect intéressant du contrôle visuel. Pendant très longtemps, je suis un fan de la développement piloté par les tests 1 (TDD) méthodologie. Il me aide dans mon travail de programmation quotidienne. TDD me permet de formaliser la tâche et à assurer que tout est mis en œuvre selon les exigences.

Plus important encore, il me permet attrape beaucoup de bugs avant qu’ils vont vivre. Pour les sept dernières années, mon objectif principal a été de tester l’automatisation d’un grand projet d’entreprise. Au fil du temps, je suis devenu obsédé par l’idée d’appliquer les tests automatisés en utilisant la méthodologie TDD à l’aspect et la convivialité de sites sensibles. Après des années de recherche, je suis venu avec le Cadre Galen 41 2 & mdash; un outil et un langage spécial pour le test visuel. Cela a fonctionné pendant un certain temps, et une fois que la langue est devenu assez mature, je décide de faire une expérience avec le développement piloté par les tests visuels.

Test-Driven Development Visuelle Pour Responsive Interface Design

Dans cet article, je vais vous décrire cette expérience en détail et propose TDD comme méthodologie de développement front-end. Nous allons examiner la nouvelle technique de contrôle visuel et d’examiner comment tirer le meilleur parti de celui-ci.

Introduction To cadre Galen

Même si une nouvelle technologie, cadre Galen a déjà été utilisé par certaines grandes entreprises, comme eBay, SkyScanner, Kijiji et Bestseller.nl, et il a également été utilisé pour tester le Washington Post 3 s ‘ site. Outre les sociétés de l’entreprise, il est également utilisé dans les studios de Web, tels que l’IPPA Solutions 4 . Le cadre est open-source et hébergé sur GitHub 5 , de sorte que tout le monde peut participer au projet et contribuer au code.

Le concept de test fondamental dans cadre Galen centres sur la vérification de l’emplacement et la taille de tous les éléments de la page par rapport à l’autre. De cette façon, vous pouvez décrire la mise en page pour la taille de toute fenêtre de navigateur et vous ne devez pas utiliser le positionnement absolu.

A concept of visual testing with Galen Framework - Test-Driven Development Visuelle Pour Responsive Interface Design 6
Un concept de contrôle visuel avec le Cadre de Galen (Voir grande version 12 7 )

Le Galen Specs 8 langage a été conçu pour ressembler à l’anglais naturel aussi étroitement que possible et a été mis en œuvre de manière semi-Markdown. Alors, qu’est-ce que ça ressemble? Eh bien, imaginez que vous voulez vérifier que un bouton « Connexion » est situé à côté d’un bouton « Annuler » et a une marge de 10 pixels à partir du côté droit et qu’ils sont alignés horizontalement. Nous pouvons transformer cette déclaration en Galen Specs:

  login-bouton
  près de: annuler bouton droit 10px
  alignés horizontalement tous: annuler bouton
 

Prenons un autre exemple. Que faire si nous voulons vérifier que le logo doit être situé à l’intérieur de la tête dans le coin supérieur gauche, avec une marge d’environ 20 pixels? Voici comment vous le faites:

  logo
  à l'intérieur: en-tête 17 à 22px en haut à gauche
 

Nous pouvons même utiliser un raccourci:

  logo
  à l'intérieur: tête ~ 20 px haut à gauche
 

Beaucoup d’autres types de contrôle existent, et chacun d’entre eux sont décrits en détail dans la documentation officielle 9 . La courbe d’apprentissage est pas très raide. La structure de Galien Specs est assez simple, et une fois que vous le comprenez, les tests devient facile. Nous allons revenir à l’expérience je l’ai mentionné au début dans un instant, mais d’abord permettez-moi de vous donner un peu de perspicacité dans TDD dans son ensemble.

Test-Driven Development

TDD a été utilisé pendant un temps assez long et a fait ses preuves pour être un solide méthodologie pour construire des applications solides. Au début, vous pourriez vous sentir comme vous perdez votre temps à écrire des tests, mais vous allez passer beaucoup moins de temps plus tard, sur la recherche des causes profondes des problèmes. Plus important encore, vous pouvez vous concentrer sur les petites unités de code et assurez-vous que chaque unité est de bonne qualité. Le nombre de tests seront grandir avec le code principal, et essentiellement, vous obtiendrez une rétroaction rapide sur tous les problèmes dans votre application.

un concept de test Visual-Driven Development

Alors, comment pouvons-nous nous approchons de TDD pour HTML et CSS? De toute évidence, il est un peu différent de TDD traditionnelle, où les tests sont mis en œuvre dans une boîte blanche 10 . Voilà pourquoi je ajouté le mot «visuelle» à elle, comme avec le Cadre Galen: Nous testons la façon dont un site est rendu dans le navigateur, et nous ne nous soucions pas particulièrement à propos de sa structure interne. Donc, il ressemble plus à la boîte noire ou des tests boîte grise. Dans cet article, je vais vous montrer comment construire une page Web sensible en écrivant des essais de mise en avant que nous avons même une page. Une chose à garder à l’esprit est que nos tests seront également servir de source de documentation, expliquant comment la page devrait ressembler sur tout périphérique. Avec tout cela à l’esprit, nous allons clarifier le processus.

  1. Conception et essai
    Imaginez comment la page devrait ressembler. Écrire un croquis, écrire un essai.
  2. Code
    Mettre en œuvre le code HTML et CSS, et passer le test.
  3. Refactoriser
    Améliorer le code et les tests.
A basic TDD scheme - Test-Driven Development Visuelle Pour Responsive Interface Design 11
Un schéma de base TDD (Voir grande version 12 7 )

Nous allons briser l’ensemble du processus de développement en petites itérations. Une autre règle importante: Pour chaque itération, nous allons mettre en œuvre que le code qui est nécessaire pour les tests. De cette façon, nous allons nous assurer que notre couverture de test est toujours proche de 100% et que nous ne vous laissez pas distraire par des choses qui ne sont pas déclarées dans l’itération courante. Cet article est basé sur l’expérience de TDD visuelle de l’Atelier Panier 13 . Il est un projet GitHub, de sorte que vous pouvez suivre tous les changements de code en elle.

L’Expérience

Imaginez que nous avons décidé de construire un centre-panier la page et nous voulons qu’il soit réceptif. La fonctionnalité de la page est le même que dans tous les magasins en ligne:. Les utilisateurs doivent être en mesure d’examiner leurs articles commerciaux, procéder au paiement ou retourner

Phase 1: Exigences Sketched

nous nous sommes assis, en pensant à travers tous les détails, et nous sommes arrivés avec cette esquisse:

Initial sketch of design - Test-Driven Development Visuelle Pour Responsive Interface Design 14
esquisse initiale de la conception (Voir grande version 15 )

semble OK pour le moment. Comme vous pouvez le voir, nous avons trois types de croquis: bureau, tablettes et mobiles. Maintenant, nous pouvons commencer à appliquer les tests.

Phase 2: Configuration d’un projet

Pour ce tutoriel, nous ne nécessitent pas d’IDE spéciale & mdash; un éditeur de texte fera. Ça va être assez simple. Disons simplement créer notre dossier de projet, shopping-panier , et il crée deux dossiers: site et galen-tests . Bien sûr, la configuration d’un serveur web local serait mieux, pour que nous puissions accéder à la page grâce à http: // localhost dans nos tests. Mais parce que nous avons une seule page, nous pouvons travailler avec des fichiers simples pour l’instant, d’y accéder via fichier:. /// ... URL

Télécharger 16 Cadre Galen et l’installer 17 . Cadre Galen a scripts d’installation pour Linux et Mac. Si vous êtes un utilisateur de Windows, jetez un oeil au «Cadre Galen Configuration pour Windows 18 « .

Créer tous les dossiers que nous avons discuté ci-dessus:

  shopping-panier /
  | - Site /
  `- galen-tests /
 

Voilà pour aujourd’hui.

Phase 3.1: L’écriture des tests

Pensons à la façon dont nous pouvons diviser notre travail en petits itérations. La première chose que nous aimerions penser est de construire une page de base squelette:

Page skeleton sketch - Test-Driven Development Visuelle Pour Responsive Interface Design 19
page squelette croquis (Voir grande version 20 )

Cela signifie que, pour le moment, nous avons seulement cinq objets sur la page:. «Tête», «Principal», «Navigation», «panneau Banner » et « Pied de page » Commençons à écrire des tests Galien pour notre squelette. Dans le dossier galen-tests , créez un autre dossier nommé specs . Dans ce document, nous allons conserver tous les fichiers Galen Spec.

Créons le premier, galen-tests / spécifications / shopping-cart.spec , avec le code suivant:

  =====================================
tête css #header
Navigation css #navigation
principale css # principale-conteneur
banner-panneau css # bannière panneau
footer css #footer
=====================================

@ *
--------------------
tête
  à l'intérieur: 0px haut de l'écran gauche droite
  hauteur: 60px

navigation
  à l'intérieur: 0px écran vers la gauche
  ci-dessous: 0px tête

footer
  à l'intérieur: 0px fond de l'écran gauche droite
  ci-dessous: bannière panneau 0px
  hauteur: 100px


@ Bureau
------------------
navigation
  width: 300px
  alignés horizontalement tous: principale
  près de: 0px principale gauche

principal
  ci-dessous: 0px tête


@ Bureau, tablette
-------------------
banner-panneau
  ci-dessous: 0px tête
  à l'intérieur: 0px droit de l'écran
  width: 300px
  près de: 0px principale droite
  alignés horizontalement tous: principale


@ Tablette
-----------------
navigation
  à l'intérieur: 0px écran gauche droite
  ci-dessus: 0px de principale
  largeur: 60px

principal
  à l'intérieur: 0px écran vers la gauche


@ Mobiles
----------------------
navigation
  à l'intérieur: 0px écran gauche droite
  ci-dessus: 0px de principale
  hauteur: & gt; 60px

principal
  à l'intérieur: 0px écran gauche droite
  ci-dessus: bannière panneau 0px

banner-panneau
  à l'intérieur: 0px écran gauche droite
  hauteur: & gt; 50px
 

Comme vous pouvez le voir, nous avons déjà défini certains localisateurs d’objet dans le début, même si nous ne disposons pas encore du code HTML. Cela peut sembler un peu bizarre, mais d’autre part, il pourrait se révéler être un exercice utile. De cette façon, nous aurons à réfléchir sur notre structure de DOM à l’avant, et nous pouvons déjà venir avec quelques bonnes idées de la façon dont notre code HTML pourrait être structuré. Par exemple, nous savons déjà que dans notre future page squelette, nous allons avoir un & lt; div id = & quot;-tête & quot; & gt; ... & lt; / div & gt; élément et & lt; div id = & quot; footer & quot; & gt; ... & lt; / div & gt; . La même chose vaut pour les autres éléments de la page. Et si pour une raison quelconque, nous décidons de changer la structure du DOM, nous pouvons toujours mettre à jour nos tests en un seul endroit.

Maintenant, nous allons préparer également une suite de tests qui va exécuter nos tests pour trois tailles: bureau, tablettes et mobiles. Pour faire simple, nous allons simuler une mise en page mobile ou tablette en redimensionnant la fenêtre du navigateur. Créez un fichier nommé galen-tests / shoppingCart.test et de mettre dans le code suivant:

 @@dispositifs de table
  | Dispositif | taille |
  | Mobile | 500x700 |
  | Tablet | 900x600 |
  | Bureau | 1300x700 |

@@utilisant des dispositifs paramétrées
Panier sur $ {} dispositif périphérique
  $ {} WebsiteUrl $ {size}
    "$ {DEVICE}" vérifier les spécifications / centres-cart.spec --include
 

Dans le code ci-dessus, nous ont déclaré dispositifs tableau contenant les paramètres de trois tailles d’écran. L’utilisation de ce tableau, cadre Galen invoquera notre test trois fois, chaque fois avec différents dispositif et taille paramètres. Nous avons également défini un espace réservé pour l’URL du site, via le $ {} websiteUrl construction. Nous allons fournir ce paramètre plus tard à partir de la ligne de commande.

Phase 3.2: Écriture de code

Parce que nous avons mis en place le code de test initiale, nous pouvons commencer à travailler sur le HTML et CSS. Pour cette expérience, je choisi Twitter Bootstrap. Vous pourriez penser que Twitter Bootstrap est déjà bien testé et réactif. Eh bien, du point de TDD visuelle est à venir avec des tests solides et de construire un site de pixel-parfait. Donc, il ne compte pas vraiment quel cadre vous utilisez pour construire un site web parce que dans la fin la seule chose qui est Galen vérifie l’emplacement des éléments de la page à l’écran. Je ramassé Twitter Bootstrap simplement de simplifier l’expérience car il a déjà quelques choses que je dois, je ne vais pas perdre de temps à les réimplémentant. Pourtant, nous avons des exigences strictes dans nos tests Galien pour la page squelette, et nous avons besoin d’offrir une page en fonction de ces exigences. Télécharger Twitter Bootstrap 21 et copiez tout son contenu dans le site Web du dossier. Là, nous devrions avoir la structure suivante:

  site /
  | - Css /
  | | - Bootstrap-theme.css
  | | - Bootstrap-theme.min.css
  | | - Bootstrap.css
  | `- Bootstrap.min.css
  |
  | - fonts /
  `- Js /
    | - Bootstrap.js
    | - Bootstrap.min.js
    `- npm.js
 

Maintenant, nous allons écrire du code HTML. Créez un fichier nommé shopping-cart.html dans le site dossier avec le code suivant:

  & lt;! DOCTYPE html & gt;
& Lt; html lang = & quot; en & quot; & gt;
  & Lt; head & gt;
    & Lt; meta charset = & quot; utf-8 & quot; & gt;
    & Lt; meta http-equiv = & quot; X-UA-Compatible & quot; content = & quot; IE = bord & quot; & gt;
    & Lt; meta name = & quot; fenêtre & quot; content = & quot; width = dispositif de largeur, initiale échelle = 1 & quot; & gt;
    & Lt; title & gt; Galen Atelier - Panier & lt; / title & gt;

    & Lt;! - Bootstrap - & gt;
    & Lt; link href = & quot; css / bootstrap.min.css & quot; rel = & quot; feuille de style & quot; & gt;

    & Lt; link href = & quot; main.css & quot; rel = & quot; feuille de style & quot; & gt;

    & Lt;! - HTML5 cale et Respond.js pour IE 8 soutien des éléments HTML5 et les demandes des médias - & gt;
    ! & Lt; - AVERTISSEMENT: Respond.js ne fonctionne pas si vous affichez la page via un fichier: // - & gt;
    & Lt;! - [If lt IE 9] & gt;
    & Lt; script src = & quot; https: //oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js" & gt; & lt; / script & gt;
    & Lt; script src = & quot; https: //oss.maxcdn.com/respond/1.4.2/respond.min.js" & gt; & lt; / script & gt;
    & Lt;! [Endif] - & gt!;


    & Lt;! - JQuery (nécessaire pour les plugins JavaScript de bootstrap) - & gt;
    & Lt; script src = & quot; https: //ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" & gt; & lt; / script & gt;
    & Lt;! - Inclure tous les plugins compilés (ci-dessous), ou inclure des fichiers individuels au besoin - & gt;
    & Lt; script src = & quot; js / bootstrap.min.js & quot; & gt; & lt; / script & gt;
  & Lt; / head & gt;
  & Lt; body & gt;
    & Lt; nav id = & quot;-tête & quot; class = & quot; & quot barre de navigation; role = & quot; Navigation & quot; & gt;
      & Lt; div class = & quot; conteneur fluide & quot; & gt;
        & Lt; div class = & quot; navbar-tête & quot; & gt;
          & Lt; h3 & gt; lt-tête et; / h3 & gt;
        & Lt; / div & gt;
      & Lt; / div & gt;
    & Lt; / nav & gt;
    & Lt; div id = & quot; moyenne & quot; & gt;
      & Lt; div class = & quot; ligne & quot; & gt;
        & Lt; div id = & quot; Navigation & quot;
            class = & quot; col-xs-12 col-sm-12 col-md-2 col-LG-2 & quot; & gt;
          Navigation
        & Lt; / div & gt;
        & Lt; div id = & quot; main-conteneurs & quot;
            class = & quot; col-xs-12 col-sm-8 col-md-7 col-lg-7 & quot; & gt;
          Conteneur principal
        & Lt; / div & gt;
        & Lt; div id = & quot; bannière panneau & quot;
            class = & quot; col-xs-12 col-sm-4 col-md-3 col-lg-3 & quot; & gt;
          panneau de Bannière
        & Lt; / div & gt;
      & Lt; / div & gt;
    & Lt; / div & gt;
    & Lt; div id = & quot; footer & quot; & gt;
      & Lt; p & gt; Pied & lt; / p & gt;
    & Lt; / div & gt;
  & Lt; / body & gt;
& Lt; / html & gt;
 

Créez un fichier nommé main.css dans notre dossier site avec le contenu suivant:

  #header {
  background: # 2E849E;
  color: white;
  border-radius: 0;
}

#navigation {
  fond: #faa;
  hauteur: 100px;
}

# Main-conteneur {
  fond: #afa;
  hauteur: 100px;
}

# Bannière panneau {
  fond: #aaf;
  hauteur: 100px;
}

#footer {
  color: white;
  background: # 222;
  hauteur: 100px
}
 

Voilà & mdash; nous en avons terminé avec le code! Vous voudrez peut-être vérifier si tout ce que vous faites est la même que dans le référentiel GitHub 22 . Maintenant, nous pouvons exécuter les tests et vérifier que nous avons tout bien pour cette itération fait.

Phase 3.3: Exécution des tests de Galien

Parce que je ne l’ai pas configuré un serveur web local, je décidé de le tester directement de mon système de fichiers local. Dans mon cas, si je ouvre cette page dans un navigateur, l’URL serait fichier: ///home/ishubin/workspace/workshop-shopping-cart/website/shopping-cart.html . Donc, ci-dessous est de savoir comment je vais passer cette URL pour nos tests:

  galen essai shoppingcart.test 
-DwebsiteUrl = "File: ///home/ishubin/workspace/workshop-shopping-cart/website/shopping-cart.html" 
--htmlreport rapports  

La commande ci-dessus va lancer tous les tests et va générer un rapport HTML dans le dossier, je l’ai précisé, rapports . Si vous ouvrez le produit rapports / report.html fichier dans le navigateur, vous devriez voir cette image:

Report Overview - Test-Driven Development Visuelle Pour Responsive Interface Design 23
Présentation du rapport (Voir grande version 24 )

Comme vous pouvez le voir, nous avons quelques échecs. Si nous cliquons sur le « Panier sur le périphérique de bureau » lien, il nous emmène dans un rapport plus détaillé.

Detailed report of desktop tests - Test-Driven Development Visuelle Pour Responsive Interface Design 25
Rapport détaillé de tests de bureau (Voir grande version 26 )

Comme vous pouvez le voir, la dénomination des sections est pas du tout joli. Galen utilise les noms de balises par défaut. Nous allons corriger cela un peu plus tard. Regardons les messages d’erreur. Il ya beaucoup d’entre eux. Disons simplement se concentrer sur le premier échec pour l’instant. Si vous cliquez dessus, vous obtenez une capture d’écran, mettant en évidence les éléments à ce sujet.

A screenshot of a failed layout - Test-Driven Development Visuelle Pour Responsive Interface Design 27
Une capture d’écran d’une mise en échec (Voir grande version 28 )

Le message d’erreur que nous avons eu a été « tête est 15px droite au lieu de 0px. » Qu’est-ce que cela signifie? Remarquez le désalignement des bords droit de l’en-tête et le panneau de bannière? C’est vrai. Le problème avec cette page est que la largeur de la tête correspond à la fenêtre, mais parce que la section du milieu est plus grand, il augmente la taille de l’écran. Cela met aussi les barres de défilement sur notre page. Et parce que nous avons d’abord dit à Galen que nous voulons l’en-tête d’être à l'intérieur: écran du haut de 0px gauche droite , nous signifiait qu’il devrait y avoir aucune marge sur les bords gauche et droit. Mais il est là, il est donc un bug.

Regardons un autre message d’erreur, « Navigation est 20px ci-dessous en-tête au lieu de 0px. »

A screenshot of failed layout - Test-Driven Development Visuelle Pour Responsive Interface Design 29
Une capture d’écran d’une mise en échec (Voir grande version 30 )

À l’origine dans notre fichier de spécification, nous avons déclaré que le panneau de navigation devrait être ci-dessous: 0px tête , ce qui signifie qu’il ne devrait pas avoir toute la marge du haut. Mais dans la capture d’écran, nous voyons clairement l’écart entre la tête et la section du milieu. Encore une fois, ce qui est un bug, et nous devons corriger.

Phase 4: Fixation Les tests ont échoué

Je ont déjà préparé un correctif pour elle dans le dépôt GitHub avec l’étiquette de v0.1.1 31 Aussi avec le correctif, je décidé de faire les tests donnent de meilleurs rapports en nommant les sections de devis. [1999004 ]

abord fixer notre shopping-cart.html Let . Voici le corps changé élément:

  & lt; body & gt;
  & Lt; nav id = & quot;-tête & quot; class = & quot; & quot barre de navigation; role = & quot; Navigation & quot; & gt;
    & Lt; div class = & quot; conteneur fluide & quot; & gt;
      & Lt; div class = & quot; navbar-tête & quot; & gt;
        Header
      & Lt; / div & gt;
    & Lt; / div & gt;
  & Lt; / nav & gt;
    & Lt; div id = & quot; & quot milieu; class = & quot; conteneur plein & quot; & gt;
      & Lt; div class = & quot; ligne & quot; & gt;
        & Lt; div id = & quot; Navigation & quot;
           class = & quot; col-xs-12 col-sm-12 col-md-2 col-LG-2 & quot; & gt;
          Navigation
        & Lt; / div & gt;
        & Lt; div id = & quot; main-conteneurs & quot;
           class = & quot; col-xs-12 col-sm-8 col-md-7 col-lg-7 & quot; & gt;
          Conteneur principal
        & Lt; / div & gt;
        & Lt; div id = & quot; bannière panneau & quot;
           class = & quot; col-xs-12 col-sm-4 col-md-3 col-lg-3 & quot; & gt;
          panneau de Bannière
        & Lt; / div & gt;
      & Lt; / div & gt;
    & Lt; / div & gt;
  & Lt; div id = & quot; footer & quot; class = & quot; conteneur fluide & quot; & gt;
    & Lt; p & gt; Pied & lt; / p & gt;
  & Lt; / div & gt;
& Lt; / body & gt;
 

Et mettons à jour maintenant main.css fichier:

  #header {
  background: # 2E849E;
  color: white;
  border-radius: 0;
}

.navbar {
  margin-bottom: 0;
}

#navigation {
  fond: #faa;
}

# Main-conteneur {
  fond: #afa;
}

# Bannière panneau {
  fond: #aaf;
}

.container pleine {
  marge 0 auto;
  largeur: 100%;
}

.row {
  margin: 0;
}

#footer {
  color: white;
  background: # 222;
  hauteur: 100px
}
 

Et ci-dessous est la modification de la homepage.spec fichier. Ici, je l’ai défini noms propres pour les sections. Maintenant lire le test sera plus facile. Aussi, une fois que nous recevons un rapport d’essai, il sera bien structuré, ce qui rendra plus facile de comprendre les évaluations.

  =====================================
tête css #header
Navigation css #navigation
principale css # principale-conteneur
banner-panneau css # bannière panneau
footer css #footer
=====================================

@ Tête | *
--------------------
tête
  à l'intérieur: 0px haut de l'écran gauche droite
  hauteur: 50px


@ Navigation | *
-------------------
navigation
  à l'intérieur: 0px écran vers la gauche
   ci-dessous: 0px tête

@ ^ | Bureau
-----------------------
navigation
  largeur: 200 à 350px
  alignés horizontalement tous: principale
  près de: 0px principale gauche

@ ^ | Comprimé
-----------------
navigation
  à l'intérieur: 0px écran gauche droite
  ci-dessus: 0px de principale
  % De la hauteur: 50 à 100px

@ ^ | Mobile
----------------------
navigation
  à l'intérieur: 0px écran gauche droite
  ci-dessus: 0px de principale
  % De la hauteur: & gt; 60px



@ Pied | *
-------------------
footer
  % À l'intérieur: 0px fond de l'écran gauche droite
  ci-dessous: bannière panneau 0px
  hauteur: 100px



@ Accueil | bureau
-----------------------
principale, bannière panneau
  ci-dessous: 0px tête

@ ^ | Comprimé
----------
principal
  à l'intérieur: 0px écran vers la gauche
  ci-dessous: navigation 0px

@ ^ | Mobile
------------------
principal
  à l'intérieur: 0px écran gauche droite
  ci-dessus: bannière panneau 0px



@ Panneau de Banner | bureau, tablette
-------------------
banner-panneau
  à l'intérieur: 0px droit de l'écran
  largeur: 220 à 400px
  près de: 0px principale droite
  alignés horizontalement tous: principale


@ ^ | Comprimé
--------------------
banner-panneau
  ci-dessous: navigation 0px


@ ^ | Mobile
------------------
banner-panneau
  à l'intérieur: 0px écran gauche droite
  % De la hauteur: & gt; 50px
 

Remarquez la façon dont nous définissons nos sections et les tags maintenant? Le symbole de tuyau dit Galen à utiliser la première partie comme un nom d’une section, tandis que la seconde partie (après le tuyau) sera utilisé pour la notation de balise. En outre, cette syntaxe bizarre @ ^ | comprimé signifie que Galen devrait réutiliser le nom de la section précédente. Nous avons besoin de cela pour être en mesure d’utiliser une balise différente pour certains objets dans la même section. Et parce que nous ne voulons pas avoir à taper le nom plusieurs fois de la même section, nous pouvons simplement utiliser le ^ symbole .

Une autre caractéristique intéressante est dans ce fichier de spécification. Vous avez peut-être remarqué le symbole % en face de certains contrôles. Ceci dit Galen à ignorer l’échec et de le signaler comme un avertissement. Je l’ai déclaré ce symbole pour certains contrôles car pour l’instant il n’y a pas contenu dans les marines, les sections principales ou une bannière à écran. Une fois que nous ajoutons un peu de contenu là, ces avertissements vont disparaître et l’on peut retirer le symbole plus tard.

Maintenant que nous avons la solution, nous allons courir à nouveau nos tests. Rappelez-vous la commande, nous avons utilisé la première fois? Ne pas oublier d’utiliser votre propre chemin sur votre machine locale.

  galen essai shoppingcart.test 
-DwebsiteUrl = "File: ///home/ishubin/workspace/workshop-shopping-cart/website/shopping-cart.html" 
--htmlreport rapports  

Sur ma machine, tous les tests réussis.

Passed report overview - Test-Driven Development Visuelle Pour Responsive Interface Design 32
Passé aperçu de rapport (Voir grande version 33 )

Et voici le rapport détaillé, maintenant que nous avons amélioré la désignation de sections.

Detailed test report - Test-Driven Development Visuelle Pour Responsive Interface Design 34
rapport d’essai détaillé (Voir grande version 35 )

Maintenant, nous pouvons passer à la prochaine itération.

Phase 5.10: terminer le projet

Fournir une page sensibles de mon croquis original m’a pris environ 10 itérations. Je ne vais pas sur l’ensemble de ces itérations ici parce que le processus était le même: test, code, refactor. Mais vous pouvez suivre tous les progrès sur la page de présentation de l’atelier 36 . Vous pouvez également consulter la page du shopping-cart 37 que je suis venu avec à la fin.

Finished shopping-cart page - Test-Driven Development Visuelle Pour Responsive Interface Design 38
Totalement shopping-panier Page (Voir grande version 39 )

Bien sûr, il a encore quelques bugs mineurs dans d’autres navigateurs; Je courus Galen ne teste que dans Firefox. Ainsi, la configuration des tests d’abord pour les appareils mobiles réels avec tous les principaux navigateurs de bureau pourrait être une bonne idée. Mais le but de l’expérience était juste pour essayer TDD pour le développement front-end. Voilà pourquoi je ne pas se concentrer sur des tests approfondis cross-browser & mdash; même si, pour être honnête, je pense que je devrais avoir. Et si je l’avais configuré le site pour être accessible à partir de mon téléphone Android et la tablette, je pourrais avoir utilisé Appium avec Galen cadre 40 pour tester la mise en page.

Résumé

Il était une expérience intéressante. La façon dont je travaillais dans le passé a été de développer un site Web dans un navigateur et puis plus tard pirater à travailler de la même dans d’autres navigateurs. Fixation toutes ces questions de mise en page méchants est vraiment difficile quand vous avez une grande base de code HTML et CSS et beaucoup de bibliothèques tierces & mdash; et surtout si le site est censé être sensible. Mais l’application de TDD au développement front-end aide beaucoup. Il me force à structurer mon code et mon processus de travail, et de se concentrer sur les petites choses et de les livrer à la haute qualité.

En fin de compte, je obtenir une couverture de test complet, ce que je peux utiliser pour tous les tests de régression. À un certain point, je pourrais changer certaines polices, modifier la disposition de certains composants ou ajouter certains éléments à la page. Si quelque chose va mal, Galen me alerter immédiatement. Je vous encourage à essayer cette approche, aussi. Il pourrait vous aider dans le développement de votre site web.

Ressources

  • Cadre Galen 41 2
  • « Panier: test Visual-Driven Development 42  » (projet d’atelier), GitHub
  • « Sample Test Galen 43 « , GitHub
    Un projet réel basé sur JavaScript essai la mise en œuvre des tests Galien
  • « Cross-Browser Disposition cadre Galen Avec Test et Sauce Labs 44  » Ambre Kaplan, Sauce Labs
  • Comparaison de l’image pour les tests de mise en page avec cadre Galen 45 (tutorial), Ivan Shubin, YouTube
  • « Galen 46 , » l’esprit moteur
    Articles sur le cadre Galen

(da, ml, al, IL)

Notes

  1. 1 https://en.wikipedia.org/wiki/Test-driven_development
  2. 2 http://galenframework.com
  3. 3 http://www.washingtonpost.com/
  4. 4 http://adcisolutions.com/
  5. 5 https://github.com/galenframework/galen
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2015/03/02-galen-introduction-01-opt.jpg
  7. 7 http://www.smashingmagazine.com/wp-content/uploads/2015/03/02-galen-introduction-01-opt.jpg
  8. 8 http://galenframework.com/docs/reference-galen-spec-language-guide/
  9. 9 http://galenframework.com/docs/reference-galen-spec-language-guide/#SpecsReference
  10. 10 https://en.wikipedia.org/wiki/White-box_testing
  11. 11 http://www.smashingmagazine.com/wp-content/uploads/2015/03/03-tdd-scheme-opt. jpg
  12. 12 http://www.smashingmagazine.com/wp-content/uploads/2015/03/02-galen-introduction-01-opt.jpg
  13. 13 https://github.com/galenframework/workshop-shopping-cart/
  14. 14 http://www.smashingmagazine.com/wp-content/uploads/2015/03/04-initial-sketch-opt.jpg
  15. 15 http://www.smashingmagazine.com/wp-content/uploads/2015/03/04-initial-sketch-opt.jpg
  16. 16 http://galenframework.com/download/
  17. 17 http://galenframework.com/docs/getting-started-install-galen/
  18. 18 http://mindengine.net/ poste / 08/01/2014-configuration-galen-cadre-de-fenêtres /
  19. 19 http://www.smashingmagazine.com/wp-content/uploads/2015/03/05-skeleton-sketch-opt.jpg
  20. 20 http://www.smashingmagazine.com/wp-content/uploads/2015/03/05-skeleton-sketch-opt.jpg
  21. 21 http://getbootstrap.com/
  22. 22 https://github.com/galenframework/workshop-shopping-cart/tree/v0.1
  23. 23 http://www.smashingmagazine.com/wp-content/uploads/2015/03/06-first-report-overview-opt.png
  24. 24 http://www.smashingmagazine.com/wp-content/uploads/2015/03/06-first-report-overview-opt.png
  25. 25 http://www.smashingmagazine.com/wp-content/uploads/2015/03/07-first-detailed-report-opt.png
  26. 26 http://www.smashingmagazine.com/wp-content/uploads/2015/03/07-first-detailed-report-opt.png
  27. 27 http://www.smashingmagazine.com/wp-content/uploads/2015/03/08-first-report-screenshot-opt.png
  28. 28 http://www.smashingmagazine.com/wp-content/uploads/2015/03/08-first-report-screenshot-opt.png
  29. 29 http://www.smashingmagazine.com/wp-content/uploads/2015/03/09-first-report-screenshot-2-opt.png
  30. 30 http://www.smashingmagazine.com/wp-content/uploads/2015/03/09-first-report-screenshot-2-opt.png
  31. 31 https://github.com/galenframework/workshop-shopping-cart/tree/v0.1.1
  32. 32 http://www.smashingmagazine.com/wp-content/uploads/2015/03/10-passed-report-overview-opt.png
  33. 33 http://www.smashingmagazine.com/wp-content/uploads/2015/03/10-passed-report-overview-opt.png
  34. 34 http://www.smashingmagazine.com/wp-content/uploads/2015/03/11-passed-report-detailed-opt.png
  35. 35 http://www.smashingmagazine.com/wp-content/uploads/2015/03/11-passed-report-detailed-opt.png
  36. 36 http://galenframework.github.io/workshop-shopping-cart/
  37. 37 http://galenframework.github.io/workshop-shopping-cart/v0.6.1/website/shopping-cart.html
  38. 38 http://www.smashingmagazine.com/wp-content/uploads/2015/03/12-finished-page-overview-opt.png
  39. 39 http://www.smashingmagazine.com/wp-content/uploads/2015/03/12-finished-page-overview-opt.png
  40. 40 https://www.youtube.com/watch?v=zmbqTe0aUtc
  41. 41 http://galenframework.com
  42. 42 https://github.com/galenframework/workshop-shopping- panier
  43. 43 https://github.com/galenframework/galen-sample-tests
  44. 44 http://sauceio.com/index.php/2015/01/cross-browser-layout-testing-with-galen-framework-and-sauce-labs/
  45. 45 https://www.youtube.com/watch?v=bheFQfEGR6U
  46. 46 http://mindengine.net/category/galen/

The poste de Visual Test-Driven Development Pour Interface Responsive design apparu sur Smashing Magazine.

Test-Driven Development Visuelle Pour Responsive Interface Design
Test-Driven Development Visuelle Pour Responsive Interface Design
Test-Driven Development Visuelle Pour Responsive Interface Design
Test-Driven Development Visuelle Pour Responsive Interface Design
Test-Driven Development Visuelle Pour Responsive Interface Design

Test-Driven Development Visuelle Pour Responsive Interface Design

1 Comment

  1. Della

    30 avril 2016 at 12 h 14 min

    Noelle, REALLY? REALLY??? I go from George the Perv to Salahi? Aren’t the prizes supposed to go up in quality? I mean, I was kinda even hoping that eventually we could have Liam aka Evian Water bottle as the prize. But noo3oooooooo&#82o0;.. LOL!

Leave a Reply

Annuler la réponse.

Votre adresse de messagerie ne sera pas publiée.

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>