+
+
+ 
-
-
-- These are jobs at startups that were funded by Y Combinator. - You can also get a job at a YC startup through Triplebyte. -
--
-
-
-
- -
-
- 
+ 
- A progressive Hacker News client built with Angular + A progressive Hacker News client built with React
@@ -14,52 +14,80 @@
-
+
- 
-
- 
-
+
+
+
+
Item body
', + comments_count: 2, + comments: [ + { + id: 1, + level: 0, + user: 'commenter', + time: 1600000001, + time_ago: '2 hours ago', + content: 'A top level comment
', + comments: [ + { + id: 2, + level: 1, + user: 'replier', + time: 1600000002, + time_ago: '1 hour ago', + content: 'A nested reply
', + comments: [], + }, + ], + }, + ], +}; + +export const user = { + id: 'author', + created: 'October 22, 2010', + karma: 4321, + about: 'All about the author
', +}; + +/** + * Serves deterministic fixtures for every Hacker News API call so the e2e run + * never depends on the live API. + */ +export async function mockHackerNewsApi(page: Page) { + await page.route(`${API}/**`, async (route) => { + const url = new URL(route.request().url()); + const [, resource, id] = url.pathname.split('/'); + const pageNumber = Number(url.searchParams.get('page') ?? '1'); + + if (resource === 'item') { + await route.fulfill({ json: { ...itemWithComments, id: Number(id) } }); + return; + } + + if (resource === 'user') { + await route.fulfill({ json: { ...user, id: String(id) } }); + return; + } + + await route.fulfill({ json: feedStories(resource, pageNumber) }); + }); +} diff --git a/e2e/protractor.conf.js b/e2e/protractor.conf.js deleted file mode 100644 index 73e4e6806..000000000 --- a/e2e/protractor.conf.js +++ /dev/null @@ -1,32 +0,0 @@ -// @ts-check -// Protractor configuration file, see link for more information -// https://github.com/angular/protractor/blob/master/lib/config.ts - -const { SpecReporter } = require('jasmine-spec-reporter'); - -/** - * @type { import("protractor").Config } - */ -exports.config = { - allScriptsTimeout: 11000, - specs: [ - './src/**/*.e2e-spec.ts' - ], - capabilities: { - 'browserName': 'chrome' - }, - directConnect: true, - baseUrl: 'http://localhost:4200/', - framework: 'jasmine', - jasmineNodeOpts: { - showColors: true, - defaultTimeoutInterval: 30000, - print: function() {} - }, - onPrepare() { - require('ts-node').register({ - project: require('path').join(__dirname, './tsconfig.json') - }); - jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); - } -}; \ No newline at end of file diff --git a/e2e/src/app.e2e-spec.ts b/e2e/src/app.e2e-spec.ts deleted file mode 100644 index 0897abab0..000000000 --- a/e2e/src/app.e2e-spec.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { AppPage } from './app.po'; -import { browser, logging } from 'protractor'; - -describe('workspace-project App', () => { - let page: AppPage; - - beforeEach(() => { - page = new AppPage(); - }); - - it('should display welcome message', () => { - page.navigateTo(); - expect(page.getTitleText()).toEqual('Welcome to angular-hnpwa!'); - }); - - afterEach(async () => { - // Assert that there are no errors emitted from the browser - const logs = await browser.manage().logs().get(logging.Type.BROWSER); - expect(logs).not.toContain(jasmine.objectContaining({ - level: logging.Level.SEVERE, - } as logging.Entry)); - }); -}); diff --git a/e2e/src/app.po.ts b/e2e/src/app.po.ts deleted file mode 100644 index 5776aa9eb..000000000 --- a/e2e/src/app.po.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { browser, by, element } from 'protractor'; - -export class AppPage { - navigateTo() { - return browser.get(browser.baseUrl) as Promise
+
+
+ - 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.title}} - - - {{item.title}} - -
-- - {{item.title}} - - ({{item.domain}}) -
- -{{ message }}
-If you are offline viewing, you'll need to visit this page with a network connection first before it can work offline.
-- - Profile: {{ user.id }} -
-Created {{ user.created }}
-
+ 
+ {`theme: ${settings.theme}`}
+ {settings.showSettings &&+ + {item.title} + + {item.domain && ({item.domain})} +
+ ) : ( +
+
-
-
- Top level comment
', + comments: [], + ...overrides, + }; +} + +function renderComment(comment: CommentModel) { + return render( +Top level comment
'); + expect(container.querySelector('.meta')).not.toHaveClass('meta-collapse'); + }); + + it('renders nested comments recursively', () => { + const comment = buildComment({ + content: 'level one', + comments: [ + buildComment({ + id: 2, + level: 1, + user: 'bob', + content: 'level two', + comments: [buildComment({ id: 3, level: 2, user: 'carol', content: 'level three' })], + }), + ], + }); + + const { container } = renderComment(comment); + + expect(screen.getByText('level one')).toBeInTheDocument(); + expect(screen.getByText('level two')).toBeInTheDocument(); + expect(screen.getByText('level three')).toBeInTheDocument(); + expect(container.querySelectorAll('.subtree')).toHaveLength(3); + + const firstSubtree = container.querySelector('.subtree'); + expect(within(firstSubtree as HTMLElement).getByRole('link', { name: 'bob' })).toBeInTheDocument(); + expect(within(firstSubtree as HTMLElement).getByRole('link', { name: 'carol' })).toBeInTheDocument(); + }); + + it('collapses and expands the comment content and its children', async () => { + const user = userEvent.setup(); + const comment = buildComment({ + content: 'parent', + comments: [buildComment({ id: 2, user: 'bob', content: 'child' })], + }); + + const { container } = renderComment(comment); + + expect(screen.getByText('parent')).toBeVisible(); + expect(screen.getByText('child')).toBeVisible(); + + await user.click(screen.getAllByText('[-]')[0]); + + expect(screen.getByText('[+]')).toBeInTheDocument(); + expect(container.querySelector('.meta')).toHaveClass('meta-collapse'); + expect(screen.getByText('parent')).not.toBeVisible(); + expect(screen.getByText('child')).not.toBeVisible(); + expect(screen.getByRole('link', { name: 'kate' })).toBeVisible(); + + await user.click(screen.getByText('[+]')); + + expect(screen.getAllByText('[-]')[0]).toBeInTheDocument(); + expect(container.querySelector('.meta')).not.toHaveClass('meta-collapse'); + expect(screen.getByText('parent')).toBeVisible(); + }); + + it('collapses a child independently of its parent', async () => { + const user = userEvent.setup(); + const comment = buildComment({ + content: 'parent', + comments: [buildComment({ id: 2, user: 'bob', content: 'child' })], + }); + + renderComment(comment); + + await user.click(screen.getAllByText('[-]')[1]); + + expect(screen.getByText('parent')).toBeVisible(); + expect(screen.getByText('child')).not.toBeVisible(); + }); + + it('renders the deleted state instead of the comment body', () => { + const { container } = renderComment( + buildComment({ deleted: true, content: 'should not be rendered', user: 'ghost' }) + ); + + expect(screen.getByText('[deleted]')).toHaveClass('collapse'); + expect(container.querySelector('.deleted-meta')?.textContent).toBe('[deleted] | Comment Deleted'); + expect(screen.queryByText('should not be rendered')).not.toBeInTheDocument(); + expect(screen.queryByRole('link', { name: 'ghost' })).not.toBeInTheDocument(); + expect(container.querySelector('.comment-tree')).toBeNull(); + }); + + it('renders deleted children inside a live comment tree', () => { + const comment = buildComment({ + content: 'parent', + comments: [buildComment({ id: 2, user: 'ghost', deleted: true, content: 'hidden' })], + }); + + renderComment(comment); + + expect(screen.getByText('parent')).toBeInTheDocument(); + expect(screen.getByText('[deleted]')).toBeInTheDocument(); + expect(screen.queryByText('hidden')).not.toBeInTheDocument(); + }); +}); diff --git a/src/item-details/Comment.tsx b/src/item-details/Comment.tsx new file mode 100644 index 000000000..77e6e03d4 --- /dev/null +++ b/src/item-details/Comment.tsx @@ -0,0 +1,49 @@ +import { useState } from 'react'; +import { NavLink } from 'react-router-dom'; + +import { Comment as CommentModel } from '../models/comment'; +import './comment.scss'; + +export interface CommentProps { + comment: CommentModel; +} + +export function Comment({ comment }: CommentProps) { + const [collapse, setCollapse] = useState(false); + + if (comment.deleted) { + return ( ++ These are jobs at startups that were funded by Y Combinator. You can also get a job at a YC + startup through Triplebyte. +
+ )} + {feedType !== 'new' && ( +story body
' })); + + const { container } = renderPage(); + await screen.findAllByText('A React story'); + + const mobileHeader = container.querySelector('.mobile.item-header') as HTMLElement; + + const mobileTitle = mobileHeader.querySelector('a.title'); + expect(mobileTitle).toHaveAttribute('href', 'https://example.com/story'); + expect(mobileTitle).not.toHaveAttribute('target'); + expect(mobileTitle).not.toHaveAttribute('rel'); + expect(mobileHeader.querySelector('.title-block .back-button')).not.toBeNull(); + + const laptopHeader = container.querySelector('.laptop') as HTMLElement; + expect(laptopHeader).toHaveClass('item-header'); + expect(laptopHeader).toHaveClass('head-margin'); + expect(laptopHeader.querySelector('a.title')).toHaveAttribute('href', 'https://example.com/story'); + expect(laptopHeader.querySelector('.domain')?.textContent).toBe('(example.com)'); + + const subtext = laptopHeader.querySelector('.subtext') as HTMLElement; + expect(subtext.textContent).toContain('120 points by'); + expect(subtext.querySelector('a[href="/user/alice"]')).not.toBeNull(); + expect(subtext.querySelector('.item-details')?.textContent).toContain('3 hours ago'); + expect(subtext.querySelector('a[href="/item/42"]')?.textContent).toBe('2 comments'); + + expect(container.querySelector('.subject')?.innerHTML).toBe('story body
'); + }); + + it('opens the story link in a new tab when the setting is enabled', async () => { + localStorage.setItem('openLinkInNewTab', 'true'); + fetchItemContentMock.mockResolvedValue(buildStory()); + + const { container } = renderPage(); + await screen.findAllByText('A React story'); + + container.querySelectorAll('a.title').forEach((title) => { + expect(title).toHaveAttribute('target', '_blank'); + expect(title).toHaveAttribute('rel', 'noopener'); + }); + }); + + it('links the title to the item itself when the story has no external url', async () => { + fetchItemContentMock.mockResolvedValue( + buildStory({ url: 'item?id=42', domain: undefined, comments_count: 0, content: undefined }) + ); + + const { container } = renderPage(); + await screen.findAllByText('A React story'); + + container.querySelectorAll('a.title').forEach((title) => { + expect(title).toHaveAttribute('href', '/item/42'); + }); + expect(container.querySelector('.domain')).toBeNull(); + expect(container.querySelector('.laptop')).not.toHaveClass('item-header'); + expect(container.querySelector('.laptop')).not.toHaveClass('head-margin'); + expect(container.querySelector('.subtext a[href="/item/42"]')?.textContent).toBe('discuss'); + expect(container.querySelector('.subject')?.innerHTML).toBe(''); + }); + + it('hides the points and comment count for job postings', async () => { + fetchItemContentMock.mockResolvedValue(buildStory({ type: 'job', comments_count: 0 })); + + const { container } = renderPage(); + await screen.findAllByText('A React story'); + + const subtext = container.querySelector('.laptop .subtext') as HTMLElement; + expect(subtext.textContent?.trim()).toBe('3 hours ago'); + expect(subtext.querySelector('.item-details')).toBeNull(); + expect(subtext.querySelector('a')).toBeNull(); + expect(container.querySelector('.laptop')).toHaveClass('item-header'); + }); + + it('renders poll results with bars sized from the vote share', async () => { + fetchItemContentMock.mockResolvedValue( + buildStory({ + type: 'poll', + poll: [ + { points: 30, content: 'Option A
' }, + { points: 10, content: 'Option B
' }, + ], + poll_votes_count: 40, + }) + ); + + const { container } = renderPage(); + await screen.findAllByText('A React story'); + + const pollContents = container.querySelectorAll('.pollResults .pollContent'); + expect(pollContents).toHaveLength(2); + expect(pollContents[0].textContent).toContain('Option A'); + expect(pollContents[0].querySelector('.subtext')?.textContent).toBe('30 points'); + expect(pollContents[0].querySelector
+ navigate(-1)}>
+ {hasUrl ? (
+
+ {item.title}
+
+ ) : (
+
+ + {item.title} + + {item.domain && ({item.domain})} +
+ ) : ( +
+
+ + Profile: {user.id} +
+Created {user.created}
+{`feed ${feedType} page ${page}`}
; + }; + return { FeedPage, default: FeedPage }; +}); + +vi.mock('./pages/ItemDetailsPage', () => { + const ItemDetailsPage = () => { + const { id } = useParams(); + return{`item ${id}`}
; + }; + return { ItemDetailsPage, default: ItemDetailsPage }; +}); + +vi.mock('./pages/UserPage', () => { + const UserPage = () => { + const { id } = useParams(); + return{`user ${id}`}
; + }; + return { UserPage, default: UserPage }; +}); + +function renderRoutes(initialEntry: string) { + stubMatchMedia(false); + vi.stubGlobal('scrollTo', vi.fn()); + + return render( +Y Combinator
indented', +}; + +function renderUserPage(entries: string[] = ['/user/pg'], initialIndex = 0) { + return render( +
Y Combinator
indented'); + }); + + it('omits the about section for a user without an about text', async () => { + fetchUserMock.mockResolvedValue({ id: 'lurker', created: '2 days ago', karma: 1 }); + + const { container } = renderUserPage(['/user/lurker']); + + await screen.findByText('Created 2 days ago'); + + expect(container.querySelector('.other-details')).toBeNull(); + }); + + it('shows an error message when the user could not be loaded', async () => { + fetchUserMock.mockRejectedValue(new Error('offline')); + + const { container } = renderUserPage(['/user/ghost']); + + expect(await screen.findByText('Could not load user ghost.')).toBeInTheDocument(); + expect(container.querySelector('.profile')).toBeNull(); + expect(container.querySelector('.loading-section')).toBeNull(); + }); + + it('goes back in the history when the back button is clicked', async () => { + fetchUserMock.mockResolvedValue(user); + + const { container } = renderUserPage(['/news/1', '/user/pg'], 1); + + await screen.findByText('Created 4230 days ago'); + + await userEvent.click(container.querySelector('.back-button') as HTMLElement); + + await waitFor(() => expect(screen.getByText('news feed')).toBeInTheDocument()); + }); + + it('does not fetch anything when the route carries no user id', () => { + const { container } = render( +
content
-
--
-
-
-