Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add announcements to news page #724

Merged
merged 16 commits into from
Aug 8, 2022

Conversation

jcbcapps
Copy link
Contributor

@jcbcapps jcbcapps commented Jul 29, 2022

SC-588

Proposed changes

Add the announcement component to the /news-announcements page


Reviewer notes

With published announcements in your local CMS, click the News link in the header:

  • This should take you to /news-announcements
  • You should see the announcements component displayed above a list of articles from the RSS feed

Setup

Make sure to have both the CMS and the portal client running on your local machine. You can do this by

  • Running yarn services:up && yarn dev in the CMS repo and
  • Running yarn dev in the portal client with this branch checked out

Also, make sure that you have some published announcements in your local CMS


Code review steps

As the original developer, I have

  • Met the acceptance criteria, or will meet them in subsequent PRs or stories
  • Created new stories in Storybook if applicable
    • Checked that all Storybook accessibility checks are passing
  • Created/modified automated unit tests in Jest
    • Including jest-axe checks when UI changes
  • Created/modified automated E2E tests in Cypress
    • Including cypress-axe checks when UI changes
  • Performed a11y testing:
    • Checked responsiveness in mobile, tablet, and desktop
    • Checked keyboard navigability
    • Tested with VoiceOver in Safari
    • Checked VO's rotor menu for landmarks, page heading structure and links
    • Used a browser a11y tool to check for issues (WAVE, axe, ANDI or Accessibility addon tab for Storybook)
  • Requested a design review for user-facing changes
  • For any new migrations/schema changes:
    • Followed guidelines for zero-downtime deploys

As code reviewer(s), I have

  • Pulled this branch locally and tested it
  • Reviewed this code and left comments
  • Checked that all code is adequately covered by tests
  • Made it clear which comments need to be addressed before this work is merged
  • Considered marking this as accepted even if there are small changes needed
  • Performed a11y testing:
    • Checked responsiveness in mobile, tablet, and desktop
    • Checked keyboard navigability
    • Tested with VoiceOver in Safari
    • Checked VO's rotor menu for landmarks, page heading structure and links
    • Used a browser a11y tool to check for issues (WAVE, axe, ANDI or Accessibility addon tab for Storybook)

As a designer reviewer, I have

  • Checked in the design translated visually
  • Checked behavior
  • Checked different states (empty, one, some, error)
  • Checked for landmarks, page heading structure, and links
  • Tried to break the intended flow
  • Performed a11y testing:
    • Checked responsiveness in mobile, tablet, and desktop
    • Checked keyboard navigability
    • Tested with VoiceOver in Safari
    • Checked VO's rotor menu for landmarks, page heading structure and links
    • Used a browser a11y tool to check for issues (WAVE, axe, ANDI or Accessibility addon tab for Storybook)

As a test user, I have

  • Run through the Test Script:
    • On commercial internet in IE11
    • On commercial internet in Firefox
    • On commercial internet in Chrome
    • On commercial internet in Safari
    • On NIPR in IE11
    • On NIPR in Firefox
    • On NIPR in Chrome
    • On NIPR in Safari
    • On a mobile device in Firefox
    • On a mobile device in Chrome
    • On a mobile device in Safari
  • Added any anomalous behavior to this PR

Screenshots

Screen Shot 2022-08-02 at 12 33 00 PM

@shortcut-integration
Copy link

This pull request has been linked to Shortcut Story #588: Add Announcements to News & Announcements page.

@jcbcapps jcbcapps changed the title [WIP]Sc 588/add announcements to news page feat: Add announcements to news page Aug 2, 2022
@jcbcapps jcbcapps marked this pull request as ready for review August 2, 2022 17:34
render(<ArticleListItem article={testArticle} />)
it('renders the article preview of a cms article', () => {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

curious what we're ignoring with this?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the LabelRecord type, there is a field named type and it's type (I know...confusing) is defined as 'Source' | 'Audience' | 'Base'. In the mock article for this file, I gave the type field a value of Source but it kept giving me an error saying that it doesn't match the type, but it does. Not sure why it wouldn't accept it, so I figured it would be fine to ignore the line since it's a test.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like if you add the type ArticleListItemRecord when defining the const cmsTestArticle it will recognize the SearchResultType correct.

const cmsTestArticle: ArticleListItemRecord = {
  id: 'testArticleId123',
  labels: [{ id: 'labelId', name: 'A Label', type: 'Source' }],
  ...
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You are correct. Fixed it!

@@ -6,12 +6,14 @@ describe('ORBIT Blog', () => {
beforeEach(() => {
cy.preserveLoginCookies()
cy.visit('/')
cy.injectAxe()
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

thought: I wonder if visit could be made to do this in addition to visiting the url. Though if we switch to playwright this might be moot.

Comment on lines +90 to +92
// Slider component in react-slick clones each item in the carousel,
// so a length of 2 is accurate
expect(screen.getAllByText('Test Announcement')).toHaveLength(2)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

praise: thanks for including the note again here! This is something I'd find confusing without one :)


const RSS_URL = `${SPACEFORCE_NEWS_RSS_URL}&max=12`

const NewsAnnouncements = ({
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Question: This PR is dependent on PR #723 correct?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Correct. I forgot to mention that in this PR. I'll be sure to merge that one first.

@jcbcapps jcbcapps merged commit 4481828 into main Aug 8, 2022
@jcbcapps jcbcapps deleted the sc-588/add-announcements-to-news-page branch August 8, 2022 16:32
@gidjin gidjin mentioned this pull request Aug 16, 2022
gidjin added a commit that referenced this pull request Aug 16, 2022
## [4.6.0](4.5.0...4.6.0) (2022-08-16)


### Features

* Add announcements to news page ([#724](#724)) ([4481828](4481828))
* Update URL for News & Announcements and News listing page ([#723](#723)) ([d9fed9e](d9fed9e))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants