Skip to content
This repository was archived by the owner on Nov 29, 2023. It is now read-only.

Commit f06abfd

Browse files
ckoegelckoegel
authored
DX-3009 Use data-cy for cypress tests (#831)
* DX-3009 Use `data-cy` for cypress tests * fix docs.cy.js * fix footer.cy.js * fix home.cy.js
1 parent de51650 commit f06abfd

File tree

8 files changed

+50
-50
lines changed

8 files changed

+50
-50
lines changed

‎site/cypress/e2e/tests/docs.cy.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,55 @@
11
import {testTextLink, testSvgLink} from '../../utils/utils'
22

33
context('Account Text Link', () => {
4-
testTextLink('/docs', 'Account', 'docs/account', '.textLink_src-components-css-ItemGrid-module')
4+
testTextLink('/docs', 'Account', 'docs/account', '[data-cy="textLink"]')
55
})
66

77
context('Account SVG Link', () => {
88
testSvgLink('/docs/','svg[alt="Account"]', 'docs/account')
99
})
1010

1111
context('Numbers Text Link', () => {
12-
testTextLink('/docs','Numbers','docs/numbers', '.textLink_src-components-css-ItemGrid-module')
12+
testTextLink('/docs','Numbers','docs/numbers', '[data-cy="textLink"]')
1313
})
1414

1515
context('Numbers SVG Link', () => {
1616
testSvgLink('/docs/','svg[alt="Numbers"]', 'docs/numbers')
1717
})
1818

1919
context('Voice Text Link', () => {
20-
testTextLink('/docs','Voice', 'docs/voice', '.textLink_src-components-css-ItemGrid-module')
20+
testTextLink('/docs','Voice', 'docs/voice', '[data-cy="textLink"]')
2121
})
2222

2323
context('Voice SVG Link', () => {
2424
testSvgLink('/docs/','svg[alt="Voice"]', 'docs/voice')
2525
})
2626

2727
context('Messaging Text Link', () => {
28-
testTextLink('/docs','Messaging','docs/messaging', '.textLink_src-components-css-ItemGrid-module')
28+
testTextLink('/docs','Messaging','docs/messaging', '[data-cy="textLink"]')
2929
})
3030

3131
context('Messaging SVG Link', () => {
3232
testSvgLink('/docs/','svg[alt="Messaging"]', 'docs/messaging')
3333
})
3434

3535
context('WebRTC Text Link', () => {
36-
testTextLink('/docs','WebRTC', 'docs/webrtc' ,'.textLink_src-components-css-ItemGrid-module')
36+
testTextLink('/docs','WebRTC', 'docs/webrtc' ,'[data-cy="textLink"]')
3737
})
3838

3939
context('WebRTC SVG Link', () => {
4040
testSvgLink('/docs/','svg[alt="WebRTC"]', 'docs/webrtc')
4141
})
4242

4343
context('Multi-Factor Authentication Text Link', () => {
44-
testTextLink('/docs','Multi-Factor Authentication', 'docs/mfa' ,'.textLink_src-components-css-ItemGrid-module')
44+
testTextLink('/docs','Multi-Factor Authentication', 'docs/mfa' ,'[data-cy="textLink"]')
4545
})
4646

4747
context('Multi-Factor Authentication SVG Link', () => {
4848
testSvgLink('/docs/','svg[alt="Multi-Factor Authentication"]', 'docs/mfa')
4949
})
5050

5151
context('Emergency Text Link', () => {
52-
testTextLink('/docs','Emergency', 'docs/emergency' ,'.textLink_src-components-css-ItemGrid-module')
52+
testTextLink('/docs','Emergency', 'docs/emergency' ,'[data-cy="textLink"]')
5353
})
5454

5555
context('Emergency SVG Link', () => {

‎site/cypress/e2e/tests/footer.cy.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ context('Community Section Postman Link', () => {
7575
context('Social Media Icon Links', () => {
7676
beforeEach(() => {
7777
cy.visit('/')
78-
cy.get('[class*="socialLinks"]')
78+
cy.get('[data-cy="socialLinks"]')
7979
.children('a')
8080
.as('socialMedia')
8181
})
@@ -95,7 +95,7 @@ context('Social Media Icon Links', () => {
9595

9696
context('Call to Action', () => {
9797
it('Should verify that the call to action link exists', () => {
98-
cy.get('[class*="callToAction"]')
98+
cy.get('[data-cy="callToAction"]')
9999
.siblings('div')
100100
.children('a')
101101
.should('have.attr', 'href', 'https://www.bandwidth.com/contact/')

‎site/cypress/e2e/tests/home.cy.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,27 @@
11
import {splashRowTester, testTextLink, testCarousel} from '../../utils/utils'
22

33
context('Guides Splash Row Content', () => {
4-
splashRowTester('/', 'Check out our guides', '.splash_src-components-css-SplashPage-module > :nth-child(2)', 'Read the guides →')
4+
splashRowTester('/', 'Check out our guides', '[data-cy="splash"] > :nth-child(2)', 'Read the guides →')
55
})
66

77
context('Read the guides link', () => {
8-
testTextLink('/','Read the guides', 'docs' ,'.link_src-components-css-SplashPage-module')
8+
testTextLink('/','Read the guides', 'docs' ,'[data-cy="link"]')
99
})
1010

1111
context('APIS Splash Row Content', () => {
12-
splashRowTester('/', 'Dig into our API reference', '.splash_src-components-css-SplashPage-module > :nth-child(3)', 'See our API reference →')
12+
splashRowTester('/', 'Dig into our API reference', '[data-cy="splash"] > :nth-child(3)', 'See our API reference →')
1313
})
1414

1515
context('See our API reference link', () => {
16-
testTextLink('/','See our API reference', 'apis' ,'.link_src-components-css-SplashPage-module')
16+
testTextLink('/','See our API reference', 'apis' ,'[data-cy="link"]')
1717
})
1818

1919
context('SDKS Splash Row Content', () => {
20-
splashRowTester('/', 'Looking for our SDKs?', '.splash_src-components-css-SplashPage-module > :nth-child(5)', 'Build with Bandwidth →')
20+
splashRowTester('/', 'Looking for our SDKs?', '[data-cy="splash"] > :nth-child(5)', 'Build with Bandwidth →')
2121
})
2222

2323
context('Build with Bandwidth link', () => {
24-
testTextLink('/','Build with Bandwidth', 'sdks' ,'.link_src-components-css-SplashPage-module')
24+
testTextLink('/','Build with Bandwidth', 'sdks' ,'[data-cy="link"]')
2525
})
2626

2727
context('Carousel Tests', () => {

‎site/cypress/utils/utils.js

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -180,10 +180,10 @@ export const splashRowTester = (path, rowTitle, element, linkText) => {
180180
cy.visit(`${path}`);
181181
})
182182
it('validates Splash Page row content', () => {
183-
cy.get(`${element} .title_src-components-css-SplashPage-module`).should('have.text', `${rowTitle}`);
184-
cy.get(`${element} .text_src-components-css-SplashPage-module`).should('not.be.empty');
185-
cy.get(`${element} .link_src-components-css-SplashPage-module > a`).should('have.text', `${linkText}`);
186-
cy.get(`${element} .image_src-components-css-SplashPage-module > svg`).should('be.visible');
183+
cy.get(`${element} [data-cy="title"]`).should('have.text', `${rowTitle}`);
184+
cy.get(`${element} [data-cy="text"]`).should('not.be.empty');
185+
cy.get(`${element} [data-cy="link"] > a`).should('have.text', `${linkText}`);
186+
cy.get(`${element} [data-cy="image"] > svg`).should('be.visible');
187187
});
188188
}
189189

@@ -196,22 +196,22 @@ export const testCarousel = (path, length, title) => {
196196
var initialOffset = length * 2 * slideWidth;
197197
var rollOverOffset = initialOffset - ((length - 1) * slideWidth);
198198
it('validates the carousel content', () => {
199-
cy.get('.header_src-components-css-Carousel-module').should('have.text', `${title}`);
200-
cy.get('.carouselSlides_src-components-css-Carousel-module').children().should('have.length', length * 4);
201-
cy.get(`:nth-child(${startIndex}) > .item_src-components-css-Carousel-module > .image_src-components-css-Carousel-module`).should('be.visible');
202-
cy.get(`:nth-child(${startIndex}) > .item_src-components-css-Carousel-module > .product_src-components-css-Carousel-module`).should('not.be.empty');
203-
cy.get(`:nth-child(${startIndex}) > .item_src-components-css-Carousel-module > .link_src-components-css-Carousel-module > a`).should('not.be.empty');
199+
cy.get('[data-cy="header"]').should('have.text', `${title}`);
200+
cy.get('[data-cy="carouselSlides"]').children().should('have.length', length * 4);
201+
cy.get(`:nth-child(${startIndex}) > [data-cy="item"] > [data-cy="image"]`).should('be.visible');
202+
cy.get(`:nth-child(${startIndex}) > [data-cy="item"] > [data-cy="categories"]`).should('not.be.empty');
203+
cy.get(`:nth-child(${startIndex}) > [data-cy="item"] > [data-cy="post"] > a`).should('not.be.empty');
204204
})
205205

206206
it('validates the carousel movement', () => {
207-
cy.get('.carouselSlides_src-components-css-Carousel-module').should('have.css', 'transform', `matrix(1, 0, 0, 1, -${initialOffset}, 0)`);
208-
cy.get('.leftButton_src-components-css-Carousel-module').click();
209-
cy.get('.carouselSlides_src-components-css-Carousel-module').should('have.css', 'transform', `matrix(1, 0, 0, 1, -${initialOffset - slideWidth}, 0)`);
210-
cy.get('.rightButton_src-components-css-Carousel-module').click();
211-
cy.get('.carouselSlides_src-components-css-Carousel-module').should('have.css', 'transform', `matrix(1, 0, 0, 1, -${initialOffset}, 0)`);
212-
cy.get('.rightButton_src-components-css-Carousel-module').click();
213-
cy.get('.carouselSlides_src-components-css-Carousel-module').should('have.css', 'transform', `matrix(1, 0, 0, 1, -${rollOverOffset}, 0)`);
214-
cy.get('.rightButton_src-components-css-Carousel-module').click();
215-
cy.get('.carouselSlides_src-components-css-Carousel-module').should('have.css', 'transform', `matrix(1, 0, 0, 1, -${rollOverOffset + slideWidth}, 0)`);
207+
cy.get('[data-cy="carouselSlides"]').should('have.css', 'transform', `matrix(1, 0, 0, 1, -${initialOffset}, 0)`);
208+
cy.get('[data-cy="leftButton"]').click();
209+
cy.get('[data-cy="carouselSlides"]').should('have.css', 'transform', `matrix(1, 0, 0, 1, -${initialOffset - slideWidth}, 0)`);
210+
cy.get('[data-cy="rightButton"]').click();
211+
cy.get('[data-cy="carouselSlides"]').should('have.css', 'transform', `matrix(1, 0, 0, 1, -${initialOffset}, 0)`);
212+
cy.get('[data-cy="rightButton"]').click();
213+
cy.get('[data-cy="carouselSlides"]').should('have.css', 'transform', `matrix(1, 0, 0, 1, -${rollOverOffset}, 0)`);
214+
cy.get('[data-cy="rightButton"]').click();
215+
cy.get('[data-cy="carouselSlides"]').should('have.css', 'transform', `matrix(1, 0, 0, 1, -${rollOverOffset + slideWidth}, 0)`);
216216
})
217217
}

‎site/src/components/Carousel.js

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -119,14 +119,14 @@ export default function Carousel({itemList, title}) {
119119

120120
return (
121121
<div className={carouselStyles.slide} style={slideStyle}>
122-
<div className={carouselStyles.item} style={itemStyle}>
123-
<div className={carouselStyles.image} style={imageStyle}></div>
124-
<div className={carouselStyles.categories} style={categoriesStyle}>
122+
<div className={carouselStyles.item} style={itemStyle} data-cy="item">
123+
<div className={carouselStyles.image} style={imageStyle} data-cy="image"></div>
124+
<div className={carouselStyles.categories} style={categoriesStyle} data-cy="categories">
125125
{categories.map((category, idx) => (
126126
<a href={categoryLinks[idx]} key={idx}>{category}</a>
127127
))}
128128
</div>
129-
<div className={carouselStyles.post} style={postStyle}>
129+
<div className={carouselStyles.post} style={postStyle} data-cy="post">
130130
<a href={postLink}>{postTitle}</a>
131131
</div>
132132
</div>
@@ -140,17 +140,17 @@ export default function Carousel({itemList, title}) {
140140
<Svg/>
141141
</div>
142142
<div className={carouselStyles.content}>
143-
<div className={carouselStyles.header}>{title}</div>
143+
<div className={carouselStyles.header} data-cy="header">{title}</div>
144144
<div className={carouselStyles.carouselContent} style={carouselContentStyle}>
145145
<div className={carouselStyles.carousel}>
146-
<div className={`${carouselStyles.carouselSlides} ${hasTransitionClass ? carouselStyles.transition :""}`} style={carouselSlidesStyle}>
146+
<div className={`${carouselStyles.carouselSlides} ${hasTransitionClass ? carouselStyles.transition :""}`} style={carouselSlidesStyle} data-cy="carouselSlides">
147147
{newItemList.map((props, idx) => (
148148
<CarouselItem key={idx} {...props} index={idx}/>
149149
))}
150150
</div>
151151
<div className={`${carouselStyles.navButtons} ${navDisabled ? carouselStyles.disabled :""}`} style={navButtonsStyle}>
152-
<button className={carouselStyles.leftButton} onClick={() => scrollCarousel(currentIndex - 1)} style={buttonStyle}></button>
153-
<button className={carouselStyles.rightButton} onClick={() => scrollCarousel(currentIndex + 1)} style={buttonStyle}></button>
152+
<button className={carouselStyles.leftButton} onClick={() => scrollCarousel(currentIndex - 1)} style={buttonStyle} data-cy="leftButton"></button>
153+
<button className={carouselStyles.rightButton} onClick={() => scrollCarousel(currentIndex + 1)} style={buttonStyle} data-cy="rightButton"></button>
154154
</div>
155155
</div>
156156
</div>

‎site/src/components/ItemGrid.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ function Item({Svg, title, link}) {
55
return (
66
<div className={itemGridStyles.item}>
77
<a href={link} className={itemGridStyles.itemImage}>
8-
<Svg className={itemGridStyles.itemSvg} alt={title} />
8+
<Svg className={itemGridStyles.itemSvg} alt={title}/>
99
</a>
1010
<div className={itemGridStyles.itemText}>
11-
<a href={link} className={itemGridStyles.textLink}><h3>{title}</h3></a>
11+
<a href={link} className={itemGridStyles.textLink} data-cy="textLink"><h3>{title}</h3></a>
1212
</div>
1313
</div>
1414
);

‎site/src/components/SplashPage.js

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ function SplashRow({left, right}) {
3838

3939
function SplashPageImage({Svg}) {
4040
return (
41-
<div className={splashPageStyles.image}>
41+
<div className={splashPageStyles.image} data-cy="image">
4242
<Svg/>
4343
</div>
4444
)
@@ -47,9 +47,9 @@ function SplashPageImage({Svg}) {
4747
function SplashPageTextBlock({title, text, linkText, link}) {
4848
return (
4949
<div className={splashPageStyles.textBlock}>
50-
<div className={splashPageStyles.title}>{title}</div>
51-
<div className={splashPageStyles.text}>{text}</div>
52-
<div className={splashPageStyles.link}><a href={link}>{linkText}</a></div>
50+
<div className={splashPageStyles.title} data-cy="title">{title}</div>
51+
<div className={splashPageStyles.text} data-cy="text">{text}</div>
52+
<div className={splashPageStyles.link} data-cy="link"><a href={link}>{linkText}</a></div>
5353
</div>
5454
)
5555
}
@@ -59,7 +59,7 @@ export default function SplashPage() {
5959
const carousel = siteConfig.customFields.blogPosts;
6060

6161
return (
62-
<div className={splashPageStyles.splash}>
62+
<div className={splashPageStyles.splash} data-cy="splash">
6363
<div className={splashPageStyles.header}>
6464
<h1>Bandwidth Developer Documentation</h1>
6565
<h2>Explore our guides, API reference, and SDKs to integrate with Bandwidth's APIs.</h2>

‎site/src/theme/Footer/index.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ function Footer() {
119119

120120
<div className={footerStyles.socialRow}>
121121
<div className={footerStyles.logo}/>
122-
<div className={footerStyles.socialLinks}>
122+
<div className={footerStyles.socialLinks} data-cy="socialLinks">
123123
<a className={footerStyles.socialLink} href="https://www.linkedin.com/company/bandwidth-inc" target="_blank" rel="noopener"><LinkedIn/></a>
124124
<a className={footerStyles.socialLink} href="https://twitter.com/bandwidth" target="_blank" rel="noopener"><Twitter/></a>
125125
<a className={footerStyles.socialLink} href="https://www.youtube.com/user/bandwidth" target="_blank" rel="noopener"><YouTube/></a>
@@ -134,7 +134,7 @@ function Footer() {
134134
<div className={footerStyles.column}>
135135
<div className={footerStyles.menu}>
136136
<div className={footerStyles.menuTitle}>Let's Chat</div>
137-
<div className={footerStyles.callToAction}>
137+
<div className={footerStyles.callToAction} data-cy="callToAction">
138138
Have a support question? Want to add SMS to your app? Need to talk to legal? Have a great minestrone soup recipe?
139139
Whatever the reason you need to chat, let us know and we'll give you a call.
140140
</div>

0 commit comments

Comments
 (0)