+
+
+
+
+
+ Share your current project.
', + comments_count: 2, + comments: [ + { + id: 10, + level: 0, + user: 'carol', + time: 0, + time_ago: '1 hour ago', + content: 'Working on a React migration.
', + deleted: false, + comments: [], + }, + ], +}; + +const user = { + id: 'alice', + created: 'March 15, 2015', + karma: 4321, + about: 'Hello from Alice
', +}; + +async function mockApi(page: Page) { + await page.route('**/node-hnapi.herokuapp.com/**', async (route) => { + const url = route.request().url(); + let body: unknown = []; + if (url.includes('/item/1')) { + body = item; + } else if (url.includes('/user/alice')) { + body = user; + } else { + body = feed; + } + await route.fulfill({ + status: 200, + contentType: 'application/json', + body: JSON.stringify(body), + }); + }); +} + +test.beforeEach(async ({ page }) => { + await mockApi(page); +}); + +test('redirects the root to /news/1 and renders the feed', async ({ page }) => { + await page.goto('/'); + await expect(page).toHaveURL(/\/news\/1$/); + await expect(page.getByText('Ask HN: What are you working on?')).toBeVisible(); + await expect(page.getByText('A very interesting external article')).toBeVisible(); +}); + +test('navigates to an item detail with comments', async ({ page }) => { + await page.goto('/news/1'); + await page.getByRole('link', { name: 'Ask HN: What are you working on?' }).first().click(); + await expect(page).toHaveURL(/\/item\/1$/); + await expect(page.getByText('Share your current project.')).toBeVisible(); + await expect(page.getByText('Working on a React migration.')).toBeVisible(); +}); + +test('navigates to a user profile', async ({ page }) => { + await page.goto('/news/1'); + await page.getByRole('link', { name: 'alice' }).first().click(); + await expect(page).toHaveURL(/\/user\/alice$/); + await expect(page.getByText('Created March 15, 2015')).toBeVisible(); + await expect(page.getByText('Hello from Alice')).toBeVisible(); +}); + +test('toggles a theme in Settings and updates the wrapper class', async ({ page }) => { + await page.goto('/news/1'); + + // Default theme wrapper is present. + await expect(page.locator('div.default .wrapper')).toHaveCount(1); + + // Open settings via the cog icon and choose the Night theme. + await page.getByAltText('Settings').click(); + await page.getByLabel('Night').check(); + + await expect(page.locator('div.night .wrapper')).toHaveCount(1); + await expect(page.locator('div.default .wrapper')).toHaveCount(0); +}); diff --git a/react-app/index.html b/react-app/index.html new file mode 100644 index 000000000..a048bea80 --- /dev/null +++ b/react-app/index.html @@ -0,0 +1,66 @@ + + + + +
+
+
+ hello world
', + deleted: false, + comments: [], + ...overrides, + }; +} + +describe('Comment', () => { + it('renders content as HTML and the author link', () => { + renderWithProviders(parent comment
', + comments: [ + makeComment({ id: 2, user: 'child', content: 'child comment
' }), + ], + }); + renderWithProviders({message}
++ If you are offline viewing, you'll need to visit this page with a network connection first + before it can work offline. +
++ These are jobs at startups that were funded by Y Combinator. You can also get a job at + a YC startup through Triplebyte. +
+ )} +
+ 
+ + + {item.title} + + {item.domain && ({item.domain})} +
+ ) : ( ++ + {item.title} + +
+ )} +the body
', + text: '', + comments: [], + comments_count: 2, + poll: [], + poll_votes_count: 0, + deleted: false, + dead: false, + ...overrides, + }; +} + +describe('ItemDetails', () => { + afterEach(() => { + vi.resetAllMocks(); + }); + + it('renders the item content and its comments', async () => { + vi.mocked(hnApi.fetchItemContent).mockResolvedValue( + makeStory({ + comments: [ + { + id: 1, + level: 0, + user: 'bob', + time: 0, + time_ago: '1 hour ago', + content: 'nice post
', + deleted: false, + comments: [], + }, + ], + }) + ); + renderWithProviders(+ + {hasUrl ? ( + + {item.title} + + ) : ( + + {item.title} + + )} +
++ + {item.title} + + {item.domain && ({item.domain})} +
+ ) : ( ++ + {item.title} + +
+ )} +Founder of Y Combinator
', + }); + renderWithProviders(+ + Profile: {user.id} +
+Created {user.created}
+