Skip to content

fix(form-elements): add element internals mock stencil unit test #642

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
QuintonJason wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(form-elements): add element internals mock stencil unit test #642

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions libs/core/src/components/pds-checkbox/test/pds-checkbox.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,31 @@ import { PdsCheckbox } from '../pds-checkbox';
import { danger } from '@pine-ds/icons/icons';

describe('pds-checkbox', () => {
const mockInternals = {
setFormValue: jest.fn(),
setValidity: jest.fn(),
};
let originalAttachInternals: unknown;

beforeAll(() => {
originalAttachInternals = (HTMLElement.prototype as { attachInternals?: unknown }).attachInternals;
Object.defineProperty(HTMLElement.prototype, 'attachInternals', {
configurable: true,
value: () => mockInternals,
});
});

afterAll(() => {
if (originalAttachInternals) {
Object.defineProperty(HTMLElement.prototype, 'attachInternals', {
configurable: true,
value: originalAttachInternals,
});
} else {
delete (HTMLElement.prototype as { attachInternals?: unknown }).attachInternals;
}
});

it('renders', async () => {
const page = await newSpecPage({
components: [PdsCheckbox],
Expand Down
25 changes: 25 additions & 0 deletions libs/core/src/components/pds-combobox/test/pds-combobox.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,31 @@ const createMockOption = (value: string, label: string, selected: boolean = fals
} as unknown as HTMLOptionElement);

describe('pds-combobox', () => {
const mockInternals = {
setFormValue: jest.fn(),
setValidity: jest.fn(),
};
let originalAttachInternals: unknown;

beforeAll(() => {
originalAttachInternals = (HTMLElement.prototype as { attachInternals?: unknown }).attachInternals;
Object.defineProperty(HTMLElement.prototype, 'attachInternals', {
configurable: true,
value: () => mockInternals,
});
});

afterAll(() => {
if (originalAttachInternals) {
Object.defineProperty(HTMLElement.prototype, 'attachInternals', {
configurable: true,
value: originalAttachInternals,
});
} else {
delete (HTMLElement.prototype as { attachInternals?: unknown }).attachInternals;
}
});

it('renders default combobox with input trigger', async () => {
const { root } = await newSpecPage({
components: [PdsCombobox],
Expand Down
24 changes: 24 additions & 0 deletions libs/core/src/components/pds-input/test/pds-input.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,30 @@ import { newSpecPage } from '@stencil/core/testing';
import { PdsInput } from '../pds-input';

describe('pds-input', () => {
const mockInternals = {
setFormValue: jest.fn(),
setValidity: jest.fn(),
};
let originalAttachInternals: unknown;

beforeAll(() => {
originalAttachInternals = (HTMLElement.prototype as { attachInternals?: unknown }).attachInternals;
Object.defineProperty(HTMLElement.prototype, 'attachInternals', {
configurable: true,
value: () => mockInternals,
});
});

afterAll(() => {
if (originalAttachInternals) {
Object.defineProperty(HTMLElement.prototype, 'attachInternals', {
configurable: true,
value: originalAttachInternals,
});
} else {
delete (HTMLElement.prototype as { attachInternals?: unknown }).attachInternals;
}
});
it('renders a value when prop is set', async () => {
const { root } = await newSpecPage({
components: [PdsInput],
Expand Down
24 changes: 24 additions & 0 deletions libs/core/src/components/pds-multiselect/test/__snapshots__/pds-multiselect.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`pds-multiselect renders with label 1`] = `
<pds-multiselect component-id="test" label="Select Tags">
<template shadowrootmode="open">
<div class="pds-multiselect">
<label class="pds-multiselect__label" htmlfor="test">
Select Tags
</label>
<div class="pds-multiselect__wrapper">
<button aria-expanded="false" aria-haspopup="listbox" class="pds-multiselect__trigger" id="test" type="button">
<span class="pds-multiselect__trigger-text pds-multiselect__trigger-text--placeholder">
Select...
</span>
<pds-icon class="pds-multiselect__icon" icon="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M11.293 3.293a1 1 0 0 1 1.414 0l5 5a1 1 0 0 1-1.414 1.414L12 5.414 7.707 9.707a1 1 0 0 1-1.414-1.414zm-5 11a1 1 0 0 1 1.414 0L12 18.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-5 5a1 1 0 0 1-1.414 0l-5-5a1 1 0 0 1 0-1.414'/></svg>"></pds-icon>
</button>
</div>
<div style="display: none;">
<slot></slot>
</div>
</div>
</template>
</pds-multiselect>
`;
25 changes: 25 additions & 0 deletions libs/core/src/components/pds-select/test/pds-select.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,31 @@ import { PdsSelect } from '../pds-select';
import { enlarge } from '@pine-ds/icons/icons';

describe('pds-select', () => {
const mockInternals = {
setFormValue: jest.fn(),
setValidity: jest.fn(),
};
let originalAttachInternals: unknown;

beforeAll(() => {
originalAttachInternals = (HTMLElement.prototype as { attachInternals?: unknown }).attachInternals;
Object.defineProperty(HTMLElement.prototype, 'attachInternals', {
configurable: true,
value: () => mockInternals,
});
});

afterAll(() => {
if (originalAttachInternals) {
Object.defineProperty(HTMLElement.prototype, 'attachInternals', {
configurable: true,
value: originalAttachInternals,
});
} else {
delete (HTMLElement.prototype as { attachInternals?: unknown }).attachInternals;
}
});

it('renders', async () => {
const { root } = await newSpecPage({
components: [PdsSelect],
Expand Down
25 changes: 25 additions & 0 deletions libs/core/src/components/pds-switch/test/pds-switch.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,31 @@ import { PdsSwitch } from '../pds-switch';
import { danger } from '@pine-ds/icons/icons';

describe('pds-switch', () => {
const mockInternals = {
setFormValue: jest.fn(),
setValidity: jest.fn(),
};
let originalAttachInternals: unknown;

beforeAll(() => {
originalAttachInternals = (HTMLElement.prototype as { attachInternals?: unknown }).attachInternals;
Object.defineProperty(HTMLElement.prototype, 'attachInternals', {
configurable: true,
value: () => mockInternals,
});
});

afterAll(() => {
if (originalAttachInternals) {
Object.defineProperty(HTMLElement.prototype, 'attachInternals', {
configurable: true,
value: originalAttachInternals,
});
} else {
delete (HTMLElement.prototype as { attachInternals?: unknown }).attachInternals;
}
});

it('renders an input as a checkbox with label', async () => {
const page = await newSpecPage({
components: [PdsSwitch],
Expand Down
25 changes: 25 additions & 0 deletions libs/core/src/components/pds-textarea/test/pds-textarea.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,31 @@ import { PdsTextarea } from '../pds-textarea';
import { danger } from '@pine-ds/icons/icons';

describe('pds-textarea', () => {
const mockInternals = {
setFormValue: jest.fn(),
setValidity: jest.fn(),
};
let originalAttachInternals: unknown;

beforeAll(() => {
originalAttachInternals = (HTMLElement.prototype as { attachInternals?: unknown }).attachInternals;
Object.defineProperty(HTMLElement.prototype, 'attachInternals', {
configurable: true,
value: () => mockInternals,
});
});

afterAll(() => {
if (originalAttachInternals) {
Object.defineProperty(HTMLElement.prototype, 'attachInternals', {
configurable: true,
value: originalAttachInternals,
});
} else {
delete (HTMLElement.prototype as { attachInternals?: unknown }).attachInternals;
}
});

it('renders default textarea', async () => {
const {root} = await newSpecPage({
components: [PdsTextarea],
Expand Down
75 changes: 75 additions & 0 deletions libs/core/stencil.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
import { Config } from '@stencil/core';
import { existsSync, readFileSync } from 'fs';
import { request } from 'node:http';
import { resolve } from 'path';
import { reactOutputTarget } from '@stencil/react-output-target';

// Plugins
Expand All @@ -7,6 +10,78 @@ import { sass } from '@stencil/sass';
// Custom output targets
import vscodeCustomDataOutputTarget from './scripts/vscode-custom-data-generator';

// #region agent log
const debugRunId = process.env.DEBUG_RUN_ID || 'pre-fix';
const debugLog = (message: string, data: Record<string, unknown>, hypothesisId: string) => {
const payload = {
sessionId: 'debug-session',
runId: debugRunId,
hypothesisId,
location: 'libs/core/stencil.config.ts',
message,
data,
timestamp: Date.now(),
};

if (typeof fetch === 'function') {
fetch('http://127.0.0.1:7243/ingest/3744f2d7-8ec9-48ce-9313-5076103493e4', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload),
}).catch(() => {});
return;
}

try {
const url = new URL('http://127.0.0.1:7243/ingest/3744f2d7-8ec9-48ce-9313-5076103493e4');
const req = request(
{
hostname: url.hostname,
port: url.port,
path: url.pathname,
method: 'POST',
headers: { 'Content-Type': 'application/json' },
},
(res) => res.resume()
);
req.on('error', () => {});
req.write(JSON.stringify(payload));
req.end();
} catch {
// swallow logging errors
}
};

debugLog('stencil-config-load', {
cwd: process.cwd(),
argv: process.argv,
ci: process.env.CI,
nxTarget: process.env.NX_TASK_TARGET_TARGET,
}, 'H1');

const componentsPkgPath = resolve(__dirname, 'components/package.json');
const scriptsPkgPath = resolve(__dirname, 'scripts/custom-elements/package.json');
const componentsExists = existsSync(componentsPkgPath);
const scriptsExists = existsSync(scriptsPkgPath);
const componentsName = componentsExists ? JSON.parse(readFileSync(componentsPkgPath, 'utf8')).name : null;
const scriptsName = scriptsExists ? JSON.parse(readFileSync(scriptsPkgPath, 'utf8')).name : null;

debugLog('stencil-package-presence', {
componentsPkgPath,
scriptsPkgPath,
componentsExists,
scriptsExists,
componentsName,
scriptsName,
}, 'H2');

if (componentsExists && scriptsExists && componentsName === scriptsName) {
debugLog('stencil-duplicate-package-name', {
duplicateName: componentsName,
}, 'H3');
}
// #endregion

export const config: Config = {
namespace: 'pine-core',
globalStyle: 'src/global/styles/app.scss',
Expand Down
Loading