@descope/flow-components 2.0.38 → 2.0.40

package/test/phone.test.tsx

@@ -1,158 +0,0 @@
-/* eslint-disable testing-library/no-container */
-/* eslint-disable testing-library/no-node-access */
-import { render } from '@testing-library/react';
-import React from 'react';
-import userEvent from '@testing-library/user-event';
-import { Phone } from '../src';
-
-jest.mock('../src/Phone/CountryCodes.ts', () => [
-	{
-		name: 'Israel',
-		dialCode: '+972',
-		code: 'IL'
-	},
-	{
-		name: 'United States',
-		dialCode: '+1',
-		code: 'US'
-	}
-]);
-
-describe.skip('Phone', () => {
-	it('rendered with default props', () => {
-		const { container } = render(<Phone />);
-		expect(container).toMatchSnapshot();
-	});
-
-	it('rendered with label', () => {
-		const { container } = render(<Phone label="label" />);
-		expect(container).toMatchSnapshot();
-	});
-
-	it('rendered with label and required', () => {
-		const { container } = render(<Phone label="label" required />);
-		expect(container).toMatchSnapshot();
-	});
-
-	it('rendered with fullWidth', () => {
-		const { container } = render(<Phone fullWidth />);
-		expect(container).toMatchSnapshot();
-	});
-
-	it('rendered with name', () => {
-		const { container } = render(<Phone name="name" label="label" />);
-		expect(container).toMatchSnapshot();
-	});
-
-	it('rendered with className', () => {
-		const { container } = render(<Phone className="className" />);
-		expect(container).toMatchSnapshot();
-	});
-
-	it('rendered with readOnly', () => {
-		const { container } = render(<Phone readOnly />);
-		expect(container).toMatchSnapshot();
-	});
-
-	it('rendered with custom error attributes', () => {
-		const { container } = render(
-			<Phone
-				data-errormessage-pattern-mismatch="pattern"
-				data-errormessage-value-missing="missing"
-			/>
-		);
-		expect(container).toMatchSnapshot();
-	});
-
-	it('rendered with custom scripts', () => {
-		global.process.env.SSR = 'true';
-
-		const spyToString = jest.spyOn(Function.prototype, 'toString');
-
-		spyToString.mockReturnValue(
-			(() => {
-				const x = 1 + 1;
-
-				return x;
-			}).toString()
-		);
-
-		const { container } = render(<Phone />);
-		expect(container).toMatchSnapshot();
-
-		spyToString.mockRestore();
-	});
-
-	describe('helpers', () => {
-		describe('syncInputs', () => {
-			it('should not allow input non digits characters', async () => {
-				const { container } = render(<Phone />);
-
-				const phone = container.querySelector('input[data-id]');
-				const hiddenInput = container.querySelector('input[data-input]');
-
-				await userEvent.type(phone, 'a');
-
-				expect(phone).toHaveValue('');
-				expect(hiddenInput).toHaveValue('+972-');
-			});
-			it('should update input correctly when setting the country code', async () => {
-				const { container } = render(<Phone />);
-
-				const countryCode = container.querySelector('select[data-id]');
-				const hiddenInput = container.querySelector('input[data-input]');
-
-				await userEvent.selectOptions(countryCode, 'US');
-
-				expect(hiddenInput).toHaveValue('+1-');
-			});
-			it('should update input correctly when setting the phone', async () => {
-				const { container } = render(<Phone />);
-
-				const phone = container.querySelector('input[data-id]');
-				const hiddenInput = container.querySelector('input[data-input]');
-
-				await userEvent.type(phone, '123');
-
-				expect(hiddenInput).toHaveValue('+972-123');
-			});
-			it('should update input correctly when updating the country code and there is no phone', async () => {
-				const { container } = render(<Phone />);
-
-				const countryCode = container.querySelector('select[data-id]');
-				const hiddenInput = container.querySelector('input[data-input]');
-
-				await userEvent.selectOptions(countryCode, 'IL');
-				await userEvent.selectOptions(countryCode, 'US');
-
-				expect(hiddenInput).toHaveValue('+1-');
-			});
-			it('should update input correctly when updating the country code and there is phone', async () => {
-				const { container } = render(<Phone />);
-
-				const phone = container.querySelector('input[data-id]');
-				const countryCode = container.querySelector('select[data-id]');
-				const hiddenInput = container.querySelector('input[data-input]');
-
-				await userEvent.type(phone, '123');
-				await userEvent.selectOptions(countryCode, 'IL');
-				await userEvent.selectOptions(countryCode, 'US');
-
-				expect(hiddenInput).toHaveValue('+1-123');
-			});
-		});
-
-		describe('withRuntimeDefaultValue', () => {
-			it('should use context value to set the dial code when auto detect is set to true', () => {
-				(document as any).context = { geo: 'US' };
-
-				const { container } = render(<Phone autoDetect />);
-				const hiddenInput = container.querySelector('input[data-input]');
-
-				expect(hiddenInput).toHaveValue('+1-');
-
-				(document as any).context = null;
-			});
-		});
-	});
-});

package/test/switch.test.tsx

@@ -1,67 +0,0 @@
-/* eslint-disable testing-library/no-container */
-/* eslint-disable testing-library/no-node-access */
-import { render } from '@testing-library/react';
-import React from 'react';
-import { Switch } from '../src';
-
-describe('Boolean Input', () => {
-	it('should render with label', () => {
-		const { container } = render(<Switch label="some label" name="toggle" />);
-		const label = container.querySelector('label');
-		expect(label).toHaveTextContent('some label');
-	});
-
-	it('should render with toggle component', () => {
-		const { container } = render(<Switch name="toggle" />);
-		container.querySelector('input');
-		expect(container).toMatchSnapshot();
-	});
-
-	it('should render with value', () => {
-		const { container } = render(<Switch name="toggle" />);
-		const checkbox = container.querySelector('input') as HTMLInputElement;
-
-		expect(checkbox.checked).toBeFalsy();
-
-		checkbox.click();
-		expect(checkbox.checked).toBeTruthy();
-
-		const label = container.querySelector('label');
-		label.click();
-		expect(checkbox.checked).toBeFalsy();
-	});
-
-	it('should render with name', () => {
-		const { container } = render(<Switch name="toggle" />);
-		const checkbox = container.querySelector('input') as HTMLInputElement;
-		expect(checkbox).toHaveAttribute('name', 'toggle');
-	});
-
-	it('should render with required attribute', () => {
-		const onSubmit = jest.fn((e) => e.preventDefault());
-
-		const { container } = render(
-			<form onSubmit={onSubmit}>
-				<Switch label="some label" name="toggle" required />
-				<button type="submit">submit</button>
-			</form>
-		);
-
-		const checkbox = container.querySelector('input') as HTMLInputElement;
-		expect(checkbox.required).toEqual(true);
-
-		const label = container.querySelector('label');
-		expect(label).toHaveTextContent('some label*');
-
-		container.querySelector('button').click();
-
-		expect(checkbox).not.toBeValid();
-	});
-
-	it('should render with size', () => {
-		const { container } = render(
-			<Switch label="some label" name="toggle" required size="sm" />
-		);
-		expect(container).toMatchSnapshot();
-	});
-});

package/test/text.test.tsx

@@ -1,60 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import React from 'react';
-import { Text } from '../src';
-
-describe('Text', () => {
-	it('rendered with default props', () => {
-		render(<Text>Text</Text>);
-		expect(screen.getByText('Text')).toMatchSnapshot();
-	});
-
-	it('rendered with size', () => {
-		render(<Text size="9xl">Text</Text>);
-		expect(screen.getByText('Text')).toMatchSnapshot();
-	});
-
-	it('rendered with fontWeight', () => {
-		render(<Text fontWeight="black">Text</Text>);
-		expect(screen.getByText('Text')).toMatchSnapshot();
-	});
-
-	it('rendered with fontFamily', () => {
-		render(<Text fontFamily="mono">Text</Text>);
-		expect(screen.getByText('Text')).toMatchSnapshot();
-	});
-
-	it('rendered with align', () => {
-		render(<Text align="end">Text</Text>);
-		expect(screen.getByText('Text')).toMatchSnapshot();
-	});
-
-	it('rendered with italic', () => {
-		render(<Text italic>Text</Text>);
-		expect(screen.getByText('Text')).toMatchSnapshot();
-	});
-
-	it('rendered with fullWidth', () => {
-		render(<Text fullWidth>Text</Text>);
-		expect(screen.getByText('Text')).toMatchSnapshot();
-	});
-
-	it('rendered with color', () => {
-		render(<Text color="error">Text</Text>);
-		expect(screen.getByText('Text')).toMatchSnapshot();
-	});
-
-	it('rendered with custom className', () => {
-		render(<Text className="kuku">Text</Text>);
-		expect(screen.getByText('Text')).toMatchSnapshot();
-	});
-
-	it('rendered with typography', () => {
-		render(<Text typography="body1">Text</Text>);
-		expect(screen.getByText('Text')).toMatchSnapshot();
-	});
-
-	it('rendered with variant', () => {
-		render(<Text variant="primary">Text</Text>);
-		expect(screen.getByText('Text')).toMatchSnapshot();
-	});
-});

package/test/textarea.test.tsx

@@ -1,64 +0,0 @@
-import { render } from '@testing-library/react';
-import React from 'react';
-import { Textarea } from '../src';
-
-describe('Textarea', () => {
-	it('rendered with default props', () => {
-		const { container } = render(<Textarea />);
-		expect(container).toMatchSnapshot();
-	});
-
-	it('rendered with label', () => {
-		const { container } = render(<Textarea label="label" />);
-		expect(container).toMatchSnapshot();
-	});
-
-	it('rendered with label and required', () => {
-		const { container } = render(<Textarea label="label" required />);
-		expect(container).toMatchSnapshot();
-	});
-
-	it('rendered with fullWidth', () => {
-		const { container } = render(<Textarea fullWidth />);
-		expect(container).toMatchSnapshot();
-	});
-
-	it('rendered with name', () => {
-		const { container } = render(<Textarea name="name" />);
-		expect(container).toMatchSnapshot();
-	});
-
-	it('rendered with className', () => {
-		const { container } = render(<Textarea className="className" />);
-		expect(container).toMatchSnapshot();
-	});
-
-	it('rendered with custom error attributes', () => {
-		const { container } = render(
-			<Textarea
-				data-errormessage-pattern-mismatch="pattern"
-				data-errormessage-value-missing="missing"
-			/>
-		);
-		expect(container).toMatchSnapshot();
-	});
-
-	it('rendered with custom scripts', () => {
-		global.process.env.SSR = 'true';
-
-		const spyToString = jest.spyOn(Function.prototype, 'toString');
-
-		spyToString.mockReturnValue(
-			(() => {
-				const x = 1 + 1;
-
-				return x;
-			}).toString()
-		);
-
-		const { container } = render(<Textarea />);
-		expect(container).toMatchSnapshot();
-
-		spyToString.mockRestore();
-	});
-});

package/test/themeToCssVars.test.ts

@@ -1,82 +0,0 @@
-import { Theme } from '../src';
-import generateCssVarsFromTheme from '../src/themeToCssVars';
-
-describe('themeToCssVars', () => {
-	it('should generate the correct css vars from a given theme', () => {
-		const theme: Theme = {
-			colors: {
-				primary: '#111111',
-				secondary: '#222222',
-				error: '#ffffff',
-				warning: '#000000'
-			},
-			components: {
-				'input-radius': '10px',
-				'input-border-opacity': '0',
-				'button-radius': '20px'
-			},
-			logo: {
-				'logo-url': 'http://any.url'
-			},
-			textColors: {},
-			typography: {
-				fontFamilies: [
-					{ label: 'Sans', family: ['Arial', 'sans-serif'], url: undefined },
-					{
-						label: 'Serif',
-						family: ['"Times New Roman"', 'serif'],
-						url: undefined
-					}
-				],
-				variants: {
-					h1: {
-						'font-family': '0',
-						'font-size': '8',
-						'font-weight': '100'
-					},
-					h2: {
-						'font-family': '1',
-						'font-size': '10',
-						'font-weight': '200'
-					},
-					h3: {
-						'font-family': '0',
-						'font-size': '12',
-						'font-weight': '300'
-					},
-					subtitle1: {
-						'font-family': '1',
-						'font-size': '14',
-						'font-weight': '400'
-					},
-					subtitle2: {
-						'font-family': '0',
-						'font-size': '16',
-						'font-weight': '500'
-					},
-					body1: {
-						'font-family': '1',
-						'font-size': '18',
-						'font-weight': '600'
-					},
-					body2: {
-						'font-family': '0',
-						'font-size': '20',
-						'font-weight': '700'
-					},
-					input: {
-						'font-family': '1'
-					},
-					button: {
-						'font-family': '0'
-					}
-				}
-			}
-		};
-
-		expect(generateCssVarsFromTheme(theme)).toMatchSnapshot();
-	});
-	it('should not throw when no theme', () => {
-		expect(generateCssVarsFromTheme).not.toThrow();
-	});
-});

package/test/totpImage.test.tsx

@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react';
-import React from 'react';
-import { TOTPImage } from '../src';
-
-describe('TOTP Image', () => {
-	it('rendered with default props', () => {
-		const { container } = render(<TOTPImage />);
-		expect(container).toMatchSnapshot();
-	});
-});

package/test/totpLink.test.tsx

@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react';
-import React from 'react';
-import { TOTPLink } from '../src/TOTPLink';
-
-describe('TOTP Link', () => {
-	it('rendered with default props', () => {
-		const { container } = render(<TOTPLink>TOTP Link</TOTPLink>);
-		expect(container).toMatchSnapshot();
-	});
-});

package/tsconfig.json

@@ -1,20 +0,0 @@
-{
-	"compilerOptions": {
-		"rootDir": "./",
-		"target": "es2020",
-		"lib": ["dom", "dom.iterable", "esnext"],
-		"allowJs": false,
-		"skipLibCheck": true,
-		"strict": false,
-		"esModuleInterop": true,
-		"module": "esnext",
-		"moduleResolution": "node",
-		"resolveJsonModule": true,
-		"isolatedModules": true,
-		"declaration": true,
-		"declarationDir": "dts",
-		"jsx": "react",
-		"typeRoots": ["./node_modules/@types"]
-	},
-	"include": ["**/*"]
-}