The document discusses the importance of testing in front-end development from a DevOps perspective, highlighting that deploying without tests is risky. It emphasizes various testing methodologies such as BDD and TDD, and promotes the use of consistent coding conventions. Additionally, it suggests leveraging automation tools and maintaining a culture of testing among developers to enhance code quality and efficiency.

1. Caesar Chi
戚務漢
從DevOps觀念看Web前端開發測試先⾏行
@clonncd
From devOps to front end Ops

2. What is DevOps

3. What is DevOps
Developer + Operation

5. http://goo.gl/ChbBTO

6. TEST IS ALL

7. Deploy without test, it is naked
沒有測試的佈署，就像是裸奔

8. –DevOps
“Any tests than none.”

9. Everything has test
(at least)
BDD, TDD, Unit test, XDD, Whatever

12. TestTestTest

13. TestTestTest?
Do you have ever front end test yet?

16. Trigger
Developer / QA/ Anyone
Open browser
Key / input / submit / mouse
Success / Fail

17. Trigger
Developer / QA/ Anyone
Open browser
Key / input / submit / mouse
Success / Fail
Deploy

18. Trigger
Developer / QA/ Anyone
Open browser
Key / input / submit / mouse
Success / Fail
DailyDeploy

19. Trigger
Developer / QA/ Anyone
Open browser
Key / input / submit / mouse
Success / Fail
DailyDeploy Feature

20. Trigger
Developer / QA/ Anyone
Open browser
Key / input / submit / mouse
Success / Fail
DailyDeploy Feature Hotfix

22. “Boss Driven Development.”
BDD

25. – John Doe
“If test is all,
why not test front end / UI.”

29. Convention
Controller
Compresser

30. Convention
“Everyone’s code, must be same code.”

31. + ‘use restrict’ JavaScript
$jscs .

32. HTML

33. CSS

34. use
ghooks
precommit-hook
to validate all things in local before commit

35. Convention
“Everyone’s code, must be same code.”
+ ‘use restrict’ JavaScript
HTML
CSS

36. Controller
“User Interface.”

37. https://gist.github.com/warpech/9431953

38. UI event
Logic function
Controller

39. UI event
Logic function
Controller

40. user input -> login -> Validate -> Auth -> success
result verify

41. user input -> login -> Validate -> Auth -> success
result verify
Mock data

42. Logic function
https://blog.codeship.com/mocha-js-chai-sinon-frontend-javascript-code-testing-tutorial/

43. Logic function (Angular)

44. Mock data
https://docs.angularjs.org/guide/unit-testing

45. – John Doe
“Make Test as Simple as Posible.”

46. UI event
Logic function
Controller

47. Code save
Open browser
…. // do sth
Success / Fail
Old school

48. , wait …
too heavy to run with browser.

51. Test save
Code save
Success / Fail
Welcome to 20 Century

52. Test save
Code save
Success / Fail

53. , you turn
run all test on real browser … GO
use WebDriver to trigger browser

54. No more extra code

55. No more extra code

56. protractor.conf.js

58. UI event
Logic function

59. UI event
Logic function
User basic behavior
Backend

60. Input
Logic function Backend
Output

61. UI event User basic behavior
Click
Select

62. Deploy
Compresser

64. concat minify

65. concat minify

68. concat minify

69. THEN ?

70. As Developer
• Keep test running
• Share test concept
• Build a jenkins server
• Keep your task done on time.
• Wash your boss’ brain.

71. You
We are here

72. As Manager
Push them, do the right thing
Make resource for developer,
ex, time, machine, env …

73. You
We are here

75. Effect

76. Code without Test

77. Code with Test

78. Compare
Test No test
Test more, keep test move on with logic complex, it is more easy figure out problem.
Then you will save more time

80. Front end Ops
• Face problem
• Accept Result
(fail / success)
• Refactor code
• Deploy code
• Trade off code