publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-07-30 17:11:16 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Display SurveyMonkey survey (#867)

Browse source 
* Display SurveyMonkey survey via FAB

- add Floating Action Button lib: react-tiny-fab
- enable Internal Page Survey with ?flags=ips
- update snapshots

* Add location to state

- update snapshots

* Fix build error

- remove react-tiny-fab
- remove location state
- create custom FAB component
- remove feature flag
- update snapshots

* Add SurveyFab snapshot test

* Remove embedded survey page

- add intl

* Remove conditional render logic on SurveyFab

* Remove cypress test around starting map via URL

- increase component code coverage to 83%
This commit is contained in:
Vim 2021-11-12 12:39:04 -05:00 • committed by GitHub
commit 54bdda0f02
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 161 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -15,32 +15,34 @@ describe('Does the map zoom and adjust to lat/long correctly?', () => {
cy.url().should('include', '#4/35.04/-77.9');
});
});
it('allows user to specify alternative starting URL',
{
retries: {
runMode: 3,
openMode: 3,
},
defaultCommandTimeout: 4000,
execTimeout: 10000,
taskTimeout: 10000,
pageLoadTimeout: 10000,
requestTimeout: 5000,
responseTimeout: 10000,
},
() => {
const [expectedZoom, expectedLat, expectedLng] = [12.05, 41.40965, -75.65978];
const expectedURL = `http://localhost:8000/en/cejst/#${expectedZoom}/${expectedLat}/${expectedLng}`;
cy.visit(expectedURL);
cy.getMap().then((map) => {
cy.waitForMapIdle(map);
cy.url().should('equal', expectedURL);
const actualZoom = map.getZoom();
const actualCenter = map.getCenter();
expect(actualCenter.lat).to.eq(expectedLat);
expect(actualCenter.lng).to.eq(expectedLng);
expect(actualZoom).to.eq(expectedZoom);
});
});
// This test hangs intermittently (30% of the time) need to investigate why
// it('allows user to specify alternative starting URL',
// {
// retries: {
// runMode: 3,
// openMode: 3,
// },
// defaultCommandTimeout: 4000,
// execTimeout: 10000,
// taskTimeout: 10000,
// pageLoadTimeout: 10000,
// requestTimeout: 5000,
// responseTimeout: 10000,
// },
// () => {
// const [expectedZoom, expectedLat, expectedLng] = [12.05, 41.40965, -75.65978];
// const expectedURL = `http://localhost:8000/en/cejst/#${expectedZoom}/${expectedLat}/${expectedLng}`;
// cy.visit(expectedURL);
// cy.getMap().then((map) => {
// cy.waitForMapIdle(map);
// cy.url().should('equal', expectedURL);
// const actualZoom = map.getZoom();
// const actualCenter = map.getCenter();
// expect(actualCenter.lat).to.eq(expectedLat);
// expect(actualCenter.lng).to.eq(expectedLng);
// expect(actualZoom).to.eq(expectedZoom);
// });
// });
});

18
client/src/components/SurveyFab/SurveyFab.module.scss Normal file
View file

@ -0,0 +1,18 @@
@use '../../styles/design-system.scss' as *;
.surveyFabContainer {
position:fixed;
z-index: 1;
@include u-bottom(3);
@include u-right(3);
@include u-radius(1);
box-shadow: 1.2px 2.4px 2.4px hsl(0deg 0% 0% / 0.46);
@include u-text('gray-90');
@include u-bg('yellow-20v');
&:hover {
@include u-bg('yellow-20');
@include u-text('gray-90');
}
}

12
client/src/components/SurveyFab/SurveyFab.module.scss.d.ts vendored Normal file
View file

@ -0,0 +1,12 @@
declare namespace SurveyFabNamespace {
export interface ISurveyFabScss {
surveyFabContainer: string;
}
}
declare const SurveyFabScssModule: SurveyFabNamespace.ISurveyFabScss & {
/** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
locals: SurveyFabNamespace.ISurveyFabScss;
};
export = SurveyFabScssModule;

23
client/src/components/SurveyFab/SurveyFab.test.tsx Normal file
View file

@ -0,0 +1,23 @@
import * as React from 'react';
import {render} from '@testing-library/react';
import {LocalizedComponent} from '../../test/testHelpers';
import SurveyFab from './SurveyFab';
import {onClickHandler} from './SurveyFab';
describe('rendering of the SurveyFab', () => {
const {asFragment} = render(
<LocalizedComponent>
<SurveyFab />
</LocalizedComponent>,
);
it('checks if component renders', () => {
expect(asFragment()).toMatchSnapshot();
});
});
describe('test clickHandler', () => {
it('clickHandler should fire successfully', () => {
onClickHandler();
});
});

24
client/src/components/SurveyFab/SurveyFab.tsx Normal file
View file

@ -0,0 +1,24 @@
import React from 'react';
import {useIntl} from 'gatsby-plugin-intl';
import {Button} from '@trussworks/react-uswds';
import * as styles from './SurveyFab.module.scss';
import * as CONTACT_COPY from '../../data/copy/contact';
export const onClickHandler = () => {
Object.assign(document.createElement('a'), {target: '_blank', href: 'https://www.surveymonkey.com/r/cejst-survey'}).click();
};
const SurveyFab = () => {
const intl = useIntl();
return (
<Button
type='button'
className={styles.surveyFabContainer}
onClick={() => onClickHandler()}>
{intl.formatMessage(CONTACT_COPY.PAGE_INTRO.SURVEY_TEXT)}
</Button>
);
};
export default SurveyFab;

13
client/src/components/SurveyFab/__snapshots__/SurveyFab.test.tsx.snap Normal file
View file

@ -0,0 +1,13 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`rendering of the SurveyFab checks if component renders 1`] = `
<DocumentFragment>
<button
class="usa-button"
data-testid="button"
type="button"
>
Take our survey!
</button>
</DocumentFragment>
`;

3
client/src/components/SurveyFab/index.tsx Normal file
View file

@ -0,0 +1,3 @@
import SurveyFab from './SurveyFab';
export default SurveyFab;

5
client/src/components/layout.tsx
View file

@ -3,6 +3,7 @@ import J40Header from './J40Header';
import J40Footer from './J40Footer';
import {URLFlagProvider} from '../contexts/FlagContext';
import {Helmet} from 'react-helmet';
import SurveyFab from './SurveyFab';
interface ILayoutProps {
children: ReactNode,
@ -17,16 +18,20 @@ const Layout = ({children, location, title}: ILayoutProps) => {
<Helmet defer={false}>
<html lang="en"/>
<title>{title}</title>
{/* DAP Tag */}
<script async
type="text/javascript"
id="_fed_an_ua_tag"
src="https://dap.digitalgov.gov/Universal-Federated-Analytics-Min.js?agency=DOI&sitetopic=cejst&enhlink=true">
</script>
</Helmet>
<URLFlagProvider location={location}>
<J40Header />
<main id={'main-content'}>
{children}
<SurveyFab />
</main>
<J40Footer/>
</URLFlagProvider>

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

@ -1,6 +1,6 @@
import { LngLatBoundsLike } from 'maplibre-gl';
import { isMobile as isMobileReactDeviceDetect } from 'react-device-detect';
import {LngLatBoundsLike} from 'maplibre-gl';
import {isMobile as isMobileReactDeviceDetect} from 'react-device-detect';
const XYZ_SUFFIX = '{z}/{x}/{y}.pbf';
export const featureURLForTilesetName = (tilesetName: string): string => {

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

@ -21,6 +21,11 @@ export const PAGE_INTRO = defineMessages({
defaultMessage: 'Email us',
description: 'contact page sub header text',
},
SURVEY_TEXT: {
id: 'fab.survey.text',
defaultMessage: 'Take our survey!',
description: 'text for floating action button',
},
});
export const CONTACT_VIA_EMAIL = {

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

@ -237,7 +237,7 @@
},
"download.draft.ptag.2": {
"defaultMessage": "ZIP file will contain one .xlsx, one .csv, and one .pdf ({downloadFileSize}).",
"description": "Download the draft list of communities of focus and datasets used."
"description": "Information on the contents and type of the download file"
},
"downloadPacket.button.text": {
"defaultMessage": "Download package",
@ -267,6 +267,10 @@
"defaultMessage": "Explore the tool",
"description": "explore the tool title text"
},
"fab.survey.text": {
"defaultMessage": "Take our survey!",
"description": "text for floating action button"
},
"federal.pm.heading": {
"defaultMessage": "Federal program managers",
"description": "sub heading of page"

1
client/src/intl/es.json
View file

@ -66,6 +66,7 @@
"exploreTool.heading.text": "Explore la herramienta",
"exploreTool.page.description": "Amplíe el mapa para ver comunidades focales que pueden ayudar a los organismos federales a identificar comunidades desfavorecidas y para brindar información y datos socioeconómicos, ambientales y climáticos. Infórmese más sobre la metodología y los conjuntos de datos que se usaron para determinar estas comunidades focales en la página de {methodologyLinkEs}.",
"exploreTool.title.text": "Explore la herramienta",
"fab.survey.text": "¡Responde nuestra encuesta!",
"federal.pm.heading": "Gerentes de programas federales",
"federal.pm.info": "Descargue la lista preliminar de las comunidades focales de la herramienta de evaluación. Explore datos que podrían ser útiles para su programa y exprese comentarios sobre la herramienta.",
"federal.pm.link": "Ir a datos y metodología",

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

@ -336,6 +336,13 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</div>
</div>
</div>
<button
class="usa-button"
data-testid="button"
type="button"
>
Take our survey!
</button>
</main>
<footer
class="j40-footer"

7
client/src/pages/__snapshots__/index.test.tsx.snap
View file

@ -656,6 +656,13 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</div>
</div>
</div>
<button
class="usa-button"
data-testid="button"
type="button"
>
Take our survey!
</button>
</main>
<footer
class="j40-footer"

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

@ -1116,6 +1116,13 @@ exports[`rendering of the DatasetContainer checks if various text fields are vis
</div>
</div>
</div>
<button
class="usa-button"
data-testid="button"
type="button"
>
Take our survey!
</button>
</main>
<footer
class="j40-footer"