mirror of
https://github.com/n8n-io/n8n.git
synced 2024-12-24 20:24:05 -08:00
fix: Fix ColorCircles
and Sizes
initial render (no-changelog) (#9780)
Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <aditya@netroy.in>
This commit is contained in:
parent
12604fe1da
commit
a484862576
|
@ -59,6 +59,7 @@
|
|||
"typescript": "*",
|
||||
"vite": "^5.2.12",
|
||||
"vitest": "^1.6.0",
|
||||
"vitest-mock-extended": "^1.3.1",
|
||||
"vue-tsc": "^2.0.19"
|
||||
},
|
||||
"pnpm": {
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, onUnmounted, reactive } from 'vue';
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
import type { PropType } from 'vue';
|
||||
import { getHex, resolveHSLCalc } from './ColorCircles.utils';
|
||||
|
||||
|
@ -10,23 +10,28 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const hsl = reactive<{ [color: string]: string }>({});
|
||||
const observer = ref<MutationObserver | null>(null);
|
||||
|
||||
const setColors = () => {
|
||||
for (const color of props.colors) {
|
||||
const getColors = () => {
|
||||
const style = getComputedStyle(document.body);
|
||||
hsl[color] = style.getPropertyValue(color);
|
||||
|
||||
const hslColors: Record<string, string> = {};
|
||||
for (const color of props.colors) {
|
||||
const colorValue = style.getPropertyValue(color);
|
||||
if (colorValue) {
|
||||
hslColors[color] = colorValue;
|
||||
}
|
||||
}
|
||||
|
||||
return hslColors;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
setColors();
|
||||
const hsl = ref<{ [color: string]: string }>(getColors());
|
||||
const observer = ref<MutationObserver | null>(null);
|
||||
|
||||
onMounted(() => {
|
||||
observer.value = new MutationObserver((mutationsList) => {
|
||||
for (const mutation of mutationsList) {
|
||||
if (mutation.type === 'attributes') {
|
||||
setColors();
|
||||
hsl.value = getColors();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
@ -42,8 +47,8 @@ onUnmounted(() => {
|
|||
});
|
||||
|
||||
// Expose functions for template usage
|
||||
const getHexValue = (color: string) => getHex(hsl[color]);
|
||||
const getHSLValue = (color: string) => resolveHSLCalc(hsl[color]);
|
||||
const getHexValue = (color: string) => getHex(hsl.value[color]);
|
||||
const getHSLValue = (color: string) => resolveHSLCalc(hsl.value[color]);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
|
@ -1,6 +1,11 @@
|
|||
<script setup lang="ts">
|
||||
import type { PropType } from 'vue';
|
||||
import { ref, onMounted, onUnmounted, reactive } from 'vue';
|
||||
import { ref, onMounted, onUnmounted } from 'vue';
|
||||
|
||||
type Size = {
|
||||
rem: string;
|
||||
px: number;
|
||||
};
|
||||
|
||||
// Define props with their types
|
||||
const props = defineProps({
|
||||
|
@ -14,27 +19,29 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const sizes = reactive<Record<string, { rem: string; px: number }>>({});
|
||||
const observer = ref<MutationObserver | null>(null);
|
||||
|
||||
const setSizes = () => {
|
||||
for (const variable of props.variables) {
|
||||
const getSizes = () => {
|
||||
const style = getComputedStyle(document.body);
|
||||
|
||||
const sizeByVariableName: Record<string, Size> = {};
|
||||
for (const variable of props.variables) {
|
||||
const rem = style.getPropertyValue(variable);
|
||||
const px = parseFloat(rem.replace('rem', '')) * 16; // Assuming default font-size is 16px
|
||||
|
||||
sizes[variable] = { rem, px };
|
||||
sizeByVariableName[variable] = { rem, px };
|
||||
}
|
||||
|
||||
return sizeByVariableName;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
setSizes();
|
||||
const sizes = ref<Record<string, Size>>(getSizes());
|
||||
const observer = ref<MutationObserver | null>(null);
|
||||
|
||||
onMounted(() => {
|
||||
// Observing attributes changes in body to recompute sizes
|
||||
const mutationObserverCallback = (mutationsList: MutationRecord[]) => {
|
||||
for (const mutation of mutationsList) {
|
||||
if (mutation.type === 'attributes') {
|
||||
setSizes();
|
||||
sizes.value = getSizes();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
@ -0,0 +1,32 @@
|
|||
import { render } from '@testing-library/vue';
|
||||
import { mock, mockClear } from 'vitest-mock-extended';
|
||||
import ColorCircles from '../ColorCircles.vue';
|
||||
|
||||
describe('ColorCircles', () => {
|
||||
const mockCssDeclaration = mock<CSSStyleDeclaration>();
|
||||
window.getComputedStyle = () => mockCssDeclaration;
|
||||
|
||||
beforeEach(() => {
|
||||
mockClear(mockCssDeclaration);
|
||||
});
|
||||
|
||||
it('should render an empty section with empty colors', () => {
|
||||
const wrapper = render(ColorCircles, {
|
||||
props: {
|
||||
colors: [],
|
||||
},
|
||||
});
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should render a section with two colors', () => {
|
||||
mockCssDeclaration.getPropertyValue.mockReturnValue('#663399');
|
||||
|
||||
const wrapper = render(ColorCircles, {
|
||||
props: {
|
||||
colors: ['--color-primary-shade-1', '--color-primary'],
|
||||
},
|
||||
});
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
});
|
|
@ -0,0 +1,23 @@
|
|||
import { render } from '@testing-library/vue';
|
||||
import { mock, mockClear } from 'vitest-mock-extended';
|
||||
import Sizes from '../Sizes.vue';
|
||||
|
||||
describe('Sizes', () => {
|
||||
const mockCssDeclaration = mock<CSSStyleDeclaration>();
|
||||
window.getComputedStyle = () => mockCssDeclaration;
|
||||
|
||||
beforeEach(() => {
|
||||
mockClear(mockCssDeclaration);
|
||||
});
|
||||
|
||||
it('should render a section with a variable', () => {
|
||||
mockCssDeclaration.getPropertyValue.mockReturnValue('400');
|
||||
|
||||
const wrapper = render(Sizes, {
|
||||
props: {
|
||||
variables: ['--font-weight-regular'],
|
||||
},
|
||||
});
|
||||
expect(wrapper.html()).toMatchSnapshot();
|
||||
});
|
||||
});
|
|
@ -0,0 +1,14 @@
|
|||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`ColorCircles > should render a section with two colors 1`] = `
|
||||
"<div class="section">
|
||||
<div class="container">
|
||||
<div class="circle"></div><span>--color-primary-shade-1</span><span class="hsl">#663399</span><span class="color">#NaNNaNNaN</span>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="circle"></div><span>--color-primary</span><span class="hsl">#663399</span><span class="color">#NaNNaNNaN</span>
|
||||
</div>
|
||||
</div>"
|
||||
`;
|
||||
|
||||
exports[`ColorCircles > should render an empty section with empty colors 1`] = `"<div class="section"></div>"`;
|
|
@ -0,0 +1,16 @@
|
|||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`Sizes > should render a section with a variable 1`] = `
|
||||
"<table class="table">
|
||||
<tr>
|
||||
<th class="row">Name</th>
|
||||
<th class="row">rem</th>
|
||||
<th class="row">px</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>--font-weight-regular</td>
|
||||
<td>400</td>
|
||||
<td>6400</td>
|
||||
</tr>
|
||||
</table>"
|
||||
`;
|
|
@ -110,6 +110,9 @@ importers:
|
|||
vitest:
|
||||
specifier: ^1.6.0
|
||||
version: 1.6.0(@types/node@18.16.16)(jsdom@23.0.1)(sass@1.64.1)(terser@5.16.1)
|
||||
vitest-mock-extended:
|
||||
specifier: ^1.3.1
|
||||
version: 1.3.1(typescript@5.4.2)(vitest@1.6.0(@types/node@18.16.16)(jsdom@23.0.1)(sass@1.64.1)(terser@5.16.1))
|
||||
vue-tsc:
|
||||
specifier: ^2.0.19
|
||||
version: 2.0.19(typescript@5.4.2)
|
||||
|
@ -12760,6 +12763,14 @@ packages:
|
|||
peerDependencies:
|
||||
typescript: ^5.4.2
|
||||
|
||||
ts-essentials@9.4.2:
|
||||
resolution: {integrity: sha512-mB/cDhOvD7pg3YCLk2rOtejHjjdSi9in/IBYE13S+8WA5FBSraYf4V/ws55uvs0IvQ/l0wBOlXy5yBNZ9Bl8ZQ==}
|
||||
peerDependencies:
|
||||
typescript: ^5.4.2
|
||||
peerDependenciesMeta:
|
||||
typescript:
|
||||
optional: true
|
||||
|
||||
ts-ics@1.2.2:
|
||||
resolution: {integrity: sha512-L7T5JQi99qQ2Uv7AoCHUZ8Mx1bJYo7qBZtBckuHueR90I3WVdW5NC/tOqTVgu18c3zj08du+xlgWlTIcE+Foxw==}
|
||||
peerDependencies:
|
||||
|
@ -13245,6 +13256,12 @@ packages:
|
|||
terser:
|
||||
optional: true
|
||||
|
||||
vitest-mock-extended@1.3.1:
|
||||
resolution: {integrity: sha512-OpghYjh4BDuQ/Mzs3lFMQ1QRk9D8/2O9T47MLUA5eLn7K4RWIy+MfIivYOWEyxjTENjsBnzgMihDjyNalN/K0Q==}
|
||||
peerDependencies:
|
||||
typescript: ^5.4.2
|
||||
vitest: '>=0.31.1'
|
||||
|
||||
vitest@1.6.0:
|
||||
resolution: {integrity: sha512-H5r/dN06swuFnzNFhq/dnz37bPXnq8xB2xB5JOVk8K09rUtoeNN+LHWkoQ0A/i3hvbUKKcCei9KpbxqHMLhLLA==}
|
||||
engines: {node: ^18.0.0 || >=20.0.0}
|
||||
|
@ -27877,6 +27894,10 @@ snapshots:
|
|||
dependencies:
|
||||
typescript: 5.4.2
|
||||
|
||||
ts-essentials@9.4.2(typescript@5.4.2):
|
||||
optionalDependencies:
|
||||
typescript: 5.4.2
|
||||
|
||||
ts-ics@1.2.2(date-fns@2.30.0)(lodash@4.17.21)(zod@3.23.8):
|
||||
dependencies:
|
||||
date-fns: 2.30.0
|
||||
|
@ -28372,6 +28393,12 @@ snapshots:
|
|||
sass: 1.64.1
|
||||
terser: 5.16.1
|
||||
|
||||
vitest-mock-extended@1.3.1(typescript@5.4.2)(vitest@1.6.0(@types/node@18.16.16)(jsdom@23.0.1)(sass@1.64.1)(terser@5.16.1)):
|
||||
dependencies:
|
||||
ts-essentials: 9.4.2(typescript@5.4.2)
|
||||
typescript: 5.4.2
|
||||
vitest: 1.6.0(@types/node@18.16.16)(jsdom@23.0.1)(sass@1.64.1)(terser@5.16.1)
|
||||
|
||||
vitest@1.6.0(@types/node@18.16.16)(jsdom@23.0.1)(sass@1.64.1)(terser@5.16.1):
|
||||
dependencies:
|
||||
'@vitest/expect': 1.6.0
|
||||
|
|
Loading…
Reference in a new issue