Skip to content

Commit

Permalink
Merge branch 'wevote:develop' into updateIdsCamelCasing
Browse files Browse the repository at this point in the history
  • Loading branch information
shan14T authored Dec 3, 2024
2 parents 2f83c41 + 4e4d411 commit 4d66a89
Show file tree
Hide file tree
Showing 12 changed files with 426 additions and 33 deletions.
2 changes: 1 addition & 1 deletion src/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -752,8 +752,8 @@ const WeVoteBody = styled('div')`
//font-family: "Poppins", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
//line-height: 1.4;
// margin: 0 auto;
display: block;
min-height: 100vh;
position: relative;
z-index: 0;
// this debug technique works! ${() => console.log('-----------------------------')}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -45,34 +45,35 @@ const StyledTabs = styled(Tabs)({
});

const MoreInfoIconWrapper = styled('div', {
shouldForwardProp: (prop) => !['hovered'].includes(prop),
})(({ hovered }) => (`
align-items: center;
color: ${hovered ? DesignTokenColors.primary500 : DesignTokenColors.neutral600};
cursor: pointer;
display: flex;
// font-family: 'Poppins, sans-serif';
font-size: '0.875rem';
font-weight: 500;
line-height: 1.25;
position: 'absolute';
right: 16;
`));
shouldForwardProp: (prop) => !['hovered', 'isSmallScreen'].includes(prop),
})(({ hovered, isSmallScreen }) => ({
alignItems: 'center',
color: hovered ? DesignTokenColors.primary500 : DesignTokenColors.neutral600,
cursor: 'pointer',
display: 'flex',
fontSize: '0.875rem',
fontWeight: 500,
lineHeight: 1.25,
position: 'absolute',
right: isSmallScreen ? '12px' : '16px',
}));

const MoreInfoText = styled('span')({
marginLeft: 4,
});

const StyledTab = styled(Tab, {
shouldForwardProp: (prop) => !['isSmallScreen'].includes(prop),
})(({ isSmallScreen }) => (`
margin-right: 16px;
min-width: ${isSmallScreen ? '0' : 'auto'};
padding: ${isSmallScreen ? '12px 10px' : '12px 16px'};
&:last-child {
margin-right: 0;
}
`));
const StyledTab = styled(Tab)(({ theme }) => ({
marginRight: 16,
minWidth: 'auto',
padding: '12px 16px',
[theme.breakpoints.down('sm')]: {
minWidth: '0',
padding: '12px 10px',
},
'&:last-child': {
marginRight: 0,
},
}));

// TODO: Mar 23, 2022, makeStyles is legacy in MUI 5, replace instance with styled-components or sx if there are issues
const useStyles = makeStyles((theme) => ({
Expand Down Expand Up @@ -103,16 +104,16 @@ export default function ChallengeInviteFriendsTopNavigation ({ challengeSEOFrien

const classes = useStyles();
const history = useHistory();
const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm') || window.innerWidth <= 600);
const isSmallScreen = useMediaQuery(theme.breakpoints.down('xs'));

const handleChange = (event, newValue) => {
setValue(newValue);
};

// Functions to toggle modal and handle hover
const toggleMoreInfoModal = () => {
setIsMoreInfoOpen(!isMoreInfoOpen);
};
const toggleMoreInfoModal = React.useCallback(() => {
setIsMoreInfoOpen((prev) => !prev);
}, []);

const { location: { pathname } } = window;
if (endsWith('/about', pathname)) {
Expand Down Expand Up @@ -196,13 +197,14 @@ export default function ChallengeInviteFriendsTopNavigation ({ challengeSEOFrien
<StyledTabs value={value} onChange={handleChange} aria-label="Tab menu">
{!hideAboutTab && <StyledTab id="challengeLandingTab-0" label="About" onClick={() => history.push(aboutUrl)} value={1} isSmallScreen={isSmallScreen} />}
<StyledTab id="challengeLandingTab-1" label="Leaderboard" onClick={() => history.push(leaderboardUrl)} value={2} isSmallScreen={isSmallScreen} />
{voterIsChallengeParticipant && <StyledTab id="challengeLandingTab-2" label="Invited friends" onClick={() => history.push(friendsUrl)} value={3} isSmallScreen={isSmallScreen} />}
{voterIsChallengeParticipant && <StyledTab id="challengeLandingTab-2" label={isSmallScreen ? 'Invited' : 'Invited friends'} isSmallScreen={isSmallScreen} onClick={() => history.push(friendsUrl)} value={3} isSmallScreen={isSmallScreen} />}
</StyledTabs>
<MoreInfoIconWrapper
hovered={hovered}
isSmallScreen={isSmallScreen}
onMouseEnter={() => setHovered(true)}
onMouseLeave={() => setHovered(false)}
onClick={toggleMoreInfoModal}
onClick={() => setIsMoreInfoOpen(!isMoreInfoOpen)}
>
<InfoOutlined />
{!isSmallScreen && <MoreInfoText>More info</MoreInfoText>}
Expand Down
2 changes: 1 addition & 1 deletion src/js/components/CandidateListRoot/CandidateListRoot.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -404,7 +404,7 @@ class CandidateListRoot extends Component {
titleTextForList.length &&
candidateList) &&
(
<WhatIsHappeningTitle>
<WhatIsHappeningTitle id="whatIsHappeningTitle">
{titleTextForList}
</WhatIsHappeningTitle>
)}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -403,7 +403,7 @@ class RepresentativeListRoot extends Component {
titleTextForList.length &&
representativeList) &&
(
<WhatIsHappeningTitle>
<WhatIsHappeningTitle id="whatIsHappeningTitle">
{titleTextForList}
</WhatIsHappeningTitle>
)}
Expand Down
2 changes: 1 addition & 1 deletion src/js/components/Share/ShareButtonFooter.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -560,7 +560,7 @@ const ShareButtonFooterWrapper = styled('div', {
})(({ shareBottomValue }) => (`
position: fixed;
width: 100%;
${shareBottomValue ? `bottom: ${shareBottomValue}` : ''};
bottom: ${shareBottomValue || '57px'};
display: block;
background-color: white;
@media (min-width: 576px) {
Expand Down
4 changes: 4 additions & 0 deletions tests/browserstack_automation/config/wdio.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,11 @@ module.exports.config = {
'../specs/HowItWorks.js',
'../specs/FooterLinks.js',
'../specs/SignInPage.js',

'../specs/BallotPage.js'

'../specs/WhosRunningForOffice.js',

],

capabilities,
Expand Down
42 changes: 42 additions & 0 deletions tests/browserstack_automation/page_objects/ballot.page.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import { $ } from '@wdio/globals';
import Page from './page';


class BallotPage extends Page {
constructor () {
super().title = 'Ballot - WeVote';
}

get getViewBallotElement () {
return $('(//button[contains(@id, "viewUpcomingBallot")])[1]');
}

get getBallotTopElement () {
return $('#ballotTabHeaderBar');
}

get getBallotAddressElement () {
return $(' #ballotTitleBallotAddress span');
}

get getBallotModalTitleElement () {
return $('#SelectBallotModalTitleId');
}

get getBallotModalCloseElement () {
return $('#profileCloseSelectBallotModal');
}

get getBallotModalInputElement () {
return $('#entryBox');
}

get getBallotModalSaveElement () {
return $('#addressBoxModalSaveButton');
}

get getBallotModalCancelElement () {
return $('#addressBoxModalCancelButton');
}
}
export default new BallotPage();
56 changes: 56 additions & 0 deletions tests/browserstack_automation/page_objects/candidates.page.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import { $, $$ } from '@wdio/globals';
import Page from './page';
import TopNavigation from './topnavigation';

class CandidatesPage extends Page {
async load () {
await super.open('');
await TopNavigation.toggleCandidatesTab();
}

get stateSelect () {
return $("//select[@id='outlined-age-native-simple']");
}

get stateSelectOptions () {
return $$("//select[@id='outlined-age-native-simple']//option");
}

get pageHeaders () {
return $$('h2#WhatIsHappeningTitle');
}

get CandidateCardList () {
return $$("//div[contains(@id,'cardForListBodyWrapper')]");
}

async getCandidateCardCandidateName(cardId) {
const candidate = await $(`//div[@id='${cardId}']//a[@id='candidateCardDisplayName' or @id='representativeCardDisplayName']`);
const candidateName = await candidate.getText();
return candidateName;
}

async getCandidateCardState(cardId) {
const candidate = await $(`//div[@id='${cardId}']//div[contains(@id,'stateName')]`);
const stateText = await candidate.getText();
return stateText;
}

async getCandidateCardPartyName (cardId) {
const candidateParty = await $(`//div[@id='${cardId}']//div[contains(@class,'PoliticalParty')]`);
const candidatePartyExists = await candidateParty.isExisting();
if (candidatePartyExists) {
const partyText = await candidateParty.getText();
return partyText;
} else {
return null;
}
}

async getCandidateCardOffice (cardId) {
const candidateOffice = await $(`//div[@id='${cardId}']//div[contains(@class,'OfficeNameWrapper')]/div`);
const officeText = candidateOffice.getText();
return officeText;
}
}
export default new CandidatesPage();
59 changes: 59 additions & 0 deletions tests/browserstack_automation/specs/BallotPage.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
/* eslint-disable no-unused-vars */

import { driver, expect, browser } from '@wdio/globals';



import ReadyPage from '../page_objects/ready.page';
import BallotPage from '../page_objects/ballot.page';


const { describe, it } = require('mocha');

const waitTime = 5000;
const verifyAddressModal = async () => {
await (BallotPage.getBallotAddressElement).click();
await driver.pause(waitTime);

await expect(BallotPage.getBallotModalTitleElement).toHaveText('Enter Your Address');
};
beforeEach(async function () {
if (this.currentTest.title !== 'verifyBallotPageLinksNavigations') {
// Skip for the specific test case
await ReadyPage.load();
await driver.maximizeWindow();
await driver.pause(waitTime);
}
});

describe('Ballot Page', async () => {
it('verifyBallotPageLinksNavigations', async () => {
await ReadyPage.load();
await driver.maximizeWindow();
await expect(BallotPage.getViewBallotElement).toBeClickable();
await (BallotPage.getViewBallotElement).click();

await expect(browser).toHaveUrl(expect.stringContaining('ballot'));
await expect(BallotPage.getBallotTopElement).toBeClickable();
await expect(browser).toHaveUrl(expect.stringContaining('ballot'));
});

it('verifyBallotAddressLinks', async () => {
await verifyAddressModal();
await (BallotPage.getBallotModalCloseElement).click();
await (await BallotPage.getBallotTopElement).click();
await verifyAddressModal();
});

it('validateBallotModalUIComponents', async () => {
await (await BallotPage.getBallotAddressElement).click();


await expect(BallotPage.getBallotModalInputElement).toBeDisplayed();
await (await BallotPage.getBallotModalInputElement).click();
await expect(await BallotPage.getBallotModalInputElement.getAttribute('placeholder')).toBe('Street number, full address and ZIP...');
await expect(await BallotPage.getBallotModalSaveElement).toBeClickable();
await expect(await BallotPage.getBallotModalCancelElement).toBeClickable();

});
});
Loading

0 comments on commit 4d66a89

Please sign in to comment.