(false);
- const mobileClass = `${pluginName}--label-mobile`;
-
- let classes = useLabelClasses({ isMobile });
-
- it('should return icon class defaults', () => {
- expect(classes).toMatchSnapshot();
- });
-
- test('mobile classes', () => {
- classes = useLabelClasses({ isMobile });
- expect(classes[mobileClass]).toBeFalsy();
-
- isMobile.value = true;
- classes = useLabelClasses({ isMobile });
- expect(classes[mobileClass]).toBeTruthy();
- });
- });
-
- describe('useTabClasses', () => {
- const highlightjs = ref(defaultProps.highlightjs);
- const tabClassPrefix = `${pluginName}--tab`;
-
- let classes = useTabClasses({ highlightjs, useTheme: defaultTheme });
-
- it('should return icon class defaults', () => {
- expect(classes).toMatchSnapshot();
- });
-
- test('highlightjs classes', () => {
- classes = useTabClasses({ highlightjs, useTheme: defaultTheme });
- expect(classes[`${tabClassPrefix}-highlightjs-${defaultTheme}`]).toBeFalsy();
-
- highlightjs.value = true;
- classes = useTabClasses({ highlightjs, useTheme: defaultTheme });
- expect(classes[`${tabClassPrefix}-highlightjs-${defaultTheme}`]).toBeTruthy();
- });
-
- test('prismjs classes', () => {
- highlightjs.value = false;
- classes = useTabClasses({ highlightjs, useTheme: defaultTheme });
- expect(classes[`${tabClassPrefix}-prism-${defaultTheme}`]).toBeTruthy();
-
- highlightjs.value = true;
- classes = useTabClasses({ highlightjs, useTheme: defaultTheme });
- expect(classes[`${tabClassPrefix}-prism-${defaultTheme}`]).toBeFalsy();
- });
- });
-});
diff --git a/src/plugin/composables/__tests__/helpers.test.ts b/src/plugin/composables/__tests__/helpers.cy.ts
similarity index 76%
rename from src/plugin/composables/__tests__/helpers.test.ts
rename to src/plugin/composables/__tests__/helpers.cy.ts
index bb735ed..b22d3ca 100644
--- a/src/plugin/composables/__tests__/helpers.test.ts
+++ b/src/plugin/composables/__tests__/helpers.cy.ts
@@ -1,4 +1,3 @@
-import { describe, it, expect } from 'vitest';
import { useConvertToUnit } from '../helpers';
describe('Helpers Composable', () => {
@@ -7,37 +6,37 @@ describe('Helpers Composable', () => {
it('should return string with a default px unit', () => {
const unit = useConvertToUnit({ str: String(testValue) });
- expect(unit).toBe(`${testValue}px`);
+ expect(unit).to.eq(`${testValue}px`);
});
it('should return number with a default px unit', () => {
const unit = useConvertToUnit({ str: testValue });
- expect(unit).toBe(`${testValue}px`);
+ expect(unit).to.eq(`${testValue}px`);
});
it('should return string with a supplied unit', () => {
const unit = useConvertToUnit({ str: String(testValue), unit: 'em' });
- expect(unit).toBe(`${testValue}em`);
+ expect(unit).to.eq(`${testValue}em`);
});
it('should return number with a supplied unit', () => {
const unit = useConvertToUnit({ str: testValue, unit: 'em' });
- expect(unit).toBe(`${testValue}em`);
+ expect(unit).to.eq(`${testValue}em`);
});
it('should return undefined if str is null', () => {
const unit = useConvertToUnit({ str: null });
- expect(unit).toBe(undefined);
+ expect(unit).to.eq(undefined);
});
it('should return undefined if str is undefined', () => {
const unit = useConvertToUnit({ str: undefined });
- expect(unit).toBe(undefined);
+ expect(unit).to.eq(undefined);
});
it('should return undefined if str is empty', () => {
const unit = useConvertToUnit({ str: '' });
- expect(unit).toBe(undefined);
+ expect(unit).to.eq(undefined);
});
});
});
diff --git a/src/plugin/composables/__tests__/styles.test.ts b/src/plugin/composables/__tests__/styles.cy.ts
similarity index 69%
rename from src/plugin/composables/__tests__/styles.test.ts
rename to src/plugin/composables/__tests__/styles.cy.ts
index 7276563..4d57245 100644
--- a/src/plugin/composables/__tests__/styles.test.ts
+++ b/src/plugin/composables/__tests__/styles.cy.ts
@@ -1,4 +1,3 @@
-import { describe, it, expect } from 'vitest';
import { ref } from 'vue';
import {
useCodeTagStyles,
@@ -24,13 +23,19 @@ describe('Styles Composable', () => {
it('should return the code tag style defaults', () => {
expect(
useCodeTagStyles({ isLoading: false, useTheme: theme })
- ).toMatchSnapshot();
+ ).to.deep.equal({
+ "padding": "1em",
+ "width": "100%",
+ });
});
it('should return the code tag style defaults if loading', () => {
expect(
useCodeTagStyles({ isLoading: true, useTheme: theme })
- ).toMatchSnapshot();
+ ).to.deep.equal({
+ "padding": "1em",
+ "width": "",
+ });
});
});
@@ -42,29 +47,44 @@ describe('Styles Composable', () => {
it('should return the header style defaults', () => {
expect(
useHeaderStyles({ floatingTabs, tabGap })
- ).toMatchSnapshot();
+ ).to.deep.equal({
+ "bottom": "1px",
+ "gap": "0.25rem",
+ });
});
it('should return the header style with floatingTabs as false', () => {
expect(
useHeaderStyles({ floatingTabs: false, tabGap })
- ).toMatchSnapshot();
+ ).to.deep.equal({
+ "bottom": "0",
+ "gap": "0.25rem",
+ });
});
it('should return gap as undefined', () => {
expect(
useHeaderStyles({ floatingTabs: false, tabGap: '' })
- ).toMatchSnapshot();
+ ).to.deep.equal({
+ "bottom": "0",
+ "gap": "0px",
+ });
});
it('should return tabGap as 0px', () => {
expect(
useHeaderStyles({ floatingTabs: false, tabGap: undefined })
- ).toMatchSnapshot();
+ ).to.deep.equal({
+ "bottom": "0",
+ "gap": "0px",
+ });
expect(
useHeaderStyles({ floatingTabs: false, tabGap: '' })
- ).toMatchSnapshot();
+ ).to.deep.equal({
+ "bottom": "0",
+ "gap": "0px",
+ });
});
});
@@ -80,34 +100,49 @@ describe('Styles Composable', () => {
it('should return the pre tag style defaults', () => {
expect(
usePreTagStyles({ copyTab, height, maxHeight, radius, runTab, tabs, useTheme: defaultTheme })
- ).toMatchSnapshot();
+ ).to.deep.equal({
+ "borderRadius": "0.5rem",
+ "display": "flex",
+ "height": "auto",
+ "maxHeight": "auto",
+ "overflow": "auto",
+ });
});
it('should return the set radius if no tabs', () => {
expect(
usePreTagStyles({ copyTab, height, maxHeight, radius, runTab, tabs, useTheme: defaultTheme })
- ).toMatchSnapshot();
+ ).to.deep.equal({
+ "borderRadius": "0.5rem",
+ "display": "flex",
+ "height": "auto",
+ "maxHeight": "auto",
+ "overflow": "auto",
+ });
});
it('should return the set radius with tabs', () => {
expect(
usePreTagStyles({ copyTab, height, maxHeight, radius, runTab, tabs: true, useTheme: defaultTheme })
- ).toMatchSnapshot();
+ ).to.deep.equal({
+ "borderRadius": "0.5rem 0 0.5rem 0.5rem !important",
+ "display": "flex",
+ "height": "auto",
+ "maxHeight": "auto",
+ "overflow": "auto",
+ });
});
- // TODO (fix): The border radius is not set correctly if using multiple units with tabs //
it('should return the set radius', () => {
expect(
usePreTagStyles({ copyTab, height, maxHeight, radius: '0 1em', runTab, tabs: true, useTheme: defaultTheme })
- ).toMatchInlineSnapshot(`
- {
- "borderRadius": "0 1em 0 0 1em 0 1em !important",
- "display": "flex",
- "height": "auto",
- "maxHeight": "auto",
- "overflow": "auto",
- }
- `);
+ ).to.deep.equal({
+ "borderRadius": "0 1em 0 0 1em 0 1em !important",
+ "display": "flex",
+ "height": "auto",
+ "maxHeight": "auto",
+ "overflow": "auto",
+ });
});
});
@@ -118,17 +153,23 @@ describe('Styles Composable', () => {
it('should return the tab group style defaults', () => {
expect(
useTabGroupStyles({ tabGap })
- ).toMatchSnapshot();
+ ).to.deep.equal({
+ "gap": "0.25rem",
+ });
});
it('should return tabGap as 0px', () => {
expect(
useTabGroupStyles({ tabGap: undefined })
- ).toMatchSnapshot();
+ ).to.deep.equal({
+ "gap": "0px",
+ });
expect(
useTabGroupStyles({ tabGap: '' })
- ).toMatchSnapshot();
+ ).to.deep.equal({
+ "gap": "0px",
+ });
});
});
diff --git a/src/plugin/composables/classes.ts b/src/plugin/composables/classes.ts
index f6a6a46..91b4edb 100644
--- a/src/plugin/composables/classes.ts
+++ b/src/plugin/composables/classes.ts
@@ -1,3 +1,4 @@
+import { unref } from 'vue';
import { pluginName } from '../utils/globals';
import {
UseCodeBlockClasses,
diff --git a/src/plugin/composables/styles.ts b/src/plugin/composables/styles.ts
index e1dbb54..0e522af 100644
--- a/src/plugin/composables/styles.ts
+++ b/src/plugin/composables/styles.ts
@@ -1,4 +1,5 @@
-import { CSSProperties } from 'vue';
+import { unref } from 'vue';
+import type { CSSProperties, } from 'vue';
import { useConvertToUnit } from './helpers';
import {
UseCodeTagStyles,
diff --git a/tsconfig.json b/tsconfig.json
index 7d9634e..3b8bb83 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -27,7 +27,7 @@
]
},
"resolveJsonModule": true,
- "rootDir": "src",
+ "rootDir": "./",
"skipLibCheck": true,
"strict": true,
"target": "ESNext",
@@ -47,6 +47,7 @@
"node_modules"
],
"include": [
+ "cypress",
"src/playground/configs/templates/PlaygroundPage.ts.vue",
"src/playground/PlaygroundPage.ts.vue",
"src/plugin/**/*.ts",
pFad - Phonifier reborn
Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.
Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.
Alternative Proxies:
Alternative Proxy
pFad Proxy
pFad v3 Proxy
pFad v4 Proxy