テスト駆動開発基本編

テスト駆動開発について解説します。なるべく書籍に書いてない内容を盛り込みました。まず基本的な内容から。その他編に続きます。

Transcript

1. テスト駆動開発 基本編
2. なぜTDDを行うか？ 楽にプログラミングをしたいからです！
3. 楽にプログラミングするには バグが少なく高品質な実装 リファクタリングによる高品質な設計 考え抜かれた開発手法の手順
4. アジャイルを使う場合のTDD アジャイルでは顧客を大切にしています 2週間に一度できた機能を顧客に見せる 変更要求は積極的に受ける できれば顧客に常駐してもらう
5. アジャイルを使う場合のTDD • 出来るならやっていたのでは？ ウォーターフォールでは顧客 を大切にしていなかった？ • 無理だから断っていたのでは？ 顧客の要求を全部聞いていた ら開発が炎上 • テスト駆動開発(TDD) 機能変更が非常にやりやすい 開発手法が不可欠
6. TDDの手順の詳細解説 レッド・グリーン・リファクタリング
7. 作業の流れ レッド まず自動テストを書く グリーン テストが成功する最小限のプログラムを書 く リファクタリング 機能を追加変更せず、単純作業の繰り返し で内部設計をわかりやすくする。
8. TDDのサイクル レッド グリーン リファクタ リング
9. TDDのサイクル レッド グリーン リファクタ リング レッド
10. TDDのサイクル レッド グリーン リファクタ リング グリーン
11. TDDのサイクル レッド グリーン リファク タリング リファクタ リング
12. TDDのサイクル レッド グリーン リファクタ リング レッド
13. TDDのサイクル レッド グリーン リファクタ リング グリーン
14. TDDのサイクル レッド グリーン リファク タリング リファクタ リング
15. TDDのサイクル レッド グリーン リファクタ リング レッド
16. TDDのサイクル レッド グリーン リファクタ リング グリーン
17. TDDのサイクル レッド グリーン リファク タリング リファクタ リング
18. TDDのサイクル レッド グリーン リファクタ リング
19. TDDの手順を説明 実際にTDDで作ってみます CSSを組み立てるDSL 小規模だが一部面倒 C#で
20. DSLの設計 DSL 生成 クラス CSS
21. DSLの設計 DSL 生成 クラス CSS ① 説明順
22. DSLの設計 DSL 生成 クラス CSS ① ② 説明順 説明順
23. レッド [Test] public void 指定したPathがプロパティとして取得できます() { var tested = new CssFile(@"C:¥File1.css"); Expect(tested.Path, Is.EqualTo(@"C:¥File1.css")); }
24. レッド public class CssFile { public string Path { get; } public CssFile(string path) { } }
25. public string Path { get; } public string Path { get { return @"C:¥File1.css"; } } グリーン
26. レッド [Test] public void 指定したPathがプロパティとして取得できます() { var tested = new CssFile(@"C:¥File1.css"); Expect(tested.Path, Is.EqualTo(@"C:¥File1.css")); } public void 指定したPathがプロパティとして取得できます() { var tested = new CssFile(@"C:¥File1.css"); Expect(tested.Path, Is.EqualTo(@"C:¥File1.css")); var tested2 = new CssFile(@"C:¥File2.css"); Expect(tested2.Path, Is.EqualTo(@"C:¥File2.css")); }
27. public string Path { get; set; } public CssFile(string path) { Path = path; } public string Path { get { return @"C:¥File1.css"; } } public CssFile(string path) { } グリーン
28. public string Path { get; set; } リファクタ リング public string Path { get; private set; }
29. レッド [Test] public void ToStringで基本的なCSSの出力ができます() { var tested = new CssStatement(); tested.Selectors = new[] { "H1" }; tested.Declarations = new Dictionary<string, string> { { "font-size", "12pt" } }; Expect(tested.ToString(), Is.EqualTo( @"H1 { font-size: 12pt }")); }
30. レッド public class CssStatement { public Dictionary<string, string> Declarations { get; set; } public string[] Selectors { get; set; } }
31. public Dictionary<string, string> Declarations { get; set; } public string[] Selectors { get; set; } public override string ToString() { return @"H1 { font-size: 12pt }"; } グリーン public Dictionary<string, string> Declarations { get; set; } public string[] Selectors { get; set; }
32. [Test] public void ToStringでセレクタの種類を見分けて出力に反映します() { var tested = new CssStatement(); tested.Selectors = new[] { "H2" }; tested.Declarations = new Dictionary<string, string> { { "font-size", "12pt" } }; Expect(tested.ToString(), Is.EqualTo( @"H2 { font-size: 12pt }")); } レッド
33. return $@"{Selectors[0]} {{ font-size: 12pt }}"; グリーン return @"H1 { font-size: 12pt }";
34. レッド public void ToStringで複数のセレクタを出力に反映します() { var tested = new CssStatement(); tested.Selectors = new[] { "H1", "H2" }; tested.Declarations = new Dictionary<string, string> { { "font-size", "12pt" } }; Expect(tested.ToString(), Is.EqualTo( @"H1, H2 { font-size: 12pt }")); }
35. return $@"{Selectors[0]} {{ font-size: 12pt }}"; グリーン return $@"{string.Join(", ",Selectors)} {{ font-size: 12pt }}";
36. public override string ToString() { return $@"{string.Join(", ",Selectors)} {{ font-size: 12pt }}"; } リファクタ リング public override string ToString() { return $@"{CssForSelectors()} {{ font-size: 12pt }}"; } private string CssForSelectors() { return string.Join(", ", Selectors); }
37. [Test] public void ToStringでプロパティの種類を出力に反映します() { var tested = new CssStatement(); tested.Selectors = new[] { "H1", "H2" }; tested.Declarations = new Dictionary<string, string> { { "line-height", "12pt" } }; Expect(tested.ToString(), Is.EqualTo( @"H1, H2 { line-height: 12pt }")); } レッド
38. return $@"{CssForSelectors()} {{ font-size: 12pt }}"; グリーン return $@"{CssForSelectors()} {{ {Declarations.Keys.First()}: 12pt }}";
39. [Test] public void ToStringで値を見て出力に反映します() { var tested = new CssStatement(); tested.Selectors = new[] { "H1", "H2" }; tested.Declarations = new Dictionary<string, string> { { "line-height", "10pt" } }; Expect(tested.ToString(), Is.EqualTo( @"H1, H2 { line-height: 10pt }")); } レッド
40. return $@"{CssForSelectors()} {{ {Declarations.Keys.First()}: {Declarations.Values.First()} }}"; グリーン return $@"{CssForSelectors()} {{ {Declarations.Keys.First()}: 12pt }}";
41. return $@"{CssForSelectors()} {{ {Declarations.Keys.First()}: {Declarations.Values.First()} }}"; return $@"{CssForSelectors()} {{ {Declarations.First().Key}: {Declarations.First().Value} }}"; リファクタ リング
42. private string CssForDeclaration(KeyValuePair<string, string> delaration) { return $"{delaration.Key}: {delaration.Value}"; } リファクタ リング
43. return $@"{CssForSelectors()} {{ {Declarations.First().Key}: {Declarations.First().Value} }}"; リファクタ リング return $@"{CssForSelectors()} {{ {CssForDelaration(Declarations.First())} }}";
44. [Test] public void ToStringで複数の特性を出力に反映します() { var tested = new CssStatement(); tested.Selectors = new[] { "H1", "H2" }; tested.Declarations = new Dictionary<string, string> { {"font-size", "12pt" }, {"line-height", "10pt" } }; Expect(tested.ToString(), Is.EqualTo( @"H1, H2 { font-size: 12pt; line-height: 10pt }")); } レッド
45. return $@"{CssForSelectors()} {{ {string.Join(";¥r¥n ", Declarations.Select(delaration => CssForDeclaration(delaration)))} }}"; グリーン return $@"{CssForSelectors()} {{ {CssForDeclaration(Declarations.First())} }}";
46. public override string ToString() { return $@"{CssForSelectors()} {{ {CssForDeclarationCollection()} }}"; } private string CssForDeclarationCollection() { return string.Join(";¥r¥n ", Declarations.Select(delaration => CssForDeclaration(delaration))); } public override string ToString() { return $@"{CssForSelectors()} {{ {string.Join(";¥r¥n ", Declarations.Select(delaration => CssForDelaration(delaration)))} }}"; } リファクタ リング
47. return string.Join(";¥r¥n ", Declarations.Select(delaration => CssForDelaration(delaration))); リファクタ リング return string.Join(";¥r¥n ", from delaration in Declarations select CssForDelaration(delaration));
48. private string CssForDelaration(KeyValuePair<string, string> delaration) { return $"{delaration.Key}: {delaration.Value}"; } private string CssForDelarationCollection() { return string.Join(";¥r¥n ", from delaration in Declarations select CssForDelaration(delaration)); } private string CssForDelarationCollection() { return string.Join(";¥r¥n ", from delaration in Declarations select $"{delaration.Key}: {delaration.Value}"); } リファクタ リング
49. [Test] public void ヘルパーを使ってCssが組み立てられます() { var tested = "H1".Css( font_size => "12pt", line_height => "10pt"); Expect(tested.ToString(), Is.EqualTo( @"H1 { font-size: 12pt; line-height: 10pt }")); } レッド
50. using CssWriter.Helpers; namespace CssWriter.Helpers { public static class ExtensionsForCssWriter { public static CssStatement Css( this string selector, params Func<string, string>[] decdeclarations) { return null; } } } レッド
51. var ret = new CssStatement(); ret.Selectors = new[] { "H1" }; ret.Declarations = new Dictionary<string, string> { {"font-size", "12pt" }, {"line-height", "10pt" } }; return ret; グリーン return null;
52. リファクタ リング return new CssStatement { Selectors = new[] { "H1" }, Declarations = new Dictionary<string, string> { {"font-size", "12pt" }, {"line-height", "10pt" } } }; var ret = new CssStatement(); ret.Selectors = new[] { "H1" }; ret.Declarations = new Dictionary<string, string> { {"font-size", "12pt" }, {"line-height", "10pt" } }; return ret;
53. [Test] public void Helperを使ったCssの組み立てではセレ クターの種類を反映します() { var tested = "H2".Css( font_size => "12pt", line_height => "10pt"); Expect(tested.ToString(), Is.EqualTo( @"H2 { font-size: 12pt; line-height: 10pt }")); } レッド
54. return new CssStatement { Selectors = new[] { selector }, Declarations = new Dictionary<string, string> { {"font-size", "12pt" }, {"line-height", "10pt" } } }; グリーン return new CssStatement { Selectors = new[] { "H1" }, Declarations = new Dictionary<string, string> { {"font-size", "12pt" }, {"line-height", "10pt" } } };
55. [Test] public void Helperを使ったCssの組み立てでは複数 のセレクターが指定できます() { var tested = new[] { "H1", "H2" }.Css( font_size => "12pt", line_height => "10pt"); Expect(tested.ToString(), Is.EqualTo( @"H1, H2 { font-size: 12pt; line-height: 10pt }")); } レッド
56. public static CssStatement Css(this string[] selector, params Func<string, string>[] declarations) { return null; } レッド
57. return new CssStatement { Selectors = selector, Declarations = new Dictionary<string, string> { {"font-size", "12pt" }, {"line-height", "10pt" } } }; グリーン return null;
58. リファクタ リング public static CssStatement Css(this IEnumerable<string> selector, params Func<string, string>[] declarations) { return new CssStatement { Selectors = selector.ToArray(), Declarations = new Dictionary<string, string> { {"font-size", "12pt" }, {"line-height", "10pt" } } }; } public static CssStatement Css(this string[] selector, params Func<string, string>[] declarations) { return new CssStatement { Selectors = selector, Declarations = new Dictionary<string, string> { {"font-size", "12pt" }, {"line-height", "10pt" } } }; }
59. リファクタ リング public static CssStatement Css(this string selector, params Func<string, string>[] declarations) { return Css(new[] { selector }, declarations); } public static CssStatement Css(this IEnumerable<string> selector, params Func<string, string>[] declarations) { return new CssStatement { Selectors = selector.ToArray(), Declarations = new Dictionary<string, string> { {"font-size", "12pt" }, {"line-height", "10pt" } } }; } public static CssStatement Css(this string selector, params Func<string, string>[] decdeclarations) { return new CssStatement { Selectors = new[] { selector }, Declarations = new Dictionary<string, string> { {"font-size", "12pt" }, {"line-height", "10pt" } } }; } public static CssStatement Css(this IEnumerable<string> selector, params Func<string, string>[] decdeclarations) { return new CssStatement { Selectors = selector.ToArray(), Declarations = new Dictionary<string, string> { {"font-size", "12pt" }, {"line-height", "10pt" } } }; }
60. [Test] public void Helperを使ったCssの組み立てでは特性を反映します() { var tested = "H2".Css( line_height => "12pt", font_size => "10pt"); Expect(tested.ToString(), Is.EqualTo( @"H2 { line-height: 12pt; font-size: 10pt }")); } レッド
61. グリーン public static CssStatement Css(this string selector, params Expression<Func<string, string>>[] declarations) { return Css(new[] { selector }, declarations); } public static CssStatement Css(this IEnumerable<string> selector, params Expression<Func<string, string>>[] declarations) { return new CssStatement { Selectors = selector.ToArray(), Declarations = new Dictionary<string, string> { {declarations[0].Parameters.Single().Name.Replace('_', '-'), "12pt" }, {declarations[1].Parameters.Single().Name.Replace('_', '-'), "10pt" } } }; } public static CssStatement Css(this string selector, params Func<string, string>[] declarations) { return Css(new[] { selector }, declarations); } public static CssStatement Css(this IEnumerable<string> selector, params Func<string, string>[] declarations) { return new CssStatement { Selectors = selector.ToArray(), Declarations = new Dictionary<string, string> { {"font-size", "12pt" }, {"line-height", "10pt" } } }; }
62. リファクタ リング private static string GetParameterName(Expression<Func<string, string>> declaration) { return declaration.Parameters.Single().Name.Replace('_', '-'); }
63. return new CssStatement { Selectors = selector.ToArray(), Declarations = new Dictionary<string, string> { {GetParameterName(declarations[0]), "12pt" }, {declarations[1].Parameters.Single().Name.Replace('_', '-'), "10pt" } } }; return new CssStatement { Selectors = selector.ToArray(), Declarations = new Dictionary<string, string> { {declarations[0].Parameters.Single().Name.Replace('_', '-'), "12pt" }, {declarations[1].Parameters.Single().Name.Replace('_', '-'), "10pt" } } }; リファクタ リング
64. リファクタ リング return new CssStatement { Selectors = selector.ToArray(), Declarations = new Dictionary<string, string> { {GetParameterName(declarations[0]), "12pt" }, {GetParameterName(declarations[1]), "10pt" } } }; return new CssStatement { Selectors = selector.ToArray(), Declarations = new Dictionary<string, string> { {GetParameterName(declarations[0]), "12pt" }, {declarations[1].Parameters.Single().Name.Replace('_', '-'), "10pt" } } };
65. private static string GetParameterName(Expression<Func<string, string>> declaration) => declaration.Parameters.Single().Name.Replace('_', '-'); private static string GetParameterName(Expression<Func<string, string>> declaration) { return declaration.Parameters.Single().Name.Replace('_', '-'); } リファクタ リング
66. [Test] public void Helperを使ったCssの組み立てでは値を反映します() { var tested = "H2".Css( font_size => "10pt", line_height => "12pt"); Expect(tested.ToString(), Is.EqualTo( @"H2 { font-size: 10pt; line-height: 12pt }")); } レッド
67. グリーン return new CssStatement { Selectors = selector.ToArray(), Declarations = new Dictionary<string, string> { {GetParameterName(declarations[0]), declarations[0].Compile().Invoke("") }, {GetParameterName(declarations[1]), declarations[1].Compile().Invoke("") } } }; return new CssStatement { Selectors = selector.ToArray(), Declarations = new Dictionary<string, string> { {GetParameterName(declarations[0]), "12pt" }, {GetParameterName(declarations[1]), "10pt" } } };
68. private static string GetValue(Expression<Func<string, string>> declaration) => declaration.Compile().Invoke(""); リファクタ リング
69. return new CssStatement { Selectors = selector.ToArray(), Declarations = new Dictionary<string, string> { {GetParameterName(declarations[0]), GetValue(declarations[0]) }, {GetParameterName(declarations[1]), declarations[1].Compile().Invoke("") } } }; return new CssStatement { Selectors = selector.ToArray(), Declarations = new Dictionary<string, string> { {GetParameterName(declarations[0]), declarations[0].Compile().Invoke("") }, {GetParameterName(declarations[1]), declarations[1].Compile().Invoke("") } } }; リファクタ リング
70. return new CssStatement { Selectors = selector.ToArray(), Declarations = new Dictionary<string, string> { {GetParameterName(declarations[0]), GetValue(declarations[0]) }, {GetParameterName(declarations[1]), GetValue(declarations[1]) } } }; return new CssStatement { Selectors = selector.ToArray(), Declarations = new Dictionary<string, string> { {GetParameterName(declarations[0]), GetValue(declarations[0]) }, {GetParameterName(declarations[1]), declarations[1].Compile().Invoke("") } } }; リファクタ リング
71. return new CssStatement { Selectors = selector.ToArray(), Declarations = new Dictionary<string, string> { {GetParameterName(declarations[0]), GetValue(declarations[0]) }, {GetParameterName(declarations[1]), GetValue(declarations[1]) } } }; return new CssStatement { Selectors = selector.ToArray(), Declarations = declarations.ToDictionary( declaration => GetParameterName(declaration), declaration => GetValue(declaration)) }; リファクタ リング
72. [Test] public void 指定したStatementsがプロパティとして取得できます() { var statements = new[] { new CssStatement() }; var tested = new CssFile(@"C:¥File1.css"); tested.Statements = statements; Expect(tested.Statements, Is.SameAs(statements)); } レッド
73. グリーン public class CssFile { public string Path { get; private set; } public CssStatement[] Statements { get; set; } public class CssFile { public string Path { get; private set; }
74. レッド [SetUp] public void SetUp() { if (File.Exists(@"C:¥File1.css")) { File.Delete(@"C:¥File1.css"); } } [Test] public void SaveでCssの保存ができます() { var tested = new CssFile(@"C:¥File1.css", new[] { "H1", "H2" }.Css( font_size => "12pt", line_height => "10pt")); tested.Save(); Expect(File.ReadAllText(@"C:¥File1.css"), Is.EqualTo( @"H1, H2 { font-size: 12pt; line-height: 10pt }")); }
75. レッド public class CssFile { public string Path { get; private set; } public CssStatement[] Statements { get; set; } public CssFile(string path) { Path = path; } } public class CssFile { CssStatement cssStatement; public string Path { get; private set; } public CssStatement[] Statements { get; set; } public CssFile(string path) { Path = path; } public CssFile(string path, CssStatement cssStatement) {} public void Save() {} }
76. グリーン public CssFile(string path, CssStatement cssStatement) : this(path) { this.cssStatement = cssStatement; } public void Save() { File.WriteAllText(Path, cssStatement.ToString()); } public CssFile(string path, CssStatement cssStatement) {} public void Save() {}
77. 実際のサンプル •https://github.com/potimarimo/m aterial-of-a-study- meeting/tree/master/CssWriter •履歴もだいたいそのままでおいてあり ます
78. 機能変更 レッド まず動作が変更になった機能のテストを 修正する グリーン テストが成功する最小限のプログラムを 書く リファクタ リング 機能を追加変更せず、単純作業の繰り返 しで内部設計をわかりやすくする。
79. 機能変更 レッド まず修正したい機能について、テストを修正する グリーン 修正したテストが通るようにプログラムを修正する レッド 通らなくなったテストを精査し、変えるべきものは変える グリーン テストがすべて通るようにプログラムを修正する リファクタ リング 機能を追加変更せず、単純作業の繰り返しで内部設計をわか りやすくする。
80. 考えるべきこと レッド • APIの外部設計 • APIの使い勝手 グリーン • とにかくできるだけ早くテストが通るよ うに実装 リファクタリング • 内部設計 • いかにわかりやすいコードにするか
81. 考えてはいけないこと レッド • 実装方法 • 実装しやすいかどうか • テストの網羅性 グリーン • きちんとしたわかりやすい設計 • アルゴリズムの正当性 • ミスしていないことを注意深く確認する リファクタ リング • 機能追加 • 機能変更 • ミスしていないことを注意深く確認する
82. を考えると 結局手順通りにも考えなくてはならないので無駄 手順に合わない時はまだ情報がそろっていない 手順に合わない時はまだ動作を確認できる環境がない 違う情報で二つ出した結論の整合性 考えてはいけないこと
83. アルゴリズムの正当性 リファクタリングで設計を整理している時に、足りないロジックは 目に見える レッドでそのロジックについてのテストを追加 グリーンで実装 リファクタリング