La première règle des éléments de test est de ne jamais tester les éléments!
Il y a déjà eu beaucoup de disputes à ce sujet sur Habré, puis j'ai eu l'occasion d'apprendre cette leçon sur ma peau. J'ai envoyé la solution, mais je n'ai pas reçu de réponse. Même négatif. Rien. Bien sûr, tout peut être attribué à la crise, au fait que le poste vacant a été soudainement gelé (j'entends souvent cela ces derniers temps, mais les mêmes postes vacants continuent de se bloquer). Pourtant, la politesse banale aurait été plus que suffisante. La conclusion est sans ambiguïté: vous devez vérifier soigneusement la fiabilité de l'interlocuteur avant de mordre dans la TZ.
Néanmoins, j'ai délibérément franchi cette étape afin de me tester, d'acquérir une certaine expérience, même en cas d'échec avec l'employeur. L'article ne sera pas à ce sujet. Des difficultés avec la solution surviennent déjà au stade de la lecture de la déclaration technique. Parfois, vous ne savez même pas comment démarrer une tâche, et le choix que vous faites au début affectera toutes les étapes du développement.
Il existe de nombreux tutoriels sur la création d'art corporel en ligne, alors en quoi le mien sera-t-il différent? Premièrement, elles ne sont généralement pas faites selon la mission technique, ce qui signifie que les auteurs "coupent les coins" et, en général, ne se limitent à rien. Deuxièmement, il est rare de voir une explication des raisons pour lesquelles telle ou telle voie a été choisie pour résoudre le problème. Troisièmement, ma demande est d'un ordre de grandeur plus compliqué que la liste de tâches standard, plus à ce sujet plus tard.
Pour me familiariser avec la tâche que j'ai reçue, je demande sous le spoiler:
Tâche technique:
Utilisez Vue.js pour implémenter une petite application de prise de notes SPA.
Chaque note a un titre et une liste de choses à faire, puis Todo. Chaque élément Todo se compose d'une case à cocher et de sa signature textuelle associée.
L'application se compose de seulement 2 pages.
. Todo, , . :
( )
, Todo, . :
( )
( )
Todo:
:
.
( ) .
usability.
.
/ (Ctrl+Z, Command+Z, etc.).
:
"alert", "prompt" "confirm".
JavaScript TypeScript.
, , Webpack.
UI ( Vuetify).
, .
Vue-.
:
, , , , .
.
— . ( ). .
:
(GitHub, BitBucket, GitLab) .
. Dockerfile docker-compose.yaml, docker-compose up .
, . . , , , , ( ) , , .. , .
:
Vue.js SPA . : Vue CLI .
todo list, ( - Todo). Todo . - , : , .
2 . - Vue Router? . , , - . , , . , , ? - .
, :
. : , , . "" , Vue .
. SPA, Vue CLI.
( ) .
"alert", "prompt" "confirm".
Promise, . , . , , , . vue-modal-dialogs - , . Vue 3.
usability. , . , .
. - , , Cookie localStorage. , . localStorage. Vuex, , . , , .
JavaScript TypeScript. - ? , , Vue. TypeScript Vue 2 , . , Vue 3.
, ! Vue 2, , , .
, , Webpack. Vue CLI Webpack, SPA Vue.js
UI ( Vuetify) - . "" , Material Icons , . , , .
, . - flexbox .
Vue-. - : 2 , , , , - .
.
:
v-click-outside. . , . , . , - . , .
: , ? : , ? . Vue-Router . beforeRouteLeave . . , . , :
async beforeRouteLeave (to, from, next) {
if (await confirm('Do you realy want to leave this page?',
'All unsaved changes will be lost.')) {
this.clearNote()
next()
} else{
next(from)
}
}, .