Skip to content

Commit f15542a

Browse files
adamretteradamretter
authored
Merge pull request #583 from evolvedbinary/test/cypress-ui-tests
Menu end to end tests
2 parents c725e07 + c3377d8 commit f15542a

5 files changed

Lines changed: 443 additions & 164 deletions

File tree

‎packages/prosemirror-lwdita-demo/cypress/e2e/download.cy.ts‎

Lines changed: 104 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -15,70 +15,115 @@ You should have received a copy of the GNU Affero General Public License
1515
along with this program. If not, see <https://www.gnu.org/licenses/>.
1616
*/
1717

18-
const mockXML = `<?xml version="1.0" encoding="UTF-8"?>
18+
export const mockXML = `<?xml version="1.0" encoding="UTF-8"?>
1919
<!DOCTYPE topic PUBLIC "-//OASIS//DTD LIGHTWEIGHT DITA Topic//EN" "lw-topic.dtd">
20-
<topic id="petal">
21-
<title>What is Petal?</title>
22-
<body>
23-
<p dir="ltr">Sadly many projects lack proper documentation, but why is that?</p>
24-
<fig>
25-
<image href="https://static.evolvedbinary.com/petal/eb-rose-small.png">
26-
<alt></alt>
27-
</image>
28-
</fig>
29-
<p dir="ltr">The effort that goes into coding great software is paramount, but often
30-
pointless if others can't understand and use the software. Most developers have
31-
witnessed brilliant code with incomplete or entirely missing documentation. Petal lowers
32-
the barrier to delivering this critical part of any software product.</p>
33-
<p dir="ltr">Often it is difficult or time-consuming to add documentation to a project.
34-
Potentially great projects stay in obscurity because users and developers don't have the
35-
information they need to understand them and use them.</p>
36-
<p dir="ltr">Our dream is to make adding documentation to a project as easy as typing text
37-
into a web browser and hitting save. This approach would lead to more usable projects
38-
through robust and helpful documentation.</p>
39-
<p dir="ltr">Petal is a first of its kind technical documentation editor that realises this
40-
dream!</p>
41-
<p dir="ltr">Petal makes it simple to:</p>
20+
<topic id="fullTopic">
21+
<title>
22+
<b>bold</b>
23+
and <em>emphasized</em> and <i>italic</i> and <ph>Phrase content</ph> and
24+
<strong>strong</strong>
25+
and <sub>subscript</sub> and <sup>superscipt</sup> and <tt>tele type</tt> and
26+
<u>underline</u>
27+
<image href="https://static.evolvedbinary.com/petal/eb-rose-small.png">
28+
<alt>alt text</alt>
29+
</image>
30+
</title>
31+
<shortdesc>Short description of the full topic.</shortdesc>
32+
<prolog>
33+
<metadata>
34+
<othermeta name="test" content="test"/>
35+
</metadata>
36+
</prolog>
37+
<body dir="ltr">
38+
<p>Paragraph content</p>
39+
<p>
40+
<b>Bold</b>
41+
and <em>emphasized</em> and <i>italic</i> and <ph>Phrase content</ph> and
42+
<strong>strong</strong>
43+
and <sub>subscript</sub> and <sup>superscipt</sup> and <tt>tele type</tt> and
44+
<u>underline</u>.
45+
</p>
4246
<ul>
43-
<li dir="ltr">
44-
<p dir="ltr">Create new pages of documentation</p>
45-
</li>
46-
<li dir="ltr">
47-
<p dir="ltr">Update existing pages of documentation</p>
48-
</li>
49-
<li dir="ltr">
50-
<p dir="ltr">Submit your work for review</p>
51-
</li>
52-
<li dir="ltr">
53-
<p dir="ltr">Accept documentation contributions from the community</p>
54-
</li>
55-
<li dir="ltr">
56-
<p dir="ltr">Integrate with version control repositories such as GitHub</p>
47+
<li>
48+
<p>Unordered list item</p>
5749
</li>
5850
</ul>
59-
<p dir="ltr">Petal is:</p>
60-
<ul>
61-
<li dir="ltr">
62-
<p dir="ltr">A Visual Technical Documentation Editor</p>
63-
</li>
64-
<li dir="ltr">
65-
<p dir="ltr">Accessible through a Web Browser just like a Wiki</p>
51+
<ol>
52+
<li>
53+
<p>Ordered list item</p>
6654
</li>
67-
<li dir="ltr">
68-
<p dir="ltr">Filling a gap in the market where other offerings are too complex</p>
69-
</li>
70-
<li dir="ltr">
71-
<p dir="ltr">Open Source</p>
72-
</li>
73-
<li dir="ltr">
74-
<p dir="ltr">Standards compliant</p>
75-
</li>
76-
<li dir="ltr">
77-
<p dir="ltr">Developed with the latest web technologies</p>
78-
</li>
79-
</ul>
80-
<p dir="ltr">Bad documentation keeps good projects from being GREAT.</p>
81-
<p dir="ltr">Petal helps anyone to contribute documentation to a project with ease. If you know how to type text on a computer, then you already know how to use Petal.</p>
55+
</ol>
56+
<dl>
57+
<dlentry>
58+
<dt>Definition term</dt>
59+
<dd>
60+
<p>Definition description</p>
61+
</dd>
62+
</dlentry>
63+
</dl>
64+
<pre>Preformatted content</pre>
65+
<audio autoplay="false" controls="true" loop="false" muted="true">
66+
<desc>Theme song for the LwDITA podcast</desc>
67+
<fallback>
68+
<p>The theme song is not available.</p>
69+
</fallback>
70+
<media-source href="https://static.evolvedbinary.com/petal/1943_Nov_14_NYPhil_Bernstein.ogg" format="application/ogg"/>
71+
<media-track srclang="en"/>
72+
</audio>
73+
<video outputclass="videoElement" width="320" height="240" controls="true">
74+
<desc>Kool-Aid Commercial, Debut of Pitcher Man</desc>
75+
<video-poster href="https://static.evolvedbinary.com/petal/1954_Kool-Aid_Commercial._Debut_of_Pitcher_Man.webm.jpg"/>
76+
<media-source href="https://static.evolvedbinary.com/petal/1954_Kool-Aid_Commercial._Debut_of_Pitcher_Man.webm"/>
77+
</video>
78+
<example>
79+
<title>title</title>
80+
</example>
81+
<simpletable>
82+
<title>Table title</title>
83+
<sthead>
84+
<stentry>
85+
<p>Header 1</p>
86+
</stentry>
87+
<stentry>
88+
<p>Header 2</p>
89+
</stentry>
90+
</sthead>
91+
<strow>
92+
<stentry>
93+
<p>Row 1, Cell 1</p>
94+
</stentry>
95+
<stentry>
96+
<p>Row 1, Cell 2</p>
97+
</stentry>
98+
</strow>
99+
<strow>
100+
<stentry>
101+
<p>Row 2, Cell 1</p>
102+
</stentry>
103+
<stentry>
104+
<p>Row 2, Cell 2</p>
105+
</stentry>
106+
</strow>
107+
</simpletable>
108+
<fig>
109+
<title>Figure title</title>
110+
<desc>Figure description</desc>
111+
<image href="https://static.evolvedbinary.com/petal/eb-rose-small.png">
112+
<alt>alt text</alt>
113+
</image>
114+
</fig>
115+
<note type="note">
116+
<p>Note content</p>
117+
</note>
118+
<section>
119+
<title>Section title</title>
120+
<p>Section content</p>
121+
</section>
122+
<div>
123+
<fn id="footnote">
124+
<p>A footnote</p>
125+
</fn>
126+
</div>
82127
</body>
83128
</topic>
84129
`;

‎packages/prosemirror-lwdita-demo/cypress/e2e/menu.cy.ts‎

Lines changed: 212 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,212 @@
1+
/*!
2+
Copyright (C) 2020 Evolved Binary
3+
4+
This program is free software: you can redistribute it and/or modify
5+
it under the terms of the GNU Affero General Public License as
6+
published by the Free Software Foundation, either version 3 of the
7+
License, or (at your option) any later version.
8+
9+
This program is distributed in the hope that it will be useful,
10+
but WITHOUT ANY WARRANTY; without even the implied warranty of
11+
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12+
GNU Affero General Public License for more details.
13+
14+
You should have received a copy of the GNU Affero General Public License
15+
along with this program. If not, see <https://www.gnu.org/licenses/>.
16+
*/
17+
18+
import { mockXML } from "./download.cy";
19+
20+
describe("Open Xdita file", () => {
21+
it("should open the example xdita file", () => {
22+
// First, verify the fixture file exists
23+
cy.readFile('cypress/fixtures/sample.xml').should('exist')
24+
25+
cy.visit('http://localhost:1234/')
26+
.get("#editor > div > div.ProseMirror-menubar > span:nth-child(1)")
27+
.click()
28+
.get('input[type="file"]')
29+
.selectFile('cypress/fixtures/sample.xml', { force: true })
30+
.get("#editor > div > div.ProseMirror > article > div > section > p")
31+
.should('contain.text', 'A test paragraph.')
32+
})
33+
});
34+
35+
describe('Download Xdita file', () => {
36+
it('should download the current document as Xdita file', () => {
37+
// set up the entry xdita
38+
window.localStorage.setItem('file', mockXML);
39+
cy.visit('http://localhost:1234/')
40+
.get('#saveFile')
41+
.click()
42+
.readFile('cypress/downloads/Petal.xml')
43+
// compare the output to the input
44+
.should('equal', mockXML);
45+
});
46+
});
47+
48+
// Undo/Redo tests
49+
describe("Undo/Redo", () => {
50+
beforeEach(() => {
51+
window.localStorage.setItem('file', `<?xml version="1.0" encoding="UTF-8"?>
52+
<!DOCTYPE topic PUBLIC "-//OASIS//DTD LIGHTWEIGHT DITA Topic//EN" "lw-topic.dtd">
53+
<topic id="program">
54+
<title>Test File 2</title>
55+
<body>
56+
<section>
57+
<p>A test paragraph.</p>
58+
</section>
59+
</body>
60+
</topic>`);
61+
});
62+
it("should be able to undo and redo changes", () => {
63+
cy.visit('http://localhost:1234/')
64+
.get('#editor > div > div.ProseMirror > article > h1')
65+
.click()
66+
cy.focused()
67+
.type('YOLO')
68+
.get('#editor > div > div.ProseMirror > article > h1')
69+
.should('contain.text', 'Test File 2YOLO')
70+
.get('#editor > div > div.ProseMirror-menubar > span:nth-child(5) > div')
71+
.click()
72+
.get('#editor > div > div.ProseMirror > article > h1')
73+
.should('contain.text', 'Test File 2')
74+
.get('#editor > div > div.ProseMirror-menubar > span:nth-child(6) > div')
75+
.click()
76+
.get('#editor > div > div.ProseMirror > article > h1')
77+
.should('contain.text', 'Test File 2YOLO');
78+
});
79+
80+
it("undo/redo should be disabled at the start and when not possible", () => {
81+
cy.visit('http://localhost:1234/')
82+
.get('#editor > div > div.ProseMirror-menubar > span:nth-child(5) > div')
83+
.should('have.css', 'pointer-events', 'none')
84+
.get('#editor > div > div.ProseMirror-menubar > span:nth-child(6) > div')
85+
.should('have.css', 'pointer-events', 'none')
86+
});
87+
});
88+
89+
// bold / underline / italic / subscript / superscript tests
90+
describe("Text formatting", () => {
91+
beforeEach(() => {
92+
window.localStorage.setItem('file', `<?xml version="1.0" encoding="UTF-8"?>
93+
<!DOCTYPE topic PUBLIC "-//OASIS//DTD LIGHTWEIGHT DITA Topic//EN" "lw-topic.dtd">
94+
<topic id="program">
95+
<title>Test File 2</title>
96+
<body>
97+
<section>
98+
<p>A test paragraph.</p>
99+
</section>
100+
</body>
101+
</topic>`);
102+
});
103+
104+
it("should be able to apply bold formatting", () => {
105+
cy.visit('http://localhost:1234/')
106+
//#editor > div > div.ProseMirror > article > div > section > p
107+
.get('#editor > div > div.ProseMirror > article > div > section > p')
108+
.click()
109+
cy.focused()
110+
.type('{selectall}')
111+
// bold button #editor > div > div.ProseMirror-menubar > span:nth-child(8) > div
112+
.get('#editor > div > div.ProseMirror-menubar > span:nth-child(8) > div')
113+
.click()
114+
// the bold button should now be active
115+
// #editor > div > div.ProseMirror-menubar > span:nth-child(8) > div
116+
.get('#editor > div > div.ProseMirror-menubar > span:nth-child(8) > div')
117+
.should('have.class', 'ProseMirror-menu-active')
118+
.get('#editor > div > div.ProseMirror > article > div > section > p > strong')
119+
.should('exist');
120+
});
121+
122+
it("should be able to apply underline formatting", () => {
123+
cy.visit('http://localhost:1234/')
124+
//#editor > div > div.ProseMirror > article > div > section > p
125+
.get('#editor > div > div.ProseMirror > article > div > section > p')
126+
.click()
127+
cy.focused()
128+
.type('{selectall}')
129+
// underline button #editor > div > div.ProseMirror-menubar > span:nth-child(9) > div
130+
.get('#editor > div > div.ProseMirror-menubar > span:nth-child(9) > div')
131+
.click()
132+
// the underline button should now be active
133+
// #editor > div > div.ProseMirror-menubar > span:nth-child(9) > div
134+
.get('#editor > div > div.ProseMirror-menubar > span:nth-child(9) > div')
135+
.should('have.class', 'ProseMirror-menu-active')
136+
.get('#editor > div > div.ProseMirror > article > div > section > p > u')
137+
.should('exist');
138+
});
139+
140+
it("should be able to apply italic formatting", () => {
141+
cy.visit('http://localhost:1234/')
142+
//#editor > div > div.ProseMirror > article > div > section > p
143+
.get('#editor > div > div.ProseMirror > article > div > section > p')
144+
.click()
145+
cy.focused()
146+
.type('{selectall}')
147+
// italic button #editor > div > div.ProseMirror-menubar > span:nth-child(10) > div
148+
.get('#editor > div > div.ProseMirror-menubar > span:nth-child(10) > div')
149+
.click()
150+
// the italic button should now be active
151+
// #editor > div > div.ProseMirror-menubar > span:nth-child(10) > div
152+
.get('#editor > div > div.ProseMirror-menubar > span:nth-child(10) > div')
153+
.should('have.class', 'ProseMirror-menu-active')
154+
.get('#editor > div > div.ProseMirror > article > div > section > p > em')
155+
.should('exist');
156+
});
157+
158+
it("should be able to apply subscript formatting", () => {
159+
cy.visit('http://localhost:1234/')
160+
//#editor > div > div.ProseMirror > article > div > section > p
161+
.get('#editor > div > div.ProseMirror > article > div > section > p')
162+
.click()
163+
cy.focused()
164+
.type('{selectall}')
165+
// subscript button #editor > div > div.ProseMirror-menubar > span:nth-child(11) > div
166+
.get('#editor > div > div.ProseMirror-menubar > span:nth-child(11) > div')
167+
.click()
168+
// the subscript button should now be active
169+
// #editor > div > div.ProseMirror-menubar > span:nth-child(11) > div
170+
.get('#editor > div > div.ProseMirror-menubar > span:nth-child(11) > div')
171+
.should('have.class', 'ProseMirror-menu-active')
172+
.get('#editor > div > div.ProseMirror > article > div > section > p > sub')
173+
.should('exist');
174+
});
175+
176+
it("should be able to apply superscript formatting", () => {
177+
cy.visit('http://localhost:1234/')
178+
//#editor > div > div.ProseMirror > article > div > section > p
179+
.get('#editor > div > div.ProseMirror > article > div > section > p')
180+
.click()
181+
cy.focused()
182+
.type('{selectall}')
183+
// superscript button #editor > div > div.ProseMirror-menubar > span:nth-child(12) > div
184+
.get('#editor > div > div.ProseMirror-menubar > span:nth-child(12) > div')
185+
.click()
186+
// the superscript button should now be active
187+
// #editor > div > div.ProseMirror-menubar > span:nth-child(12) > div
188+
.get('#editor > div > div.ProseMirror-menubar > span:nth-child(12) > div')
189+
.should('have.class', 'ProseMirror-menu-active')
190+
.get('#editor > div > div.ProseMirror > article > div > section > p > sup')
191+
.should('exist');
192+
});
193+
});
194+
195+
// links to library and the prosemirror-lwdita repo
196+
describe("Menu links", () => {
197+
it("should link to the ProseMirror library", () => {
198+
cy.visit('http://localhost:1234/')
199+
// #editor > div > div.ProseMirror-menubar > span:nth-child(20)
200+
.get('#editor > div > div.ProseMirror-menubar > span:nth-child(20)')
201+
.click()
202+
.url().should('include', 'https://github.com/evolvedbinary/lwdita')
203+
});
204+
205+
it("should link to the prosemirror-lwdita repo", () => {
206+
cy.visit('http://localhost:1234/')
207+
// #editor > div > div.ProseMirror-menubar > span:nth-child(21)
208+
.get('#editor > div > div.ProseMirror-menubar > span:nth-child(21)')
209+
.click()
210+
.url().should('include', 'https://github.com/evolvedbinary/prosemirror-lwdita')
211+
});
212+
});

0 commit comments

Comments
 (0)