Описание ручных тестов для навигации и таймера: отдельно и в сочетании

1. Legend.md

Условия

Термины, договорённости и описание тестовой презентации.

Состояния

• Список (список слайдов)
• Презентация (один слайд, ?full в адресе)
• Текущий слайд (ID слайда в адресе, может быть и в Списке, и в Презентации)

Для узнаваемости пишутся с большой буквы.

Простые события

• Вперёд (следующий слайд) Right, Space, J
• Назад (предыдущий слайд) Left, Shift-Space, K
• Выход (из Презентации в Список) Esc
• Вход (в Презентацию из Списка) Click, Enter по Текущему слайду
• Перезагрузка (адрес сохраняется) Cmd-R
• Таймер (длительность слайда в секундах)
• Таймер÷N (длительность каждого пункта навигации. На самом деле формула Таймер÷(N+1)
• Ничего (ожидание, без действий)

Все события выполняются без существенных пауз (до секунды), единственная пауза — событие Ничего, которое производится для проверки работы таймера.

Кастомные события

• F5 в Списке делает Вход с первого слайда
• F5 в Презентации делает Выход
• Shift-F5 в Списке делает Вход с Текущего или первого слайда

Тестовый документ

• Содержит три слайда: A B C
• Кладётся в папку shower/themes/ribbon
• Сам тестовый файл см. ниже

2. Navigation.md

Поведение навигации

В следующих тестах на слайде B есть изначально скрытые пункты навигации: B1, B2, B3, но нет никаих таймеров, вся навигация производится вручную.

Шаги по схеме: N. Шаг — Результат (подробности)

1. Проход вперёд

1. Вход A — A в Презентации
2. Вперёд — B
3. Вперёд — B1 появляется
4. Вперёд — B2 появляется
5. Вперёд — B3 появляется
6. Вперёд — C

2. Проход назад

1. Вход C — C в Презентации
2. Назад — B пустой
3. Назад — A

3. Проход вперёд до конца пунктов и назад

1. Вход A — A в Презентации
2. Вперёд — B пустой
3. Вперёд — B1
4. Вперёд — B2
5. Вперёд — B3
6. Назад — A

Появление последнего пункта внутренней навигации закрывает её и слайд становится цельным.

4. Полный проход вперёд и назад

1. Вход A — A в Презентации
2. Вперёд — B
3. Вперёд — B1 появляется
4. Вперёд — B2 появляется
5. Вперёд — B3 появляется
6. Вперёд — C
7. Назад — B с открытыми B1-3
8. Назад — A

На шаге 6 навигация закрыта и пункты всегда видимы до Перезагрузки.

5. Перезагрузка страницы

1. Вход B — B в Презентации
2. Вперёд — B1
3. Перезагрузка — B пустой

Перезагрузка стирает любую историю навигации. Перезагрузка теста №4 (см. ранее) на шаге 8 возвращает всё к шагу 1.

3. Timer.md

Поведение таймера

В следующих тестах с таймером у слайда B есть атрибут data-timing="00:05". Внутренней навигации у слайдов нет. После каждого теста нужно ждать не меньше 5 секунд, чтобы убедиться, что нет ненужного срабатывания таймера.

Шаги по схеме: N. Шаг — Результат (подробности)

1. Проход с начала до конца через таймер

1. Вход A — A в Презентации
2. Вперёд — B (пуск Таймера)
3. Ничего — C (через Таймер)

2. Проход с конца до таймера и дальше

1. Вход C — C в Презентации
2. Назад — B (пуск Таймера)
3. Ничего — С (через Таймер)

3. Сброс таймера движением Вперёд

1. Вход A — A в Презентации
2. Вперёд — B (пуск Таймера)
3. Вперёд — C (сразу, сброс Таймера)
4. Ничего — C

4. Сброс таймера движением Назад

1. Вход A — A в Презентации
2. Вперёд — B (пуск Таймера)
3. Назад — A (сразу, сброс Таймера)
4. Ничего — A

5. Проход с конца до начала вручную

1. Вход C — C в Презентации
2. Назад — B (пуск Таймера)
3. Назад — A (сброс Таймера)

6. Выход из таймера

1. Вход A — A в Презентации
2. Вперёд — B (пуск Таймера)
3. Выход — B текущий в Списке (сброс Таймера)
4. Ничего — B текущий в Списке

7. Выход из таймера и вход обратно

1. Вход A — A в Презентации
2. Вперёд — B (пуск Таймера)
3. Выход — B текущий в Списке (сброс Таймера)
4. Ничего — B текущий в Списке
5. Вход — B в Презентации (пуск Таймера)
6. Ничего — C (через Таймер)

8. Перезагрузка страницы

1. Вход A — A в Презентации
2. Вход B — B (пуск Таймера)
3. Перезагрузка — B пустой (пуск Таймера)
4. Ничего — C (через Таймер)

4. Navigation+Timer.md

Поведение навигации с таймером

В следующих тестах с таймером у слайда B есть атрибут data-timing="00:05" и изначально скрытые пункты навигации: B1, B2, B3. В этом случае Таймер÷N равен 1,25 секунды (5/(3+1))

Шаги по схеме: N. Шаг — Результат (подробности)

1. Проход с начала до конца через таймер

1. Вход A — A в Презентации
2. Вперёд — B (пуск Таймера)
3. Ничего — B1 (через Таймер÷N)
4. Ничего — B2 (через Таймер÷N)
5. Ничего — B3 (через Таймер÷N)
6. Ничего — C (через Таймер÷N)

2. Сброс таймера движением Вперёд

1. Вход A — A в Презентации
2. Вперёд — B (пуск Таймера)
3. Ничего — B1 (через Таймер÷N)
4. Вперёд — B2 (сразу, сброс Таймера)
5. Ничего — B2

Шаг №4 производится сразу после шага №3, до автоматического появления B2.

3. Сброс таймера движением Назад

1. Вход A — A в Презентации
2. Вперёд — B (пуск Таймера)
3. Ничего — B1 (через Таймер÷N)
4. Ничего — B2 (через Таймер÷N)
5. Назад — B1 (сразу, сброс Таймера)
6. Ничего — B1

Шаг №5 производится сразу после шага №4, до автоматического появления B3.

4. Проход с начала до конца вручную

1. Вход A — A в Презентации
2. Вперёд — B (пуск Таймера)
3. Вперёд — B1 (сразу, сброс Таймера)
4. Вперёд — B2
5. Вперёд — B3
6. Вперёд — C

5. Проход с конца до начала вручную

1. Вход C — C в Презентации
2. Назад — B (пуск Таймера)
3. Назад — A (сброс Таймера)

6. Проход с конца до таймера

1. Вход C — C в Презентации
2. Назад — B (пуск Таймера)
3. Ничего — B1 (через Таймер÷N)
4. Ничего — B2 (через Таймер÷N)
5. Ничего — B3 (через Таймер÷N)
6. Ничего — C (через Таймер÷N)

7. Выход из таймера

1. Вход A — A в Презентации
2. Вперёд — B (пуск Таймера)
3. Выход — B текущий в Списке, с открытыми B1-3 (сброс Таймера)
4. Ничего — B текущий в Списке

Шаг №3 выполняется сразу после №2, до появления B1.

8. Выход из таймера и вход обратно

1. Вход A — A в Презентации
2. Вперёд — B (пуск Таймера)
3. Ничего — B1 (через Таймер÷N)
4. Ничего — B2 (через Таймер÷N)
5. Выход — B текущий в Списке с открытыми B1-3 (сброс Таймера)
6. Ничего — B текущий в Списке
7. Вход — B в Презентации с открытыми B1-2 (пуск Таймера)
8. Ничего — B3 (через Таймер÷N)
9. Ничего — C (через Таймер÷N)

9. Перезагрузка страницы

1. Вход A — A в Презентации
2. Вход B — B (пуск Таймера)
3. Ничего — B1 (через Таймер÷N)
4. Перезагрузка — B пустой (пуск Таймера)
5. Ничего — B1 (через Таймер÷N)
6. Ничего — B2 (через Таймер÷N)
7. Ничего — B3 (через Таймер÷N)
8. Ничего — C (через Таймер÷N)

6. Test Nav.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Ribbon theme for Shower</title>
    <meta charset="utf-8">
	<meta name="viewport" content="width=792, user-scalable=no">
	<link rel="stylesheet" href="styles/screen.css">
	<link rel="stylesheet" href="styles/print.css" media="print">
</head>
<body class="list debug">

	<section class="slide" id="A"><div>
		<h2>A</h2>
	</div></section>

	<section class="slide" id="B"><div>
		<h2>B</h2>
		<ol>
			<li class="next">B1</li>
			<li class="next">B2</li>
			<li class="next">B3</li>
		</ol>
	</div></section>

	<section class="slide" id="C"><div>
		<h2>C</h2>
	</div></section>

	<section class="slide" id="D"><div>
		<h2>D</h2>
	</div></section>

	<div class="progress"><div></div></div>
	<script src="../../shower.js"></script>

</body>
</html>

7. Test Timer.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Ribbon theme for Shower</title>
    <meta charset="utf-8">
	<meta name="viewport" content="width=792, user-scalable=no">
	<link rel="stylesheet" href="styles/screen.css">
	<link rel="stylesheet" href="styles/print.css" media="print">
</head>
<body class="list debug">

	<section class="slide" id="A"><div>
		<h2>A</h2>
	</div></section>

	<section class="slide" data-timing="0:2" id="B"><div>
		<h2>B</h2>
	</div></section>

	<section class="slide" id="C"><div>
		<h2>C</h2>
	</div></section>

	<section class="slide" id="D"><div>
		<h2>D</h2>
	</div></section>

	<div class="progress"><div></div></div>
	<script src="../../shower.js"></script>

</body>
</html>

8. Test Nav+Timer.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Ribbon theme for Shower</title>
    <meta charset="utf-8">
	<meta name="viewport" content="width=792, user-scalable=no">
	<link rel="stylesheet" href="styles/screen.css">
	<link rel="stylesheet" href="styles/print.css" media="print">
</head>
<body class="list debug">

	<section class="slide" id="A"><div>
		<h2>A</h2>
	</div></section>

	<section class="slide" data-timing="0:5" id="B"><div>
		<h2>B</h2>
		<ol>
			<li class="next">B1</li>
			<li class="next">B2</li>
			<li class="next">B3</li>
		</ol>
	</div></section>

	<section class="slide" id="C"><div>
		<h2>C</h2>
	</div></section>

	<section class="slide" id="D"><div>
		<h2>D</h2>
	</div></section>

	<div class="progress"><div></div></div>
	<script src="../../shower.js"></script>

</body>
</html>