From 4f476c1c5af3e3c87bbe2df5ee25eebce67176e2 Mon Sep 17 00:00:00 2001 From: Arit Amana <32520970+msarit@users.noreply.github.com> Date: Fri, 26 Jun 2020 11:50:55 -0400 Subject: [PATCH] [deploy] Fix Mod Center v1 bugs post-launch (#8883) * Fix article heading color on dark themes * Fix hash shoing when no article tags * Truncate article titles at 60 characters * Add tests for bug fixes, make sundry corrections * Refactor tests * Truncate title with CSS instead of JS * Use crayons tag over custom tag Co-authored-by: ludwiczakpawel * Add specific height to fix weird anchor tag issues * Add explicit pointer when hovering Co-authored-by: Zhao-Andy <17884966+Zhao-Andy@users.noreply.github.com> Co-authored-by: ludwiczakpawel --- app/assets/stylesheets/moderators.scss | 13 +++++ .../modCenter/singleArticle/index.jsx | 14 ++--- .../singleArticle/singleArticle.test.jsx | 53 +++++++++++++------ 3 files changed, 58 insertions(+), 22 deletions(-) diff --git a/app/assets/stylesheets/moderators.scss b/app/assets/stylesheets/moderators.scss index 7052db7dc..2c95246b4 100644 --- a/app/assets/stylesheets/moderators.scss +++ b/app/assets/stylesheets/moderators.scss @@ -41,6 +41,15 @@ border-width: 1px 0; display: grid; grid-template-columns: 4fr 2fr 1fr; + .article-title { + color: var(--base-90); + min-width: 0; + header > h3 { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + } .mod-article-tag { color: var(--base-80); padding-right: var(--su-2); @@ -707,6 +716,10 @@ #mod-center-other-options svg { width: var(--su-3); + height: var(--su-3); + &:hover { + cursor: pointer; + } } .mod-feedback { diff --git a/app/javascript/modCenter/singleArticle/index.jsx b/app/javascript/modCenter/singleArticle/index.jsx index 42e1a0b75..45aa42d43 100644 --- a/app/javascript/modCenter/singleArticle/index.jsx +++ b/app/javascript/modCenter/singleArticle/index.jsx @@ -31,12 +31,14 @@ export default class SingleArticle extends Component { const { articleOpened } = this.state; const { id, title, publishedAt, cachedTagList, user, key } = this.props; const tags = cachedTagList.split(', ').map((tag) => { - return ( - - # - {tag} - - ); + if (tag) { + return ( + + # + {tag} + + ); + } }); const newAuthorNotification = user.articles_count <= 3 ? '👋 ' : ''; diff --git a/app/javascript/modCenter/singleArticle/singleArticle.test.jsx b/app/javascript/modCenter/singleArticle/singleArticle.test.jsx index 50125a62f..fdd04a424 100644 --- a/app/javascript/modCenter/singleArticle/singleArticle.test.jsx +++ b/app/javascript/modCenter/singleArticle/singleArticle.test.jsx @@ -1,10 +1,11 @@ +/* eslint-disable jest/expect-expect */ import { h } from 'preact'; import { axe } from 'jest-axe'; import { render, getNodeText, fireEvent } from '@testing-library/preact'; import SingleArticle from './index'; -const testArticle = { +const testArticle1 = { id: 1, title: 'An article title', path: 'an-article-title-di3', @@ -16,11 +17,25 @@ const testArticle = { }, }; +const testArticle2 = { + id: 2, + title: + 'An article title that is quite very actually rather extremely long with all things considered', + path: + 'an-article-title-that-is-quite-very-actually-rather-extremely-long-with-all-things-considered-fi8', + publishedAt: '2019-06-24T09:32:10.590Z', + cachedTagList: '', + user: { + articles_count: 1, + name: 'howdy', + }, +}; + describe('', () => { - const renderSingleArticle = (article = testArticle) => + const renderSingleArticle = (article = testArticle1) => render( ', () => { />, ); - it('should have no a11y violations', async () => { + it('should have no a11y violations', async () => { const { container } = renderSingleArticle(); const results = await axe(container); expect(results).toHaveNoViolations(); @@ -38,7 +53,7 @@ describe('', () => { it('renders the article title', () => { const { queryByText } = renderSingleArticle(); - expect(queryByText(testArticle.title)).toBeDefined(); + expect(queryByText(testArticle1.title)).toBeDefined(); }); it('renders the tags', () => { @@ -49,10 +64,16 @@ describe('', () => { expect(queryByText('beginners')).toBeDefined(); }); + it('renders no tags or # symbol when article has no tags', () => { + const { container } = renderSingleArticle(testArticle2); + const text = getNodeText(container.querySelector('.article-title')); + expect(text).not.toContain('#'); + }); + it('renders the author name', () => { const { container } = renderSingleArticle(); const text = getNodeText(container.querySelector('.article-author')); - expect(text).toContain(testArticle.user.name); + expect(text).toContain(testArticle1.user.name); }); it('renders the hand wave emoji if the author has less than 3 articles ', () => { @@ -70,9 +91,9 @@ describe('', () => { it('renders the correct formatted published date as a time if the date is the same day', () => { const today = new Date(); today.setSeconds('00'); - testArticle.publishedAt = today.toISOString(); + testArticle1.publishedAt = today.toISOString(); - const { queryByText } = renderSingleArticle(testArticle); + const { queryByText } = renderSingleArticle(testArticle1); const readableTime = today.toLocaleTimeString().replace(':00 ', ' '); // looks like 8:05 PM expect(queryByText(readableTime)).toBeDefined(); @@ -85,9 +106,9 @@ describe('', () => { expect(iframes.length).toEqual(2); const [articleIframe, actionPanelIframe] = iframes; - expect(articleIframe.src).toContain(testArticle.path); + expect(articleIframe.src).toContain(testArticle1.path); expect(actionPanelIframe.src).toContain( - `${testArticle.path}/actions_panel`, + `${testArticle1.path}/actions_panel`, ); }); @@ -95,12 +116,12 @@ describe('', () => { const toggleArticle = jest.fn(); const { container } = render( , );