How to use getChapters method in Cypress

Best JavaScript code snippet using cypress

Run Cypress automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

arcspage.js

Source: arcspage.js Github

copy
1// For the arcspage.js, we implemented our pieceApp from script.js but with newer features. To see the comments
2// for pieceApp, please see the script.js file
3
4// Arcspage.js will display the arcs list, and allow the user to select an arc and begin viewing the chapter
5// at the start of the arc. Once selected, a scrollable menu will appear, allowing the user to cycle through
6// different arcs easily without heading back to the main Arcs page
7
8const pieceApp = {};
9
10pieceApp.getChapters = function(){
11    
12    let proxiedUrl = `https://onepiececover.com/api/chapters/${pieceApp.currentChapter}`
13
14    const url = new URL('https://proxy.hackeryou.com');
15
16    url.search = new URLSearchParams({
17        reqUrl: proxiedUrl
18    })  
19
20
21fetch(url)
22        .then (data => {
23            return data.json();
24        })
25        .then(jsonData => {
26            pieceApp.displayChapter(jsonData)
27        })
28    }
29
30
31pieceApp.displayChapter = function (arrayOfChapters) {
32        
33        const title = document.querySelector('.chapter-title');
34        title.innerText = arrayOfChapters.chapter
35
36        const chapterName = document.querySelector('.chapter-name');
37        chapterName.innerText = arrayOfChapters.title
38        
39
40        const summary = document.querySelector('.chapter-description');
41        summary.innerText = arrayOfChapters.summary;
42
43        const chapterImage = document.querySelector('.api-img');
44        chapterImage.alt = arrayOfChapters.explanation;
45        chapterImage.src = arrayOfChapters.cover_images.split('|')[0] 
46}
47
48
49pieceApp.changeChapter = function() {
50    const next = document.querySelector('.next');
51    next.addEventListener('click', function () {
52        
53    pieceApp.currentChapter = pieceApp.currentChapter + 1;
54    pieceApp.getChapters(pieceApp.currentChapter);
55})
56    const previous = document.querySelector('.previous');
57    previous.addEventListener('click', function() { 
58
59        if (pieceApp.currentChapter !== 1){
60        pieceApp.currentChapter = pieceApp.currentChapter - 1;
61        pieceApp.getChapters(pieceApp.currentChapter);
62        }
63    })
64}
65
66// Defining the elements used to add functionality for the arcs menu
67const arcMenu = document.querySelector('#arc-menu');
68const arcSelectors = document.querySelector('#arc-selection')
69
70const chapterGallery = document.querySelector('#hide-chapters');
71const boxes = document.querySelector('.arcs-list')
72
73// Defining the elements used to add functionality for the arcs list
74const firstArc = document.querySelector('#arc-1');
75const secondArc = document.querySelector('#arc-2');
76const thirdArc = document.querySelector('#arc-3');
77const fourthArc = document.querySelector('#arc-4');
78const fifthArc = document.querySelector('#arc-5');
79const sixthArc = document.querySelector('#arc-6');
80const seventhArc = document.querySelector('#arc-7');
81const eighthArc = document.querySelector('#arc-8')
82const ninthArc = document.querySelector('#arc-9');
83const tenthArc = document.querySelector('#arc-10');
84
85
86// The arcSelectors event listener will allow the user to pick an arc from the scrollable menu
87pieceApp.menu = function() {
88    arcSelectors.addEventListener("change", function (event) {
89        event.preventDefault
90        const selection = this.value
91        pieceApp.currentChapter = 1 * selection
92        pieceApp.getChapters(pieceApp.currentChapter)
93    })
94}
95
96pieceApp.init = function () {
97    pieceApp.currentChapter = 1
98    pieceApp.getChapters(pieceApp.currentChapter)
99    pieceApp.changeChapter();
100    pieceApp.menu()
101}
102
103pieceApp.init();
104
105
106// This function will hide the chapter viewing page & and the scrollable menu until an arc is chosen
107function hideChapters() {
108    chapterGallery.style.display = "none";
109    arcMenu.style.display ="none"
110}
111hideChapters();
112
113// This function will display the chapter viewing page & and the scrollable menu when an arc is chosen
114function showChapters() {
115    chapterGallery.style.display = "block";
116    arcMenu.style.display = "block";
117
118}
119
120// The corresponding event listeners below will allow the user to select an arc and be taken to its respective chapter
121
122firstArc.addEventListener("click", (event) => {
123    event.preventDefault();
124    showChapters();
125    boxes.style.display = "none";
126
127    pieceApp.currentChapter = 1
128    pieceApp.getChapters(pieceApp.currentChapter)
129})
130
131
132secondArc.addEventListener("click", (event) => {
133    event.preventDefault();
134    showChapters();
135    boxes.style.display = "none";
136
137    pieceApp.currentChapter = 101
138    pieceApp.getChapters(pieceApp.currentChapter)
139})
140
141thirdArc.addEventListener("click", (event) => {
142    event.preventDefault();
143    showChapters();
144    boxes.style.display = "none";
145
146    pieceApp.currentChapter = 218
147    pieceApp.getChapters(pieceApp.currentChapter)
148})
149
150
151fourthArc.addEventListener("click", (event) => {
152    event.preventDefault();
153    showChapters();
154    boxes.style.display = "none";
155
156    pieceApp.currentChapter = 303
157    pieceApp.getChapters(pieceApp.currentChapter)
158})
159
160fifthArc.addEventListener("click", (event) => {
161    event.preventDefault();
162    showChapters();
163    boxes.style.display = "none";
164
165    pieceApp.currentChapter = 442
166    pieceApp.getChapters(pieceApp.currentChapter)
167})
168
169
170sixthArc.addEventListener("click", (event) => {
171    event.preventDefault();
172    showChapters();
173    boxes.style.display = "none";
174
175    pieceApp.currentChapter = 490
176    pieceApp.getChapters(pieceApp.currentChapter)
177    
178})
179
180seventhArc.addEventListener("click", (event) => {
181    event.preventDefault();
182    showChapters();
183    boxes.style.display = "none";
184
185    pieceApp.currentChapter = 598
186    pieceApp.getChapters(pieceApp.currentChapter)
187})
188
189
190eighthArc.addEventListener("click", (event) => {
191    event.preventDefault();
192    showChapters();
193    boxes.style.display = "none";
194
195    pieceApp.currentChapter = 654
196    pieceApp.getChapters(pieceApp.currentChapter) 
197})
198
199ninthArc.addEventListener("click", (event) => {
200    event.preventDefault();
201    showChapters();
202    boxes.style.display = "none";
203
204    pieceApp.currentChapter = 802
205    pieceApp.getChapters(pieceApp.currentChapter)
206})
207
208
209tenthArc.addEventListener("click", (event) => {
210    event.preventDefault();
211    showChapters();
212    boxes.style.display = "none";
213
214    pieceApp.currentChapter = 903
215    pieceApp.getChapters(pieceApp.currentChapter)
216})
217
Full Screen

Books.js

Source: Books.js Github

copy
1import React, { useEffect ,useState} from 'react';
2import { connect } from 'react-redux';
3import { getBooks, delBooks } from '../../state/store/ducks/books/actions';
4import Form from './Form'
5import { getChapters } from '../../state/store/ducks/chapters/actions';
6import selectors from "../../state/store/ducks/books/selectors" ;
7import EditBook from './EditBook';
8import Chapters from '../chapters/Chapters'
9const Books = ({books,getBooks,getChapters,delBooks}) => {
10    const [isedit, setisedit] = useState(null)
11    const [isexpand, setisexpand] = useState(null)
12    
13    useEffect(() => {
14        getBooks();
15        getChapters();
16      }, [getChapters, getBooks]);
17    
18    
19    
20    const handleEdit = (id) => {
21        setisedit( id )
22    }
23    const handleExpand = (id) => {
24        setisexpand( id )
25    }
26    
27        //const  books  = this.props.books
28        return (
29            <div>
30                <Form/>
31                {books.map(book =>
32                    <React.Fragment key={book.id}>
33
34                        <h1>
35                            {book.name}
36
37                            <button onClick={() => delBooks(book.id)}>Delete</button>
38                            <button onClick={() => handleEdit(book.id)}>Edit</button>
39                            { isedit === book.id ? <EditBook id={book.id} edited={handleEdit}/> : null }
40                            { isexpand === book.id ? <Chapters  book={book} expanded={handleEdit}/> :  <button onClick={() => handleExpand(book.id)}>Show chapters</button> }
41                             
42
43                        </h1>
44                    </React.Fragment>
45                )}
46               
47            </div>
48        )
49    
50}
51
52const mapStateToProps = state => ({ books: selectors.allBooks(state) });
53
54
55export default connect(mapStateToProps, { getBooks, delBooks,getChapters})(Books)
Full Screen

Chapter.js

Source: Chapter.js Github

copy
1import React, { Component, Fragment } from 'react';
2import { connect } from "react-redux";
3import PropTypes from "prop-types";
4import ReactPlayer from "react-player";
5import { getChapters, deleteChapter } from "../../actions/chapters.js";
6import get from "lodash/get";
7
8
9class Chapters extends Component {
10    static propTypes() {
11        chapters: PropTypes.array.isRequired;
12        getChapters: PropTypes.func.isRequired;
13        deleteChapter: PropTypes.func.isRequired;
14    };
15
16    componentDidMount() {
17        this.props.getChapters();
18    }
19
20    render() {
21        const { chapters } = this.props;
22        const ChapterList = () => (
23            <ul>
24                {chapters.map(item => (
25                    <li key={item.id}>
26                        <div> {item.chapter_name}</div>
27                        <div><ReactPlayer
28                            className='react-player'
29                            url={item.content}
30                            width='100%'
31                            height='100%'
32                            controls={true}
33                        /></div>
34
35                    </li>
36                ))}
37            </ul>
38        );
39
40        return (
41            <Fragment>
42                <h1>Chapters</h1>
43                <ChapterList chapters={chapters} />
44
45            </Fragment>
46        )
47    }
48}
49
50const mapStateToProps = state => ({
51    chapters: get(state.chapters, "chapters")
52})
53
54export default connect(mapStateToProps, { getChapters, deleteChapter })(Chapters);
55
Full Screen

Accelerate Your Automation Test Cycles With LambdaTest

Leverage LambdaTest’s cloud-based platform to execute your automation tests in parallel and trim down your test execution time significantly. Your first 100 automation testing minutes are on us.

Try LambdaTest

Run JavaScript Tests on LambdaTest Cloud Grid

Execute automation tests with Cypress on a cloud-based Grid of 3000+ real browsers and operating systems for both web and mobile applications.

Test now for Free
LambdaTestX

We use cookies to give you the best experience. Cookies help to provide a more personalized experience and relevant advertising for you, and web analytics for us. Learn More in our Cookies policy, Privacy & Terms of service

Allow Cookie
Sarah

I hope you find the best code examples for your project.

If you want to accelerate automated browser testing, try LambdaTest. Your first 100 automation testing minutes are FREE.

Sarah Elson (Product & Growth Lead)