VACMS-16290 Event Listing

playwright/tests/eventListing.spec.js

@@ -0,0 +1,21 @@
+const { test, expect } = require('../utils/next-test')
+
+test.describe('eventListing', () => {
+  test('eventListing page renders', async ({
+    page,
+  }) => {
+    await page.goto('/update-this-link')
+    await expect(page).toHaveURL('/update-this-link')
+  })
+
+  test('Should render without a11y errors', async ({
+    page,
+    makeAxeBuilder,
+  }) => {
+    await page.goto('/update-this-link')
+
+    const accessibilityScanResults = await makeAxeBuilder().analyze()
+
+    expect(accessibilityScanResults.violations).toEqual([])
+  })
+})

src/data/queries/eventListing.ts

@@ -0,0 +1,51 @@
+import { QueryData, QueryFormatter, QueryParams } from 'next-drupal-query'
+import { drupalClient } from '@/lib/drupal/drupalClient'
+import { queries } from '.'
+import { NodeEventListing } from '@/types/drupal/node'
+import { EventListing } from '@/types/formatted/eventListing'
+import { RESOURCE_TYPES } from '@/lib/constants/resourceTypes'
+import { ExpandedStaticPropsContext } from '@/lib/drupal/staticProps'
+import {
+  entityBaseFields,
+  fetchSingleEntityOrPreview,
+} from '@/lib/drupal/query'
+
+// Define the query params for fetching node--event_listing.
+export const params: QueryParams<null> = () => {
+  return queries
+    .getParams()
+  // uncomment to add referenced entity data to the response
+  // .addInclude([
+  //  'field_media',
+  //  'field_media.image',
+  //  'field_administration',
+  // ])
+}
+
+// Define the option types for the data loader.
+export type EventListingDataOpts = {
+  id: string
+  context?: ExpandedStaticPropsContext
+}
+
+// Implement the data loader.
+export const data: QueryData<EventListingDataOpts, NodeEventListing> = async (
+  opts
+): Promise<NodeEventListing> => {
+  const entity = (await fetchSingleEntityOrPreview(
+    opts,
+    RESOURCE_TYPES.EVENT_LISTING,
+    params
+  )) as NodeEventListing
+
+  console.log(entity)
+  return entity
+}
+
+export const formatter: QueryFormatter<NodeEventListing, EventListing> = (
+  entity: NodeEventListing
+) => {
+  return {
+    ...entityBaseFields(entity)
+  }
+}

src/data/queries/eventListingTeaser.ts

@@ -0,0 +1,33 @@
+import { QueryData, QueryFormatter, QueryParams } from 'next-drupal-query'
+import { drupalClient } from '@/lib/drupal/drupalClient'
+import { queries } from '.'
+import { NodeEventListingTeaser } from '@/types/drupal/node'
+import { EventListingTeaser } from '@/types/formatted/eventListingTeaser'
+import { RESOURCE_TYPES } from '@/lib/constants/resourceTypes'
+import { ExpandedStaticPropsContext } from '@/lib/drupal/staticProps'
+import {
+  fetchSingleEntityOrPreview,
+} from '@/lib/drupal/query'
+
+// Define the query params for fetching node--event_listing_teaser.
+export const params: QueryParams<null> = () => {
+  return queries
+    .getParams()
+    .addInclude(['field_media', 'field_media.image', 'field_listing'])
+}
+
+export const formatter: QueryFormatter<NodeEventListingTeaser, EventListingTeaser> = (
+  entity: NodeEventListingTeaser
+) => {
+  return {
+    id: entity.id,
+    type: entity.type,
+    published: entity.status,
+    headingLevel: 'h2',
+    title: entity.title,
+    image: queries.formatData('media--image', entity.field_media),
+    link: entity.path.alias,
+    introText: entity.field_intro_text,
+    lastUpdated: entity.field_last_saved_by_an_editor || entity.created,
+  }
+}

src/data/queries/index.ts

@@ -18,6 +18,8 @@ import * as StaticPathResources from './staticPathResources'
 import * as HeaderFooter from './headerFooter'
 import * as PromoBlock from './promoBlock'
 import * as Event from './event'
+import * as EventListing from './eventListing'
+import * as EventListingTeaser from './eventListingTeaser'
 import { RESOURCE_TYPES } from '@/lib/constants/resourceTypes'
 
 export const QUERIES_MAP = {
@@ -27,6 +29,8 @@ export const QUERIES_MAP = {
   'node--story_listing': StoryListing,
   'node--q_a': QuestionAnswer,
   'node--event': Event,
+  'node--event_listing': EventListing,
+  'node--event_listing--teaser': EventListingTeaser,
   'node--person_profile': PersonProfile,
   'node--landing_page': BenefitsHub, // "Benefits Hub Landing Page"
   'paragraph--audience_topics': AudienceTopics,

src/data/queries/tests/eventListing.test.tsx

@@ -0,0 +1,25 @@
+import { EventListing } from '@/types/drupal/node'
+import { queries } from '@/data/queries'
+import mockData from '@/mocks/EventListing.mock.json'
+
+const EventListingMock: EventListing = mockData
+
+describe('EventListing formatData', () => {
+  let windowSpy
+
+  beforeEach(() => {
+    windowSpy = jest.spyOn(window, 'window', 'get')
+  })
+
+  afterEach(() => {
+    windowSpy.mockRestore()
+  })
+
+  test('outputs formatted data', () => {
+    windowSpy.mockImplementation(() => undefined)
+
+    expect(
+      queries.formatData('node--event_listing', EventListingMock)
+    ).toMatchSnapshot()
+  })
+})

src/data/queries/tests/eventListingTeaser.test.tsx

@@ -0,0 +1,25 @@
+import { EventListingTeaser } from '@/types/drupal/node'
+import { queries } from '@/data/queries'
+import mockData from '@/mocks/EventListingTeaser.mock.json'
+
+const EventListingTeaserMock: EventListingTeaser = mockData
+
+describe('EventListingTeaser formatData', () => {
+  let windowSpy
+
+  beforeEach(() => {
+    windowSpy = jest.spyOn(window, 'window', 'get')
+  })
+
+  afterEach(() => {
+    windowSpy.mockRestore()
+  })
+
+  test('outputs formatted data', () => {
+    windowSpy.mockImplementation(() => undefined)
+
+    expect(
+      queries.formatData('node--event_listing_teaser', EventListingTeaserMock)
+    ).toMatchSnapshot()
+  })
+})

src/lib/constants/resourceTypes.ts

@@ -2,6 +2,7 @@ export const RESOURCE_TYPES = {
   STORY_LISTING: 'node--story_listing',
   STORY: 'node--news_story',
   EVENT: 'node--event',
+  EVENT_LISTING: 'node--event_listing'
   // QA: 'node--q_a',
 } as const
 

src/lib/utils/breadcrumbs.ts

@@ -72,7 +72,7 @@ export function filterInvalidCrumbs(
 }
 
 export const shouldHideHomeBreadcrumb = (resourceType) => {
-  const typesToShowHomeBreadcrumb = [RESOURCE_TYPES.EVENT]
+  const typesToShowHomeBreadcrumb = [RESOURCE_TYPES.EVENT, RESOURCE_TYPES.EVENT_LISTING]
 
   return !typesToShowHomeBreadcrumb.includes(resourceType)
 }

src/mocks/eventListing.mock.json

@@ -0,0 +1,4 @@
+{
+  "note": "Replace this data! The file should contain an example response for the desired query before formatting",
+  "example": "See src/mocks/newsStory.mock.json for an example response from va.gov-cms's JSON:API"
+}

src/mocks/eventListingTeaser.mock.json

@@ -0,0 +1,4 @@
+{
+  "note": "Replace this data! The file should contain an example response for the desired query before formatting",
+  "example": "See src/mocks/newsStory.mock.json for an example response from va.gov-cms's JSON:API"
+}

src/pages/[[...slug]].tsx

@@ -12,6 +12,7 @@
 import HTMLComment from '@/templates/globals/util/HTMLComment'
 import { shouldHideHomeBreadcrumb } from '@/lib/utils/breadcrumbs'
 import { Event } from '@/templates/layouts/event'
+import { EventListing } from '@/templates/layouts/eventListing'
 import { getStaticPathsByResourceType } from '@/lib/drupal/staticPaths'
 import { RESOURCE_TYPES } from '@/lib/constants/resourceTypes'
 import {
@@ -24,6 +25,7 @@
 import { LayoutProps } from '@/templates/globals/wrapper'
 import { NewsStory as FormattedNewsStory } from '@/types/formatted/newsStory'
 import { StoryListing as FormattedStoryListing } from '@/types/formatted/storyListing'
+import { EventListing as FormattedEventListing } from '@/types/formatted/eventListing'
 import { Event as FormattedEvent } from '@/types/formatted/event'
 import { Meta } from '@/templates/globals/meta'
 import { PreviewCrumb } from '@/templates/common/preview'
@@ -32,6 +34,7 @@
   RESOURCE_TYPES.STORY_LISTING,
   RESOURCE_TYPES.STORY,
   RESOURCE_TYPES.EVENT,
+  RESOURCE_TYPES.EVENT_LISTING,
 ] as const
 
 export type BuiltResourceType = (typeof RESOURCE_TYPES_TO_BUILD)[number]
@@ -51,8 +54,8 @@
   if (!resource) return null
   const comment = `
       --
       | resourceType: ${resource?.type || 'N/A'}
       | path: ${resource?.entityPath || 'N/A'}
       | entityId: ${resource?.entityId || 'N/A'}
       |
     `
@@ -85,6 +88,9 @@
           {/* {resource.type === RESOURCE_TYPES.QA && (
             <QuestionAnswer {...resource} />
           )} */}
+          {resource.type === RESOURCE_TYPES.EVENT_LISTING && (
+            <EventListing {...(resource as FormattedEventListing)} />
+          )}
           {resource.type === RESOURCE_TYPES.EVENT && (
             <Event {...(resource as FormattedEvent)} />
           )}

src/templates/layouts/eventListing/eventListing.stories.ts

@@ -0,0 +1,17 @@
+import { Meta, StoryObj } from '@storybook/react'
+
+import { EventListing } from './index'
+
+const meta: Meta<typeof EventListing> = {
+  title: 'Uncategorized/EventListing',
+  component: EventListing,
+}
+export default meta
+
+type Story = StoryObj<typeof EventListing>
+
+export const Example: Story = {
+  args: {
+    title: 'Hello World!'
+  },
+}

src/templates/layouts/eventListing/index.test.tsx

@@ -0,0 +1,11 @@
+import { render, screen } from '@testing-library/react'
+import { EventListing } from './index'
+
+
+describe('EventListing with valid data', () => {
+  test('renders EventListing component', () => {
+    render(<EventListing title={'Hello world'} />)
+
+    expect(screen.queryByText(/Hello world/)).toBeInTheDocument()
+  })
+})

src/templates/layouts/eventListing/index.tsx

@@ -0,0 +1,47 @@
+import { useEffect } from "react";
+
+type EventListingProps = {
+  title: string
+}
+
+export function EventListing({ title, fieldIntroText, entityUrl, facilitySidebar, reverseFieldListingNode, pastEvents }: EventListingProps) {
+  // useEffect(() => {
+  //   window.allEventTeasers = reverseFieldListingNode;
+  //   window.pastEvents = pastEvents;
+  // }, [reverseFieldListingNode, pastEvents]);
+  return (
+    <div>
+      <h1>EVENT LISTING</h1>
+      <p>{title}</p>
+    </div>
+
+    // <div className="interior vads-u-padding-bottom--3" id="content">
+    //   <main className="va-l-detail-page va-facility-page">
+    //     <div className="usa-grid usa-grid-full">
+    //       <div className="events vads-u-display--flex vads-u-flex-direction--column vads-u-padding-x--1p5 medium-screen:vads-u-padding-x--0 vads-u-padding-bottom--2">
+    //         <h1 id="article-heading">{title}</h1>
+    //         <div className="va-introtext">
+    //           {fieldIntroText && (
+    //             <p className="events-show" id="office-events-description">
+    //               {fieldIntroText}
+    //             </p>
+    //           )}
+    //         </div>
+    //       </div>
+    //       <div data-widget-type="events"></div>
+    //     </div>
+    //   </main>
+    //   <div className="usa-grid usa-grid-full">
+    //     <div className="last-updated vads-u-padding-x--1 large-screen:vads-u-padding-x--0">
+    //       <div className="vads-u-display--flex above-footer-elements-container">
+    //         <div className="vads-u-flex--1 vads-u-text-align--right">
+    //           <span className="vads-u-text-align--right">
+
+    //           </span>
+    //         </div>
+    //       </div>
+    //     </div>
+    //   </div>
+    // </div>
+  )
+}

src/types/drupal/node.ts

@@ -56,6 +56,7 @@ export type NodeTypes =
   | NodeSupportResourcesDetailPage
   | NodeSupportService
   | NodeEvent
+  | NodeEventListing
 
 /** Node resource types. */
 export const enum NodeResourceType {
@@ -68,6 +69,7 @@ export const enum NodeResourceType {
   PromoBanner = 'node--promo_banner',
   QuestionAnswer = 'node--q_a',
   StoryListing = 'node--story_listing',
+  EventListing = 'node--event_lising',
   SupportResourcesDetailPage = 'node--support_resources_detail_page',
 }
 

src/types/formatted/eventListing.ts

@@ -0,0 +1,3 @@
+export type EventListing = {
+  title: string
+}

src/types/formatted/eventListingTeaser.ts

@@ -0,0 +1,3 @@
+export type EventListingTeaser = {
+  title: string
+}