Weitere ähnliche Inhalte Ähnlich wie Programmers, communicate your intentions (20) Kürzlich hochgeladen (20) Programmers, communicate your intentions1. Yael Zaritsky Perez, Software Developer @ Wix
Software Developers, Communicate
Your Intentions!
(TL;DR: Do it Using Tests)
yaelz@wix.com twitter@zaritskyPe_yael linkedin/yael-zaritsky-perez github.com/yaelz
9. Don’t touch what
already works
Communicate
Why?
and need to feel comfortable to touch it
We work on existing codebase
21. describe('Feed’, () => {
it('should render a single blog post’, () => {...})
it('should filter by ...’, () => {...})
})
22. How quickly can
you understand
this?
it('should render a single blog post', async () => {
nock(baseURL).get('/experts-blog-posts')
.reply(200, [{ title: 'My epic blog post title', id:
13 }])
const { wrapper } = setup({})
const tab = queryByTestId(wrapper, 'feed-tab')
fireEvent.click(tab)
sideNavBarDriver.feedTab().click()
const feedDriver = feedDriverCreator(wrapper)
await expect(
queryByTestId(componentWrapper, `blog-post-
header-13`).textContent)
.toContain(‘My epic blog post title’)
})
23. it('should render a single blog post', async () => {
nock(baseURL)
.get('/experts-blog-posts')
.reply(200, [{ title: 'My epic blog post title', id: 13 }])
const { wrapper } = setup({})
const tab = queryByTestId(wrapper, 'feed-tab')
fireEvent.click(tab)
await expect(
queryByTestId(componentWrapper, `blog-post-header-13`).textContent)
.toContain(‘My epic blog post title’)
})
Before
24. it('should render a single blog post', async () => {
nock(baseURL)
.get('/experts-blog-posts')
.reply(200, [{ title: 'My epic blog post title', id: 13 }])
const { wrapper } = setup({})
const tab = queryByTestId(wrapper, 'feed-tab')
fireEvent.click(tab)
await expect(
queryByTestId(componentWrapper, `blog-post-header-13`).textContent)
.toContain(‘My epic blog post title’)
})
Before
Part 1
25. it('should render a single blog post', async () => {
nock(baseURL)
.get('/experts-blog-posts')
.reply(200, [{ title: 'My epic blog post title', id: 13 }])
const { wrapper } = setup({})
const tab = queryByTestId(wrapper, 'feed-tab')
fireEvent.click(tab)
await expect(
queryByTestId(componentWrapper, `blog-post-header-13`).textContent)
.toContain(‘My epic blog post title’)
})
Before
Part 2
26. it('should render a single blog post', async () => {
nock(baseURL)
.get('/experts-blog-posts')
.reply(200, [{ title: 'My epic blog post title', id: 13 }])
const { wrapper } = setup({})
const tab = queryByTestId(wrapper, 'feed-tab')
fireEvent.click(tab)
await eventually(async () => {
expect(
queryByTestId(wrapper, ‘blog-post-header-13’).textContent)
.toContain(‘My epic blog post title’)})
})
Before
Part 3
28. it('should render a single blog post on feed', async () => {
nock(baseURL)
.get('/experts-blog-posts')
.reply(200, [{ title: 'My epic blog post title', id: 13 }])
const { wrapper } = setup({})
const tab = queryByTestId(wrapper, 'feed-tab')
fireEvent.click(tab)
await eventually(async () => {
expect(
queryByTestId(wrapper, ‘blog-post-header-13’).textContent)
.toContain(‘My epic blog post title’)})
})
Refactoring...
30. Refactoring...
const { wrapper } = setup({})
const tab = queryByTestId(wrapper, 'feed-tab')
fireEvent.click(tab)
const { wrapper } = setup({})
const sideNavBarDriver = sideNavBarDriverCreator(wrapper)
sideNavBarDriver.clickOnFeedLink()
Part 2
32. it('should render a single blog post', async () => {
const wixBlogPost = createDisplayBlogPostWith({ id, title })
makeBlogPostServerReturn([wixBlogPost])
const { wrapper } = setup({})
const sideNavBarDriver = sideNavBarDriverCreator(wrapper)
sideNavBarDriver.clickOnFeedLink()
const feedDriver = feedDriverCreator(wrapper)
await expect(feedDriver.getTextForBlogPostHeader(id)).toContain(title)
})
Refactoring...
33. it('should render a single blog post', async () => {
const wixBlogPost = createDisplayBlogPostWith({ id, title })
makeBlogPostServerReturn([wixBlogPost])
const { wrapper } = setup({})
const sideNavBarDriver = sideNavBarDriverCreator(wrapper)
sideNavBarDriver.clickOnFeedLink()
const feedDriver = feedDriverCreator(wrapper)
await expect(feedDriver.getTextForBlogPostHeader(id)).toContain(title)
})
After
35. const getImageUrlsFromImgNames = imageNameArr =>
imageNameArr
.map(imageName => nameToImageUrlMap[imageName])
.filter(imageUrl => imageUrl)
It may seem redundant...
36. describe('getImageUrlsFromImgNames', () => {
.
.
.
it('should filter out imageNames that don’t exist in map', () => {
imageFilter.initMap({ anImageName: 'http://www.someImageUrl.jpg' })
const imageNameArray = ['imageNameNotInTheMap']
expect(imageFilter.getImageUrlsFromImgNames(imageNameArray)).toEqual([])
})
})
Now it’s clear
39. Live documentation
Tells the story
Explains edge cases
Prevents mistakes
Using Tests as
Documentation
Worth our time
Saves
It’s just a state of mind
40. “Any fool can write code that a computer
can understand. Good programmers write
code that humans can understand.“
-- Martin Fowler
43. Sources
Clean Code (pdf)
Software Devs, communicate your intentions (Blog post)
yaelz@wix.com twitter@zaritskyPe_yael linkedin/yael-zaritsky-perez github.com/yaelz