Skip to content

Commit ac569f0

Browse files
webdevnerdstuffwebdevnerdstuff
committed
adding cypress tests
1 parent 04a724d commit ac569f0

File tree

6 files changed

+476
-56
lines changed

6 files changed

+476
-56
lines changed

‎cypress.config.ts

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,16 @@
11
import { defineConfig } from "cypress";
22

33
export default defineConfig({
4-
component: {
5-
devServer: {
6-
framework: "vue",
7-
bundler: "vite",
8-
},
9-
},
4+
e2e: {
5+
baseUrl: 'http://192.168.4.79:5173/vue-code-block/',
6+
// excludeSpecPattern: ['./src/plugin/__tests__'],
7+
specPattern: './src/plugin/**/*.cy.{js,jsx,ts,tsx}',
8+
setupNodeEvents(on, config) {
9+
// implement node event listeners here
10+
},
11+
},
1012

11-
viewportHeight: 768,
12-
viewportWidth: 1024,
13+
viewportHeight: 1080,
14+
viewportWidth: 1920,
1315

14-
e2e: {
15-
setupNodeEvents(on, config) {
16-
// implement node event listeners here
17-
},
18-
},
1916
});

‎cypress/support/commands.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,4 +34,5 @@
3434
// visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
3535
// }
3636
// }
37-
// }
37+
// }
38+
import '@percy/cypress';

‎src/plugin/__tests__/HighlightJsExamples.cy.ts

Lines changed: 235 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,235 @@
1+
describe('VCodeBlock Component - Highlight.js', () => {
2+
beforeEach(() => {
3+
cy.visit('/');
4+
cy.get('[data-cy="library-select"]').parent().click().type('highlightjs');
5+
});
6+
7+
it('should have v-code-block--highlightjs on all v-code-block elements', () => {
8+
cy.get('.v-code-block').should('have.class', 'v-code-block--highlightjs');
9+
});
10+
11+
describe('JavaScript Example', () => {
12+
const codeBlockExamples = '#lang-js-examples .v-code-block';
13+
14+
it('should have 1 code block', () => {
15+
cy.get(codeBlockExamples).should('have.length', 1);
16+
});
17+
18+
it('should have code block classes', () => {
19+
cy.get(codeBlockExamples).children('.v-code-block--code').should('exist');
20+
cy.get(codeBlockExamples).find('.v-code-block--code-copy-button').should('exist');
21+
cy.get(codeBlockExamples).find('.v-code-block--code-copy-button-status-copy').should('exist');
22+
cy.get(codeBlockExamples).find('.v-code-block--button-copy-icon').should('exist');
23+
});
24+
25+
it('should have a pre and code elements', () => {
26+
cy.get(codeBlockExamples).find('pre, code').should('exist');
27+
});
28+
29+
it('should have a pre/code elements with language-javascript & code.hljs class', () => {
30+
cy.get(codeBlockExamples).find('pre, code').should('have.class', 'language-javascript');
31+
cy.get(codeBlockExamples).find('code').should('have.class', 'hljs');
32+
});
33+
34+
it('should contain rendered code', () => {
35+
cy.get(codeBlockExamples).find('code').should('contain.text', 'const numbers = [1, 2, 3, 4, 5];');
36+
});
37+
});
38+
39+
describe('Vue Example', () => {
40+
const codeBlockExamples = '#lang-vue-examples .v-code-block';
41+
42+
it('should have 1 code block', () => {
43+
cy.get(codeBlockExamples).should('have.length', 1);
44+
});
45+
46+
it('should have code block classes', () => {
47+
cy.get(codeBlockExamples).children('.v-code-block--code').should('exist');
48+
cy.get(codeBlockExamples).find('.v-code-block--code-copy-button').should('exist');
49+
cy.get(codeBlockExamples).find('.v-code-block--code-copy-button-status-copy').should('exist');
50+
cy.get(codeBlockExamples).find('.v-code-block--button-copy-icon').should('exist');
51+
});
52+
53+
it('should have a pre and code elements', () => {
54+
cy.get(codeBlockExamples).find('pre, code').should('exist');
55+
});
56+
57+
it('should have a pre/code elements with language-html class & code.hljs class', () => {
58+
cy.get(codeBlockExamples).find('pre, code').should('have.class', 'language-html');
59+
cy.get(codeBlockExamples).find('code').should('have.class', 'hljs');
60+
});
61+
62+
it('should contain rendered code', () => {
63+
cy.get(codeBlockExamples).find('code').should('contain.text', '<template>');
64+
});
65+
});
66+
67+
describe('CSS Example', () => {
68+
const codeBlockExamples = '#lang-css-examples .v-code-block';
69+
70+
it('should have 1 code block', () => {
71+
cy.get(codeBlockExamples).should('have.length', 1);
72+
});
73+
74+
it('should have code block classes', () => {
75+
cy.get(codeBlockExamples).children('.v-code-block--code').should('exist');
76+
cy.get(codeBlockExamples).find('.v-code-block--code-copy-button').should('exist');
77+
cy.get(codeBlockExamples).find('.v-code-block--code-copy-button-status-copy').should('exist');
78+
cy.get(codeBlockExamples).find('.v-code-block--button-copy-icon').should('exist');
79+
});
80+
81+
it('should have a pre and code elements', () => {
82+
cy.get(codeBlockExamples).find('pre, code').should('exist');
83+
});
84+
85+
it('should have a pre/code elements with language-css class & code.hljs class', () => {
86+
cy.get(codeBlockExamples).find('pre, code').should('have.class', 'language-css');
87+
cy.get(codeBlockExamples).find('code').should('have.class', 'hljs');
88+
});
89+
90+
it('should contain rendered code', () => {
91+
cy.get(codeBlockExamples).find('code').should('contain.text', 'WebDevNerdStuff Neon Bunny');
92+
});
93+
});
94+
95+
describe('HTML Example', () => {
96+
const codeBlockExamples = '#lang-html-examples .v-code-block';
97+
98+
it('should have 1 code block', () => {
99+
cy.get(codeBlockExamples).should('have.length', 1);
100+
});
101+
102+
it('should have code block classes', () => {
103+
cy.get(codeBlockExamples).children('.v-code-block--code').should('exist');
104+
cy.get(codeBlockExamples).find('.v-code-block--code-copy-button').should('exist');
105+
cy.get(codeBlockExamples).find('.v-code-block--code-copy-button-status-copy').should('exist');
106+
cy.get(codeBlockExamples).find('.v-code-block--button-copy-icon').should('exist');
107+
});
108+
109+
it('should have a pre and code elements', () => {
110+
cy.get(codeBlockExamples).find('pre, code').should('exist');
111+
});
112+
113+
it('should have a pre/code elements with language-html class & code.hljs class', () => {
114+
cy.get(codeBlockExamples).find('pre, code').should('have.class', 'language-html');
115+
cy.get(codeBlockExamples).find('code').should('have.class', 'hljs');
116+
});
117+
118+
it('should contain rendered code', () => {
119+
cy.get(codeBlockExamples).find('code').should('contain.text', '<!DOCTYPE html>');
120+
});
121+
});
122+
123+
describe('SVG Example', () => {
124+
const codeBlockExamples = '#lang-svg-examples .v-code-block';
125+
126+
it('should have 1 code block', () => {
127+
cy.get(codeBlockExamples).should('have.length', 1);
128+
});
129+
130+
it('should have code block classes', () => {
131+
cy.get(codeBlockExamples).children('.v-code-block--code').should('exist');
132+
cy.get(codeBlockExamples).find('.v-code-block--code-copy-button').should('exist');
133+
cy.get(codeBlockExamples).find('.v-code-block--code-copy-button-status-copy').should('exist');
134+
cy.get(codeBlockExamples).find('.v-code-block--button-copy-icon').should('exist');
135+
});
136+
137+
it('should have a pre and code elements', () => {
138+
cy.get(codeBlockExamples).find('pre, code').should('exist');
139+
});
140+
141+
it('should have a pre/code elements with language-svg class & code.hljs class', () => {
142+
cy.get(codeBlockExamples).find('pre, code').should('have.class', 'language-svg');
143+
cy.get(codeBlockExamples).find('code').should('have.class', 'hljs');
144+
});
145+
146+
it('should contain rendered code', () => {
147+
cy.get(codeBlockExamples).find('code').should('contain.text', '<svg xmlns=');
148+
});
149+
});
150+
151+
describe('Typescript Example', () => {
152+
const codeBlockExamples = '#additional-languages-ts-example .v-code-block';
153+
154+
it('should have 1 code block', () => {
155+
cy.get(codeBlockExamples).should('have.length', 1);
156+
});
157+
158+
it('should have code block classes', () => {
159+
cy.get(codeBlockExamples).children('.v-code-block--code').should('exist');
160+
cy.get(codeBlockExamples).find('.v-code-block--code-copy-button').should('exist');
161+
cy.get(codeBlockExamples).find('.v-code-block--code-copy-button-status-copy').should('exist');
162+
cy.get(codeBlockExamples).find('.v-code-block--button-copy-icon').should('exist');
163+
});
164+
165+
it('should have a pre and code elements', () => {
166+
cy.get(codeBlockExamples).find('pre, code').should('exist');
167+
});
168+
169+
it('should have a pre/code elements with language-typescript class & code.hljs class', () => {
170+
cy.get(codeBlockExamples).find('pre, code').should('have.class', 'language-typescript');
171+
cy.get(codeBlockExamples).find('code').should('have.class', 'hljs');
172+
});
173+
174+
it('should contain rendered code', () => {
175+
cy.get(codeBlockExamples).find('code').should('contain.text', 'private name: string;');
176+
});
177+
});
178+
179+
describe('JSON Example', () => {
180+
const codeBlockExamples = '#additional-languages-json-example .v-code-block';
181+
182+
it('should have 1 code block', () => {
183+
cy.get(codeBlockExamples).should('have.length', 1);
184+
});
185+
186+
it('should have code block classes', () => {
187+
cy.get(codeBlockExamples).children('.v-code-block--code').should('exist');
188+
cy.get(codeBlockExamples).find('.v-code-block--code-copy-button').should('exist');
189+
cy.get(codeBlockExamples).find('.v-code-block--code-copy-button-status-copy').should('exist');
190+
cy.get(codeBlockExamples).find('.v-code-block--button-copy-icon').should('exist');
191+
});
192+
193+
it('should have a pre and code elements', () => {
194+
cy.get(codeBlockExamples).find('pre, code').should('exist');
195+
});
196+
197+
it('should have a pre/code elements with language-json class & code.hljs class', () => {
198+
cy.get(codeBlockExamples).find('pre, code').should('have.class', 'language-json');
199+
cy.get(codeBlockExamples).find('code').should('have.class', 'hljs');
200+
});
201+
202+
it('should contain rendered code', () => {
203+
cy.get(codeBlockExamples).find('code').should('contain.text', '"name": "John Doe",');
204+
});
205+
});
206+
207+
describe('PHP Example', () => {
208+
const codeBlockExamples = '#additional-languages-php-example .v-code-block';
209+
210+
it('should have 1 code block', () => {
211+
cy.get(codeBlockExamples).should('have.length', 1);
212+
});
213+
214+
it('should have code block classes', () => {
215+
cy.get(codeBlockExamples).children('.v-code-block--code').should('exist');
216+
cy.get(codeBlockExamples).find('.v-code-block--code-copy-button').should('exist');
217+
cy.get(codeBlockExamples).find('.v-code-block--code-copy-button-status-copy').should('exist');
218+
cy.get(codeBlockExamples).find('.v-code-block--button-copy-icon').should('exist');
219+
});
220+
221+
it('should have a pre and code elements', () => {
222+
cy.get(codeBlockExamples).find('pre, code').should('exist');
223+
});
224+
225+
it('should have a pre/code elements with language-php class & code.hljs class', () => {
226+
cy.get(codeBlockExamples).find('pre, code').should('have.class', 'language-php');
227+
cy.get(codeBlockExamples).find('code').should('have.class', 'hljs');
228+
});
229+
230+
it('should contain rendered code', () => {
231+
cy.get(codeBlockExamples).find('code').should('contain.text', 'namespace App\\Http\\Controllers;');
232+
});
233+
});
234+
235+
});

0 commit comments

Comments
 (0)