Web

Testing JavaScript Applications

Course evaluation

Quiz

Object Oriented Javascript and more

## <i class="fas fa-question-circle"></i> Question 2

Lequel ou lesquels des types suivants ne sont pas un type primitif (Oui, les majuscules sont justes !)

- Symbol
                            - Array
                            - BigInt
                            - Int
                            - Undefined
                            - String
                            
                            Notes:
                            
                            <div class="spoiler">

- `Int` n'est pas un type primitif : Javascript représente tous ses nombres, avec ou sans virgule, avec le type `Number`.
                            - `Array` n'est pas un type primitif : c'est une fonction qui crée un objet avec des propriétés spéciales, utilisé pour représenter des tableaux de données. C'est donc un objet.

[Source](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#primitive_values)
                            </div>

## <i class="fas fa-question-circle"></i> Question 4

Qu'affiche le code suivant ?

```js
                            function doTwice(f) {
                                f()
                                f()
                            }

let human = {
                                age: 32,
                                getOlder() {
                                    this.age++
                                }
                            }

doTwice(human.getOlder)

console.log(human.age)
                            ```
                            
                            - 32
                            - 33
                            - 34
                            - Une erreur est lancée
                            - Aucune des autres réponses
                            
                            Notes:
                            
                            <div class="spoiler">

Une erreur est lancée. En effet, la fonction `getOlder` n'est pas appelée comme une méthode (c'est à dire avec la notation `.`). Similairement aux constructeurs, qui sont de simples fonctions s'ils ne sont pas appelés avec `new`, une méthode n'est qu'une fonction si elle n'est pas appelée avec sur un objet. Ici, la fonction `getOlder` est appelée comme une fonction, et donc `this` n'est pas défini dans son corps.
                            
                            [MDN Operators this](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this)

</div>

# <i class="fas fa-question-circle"></i> Question 4
                            Suite (suite)
                            
                            ```js
                            class Human {
                                constructor(age) {
                                    this.age = age;
                                }
                            
                                getOlder() {
                                    this.age++;
                                }
                            }
                            
                            function doTwice(f) {
                                f.call(this); // bind this to the current context
                                f.call(this); // bind this to the current context
                            }
                            
                            let person = new Human(32);
                            
                            doTwice.call(person, person.getOlder); // bind this to person
                            
                            console.log(person.age); // Output will be 34
                            ```
                            </div>

## <i class="fas fa-question-circle"></i> Question 5
                            
                            Qu'affiche le code suivant ?

```js
                            let person = {
                                name: "John"
                            };
                            let student = {
                                studentId: 42
                            };
                            Object.assign(person, student);
                            student.studentId = 43;

console.log(person.studentId);
                            ```

- 42
                            - 43
                            - undefined
                            - Une erreur est lancée
                            - Aucune des réponses ci-dessus

La méthode `Object.assign()` est utilisée afin de copier les valeurs de toutes les propriétés directes (non héritées) d'un objet qui sont énumérables sur un autre objet cible. Cette méthode renvoie l'objet cible. [Source](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)
                            
                            Notes:
                            
                            <div class="spoiler">

L'output est `42`. En effet, `Object.assign` copie les propriétés de `student` dans `person`, mais ne crée pas de lien entre les deux objets. Donc lorsque la propriété `studentId` de `student` est modifiée, cela n'a aucun impact sur `person`.
                                
                            </div>

## <i class="fas fa-question-circle"></i> Question 6

Quelle est la valeur imprimée par le programme suivant?

```js
                            var age = 20;
                            var student = {
                                age: 25,
                                getAge: function() {
                                    return this.age;
                                }
                            };
                            var anotherStudent = {
                                age: 30,
                                getAge: function() {
                                    return this.age;
                                }
                            };
                            console.log(student.getAge.apply(anotherStudent))
                            ```

- 20
                            - 25
                            - 30
                            - undefined
                            - Une erreur se produit car `getAge`, qui est une fonction, n'a pas de méthode `apply`.
                            - Aucune des autres réponses
                            
                            Notes:
                            
                            <div class="spoiler">

L'output est `30`. En effet, `apply` permet d'appeler une fonction en spécifiant le contexte dans lequel elle est appelée. Ici, `student.getAge` est appelée avec `anotherStudent` comme contexte, donc `this` dans le corps de la fonction `getAge` pointe sur `anotherStudent`, et donc `this.age` vaut `30`.
                            
                            </div>

## <i class="fas fa-question-circle"></i> Question 6

Quelle est la valeur imprimée par le programme suivant?

## <i class="fas fa-question-circle"></i> Question 7

Que se passe-t-il lorsque l'on ajoute une fonction au prototype d'une classe de la librairie standard?

```js
                            let d = new Date();

Date.prototype.myFormat = function() {
                                return "The day is " + this.toLocaleDateString('en-us', { year:"numeric", month:"short"})
                            }

console.log(d.myFormat())
                            ```
                            
                            - La fonction est copiée instantanément dans toutes les instances existantes de la classe
                            - Une erreur a lieu car seules les instances futures de la classe hériteront la fonction
                            - Cela est interdit
                            - Aucune réponse correcte
                            
                            Notes:
                            
                            <div class="spoiler">

Cette action est parfaitement valide. Puisque toutes les instances de `Date` ont une propriété prototype qui pointe sur le prototype de `Date`, toute propriété définie sur le prototype, même après la création d'une instance, sera visible par celle-ci. Donc la fonction `myFormat` est bien visible par l'instance `d` de `Date`. En revanche, aucune réponse proposée n'est correcte, puisque la fonction n'est pas copiée dans les instances existantes, et qu'aucune erreur n'a lieu.

</div>

## <i class="fas fa-question-circle"></i> Question 7

Que se passe-t-il lorsque l'on ajoute une fonction au prototype d'une classe de la librairie standard?

```js
                            let d = new Date();

Date.prototype.myFormat = function() {
                                return "The day is " + this.toLocaleDateString('en-us', { year:"numeric", month:"short"})
                            }

console.log(d.myFormat())
                            ```

## <i class="fas fa-question-circle"></i> Question 8

Quelle est la valeur imprimée par le programme suivant?

```js[]
                            var arr = [];
                            arr[0] = "zéro";
                            arr[2] = "deux";
                            arr[4] = "quatre";
                            for (var val in arr) {
                                console.log(val)
                            }
                            ```
                            
                            - 0 2 4
                            - 0 null 2 null 4
                            - 0 undefined 2 undefined 4
                            - 0 1 2 3 4
                            - 0 1 2 3 4 length
                            - zéro deux quatre
                            - zéro undefined deux undefined 4
                            - zéro null deux null quatre
                            - Le code crée une out-of-bounds exception à la ligne 3
                            - Aucune autre réponse correcte
                                                    
                            Notes:
                            
                            <div class="spoiler">

L'output est `0 2 4`. En effet, les tableaux en Javascript sont des objets, et les indices sont des propriétés de l'objet. Donc `arr[0]` est équivalent à créer une propriété appelée `"1"` sur l'objet `arr`, et similairement avec `2` et `4`. La boucle `for ... in` itère sur les propriétés de l'objet, donc les indices `0`, `2` et `4` sont imprimés.
                                
                            </div>

## <i class="fas fa-question-circle"></i> Question 9

Quelle est la valeur imprimée par le programme suivant?

```js
                            var age = 20;
                            function Student(age) {
                                this.age = age
                                return {
                                    age: 25
                                }
                            }
                            var student = new Student(30);
                            console.log(student.age)
                            ```

- 20
                            - 25
                            - 30
                            - undefined
                            - Aucune des autres réponses
                            
                            Notes:
                            
                            <div class="spoiler">

L'output est `25`. En effet, le mot clé `new` crée un objet, et appelle la fonction `Student` avec ce nouvel objet comme contexte. La fonction `Student` crée une propriété `age` sur cet objet, mais retourne un autre objet. Si un constructeur ne retourne rien, c'est l'objet associé à son `this` qui sera retourné comme objet créé, mais si le constructeur retourne un objet, c'est celui-ci qui sera retourné. Donc l'output est `25`, puisque c'est la valeur de la propriété `age` de l'objet retourné par `Student`.
                                
                            </div>

## <i class="fas fa-question-circle"></i> Question 9

Quelle est la valeur imprimée par le programme suivant?

## <i class="fas fa-question-circle"></i> Question 11

Implémenter quelque chose de ressemblant à ce qui suit.
                            
                            <img src="http://github.com/OlivierLmr/hoster/blob/main/web-test-dummy-web.gif?raw=true" alt="gif of what should be recreated">

Les items doivent être des balises `<li>` avec un attribut nommé `hair` dont la valeur correspond à la couleur de cheveux de chaque personne dans la liste. Cliquer sur les boutons highlight les personnes aux cheveux de couleur correspondante.
                            
                            [Start](https://web-classroom.github.io/heig-vd-web-course/docs/99-examples/hairDomSelect.html) · [Solution](https://web-classroom.github.io/heig-vd-web-course/docs/99-examples/hairDomSelectSolution.html)

Notes:
                            
                            <div class="spoiler">

```html
                            <!DOCTYPE html>
                            <html>
                            <body>

<ul id="people_list">
                                    <li hair="brown">Jessie</li>
                                    <li hair="blonde">Blake</li>
                                    <li hair="brown">Charlie</li>
                                    <li hair="gray">Parker</li>
                                </ul>

<div id="metadata">
                                    <button class="brown" onclick="show('brown')">
                                        Brown hair
                                    </button>
                                    <button class="blonde" onclick="show('blonde')">
                                        Blonde hair
                                    </button>
                                    <button class="reset" onclick="reset()">
                                        Reset
                                    </button>
                                </div>

</body>
                            </html>
                            ```

CSS
                            ```css
                            html {
                                padding: 10px;
                                --button-background: #eef;
                                --button-hover-background: #dde;
                                --highlighted-li-background: #ffa
                            }
                            
                            #people_list {
                                display: flex;
                                flex-direction: column;
                                gap: 10px;
                                padding: 0;
                            }
                            
                            li {
                                list-style: none;
                                padding: 10px;
                                background: whitesmoke;
                                border-radius: 5px;
                            }
                            
                            #metadata {
                                display: grid;
                                grid-template-columns: 1fr 1fr 1fr;
                                gap: 10px;
                            }
                            
                            button {
                                border: none;
                                padding: 10px;
                                border-radius: 5px;
                                cursor: pointer;
                                background: var(--button-background)
                            }
                            
                            button:hover {
                                background: var(--button-hover-background)
                            }
                            
                            .selected {
                                background: var(--highlighted-li-background)
                            }
                            ```

```js
                            function show(color) {
                                reset()
                                elements = document.querySelectorAll(`li[hair="${color}"]`)
                                elements.forEach((e) => {
                                    e.classList.add("selected")
                                })
                            }
                            
                            function reset() {
                                elements = document.querySelectorAll(`li`)
                                elements.forEach((e) => {
                                    e.classList.remove("selected")
                                })
                            }
                            ```
                            
                            </div>

## <i class="fas fa-question-circle"></i> Question 12
                            
                            Modifiez le code suivant pour qu'il n'utilise plus la syntaxe de classes mais garde les mêmes fonctionnalités. En particulier, l'age ne doit pas être une valeur publique de l'objet.
                            
                            ```js
                            class Human {
                                #age
                            
                                constructor(age) {
                                    this.#age = age
                                }
                            
                                getAge() {
                                    return this.#age
                                }
                            
                                getOlder() {
                                    this.#age++
                                }
                            }
                            ```
                            
                            Notes:
                            
                            <div class="spoiler">

```js
                            function Human(age) {
                                let priv_age = age
                                
                                this.getAge = function() {
                                    return priv_age
                                }

this.getOlder = function() {
                                    priv_age++
                                }
                            }
                            ```
                                
                            </div>

Testing JavaScript Applications

##  <i class="fas fa-check-square"></i> Types of tests

Notes:

- **Unit tests**: Test a **separable unit of software** for correctness, independently of the larger software System. That unit is usually the smallest testable part of an application, and has a single and clear responsibility.
                            - **Integration tests**: Individual units of software that pass unit tests are **assembled together into components**. Integration tests ensure that the components made of different parts work correctly together. The units are considered correct, and the goal is to test that the interaction between them is correct for what we want the component to do.
                            - **System tests**: All the component that pass the integration tests are **assembled together into the system**. System tests verify the **end-to-end functionality** of the system. They are usually **hard to automate** and very expensive to implement and execute.