publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-02-23 18:14:19 -08:00
Code Issues Projects Releases Packages Wiki Activity Actions

Make all page endpoints constants

Browse source 
- fix all cypress tests
- refactor all test to use LegacyTests/constants/PAGES_ENDPOINTS
- gatsby-config to use PAGES_ENDPOINTS
- remove ScoreStepList component
- update J40Header to use constants.PAGES_ENDPOINTS
- update snapshots
- there are 3 locations to update PAGES_ENDPOINTS, namely

1. LegacyTests/constants.tsx
2. constants.tsx
3. gatsby-config
This commit is contained in:
Vim USDS 2022-04-04 20:47:17 -07:00
parent 32f2609dde
commit abf49a9cbc
27 changed files with 93 additions and 163 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
client/cypress/integration/About.feature
View file

@ -7,7 +7,7 @@ Feature: The About page will open from all other pages
Then I see "About" in the title
Scenario: About page open when navigating from Explore the Tool page
Given I am on the "Explore the tool" page
Given I am on the "Explore" page
When I click on the "About" dropdown in the navigation
When I click on the "About" page in the navigation
Then I see "About" in the title

8
client/cypress/integration/Contact.feature
View file

@ -5,10 +5,10 @@ Feature: The Contact page will open from all other pages
When I click on the "Contact" page in the navigation
Then I see "Contact" in the title
# Scenario: Contact page open when navigating from Explore the tool page
# Given I am on the "Explore the tool" page
# When I click on the "Contact" page in the navigation
# Then I see "Contact" in the title
Scenario: Contact page open when navigating from Explore the tool page
Given I am on the "Explore" page
When I click on the "Contact" page in the navigation
Then I see "Contact" in the title
Scenario: Contact page open when navigating from Methodology page
Given I am on the "Methodology" page

13
client/cypress/integration/LegacyTests/accessibility.test.js
View file

@ -12,14 +12,11 @@
*
*/
const endpoints = [
'en/',
'en/cejst',
'en/methodology',
'en/contact',
'en/404',
'en/public-engagement',
];
import {PAGES_ENDPOINTS} from './constants';
const rawEndpoints = Object.values(PAGES_ENDPOINTS);
const endpoints = rawEndpoints.map((endpoint) => `en${endpoint}`);
// The violation callback will post the violations into the terminal
// eslint-disable-next-line require-jsdoc

10
client/cypress/integration/LegacyTests/allLinks.spec.js
View file

@ -1,13 +1,9 @@
// / <reference types="Cypress" />
import {PAGES_ENDPOINTS} from '../LegacyTests/constants';
describe('Do all the English pages have all links with a defined href attribute?', () => {
const pages = [
'/',
'cejst',
'methodology',
'contact',
'public-engagement',
];
const pages = Object.values(PAGES_ENDPOINTS);
pages.forEach((page) => {
it(`test all href attr on ${page} page`, () => {

16
client/cypress/integration/LegacyTests/constants.js
View file

@ -1,8 +1,10 @@
export const ENDPOINTS = {
EXPLORE_THE_TOOL: 'en/',
ABOUT: '/en/about',
METHODOLOGY: '/en/methodology',
CONTACT: 'en/contact',
PUBLIC: 'en/public-engagement',
DOWNLOAD: 'en/downloads',
export const PAGES_ENDPOINTS = {
EXPLORE: '/',
METHODOLOGY: '/methodology',
DOWNLOADS: '/downloads',
TSD: '/technical-support-document',
ABOUT: '/about',
FAQS: '/faqs',
PUBLIC_ENG: '/public-engagement',
CONTACT: '/contact',
};

15
client/cypress/integration/LegacyTests/language.spec.js
View file

@ -1,11 +1,14 @@
// / <reference types="Cypress" />
describe('Translation Test', () => {
it('Sets default language to /en and redirects', () => {
cy.visit('http://localhost:8000');
cy.url().should('include', '/en/');
// cy.get('[data-cy=about-page-heading]').contains('About');
});
import {PAGES_ENDPOINTS} from './constants';
describe('Navigate to each endpoint', () => {
Object.values(PAGES_ENDPOINTS).map((endpoint) =>
it(`for the ${endpoint} page, it adds /en and redirects`, () => {
cy.visit(endpoint);
cy.url().should('include', '/en/');
}),
);
// Todo VS: Understand how to create es content
// it('Sets page content to spanish when visiting Spanish URL', () => {

4
client/cypress/integration/LegacyTests/mapInfoPanel.spec.js
View file

@ -4,7 +4,7 @@
A risk with this test is that if the feature/area that is currently being selected become non-prioritized, then this
test will fail. However it would be a major win for that area!
*/
import {ENDPOINTS} from './constants';
import {PAGES_ENDPOINTS} from './constants';
const devices = [
[1024, 720],
@ -15,7 +15,7 @@ const devices = [
describe('tests that the map side panel renders MapIntroduction component', () => {
devices.forEach((device) => {
it(`should render MapIntroduction component on ${device[0]} x ${device[1]}`, () => {
cy.visit(ENDPOINTS.EXPLORE_THE_TOOL);
cy.visit(PAGES_ENDPOINTS.EXPLORE);
cy.viewport(device[0], device[1]);
cy.get('aside').should('be.visible');
});

6
client/cypress/integration/LegacyTests/mapZoomLatLong.spec.js
View file

@ -1,8 +1,9 @@
// / <reference types="Cypress" />
import {PAGES_ENDPOINTS} from '../LegacyTests/constants';
describe('Does the map zoom and adjust to lat/long correctly?', () => {
it('should start at zoom level 3', () => {
cy.visit('http://localhost:8000/en/cejst');
cy.visit(PAGES_ENDPOINTS.EXPLORE);
cy.url().should('include', '#3');
});
it('should change to level 4 when you hit the zoom button', () => {
@ -10,7 +11,7 @@ describe('Does the map zoom and adjust to lat/long correctly?', () => {
cy.url().should('include', '#4');
});
// Intermittent failure still exist
// Intermittent failure still exist ticket #886
// it('should show the correct lat/lng coordinates in the URL',
// {
// retries: {
@ -47,6 +48,7 @@ describe('Does the map zoom and adjust to lat/long correctly?', () => {
// },
// () => {
// const [expectedZoom, expectedLat, expectedLng] = [12.05, 41.40965, -75.65978];
// //This could be where the issue is:
// const expectedURL = `http://localhost:8000/en/cejst/#${expectedZoom}/${expectedLat}/${expectedLng}`;
// cy.visit(expectedURL);
// cy.getMap().then((map) => {

4
client/cypress/integration/LegacyTests/mapZoomTerritories.spec.js
View file

@ -1,5 +1,7 @@
// / <reference types="Cypress" />
import {PAGES_ENDPOINTS} from './constants';
describe('Will it zoom into territories correctly?',
{
retries: {
@ -16,7 +18,7 @@ describe('Will it zoom into territories correctly?',
() => {
beforeEach(() => {
cy.viewport('macbook-13');
cy.visit('http://localhost:8000/en/cejst');
cy.visit(PAGES_ENDPOINTS.EXPLORE);
});
// The below values all assume a 13-inch MB as set in viewport above.

2
client/cypress/integration/Methodology.feature
View file

@ -7,7 +7,7 @@ Feature: The Methodology page will open from all other pages
Then I see "Methodology" in the title
Scenario: Methodology page open when navigating from Explore the tool page
Given I am on the "Explore the tool" page
Given I am on the "Explore" page
When I click on the "Methodology" dropdown in the navigation
When I click on the "Methodology" page in the navigation
Then I see "Methodology" in the title

4
client/cypress/support/step_definitions/commonSteps.js
View file

@ -2,14 +2,14 @@
// Common step definitions for Gherkin
import {ENDPOINTS} from '../../integration/LegacyTests/constants';
import {PAGES_ENDPOINTS} from '../../integration/LegacyTests/constants';
import {hyphenizeString} from '../../integration/common/helpers';
// Common Givens:
Given('I am on the {string} page', (page) => {
const pageArray = page.split(' ');
cy.viewport(1060, 800);
cy.visit(ENDPOINTS[pageArray.join('_').toUpperCase()]);
cy.visit(PAGES_ENDPOINTS[pageArray.join('_').toUpperCase()]);
});
// Common Whens:

3
client/src/components/DatasetContainer/index.tsx
View file

@ -8,6 +8,7 @@ import {hyphenizeString} from '../../../cypress/integration/common/helpers';
import * as styles from './dsContainer.module.scss';
import * as METHODOLOGY_COPY from '../../data/copy/methodology';
import {PAGES_ENDPOINTS} from '../../data/constants';
const DatasetContainer = () => {
@ -43,7 +44,7 @@ const DatasetContainer = () => {
</Grid>
<div className={styles.returnToTop}>
<Link to={`/methodology`}>
<Link to={PAGES_ENDPOINTS.METHODOLOGY}>
{METHODOLOGY_COPY.RETURN_TO_TOP.LINK}
</Link>
</div>

17
client/src/components/J40Header/J40Header.tsx
View file

@ -18,6 +18,7 @@ import Language from '../Language';
import siteLogo from '../../images/j40-logo-v2.png';
import * as styles from './J40Header.module.scss';
import * as COMMON_COPY from '../../data/copy/common';
import {PAGES_ENDPOINTS} from '../../data/constants';
const isAlertValid = new Date < COMMON_COPY.ALERTS.EXPIRATION_DATE;
@ -52,21 +53,21 @@ const J40Header = () => {
const methPageSubNavLinks = [
<Link
to={'/methodology'}
to={PAGES_ENDPOINTS.METHODOLOGY}
key={'methodology'}
activeClassName="usa-current"
data-cy={'nav-link-methodology'}>
{intl.formatMessage(COMMON_COPY.HEADER.METHODOLOGY)}
</Link>,
<Link
to={'/downloads'}
to={PAGES_ENDPOINTS.DOWNLOADS}
key={'downloads'}
activeClassName="usa-current"
data-cy={'nav-link-downloads'}>
{intl.formatMessage(COMMON_COPY.HEADER.DOWNLOADS)}
</Link>,
<Link
to={'/technical-support-docs'}
to={PAGES_ENDPOINTS.TSD}
key={'tsd'}
activeClassName="usa-current"
data-cy={'nav-link-technical-support-docs'}>
@ -76,21 +77,21 @@ const J40Header = () => {
const aboutSubNavLinks = [
<Link
to={'/about'}
to={PAGES_ENDPOINTS.ABOUT}
key={'about'}
activeClassName="usa-current"
data-cy={'nav-link-about'}>
{intl.formatMessage(COMMON_COPY.HEADER.ABOUT)}
</Link>,
<Link
to={'/faqs'}
to={PAGES_ENDPOINTS.FAQS}
key={'faqs'}
activeClassName="usa-current"
data-cy={'nav-link-faqs'}>
{intl.formatMessage(COMMON_COPY.HEADER.FAQs)}
</Link>,
<Link
to={'/public-engagement'}
to={PAGES_ENDPOINTS.PUBLIC_ENG}
key={'publicEng'}
activeClassName="usa-current"
data-cy={'nav-link-public-engagement'}>
@ -100,7 +101,7 @@ const J40Header = () => {
const navLinks = [
<Link
to={'/'}
to={PAGES_ENDPOINTS.EXPLORE}
key={'explore-tool'}
activeClassName="usa-current"
data-cy={'nav-link-explore-the-tool'}>
@ -143,7 +144,7 @@ const J40Header = () => {
</Menu>
</>,
<Link
to={'/contact'}
to={PAGES_ENDPOINTS.CONTACT}
key={'contact'}
activeClassName="usa-current"
data-cy={'nav-link-contact'}>

2
client/src/components/J40Header/__snapshots__/J40Header.test.tsx.snap
View file

@ -273,7 +273,7 @@ exports[`rendering of the J40Header checks if component renders 1`] = `
>
<a
data-cy="nav-link-technical-support-docs"
href="/en/technical-support-docs"
href="/en/technical-support-document"
>
Technical Support Document
</a>

3
client/src/components/LinkTypeWrapper/linkTypeWrapper.test.tsx
View file

@ -2,6 +2,7 @@ import * as React from 'react';
import {render} from '@testing-library/react';
import LinkTypeWrapper from './index';
import {LocalizedComponent} from '../../test/testHelpers';
import {PAGES_ENDPOINTS} from '../../data/constants';
describe('testing all link types', () => {
it('tests internal links', () => {
@ -10,7 +11,7 @@ describe('testing all link types', () => {
<LinkTypeWrapper
linkText={'test link text'}
internal={true}
url={'/methodology'}
url={PAGES_ENDPOINTS.METHODOLOGY}
openUrlNewTab={false}
/>
</LocalizedComponent>,

91
client/src/components/scoreStepsList.tsx
View file

@ -1,91 +0,0 @@
import React from 'react';
import {
ProcessList,
ProcessListItem,
ProcessListHeading,
Grid,
} from '@trussworks/react-uswds';
import {useIntl} from 'gatsby-plugin-intl';
import * as METHODOLOGY_COPY from '../data/copy/methodology';
const ScoreStepsList = () => {
const intl = useIntl();
return (
<>
<h2>
{intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.HEADING)}
</h2>
<Grid row>
<Grid col={7}>
<p>
{intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.DESCRIPTION_1)}
</p>
<p>
{intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.DESCRIPTION_2)}
</p>
</Grid>
</Grid>
<ProcessList>
{/* Step 1 */}
<ProcessListItem>
<ProcessListHeading type="h3">
{intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_1_HEADING)}
</ProcessListHeading>
<p>{' '}</p>
<p className={'flush'}>
{intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_1_INFO)}
</p>
{/* Step 1 A */}
<h4>
{intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_1_A_HEADING)}
</h4>
<p className={'flush'}>
{intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_1_A_INFO_1)}
</p>
<p>
{intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_1_A_INFO_2)}
</p>
{/* Step 1 B */}
<h4>
{intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_1_B_HEADING)}
</h4>
{METHODOLOGY_COPY.COMPLEX_METH_STEPS.STEP_2_B_INFO}
{/* Step 1 C */}
<h4>
{intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_1_C_HEADING)}
</h4>
<p className={'flush'}>
{intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_1_C_INFO)}
</p>
</ProcessListItem>
{/* Step 2 */}
<ProcessListItem>
<ProcessListHeading type="h3">
{intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_2_HEADING)}
</ProcessListHeading>
<p>{' '}</p>
<p className={'flush'}>
{intl.formatMessage(METHODOLOGY_COPY.METHODOLOGY_STEPS.STEP_2_INFO)}
</p>
{METHODOLOGY_COPY.COMPLEX_METH_STEPS.FORMULA}
</ProcessListItem>
</ProcessList>
</>
);
};
export default ScoreStepsList;

12
client/src/data/constants.tsx
View file

@ -4,6 +4,18 @@ import {isMobile as isMobileReactDeviceDetect} from 'react-device-detect';
export const isMobile = isMobileReactDeviceDetect;
// Pages URL
export const PAGES_ENDPOINTS = {
EXPLORE: '/',
METHODOLOGY: '/methodology',
DOWNLOADS: '/downloads',
TSD: '/technical-support-document',
ABOUT: '/about',
FAQS: '/faqs',
PUBLIC_ENG: '/public-engagement',
CONTACT: '/contact',
};
// Performance markers
export const PERFORMANCE_MARKER_MAP_IDLE = 'MAP_IDLE';

11
client/src/data/copy/404.tsx
View file

@ -1,6 +1,8 @@
import React from 'react';
import {defineMessages} from 'react-intl';
import {FormattedMessage, Link} from 'gatsby-plugin-intl';
import {FormattedMessage} from 'gatsby-plugin-intl';
import {linkFn} from './common';
import {PAGES_ENDPOINTS} from '../constants';
export const PAGE = defineMessages({
TITLE: {
@ -24,11 +26,10 @@ export const ERROR_MSG =
<FormattedMessage
id={'pageNotFound.apology.text'}
defaultMessage={`
Sorry, the page you were looking for was not found. Click {home} to go home.
Sorry, the page you were looking for was not found. Click <link1>home</link1> to go home.
`}
description={'page description'}
description={'main error message'}
values={{
home: <Link to={'/'}>here</Link>,
homeEs: <Link to={'/methodology'}>aqui</Link>,
link1: linkFn(PAGES_ENDPOINTS.METHODOLOGY, true, false),
}}
/>;

3
client/src/data/copy/contact.tsx
View file

@ -3,6 +3,7 @@ import React from 'react';
import {defineMessages} from 'react-intl';
import {FormattedMessage} from 'gatsby-plugin-intl';
import * as COMMON_COPY from './common';
import {PAGES_ENDPOINTS} from '../constants';
export const PAGE_INTRO = defineMessages({
PAGE_TILE: {
@ -63,7 +64,7 @@ export const CENSUS_TRACT_FEEDBACK = {
`}
description={'Navigate to the contact page, this is the census tract feedback section'}
values={{
link1: COMMON_COPY.linkFn('/cejst', true, false),
link1: COMMON_COPY.linkFn(PAGES_ENDPOINTS.EXPLORE, true, false),
}}
/>,
PARAGRAPH2: <FormattedMessage

9
client/src/data/copy/explore.tsx
View file

@ -7,6 +7,7 @@ import {FormattedDate, FormattedMessage, FormattedNumber} from 'gatsby-plugin-in
import * as COMMON_COPY from './common';
import * as METHODOLOGY_COPY from './methodology';
import {simpleLink, linkFn} from './common';
import {PAGES_ENDPOINTS} from '../constants';
export const PAGE_INTRO = defineMessages({
PAGE_TILE: {
@ -31,7 +32,7 @@ export const PAGE_DESCRIPTION = <FormattedMessage
`}
description={'On the explore the tool page, the description of the page'}
values={{
link1: linkFn('/methodology', true, false),
link1: linkFn(PAGES_ENDPOINTS.METHODOLOGY, true, false),
}}
/>;
@ -795,7 +796,7 @@ export const NOTE_ON_TERRITORIES = {
`}
description={`Navigate to the explore the tool page. Under the map, you will see territories paragraph 1`}
values={{
link1: linkFn('/methodology', true, false),
link1: linkFn(PAGES_ENDPOINTS.METHODOLOGY, true, false),
}}
/>,
PARA_2: <FormattedMessage
@ -849,7 +850,7 @@ export const NOTE_ON_TRIBAL_NATIONS = {
`}
description={`Navigate to the explore the tool page. Under the map, you will see tribal nations paragraph 1`}
values={{
link1: linkFn('/methodology', true, false),
link1: linkFn(PAGES_ENDPOINTS.METHODOLOGY, true, false),
link2: linkFn(`https://www.whitehouse.gov/wp-content/uploads/2022/01/CEQ-Tribal-Consultation-Plan-04.26.2021.pdf`, false, true),
link3: linkFn(`https://www.whitehouse.gov/briefing-room/presidential-actions/2021/01/26/memorandum-on-tribal-consultation-and-strengthening-nation-to-nation-relationships/`, false, true),
link4: linkFn(`https://www.federalregister.gov/documents/2000/11/09/00-29003/consultation-and-coordination-with-indian-tribal-governments`, false, true),
@ -870,7 +871,7 @@ export const HOW_YOU_CAN_HELP_LIST_ITEMS = {
`}
defaultMessage={`View the <link1>Methodology & data</link1> page and send feedback.`}
values={{
link1: linkFn('/methodology', true, false),
link1: linkFn(PAGES_ENDPOINTS.METHODOLOGY, true, false),
}}
/>,
LIST_ITEM_2: <FormattedMessage

4
client/src/intl/en.json
View file

@ -1268,8 +1268,8 @@
"description": "page not found guidance text"
},
"pageNotFound.apology.text": {
"defaultMessage": "Sorry, the page you were looking for was not found. Click {home} to go home.",
"description": "page description"
"defaultMessage": "Sorry, the page you were looking for was not found. Click <link1>home</link1> to go home.",
"description": "main error message"
},
"pageNotFound.heading.text": {
"defaultMessage": "Page not found",

5
client/src/pages/about.tsx
View file

@ -8,6 +8,7 @@ import Layout from '../components/layout';
import * as ABOUT_COPY from '../data/copy/about';
import * as COMMON_COPY from '../data/copy/common';
import {PAGES_ENDPOINTS} from '../data/constants';
// @ts-ignore
import aboutUSMapImg from '../images/about-usmap-1.svg';
@ -85,7 +86,7 @@ const AboutPage = ({location}: IAboutPageProps) => {
imgSrc={accountBalanceIcon}
header={intl.formatMessage(ABOUT_COPY.HOW_TO_GET_STARTED.FEDERAL_PM_HEADING)}
linkText={intl.formatMessage(ABOUT_COPY.HOW_TO_GET_STARTED.FEDERAL_PM_LINK_TEXT)}
url={'/methodology'}
url={PAGES_ENDPOINTS.METHODOLOGY}
internal={true}>
<p>
{intl.formatMessage(ABOUT_COPY.HOW_TO_GET_STARTED.FEDERAL_PM_INFO)}
@ -97,7 +98,7 @@ const AboutPage = ({location}: IAboutPageProps) => {
imgSrc={groupsIcon}
header={intl.formatMessage(ABOUT_COPY.HOW_TO_GET_STARTED.COMMUNITY_MEMBERS_HEADING)}
linkText={intl.formatMessage(ABOUT_COPY.HOW_TO_GET_STARTED.COMMUNITY_MEMBERS_LINK_TEXT)}
url={'/'}
url={PAGES_ENDPOINTS.EXPLORE}
internal={true}>
<p>
{intl.formatMessage(ABOUT_COPY.HOW_TO_GET_STARTED.COMMUNITY_MEMBERS_INFO)}

2
client/src/pages/tests/__snapshots__/about.test.tsx.snap
View file

@ -273,7 +273,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
>
<a
data-cy="nav-link-technical-support-docs"
href="/en/technical-support-docs"
href="/en/technical-support-document"
>
Technical Support Document
</a>

4
client/src/pages/tests/__snapshots__/contact.test.tsx.snap
View file

@ -273,7 +273,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
>
<a
data-cy="nav-link-technical-support-docs"
href="/en/technical-support-docs"
href="/en/technical-support-document"
>
Technical Support Document
</a>
@ -429,7 +429,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
To provide feedback about a specific census tract, either select the send feedback button after
selecting a census tract on the
<a
href="/en/cejst"
href="/en/"
>
Explore the tool
</a>

2
client/src/pages/tests/__snapshots__/downloads.test.tsx.snap
View file

@ -273,7 +273,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
>
<a
data-cy="nav-link-technical-support-docs"
href="/en/technical-support-docs"
href="/en/technical-support-document"
>
Technical Support Document
</a>

2
client/src/pages/tests/__snapshots__/methodology.test.tsx.snap
View file

@ -273,7 +273,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
>
<a
data-cy="nav-link-technical-support-docs"
href="/en/technical-support-docs"
href="/en/technical-support-document"
>
Technical Support Document
</a>

2
client/src/pages/tests/__snapshots__/publicEng.test.tsx.snap
View file

@ -273,7 +273,7 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
>
<a
data-cy="nav-link-technical-support-docs"
href="/en/technical-support-docs"
href="/en/technical-support-document"
>
Technical Support Document
</a>