maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[deploy] Fix Mod Center v1 bugs post-launch (#8883)

Browse source 
* 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 <ludwiczakpawel@gmail.com>

* 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 <ludwiczakpawel@gmail.com>
This commit is contained in:
Arit Amana 2020-06-26 11:50:55 -04:00 • committed by GitHub
parent 8e1dd6e323
commit 4f476c1c5a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 58 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
app/assets/stylesheets/moderators.scss
View file

@ -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 {

14
app/javascript/modCenter/singleArticle/index.jsx
View file

@ -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 (
<span className="mod-article-tag fs-s ff-accent lh-base" key={key}>
<span className="article-hash-tag">#</span>
{tag}
</span>
);
if (tag) {
return (
<span className="crayons-tag" key={key}>
<span className="crayons-tag__prefix">#</span>
{tag}
</span>
);
}
});
const newAuthorNotification = user.articles_count <= 3 ? '👋 ' : '';

53
app/javascript/modCenter/singleArticle/singleArticle.test.jsx
View file

@ -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('<SingleArticle />', () => {
const renderSingleArticle = (article = testArticle) =>
const renderSingleArticle = (article = testArticle1) =>
render(
<SingleArticle
id={article.title}
id={article.id}
title={article.title}
path={article.path}
publishedAt={article.publishedAt} // renders as Jun 28
@ -29,7 +44,7 @@ describe('<SingleArticle />', () => {
/>,
);
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('<SingleArticle />', () => {
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('<SingleArticle />', () => {
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('<SingleArticle />', () => {
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('<SingleArticle />', () => {
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('<SingleArticle />', () => {
const toggleArticle = jest.fn();
const { container } = render(
<SingleArticle
id={testArticle.title}
title={testArticle.title}
path={testArticle.path}
publishedAt={testArticle.publishedAt} // renders as Jun 28
cachedTagList={testArticle.cachedTagList}
user={testArticle.user}
id={testArticle1.id}
title={testArticle1.title}
path={testArticle1.path}
publishedAt={testArticle1.publishedAt} // renders as Jun 28
cachedTagList={testArticle1.cachedTagList}
user={testArticle1.user}
toggleArticle={toggleArticle}
/>,
);