Skip to content

Commit 8730115

Browse files
webdevnerdstuffwebdevnerdstuff
committed
add cypress tests and remove vitest tests
1 parent 573aa93 commit 8730115

File tree

8 files changed

+315
-392
lines changed

8 files changed

+315
-392
lines changed

‎src/plugin/composables/__tests__/__snapshots__/classes.test.ts.snap

Lines changed: 0 additions & 43 deletions
This file was deleted.

‎src/plugin/composables/__tests__/__snapshots__/styles.test.ts.snap

Lines changed: 0 additions & 98 deletions
This file was deleted.

‎src/plugin/composables/__tests__/classes.cy.ts

Lines changed: 240 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,240 @@
1+
import { ref } from 'vue';
2+
3+
import {
4+
useCodeBlockClasses,
5+
useCopyButtonClasses,
6+
useIconClasses,
7+
useLabelClasses,
8+
useTabClasses,
9+
} from '../classes';
10+
import {
11+
CopyStatus,
12+
Props,
13+
UseTheme,
14+
} from '../../types';
15+
import { AllProps } from '../../utils/props';
16+
import { pluginName } from '../../utils/globals';
17+
18+
19+
const defaultProps: Props = { ...AllProps };
20+
const defaultTheme = defaultProps.theme as UseTheme;
21+
22+
23+
describe('Classes Composable', () => {
24+
describe('useCodeBlockClasses', () => {
25+
const isMobile = ref(false);
26+
const isMobileClass = `${pluginName}--mobile`;
27+
const isPrism = ref(false);
28+
const isPrismClass = `${pluginName}--prismjs`;
29+
let classes = useCodeBlockClasses({ isMobile, isPrism });
30+
31+
it('should return the codeblock class defaults', () => {
32+
expect(classes).to.deep.equal({
33+
"v-code-block": true,
34+
"v-code-block--highlightjs": true,
35+
"v-code-block--mobile": false,
36+
"v-code-block--prismjs": false,
37+
"v-code-block-mb-5": true,
38+
});
39+
});
40+
41+
it('mobile classes', () => {
42+
isMobile.value = true;
43+
44+
classes = useCodeBlockClasses({ isMobile, isPrism });
45+
expect(classes[isMobileClass]).to.be.true;
46+
47+
isMobile.value = false;
48+
classes = useCodeBlockClasses({ isMobile, isPrism });
49+
expect(classes[isMobileClass]).to.be.false;
50+
});
51+
52+
it('prismjs classes', () => {
53+
isPrism.value = true;
54+
55+
classes = useCodeBlockClasses({ isMobile, isPrism });
56+
expect(classes[isPrismClass]).to.be.true;
57+
58+
isPrism.value = false;
59+
classes = useCodeBlockClasses({ isMobile, isPrism });
60+
expect(classes[isPrismClass]).to.be.false;
61+
});
62+
});
63+
64+
describe('useCopyButtonClasses', () => {
65+
const copyStatus = ref<CopyStatus>('copy');
66+
const copyStatusClassPrefix = `${pluginName}--code-copy-button-status`;
67+
const isMobile = ref(false);
68+
const isMobileClass = `${pluginName}--code-copy-button-mobile`;
69+
const persistentCopyButton = ref(defaultProps.persistentCopyButton);
70+
const persistentCopyButtonCLass = `${pluginName}--code-copy-button-persist`;
71+
72+
let classes = useCopyButtonClasses({ copyStatus, isMobile, persistentCopyButton });
73+
74+
it('should return copy button class defaults', () => {
75+
expect(classes).to.deep.equal({
76+
"v-code-block--code-copy-button": true,
77+
"v-code-block--code-copy-button-mobile": false,
78+
"v-code-block--code-copy-button-persist": false,
79+
"v-code-block--code-copy-button-status-copy": true,
80+
});
81+
});
82+
83+
it('copy status classes', () => {
84+
classes = useCopyButtonClasses({ copyStatus, isMobile, persistentCopyButton });
85+
expect(classes[`${copyStatusClassPrefix}-copy`]).to.be.true;
86+
87+
copyStatus.value = 'success';
88+
classes = useCopyButtonClasses({ copyStatus, isMobile, persistentCopyButton });
89+
expect(classes[`${copyStatusClassPrefix}-success`]).to.be.true;
90+
91+
copyStatus.value = 'failed';
92+
classes = useCopyButtonClasses({ copyStatus, isMobile, persistentCopyButton });
93+
expect(classes[`${copyStatusClassPrefix}-failed`]).to.be.true;
94+
});
95+
96+
it('mobile classes', () => {
97+
isMobile.value = true;
98+
classes = useCopyButtonClasses({ copyStatus, isMobile, persistentCopyButton });
99+
expect(classes[isMobileClass]).to.be.true;
100+
101+
isMobile.value = false;
102+
classes = useCopyButtonClasses({ copyStatus, isMobile, persistentCopyButton });
103+
expect(classes[isMobileClass]).to.be.false;
104+
});
105+
106+
it('persistent copy button classes', () => {
107+
persistentCopyButton.value = true;
108+
classes = useCopyButtonClasses({ copyStatus, isMobile, persistentCopyButton });
109+
expect(classes[persistentCopyButtonCLass]).to.be.true;
110+
111+
persistentCopyButton.value = false;
112+
classes = useCopyButtonClasses({ copyStatus, isMobile, persistentCopyButton });
113+
expect(classes[persistentCopyButtonCLass]).to.be.false;
114+
});
115+
});
116+
117+
describe('useIconClasses', () => {
118+
const copyStatus = ref<CopyStatus>('copy');
119+
const highlightjs = ref(defaultProps.highlightjs);
120+
const highlightjsStatusClassPrefix = `${pluginName}--tab-highlightjs-${defaultTheme}-icon-status`;
121+
const prismCopyStatusClassPrefix = `${pluginName}--tab-prism-${defaultTheme}-icon-status`;
122+
const prismjsClass = `${pluginName}--tab-prism-neon-bunny-icon`;
123+
const highlightjsClass = `${pluginName}--tab-highlightjs-neon-bunny-icon`;
124+
125+
let classes = useIconClasses({ copyStatus, highlightjs, useTheme: defaultTheme });
126+
127+
it('should return icon class defaults', () => {
128+
expect(classes).to.deep.equal({
129+
"v-code-block--button-copy-icon-status-copy": true,
130+
"v-code-block--me-1": true,
131+
"v-code-block--tab-prism-neon-bunny-icon": true,
132+
"v-code-block--tab-prism-neon-bunny-icon-status-copy": true,
133+
});
134+
});
135+
136+
it('highlightjs class', () => {
137+
highlightjs.value = true;
138+
classes = useIconClasses({ copyStatus, highlightjs, useTheme: defaultTheme });
139+
expect(classes[highlightjsClass]).to.be.true;
140+
141+
highlightjs.value = false;
142+
classes = useIconClasses({ copyStatus, highlightjs, useTheme: defaultTheme });
143+
expect(classes[highlightjsClass]).to.be.undefined;
144+
});
145+
146+
it('prismjs class', () => {
147+
classes = useIconClasses({ copyStatus, highlightjs, useTheme: defaultTheme });
148+
expect(classes[prismjsClass]).to.be.true;
149+
150+
highlightjs.value = true;
151+
classes = useIconClasses({ copyStatus, highlightjs, useTheme: defaultTheme });
152+
expect(classes[prismjsClass]).to.be.undefined;
153+
});
154+
155+
it('copy status classes for prismjs', () => {
156+
highlightjs.value = false;
157+
classes = useIconClasses({ copyStatus, highlightjs, useTheme: defaultTheme });
158+
expect(classes[`${prismCopyStatusClassPrefix}-copy`]).to.be.true;
159+
160+
copyStatus.value = 'success';
161+
classes = useIconClasses({ copyStatus, highlightjs, useTheme: defaultTheme });
162+
expect(classes[`${prismCopyStatusClassPrefix}-success`]).to.be.true;
163+
164+
copyStatus.value = 'failed';
165+
classes = useIconClasses({ copyStatus, highlightjs, useTheme: defaultTheme });
166+
expect(classes[`${prismCopyStatusClassPrefix}-failed`]).to.be.true;
167+
});
168+
169+
it('copy status classes for highlightjs', () => {
170+
highlightjs.value = true;
171+
copyStatus.value = 'copy';
172+
classes = useIconClasses({ copyStatus, highlightjs, useTheme: defaultTheme });
173+
expect(classes[`${highlightjsStatusClassPrefix}-copy`]).to.be.true;
174+
175+
copyStatus.value = 'success';
176+
classes = useIconClasses({ copyStatus, highlightjs, useTheme: defaultTheme });
177+
expect(classes[`${highlightjsStatusClassPrefix}-success`]).to.be.true;
178+
179+
copyStatus.value = 'failed';
180+
classes = useIconClasses({ copyStatus, highlightjs, useTheme: defaultTheme });
181+
expect(classes[`${highlightjsStatusClassPrefix}-failed`]).to.be.true;
182+
});
183+
});
184+
185+
describe('useLabelClasses', () => {
186+
const isMobile = ref(false);
187+
const mobileClass = `${pluginName}--label-mobile`;
188+
189+
let classes = useLabelClasses({ isMobile });
190+
191+
it('should return icon class defaults', () => {
192+
expect(classes).to.deep.equal({
193+
"v-code-block--label": true,
194+
"v-code-block--label-mobile": false,
195+
});
196+
});
197+
198+
it('mobile classes', () => {
199+
classes = useLabelClasses({ isMobile });
200+
expect(classes[mobileClass]).to.be.false;
201+
202+
isMobile.value = true;
203+
classes = useLabelClasses({ isMobile });
204+
expect(classes[mobileClass]).to.be.true;
205+
});
206+
});
207+
208+
describe('useTabClasses', () => {
209+
const highlightjs = ref(defaultProps.highlightjs);
210+
const tabClassPrefix = `${pluginName}--tab`;
211+
212+
let classes = useTabClasses({ highlightjs, useTheme: defaultTheme });
213+
214+
it('should return icon class defaults', () => {
215+
expect(classes).to.deep.equal({
216+
"v-code-block--tab-neon-bunny": true,
217+
"v-code-block--tab-prism-neon-bunny": true,
218+
});
219+
});
220+
221+
it('highlightjs classes', () => {
222+
classes = useTabClasses({ highlightjs, useTheme: defaultTheme });
223+
expect(classes[`${tabClassPrefix}-highlightjs-${defaultTheme}`]).to.be.undefined;
224+
225+
highlightjs.value = true;
226+
classes = useTabClasses({ highlightjs, useTheme: defaultTheme });
227+
expect(classes[`${tabClassPrefix}-highlightjs-${defaultTheme}`]).to.be.true;
228+
});
229+
230+
it('prismjs classes', () => {
231+
highlightjs.value = false;
232+
classes = useTabClasses({ highlightjs, useTheme: defaultTheme });
233+
expect(classes[`${tabClassPrefix}-prism-${defaultTheme}`]).to.be.true;
234+
235+
highlightjs.value = true;
236+
classes = useTabClasses({ highlightjs, useTheme: defaultTheme });
237+
expect(classes[`${tabClassPrefix}-prism-${defaultTheme}`]).to.be.undefined;
238+
});
239+
});
240+
});

0 commit comments

Comments
 (0)