mirror of
https://github.com/DOI-DO/j40-cejst-2.git
synced 2025-02-23 10:04:18 -08:00
36f43b2d44
* initial map side panel * componentize MapSidePanel * remove selection from J40Map * adds isFeatureSelected to toggle component * filters data from server for client UI * styling and refactor * added TODO * adds styling to intro and pairing feedback * add mobile styling * adds popup back to fs feature flag * adds tests and aria roles * makes mobile content same as desktop * prettier update * initial e2e mapSidePanel test * adds cypress tests on desktop and mobile * adds sass util and updates cypress tests * cleans up tests * reverts tsconfig file * fixes map alignment * renaming and using constants * renaming sidePanel to infoPanel * intl messaging * adds snapshot testing and utility sass file * PR feedback - adds intl messages - adds data-cy attr to cy tests - snapshot testing for unit tests - fixes bug where side panel extends past the map - moves all wrapper content in MapWrapper * logs isMobile to troubleshoot deployed PR * adds react-device-detect for isMobile detection * adds new instance of map for mobile * adds instance * adds isMobile to state * tests the fix for mobile map view on PR * PR review feedback - localize MapIntroduction - update snapshot tests - QA feedback - constants.isMobile points to react-device-detect
67 lines
2.7 KiB
JavaScript
67 lines
2.7 KiB
JavaScript
// / <reference types="Cypress" />
|
|
|
|
/*
|
|
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';
|
|
|
|
const devices = [
|
|
[1024, 720],
|
|
['iphone-6', 'portrait'],
|
|
['samsung-s10', 'portrait'],
|
|
];
|
|
|
|
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.viewport(device[0], device[1]);
|
|
cy.get('aside').should('be.visible');
|
|
});
|
|
});
|
|
});
|
|
|
|
/**
|
|
* Todo: Ticket #423:
|
|
*
|
|
* After fixing the PR deployed URL in regards to the mobile view (parent height
|
|
* not setting to 44vh) by creating a state variable to force a re-render, this
|
|
* cypress test regressed and is now failing. Need to investigate why.
|
|
*
|
|
* See this ticket for more info:
|
|
* https://app.zenhub.com/workspaces/justice40-60993f6e05473d0010ec44e3/issues/usds/justice40-tool/423
|
|
*
|
|
* Tried
|
|
* 1. reloading the page
|
|
* 2. forcing the 44vh value via a selector (data-cy and class)
|
|
*/
|
|
// describe('tests that the map side panel renders AreaDetail component', () => {
|
|
// devices.forEach((device) => {
|
|
// it(`should render AreaDetail component on ${device[0]} x ${device[1]}`, () => {
|
|
// // Only set the viewport for mobile devices:
|
|
// cy.visit(ENDPOINTS.EXPLORE_THE_TOOL);
|
|
// if (!Number.isInteger(device[0])) cy.viewport(device[0], device[1]);
|
|
// cy.reload(true);
|
|
// cy.get('div[class*="mapContainer"]').invoke('attr', 'height', '44vh');
|
|
// cy.getMap().then((map) => {
|
|
// // Loop over the click event simulating zooming by a certain amount
|
|
// // The map will end at the end zoom level
|
|
// const endZoomLevel = device[0].isInteger ? 11 : 10;
|
|
// for (let zoom = 3; zoom <= endZoomLevel; zoom++) {
|
|
// cy.get('.mapboxgl-ctrl-zoom-in > .mapboxgl-ctrl-icon').click();
|
|
// cy.waitForMapIdle(map);
|
|
// }
|
|
// cy.get('.overlays').click('bottomRight');
|
|
// cy.get('aside').should('be.visible');
|
|
// cy.get('[data-cy="score"]').should('be.visible');
|
|
// cy.get('[data-cy="indicatorBox"]').should('be.visible');
|
|
// cy.get('[data-cy="indicatorBox"]')
|
|
// .each((indicator) => cy.wrap(indicator)
|
|
// // currently the padding-top on desktop = 1.5rem => 24px
|
|
// // currently the padding-top on mobile = .8 rem => 8px
|
|
// .should('have.css', 'padding-top', `${Number.isInteger(device[0]) ? '24px' : '8px'}`));
|
|
// });
|
|
// });
|
|
// });
|
|
// });
|