Dem Testing Tool

A Node.js Command Line Application

Table of Contents

• General Info
• Setup
• How To Update
• Usage
• Technologies Used
• Tests
• Edit Command
• Screenshot
• Changelog

General Information

This is a command line app for automate some of the test we made for our DEM.

Setup

If you don't have node.js installed, please download and install it from here

https://nodejs.org/it/download/

Open your terminal and install the package globally:

• npm i -g dem-testing-tool

Important: Open your terminal as administrator on Windows, on Mac OS & Linux you will need to use sudo npm i -g dem-testing-tool

Important: In Windows you could need to edit the ExecutionPolicy settings to use this command line:

• Open PowerShell as administrator and paste this command:
  • Set-ExecutionPolicy -ExecutionPolicy RemoteSigned

Reference: https://docs.microsoft.com/it-it/powershell/module/microsoft.powershell.core/about/about_execution_policies?view=powershell-7.2

Important: In your mjml file add this classes:

• Facebook anchor: class="facebook-link"
• Youtube anchor: class="youtube-link"
• Linkedin anchor: class="linkedin-link"
• Disclaimer (sicurezza) anchor: class="disclaimer-link"
• Disclaimer text: css-class="disclaimer-text"

How to update

Open your terminal and install the package globally:

• npm update -g dem-testing-tool

Important: Open your terminal as administrator on Windows, on Mac OS & Linux you will need to use sudo npm update -g dem-testing-tool

Usage

1. Navigate inside the general dem folder - (NOT the id dem folder)
   • Example:
     • Here > Motore Italia Digitale - soluzioni e-commerce_v3
     • Not here > Motore Italia Digitale - soluzioni e-commerce_v3/5449/
2. Open the terminal, and launch the command dem test
3. Wait for the test to complete

Technologies Used

• Node.js
• cli-color
• glob
• html-validator
• signale
• cli-color
• cli-progress

Tests

List of the tests here:

• File Html - Verificare presenza di <div style>

  Regex: <div style>

  • Function name => testStyle()

• Cartella /images/ - Verificare che immagini siano max 250kb

  • Function name => testImagesSize()

• Cartella /images/ - Verificare che non ci siano immagini inutilizate nella cartella images (estensioni: png, jpg, jpeg, gif)

  • Function name => testUnusedImages()

• File Html - Verificare se c'è ubuntu (font size inutilizzato, sia come chiamata che come font assegnato ad elementi)

  Regex: ubuntu

  • Function name => testUbuntu()

• File Html - Verificare presenza di ;; in codice

  Regex: ;;

  • Function name => testDoubleSemicolon()

• File Html - Verificare presenza classe cta-box-shadow e in caso rimuovere

  Regex: cta-box-shadow

  • Function name => testCtaBoxShadow()

• File Html - Verificare presenza di cdn in link immagini

  Regex: cdn

  • Function name => testCdn()

• File Html - Verificare presenza di width 90% in ogni tag <a>

  Regex: width:90%

  • Function name => testWidthCta()

• Cartella images - Verificare che non ci siano caratteri accentati o particolari nei nomi file

  Caratteri speciali: [!$%^&*()+|~=`{}[]:/;<>?,@#]

  • Function name => testImagesNames()

• File Html - Verificare che non ci sia icona twitter.

  Regex:twitter_icon.png

  • Function name => testTwitterIcon()

• File Html - Verifica se i link facebook, youtube, linkedin, e sicurezza sono corretti

  Regex: href="https://www.facebook.com/intesasanpaolo/" href="https://www.youtube.com/user/intesasanpaolo" href="https://www.linkedin.com/company/intesa-sanpaolo/" href="https://www.intesasanpaolo.com/it/common/footer/sicurezza.html"

  • Function name => testSocialLink()

• File Html - Varifica che tutti i link (anchor) abbiano come target _blank

  Regex: _blank

  • Function name => testBlank()

• File Html - Verificare non ci sia "www" nel diclaimer

  Regex: \s+[www]+\.+(.*?)(com|it|org|net|eu)\b I link all'interno dei tag <a></a> non vengono considerati

  • Function name => testWww()

• File Html - Verificare presenza variabili "${package_code}$ ${surrogate_key}$"

  Regex: /\$\{package\_code\}\$\$\{surrogate_key\}\$/g

  • Function name => checkBottomVariables()

• File Html - Validazione dei file con il pacchetto npm html-validator per ricerca errori in console

  Test esclusi:

  • no-deprecated-attr

  • no-conditional-comment

  • element-required-attributes

  • Function name => testHtmlErrors()

• File Html - Verificare presenza della proprietà nel tag html lang="it"

Regex: /lang\=\"it\"/g

• Function name => checkHtmlLang()

• File Html - Verificare presenza di spazi all'interno di ogni href di ogni link con tag <a>

Regex: /href="(.*?)"/g - /(\s)/

• Function name => testSpacesInLink()

• File Html - Verificare se esistono spazi all'inizio o alla fine del preheader

  StartRegex: /;">+\s/gi || EndRegex: /\s+<\//gi

  • Function name => testPreheaderSpaces()

• File Html - Verificare se esistono spazi dentro gli alt nei tag img

  StartRegex: /alt="+\s/gi || EndRegex: /\s+" /gi

  • Function name => testImageAltSpaces()

Edit Command

Example usage

dem edit --rename "folder name" or dem edit -r "folder name"

where the "folder name"is the target directory.

You can also use the command dem edit -h for more details.

This command will rename your folder in this way:

1. remove special characters - regex: regex(/[!$%^&*()+|~={}\[\]:\/;<>?,\.@#]/g)
2. replace accent letter with a normalized letter
3. replace _ with - - regex: regex(/_/g, "-")
4. replace a space with - between two characters - regex: regex(/\b\s\b/g, "-")
5. replace remove all spaces - regex regex(/\s/g, "")
6. lowercase all the characters - .toLocaleLowerCase()

Screenshot

Changelog

07/04/2023

• Added a new test testPreheaderSpaces to check preheader spaces
• Added a new test testImageAltSpaces to check alts spaces

23/08/2022

• Added extensions (jpeg and gif) to testUnusedImages test

29/07/2022

• Added a new test checkHtmlLang to check the property lang="it"

21/07/2022

• Added a new test checkBottomVariables to check the presence and the correct name of two variables ${package_code}$ ${surrogate_key}$

29/06/2022

• Added a throw Error() when the command is NOT launched into the main directory.

07/07/2022

• Added dem edit --rename <folder> command to rename dem folders correctly
• Add a check for testImagesNames() if uppercase exists

25/11/2022

• Added a new test testSpacesInLink to check the presence of spaces inside a href=""