backend-development.github.io/slides_testing_and_refactoring.html at master · backend-development/backend-development.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">

    <title>Slides for
        Testing and Refactoring — Ruby on Rails Guides
    </title>
    <link rel="stylesheet" type="text/css" href="stylesheets/style.css" data-turbo-track="reload">
    <link rel="stylesheet" type="text/css" href="stylesheets/print.css" media="print">
    <link rel="stylesheet" type="text/css" href="stylesheets/highlight.css" data-turbo-track="reload">

		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<link rel="stylesheet" href="stylesheets/reset.css">
		<link rel="stylesheet" href="stylesheets/reveal.css">
		<link rel="stylesheet" href="stylesheets/myslide.css" id="theme">
    <link rel="stylesheet" href="stylesheets/code.css">
    <script src="javascripts/clipboard.js" data-turbo-track="reload"></script>
    <script src="javascripts/slides.js" data-turbo-track="reload"></script>

</head>

<body>
    <div class="reveal">
      <!-- Any section element inside of this container is displayed as a slide -->
      <div class="slides">
        <section>
            <h1>Testing and Refactoring</h1><p>This guide will explain why you should write tests
for your web application. It covers built-in mechanisms offered by Rails.
By referring to this guide, you will be able to:</p>
<ul>
<li>Understand Rails testing terminology</li>
<li>Write unit and integration tests for your application</li>
</ul>

<dd class="work-in-progress"><p>This chapter is still a work in progress. </p>
<p>You can help by reviewing the documents and posting your comments and corrections.</p></dd>

          <p><small>Slides - use arrow keys to navigate, esc to return to page view, f for fullscreen</small></p>

        </section>
        <section><a class='slide_break' href='testing_and_refactoring.html#slide-0'>▻</a>
<h2 id="why-test-questionmark"><a class="anchorlink" href="#why-test-questionmark"><span>1</span> Why Test?</a></h2>
<ul>
<li>to know if the program works (as specified)</li>
<li>to know if it still works after refactoring</li>
<li>to know if it still works after adding a new feature</li>
<li>to know if it still works ...</li>
</ul>
</section>
<section><a class='slide_break' href='testing_and_refactoring.html#slide-1'>▻</a>
<h3 id="for-beginners-two-testing-levels"><a class="anchorlink" href="#for-beginners-two-testing-levels"><span>1.1</span> for beginners: two testing levels</a></h3>
<ul>
<li>unit testing - models</li>
<li>integration testing - like a browser</li>
</ul>
</section>
<section><a class='slide_break' href='testing_and_refactoring.html#slide-2'>▻</a>
<h3 id="rails-and-testing"><a class="anchorlink" href="#rails-and-testing"><span>1.2</span> rails and testing</a></h3>
<ul>
<li>testing built in</li>
<li>scaffold creates (empty) tests</li>
<li>testing environment</li>
<li>run all tests with <code>rake:test</code></li>
<li>run all tests with <code>rake test TESTOPTS="-v"</code></li>
</ul>
</section>
<section><a class='slide_break' href='testing_and_refactoring.html#slide-3'>▻</a>
<h3 id="my-first-test"><a class="anchorlink" href="#my-first-test"><span>1.3</span> my first test</a></h3><div class="interstitial code">
<pre><code class="highlight ruby"><span class="c1"># in file test/unit/user_test.rb</span>
<span class="nb">test</span> <span class="s2">"no_stars is zero in new user"</span> <span class="k">do</span>
  <span class="n">u</span> <span class="o">=</span> <span class="no">User</span><span class="p">.</span><span class="nf">create!</span><span class="p">(</span><span class="ss">:first_name</span><span class="o">=&gt;</span><span class="s2">"John"</span><span class="p">,</span> <span class="ss">:last_name</span><span class="o">=&gt;</span><span class="s2">"Doe"</span><span class="p">)</span>
  <span class="n">assert</span> <span class="n">u</span><span class="p">.</span><span class="nf">no_stars</span> <span class="o">==</span> <span class="mi">0</span>
<span class="k">end</span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="# in file test/unit/user_test.rb
test &quot;no_stars is zero in new user&quot; do
  u = User.create!(:first_name=>&quot;John&quot;, :last_name=>&quot;Doe&quot;)
  assert u.no_stars == 0
end
">Copy</button>
</div>
</section>
<section><a class='slide_break' href='testing_and_refactoring.html#slide-4'>▻</a>
<h3 id="my-first-integration-test"><a class="anchorlink" href="#my-first-integration-test"><span>1.4</span> my first integration test</a></h3><div class="interstitial code">
<pre><code class="highlight ruby"><span class="nb">test</span> <span class="s2">"users are displayed"</span> <span class="k">do</span>
  <span class="n">u</span> <span class="o">=</span> <span class="no">User</span><span class="p">.</span><span class="nf">create!</span><span class="p">(</span><span class="ss">:first_name</span><span class="o">=&gt;</span><span class="s2">"Jane"</span><span class="p">,</span> <span class="ss">:last_name</span><span class="o">=&gt;</span><span class="s2">"Doe"</span><span class="p">)</span>
  <span class="n">visit</span> <span class="s2">"/users"</span>
  <span class="n">assert</span> <span class="n">page</span><span class="p">.</span><span class="nf">has_content?</span><span class="p">(</span><span class="s1">'Gib ein Sternchen!'</span><span class="p">)</span>
  <span class="n">assert</span> <span class="n">page</span><span class="p">.</span><span class="nf">has_content?</span><span class="p">(</span><span class="s1">'Jane Doe'</span><span class="p">)</span>
<span class="k">end</span>
</code></pre>
<button class="clipboard-button" data-clipboard-text="test &quot;users are displayed&quot; do
  u = User.create!(:first_name=>&quot;Jane&quot;, :last_name=>&quot;Doe&quot;)
  visit &quot;/users&quot;
  assert page.has_content?('Gib ein Sternchen!')
  assert page.has_content?('Jane Doe')
end
">Copy</button>
</div>
</section>
<section><a class='slide_break' href='testing_and_refactoring.html#slide-5'>▻</a>
<h3 id="see-documentation"><a class="anchorlink" href="#see-documentation"><span>1.5</span> see documentation</a></h3>
<ul>
<li><a href="https://guides.rubyonrails.org/testing.html">Guide to Testing Rails Applications</a></li>
<li><a href="https://topfunky.com/clients/rails/ruby_and_rails_assertions.pdf">Test::Unit Cheatsheet</a></li>
<li><a href="https://gist.github.com/3942267">Capybara Cheat Sheet</a></li>
</ul>
</section>
<section><a class='slide_break' href='testing_and_refactoring.html#slide-6'>▻</a>
<h2 id="test-driven-development-tdd"><a class="anchorlink" href="#test-driven-development-tdd"><span>2</span> Test Driven Development (TDD)</a></h2></section>
<section><a class='slide_break' href='testing_and_refactoring.html#slide-7'>▻</a>
<h3 id="what-is-test-first-questionmark"><a class="anchorlink" href="#what-is-test-first-questionmark"><span>2.1</span> what is "test first" ?</a></h3>
<ol>
<li>write a test (it fails)</li>
<li>write the implementation (test still fails)</li>
<li>fix the implementation </li>
<li>test passes: you're done!</li>
</ol>
</section>
<section><a class='slide_break' href='testing_and_refactoring.html#slide-8'>▻</a>
<h3 id="what-is-tdd-questionmark"><a class="anchorlink" href="#what-is-tdd-questionmark"><span>2.2</span> what is "TDD" ?</a></h3>
<ol>
<li>Q: what should the program do? </li>
<li>A: integration test. (write it. it fails)</li>
<li>Q: how should the program do it?</li>
<li>A: unit test. (write it. it fails)</li>
<li>implement the unit </li>
<li>does the unit test pass? if not, got back to 5</li>
<li>does the integration test pass? if not, go back to 3</li>
</ol>
</section>
<section><a class='slide_break' href='testing_and_refactoring.html#slide-9'>▻</a>
<h2 id="code-refactoring"><a class="anchorlink" href="#code-refactoring"><span>3</span> Code Refactoring</a></h2></section>
<section><a class='slide_break' href='testing_and_refactoring.html#slide-10'>▻</a>
<h3 id="what-is-code-refactoring-questionmark"><a class="anchorlink" href="#what-is-code-refactoring-questionmark"><span>3.1</span> what is "code refactoring" ?</a></h3>
<ul>
<li>"restructuring an existing body of code</li>
<li>altering its internal structure</li>
<li>without changing its external behavior"</li>
<li>or for short:</li>
<li>change your code:</li>
<li>but only how you do it,</li>
<li>not what you do.</li>
</ul>
</section>
<section><a class='slide_break' href='testing_and_refactoring.html#slide-11'>▻</a>
<h3 id="refactoring-and-testing"><a class="anchorlink" href="#refactoring-and-testing"><span>3.2</span> refactoring and testing</a></h3>
<ul>
<li>run the unit test (it should be green)</li>
<li>refactor</li>
<li>run the unit test (it should still be green)</li>
<li>done</li>
</ul>
</div></section>
      </div>
    </div>
    <!-- End slides. -->
    <!-- Required JS files. -->
		<script src="javascripts/reveal.js"></script>
		<script src="javascripts/search.js"></script>
		<script src="javascripts/markdown.js"></script>

    <script>
    // Also available as an ES module, see:
    // https://revealjs.com/initialization/
    Reveal.initialize({
      controls: false,
      progress: true,
      center: false,
      hash: true,

      // The "normal" size of the presentation, aspect ratio will
      // be preserved when the presentation is scaled to fit different
      // resolutions. Can be specified using percentage units.
      width: 1000,
      height: 600,
      disableLayout: false,

      // Factor of the display size that should remain empty around
      // the content
      margin: 0.05,

      // Bounds for smallest/largest possible scale to apply to content
      minScale: 0.2,
      maxScale: 10.0,

      keyboard: {
        27: () => {
          // do something custom when ESC is pressed
          var new_url = window.location.pathname.replace('slides_', '') + window.location.hash.replace('/','slide-');
          window.location = new_url;
        },
        191: 'toggleHelp',
        13: 'next', // go to the next slide when the ENTER key is pressed
      },

      // Learn about plugins: https://revealjs.com/plugins/
      plugins: [ RevealSearch, RevealMarkdown ]
    });
    </script>
</body>

</html>