Skip to content
This repository was archived by the owner on Feb 28, 2023. It is now read-only.

Commit d542420

Browse files
bahmutovbahmutov
authored
style the loading element (#239)
1 parent d8b79a5 commit d542420

File tree

2 files changed

+91
-58
lines changed

2 files changed

+91
-58
lines changed

‎cypress/integration/11-retry-ability/answer.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -139,12 +139,21 @@ describe('Careful with negative assertions', { retries: 2 }, () => {
139139
// cy.intercept('/todos', { body: [], delayMs: 5000 })
140140
})
141141

142+
// this assertion can pass - but for the wrong reason
143+
// the indicator initially is NOT shown, thus this assertion
144+
// pass immediately, and probably not when the app finishes loading
145+
it('hides the loading element', () => {
146+
cy.visit('/')
147+
cy.get('.loading').should('not.be.visible')
148+
})
149+
142150
it('uses negative assertion and passes for the wrong reason', () => {
143151
cy.visit('/?delay=3000')
144152
cy.get('.loading').should('not.be.visible')
145153
})
146154

147-
it('use positive then negative assertion (flakey)', () => {
155+
// NOTE: skipping because it is flakey and slowing down the request is better
156+
it.skip('use positive then negative assertion (flakey)', () => {
148157
cy.visit('/?delay=3000')
149158
// first, make sure the loading indicator shows up (positive assertion)
150159
cy.get('.loading').should('be.visible')

‎todomvc/index.html‎

Lines changed: 81 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,90 @@
1-
<!doctype html>
1+
<!DOCTYPE html>
22
<html data-framework="vue">
3-
4-
<head>
5-
<meta charset="utf-8">
6-
<title>Vue.js • TodoMVC</title>
7-
<link rel="stylesheet" href="vendor/index.css">
8-
<!-- usually we can just let the browser load additional styles if the user's OS
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Vue.js • TodoMVC</title>
6+
<link rel="stylesheet" href="vendor/index.css" />
7+
<!-- usually we can just let the browser load additional styles if the user's OS
98
has preference for dark theme
109
<link rel="stylesheet" media="(prefers-color-scheme: dark)" href="vendor/dark.css">
1110
-->
12-
<!-- but to be able to control the dark theme load programmatically and from E2E tests
11+
<!-- but to be able to control the dark theme load programmatically and from E2E tests
1312
we need to use JavaScript and check preference using "window.matchMedia" call -->
14-
<script>
15-
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
16-
const link = document.createElement("link")
17-
link.type = "text/css";
18-
link.rel = "stylesheet";
19-
link.href = 'vendor/dark.css';
20-
document.head.appendChild(link)
21-
}
22-
</script>
23-
<style>
24-
[v-cloak] {
25-
display: none;
26-
}
27-
</style>
28-
</head>
13+
<script>
14+
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
15+
const link = document.createElement('link')
16+
link.type = 'text/css'
17+
link.rel = 'stylesheet'
18+
link.href = 'vendor/dark.css'
19+
document.head.appendChild(link)
20+
}
21+
</script>
22+
<style>
23+
[v-cloak] {
24+
display: none;
25+
}
26+
.loading-container {
27+
display: flex;
28+
justify-content: center;
29+
align-items: center;
30+
}
31+
.loading {
32+
padding: 1em;
33+
font-size: larger;
34+
font-weight: bolder;
35+
}
36+
</style>
37+
</head>
2938

30-
<body>
31-
<section class="todoapp">
32-
<header class="header">
33-
<h1 data-cy="app-title">todos</h1>
34-
<input class="new-todo" autofocus autocomplete="off" placeholder="What needs to be done?" :value="newTodo"
35-
@input="setNewTodo" @keyup.enter="addTodo">
36-
</header>
37-
<section class="main" v-show="todos.length" v-cloak>
38-
<ul class="todo-list">
39-
<li v-for="todo in todos" class="todo" :key="todo.id" :class="{ completed: todo.completed }">
40-
<div class="view">
41-
<input class="toggle" type="checkbox" v-model="todo.completed">
42-
<label>{{ todo.title }}</label>
43-
<button class="destroy" @click="removeTodo(todo)"></button>
44-
</div>
45-
</li>
46-
</ul>
39+
<body>
40+
<section class="todoapp">
41+
<header class="header">
42+
<h1 data-cy="app-title">todos</h1>
43+
<input
44+
class="new-todo"
45+
autofocus
46+
autocomplete="off"
47+
placeholder="What needs to be done?"
48+
:value="newTodo"
49+
@input="setNewTodo"
50+
@keyup.enter="addTodo"
51+
/>
52+
</header>
53+
<section class="main" v-show="todos.length" v-cloak>
54+
<ul class="todo-list">
55+
<li
56+
v-for="todo in todos"
57+
class="todo"
58+
:key="todo.id"
59+
:class="{ completed: todo.completed }"
60+
>
61+
<div class="view">
62+
<input class="toggle" type="checkbox" v-model="todo.completed" />
63+
<label>{{ todo.title }}</label>
64+
<button class="destroy" @click="removeTodo(todo)"></button>
65+
</div>
66+
</li>
67+
</ul>
68+
</section>
69+
<div class="loading-container">
70+
<div class="loading" v-show="loading">Loading data ...</div>
71+
</div>
4772
</section>
48-
<div class="loading" v-show="loading">Loading data ...</div>
49-
</section>
50-
<footer class="info">
51-
<p>Written by
52-
<a href="http://evanyou.me">Evan You</a>
53-
</p>
54-
<p>Part of
55-
<a href="http://todomvc.com">TodoMVC</a>
56-
</p>
57-
</footer>
58-
59-
<script src="vendor/polyfill.min.js"></script>
60-
<script src="vendor/vue.js"></script>
61-
<script src="vendor/vuex.js"></script>
62-
<script src="vendor/axios.min.js"></script>
63-
<script src="app.js"></script>
64-
</body>
73+
<footer class="info">
74+
<p>
75+
Written by
76+
<a href="http://evanyou.me">Evan You</a>
77+
</p>
78+
<p>
79+
Part of
80+
<a href="http://todomvc.com">TodoMVC</a>
81+
</p>
82+
</footer>
6583

84+
<script src="vendor/polyfill.min.js"></script>
85+
<script src="vendor/vue.js"></script>
86+
<script src="vendor/vuex.js"></script>
87+
<script src="vendor/axios.min.js"></script>
88+
<script src="app.js"></script>
89+
</body>
6690
</html>

0 commit comments

Comments
 (0)