@descope/flow-components 2.0.38 → 2.0.40

package/test/__snapshots__/textarea.test.tsx.snap

@@ -1,73 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Textarea rendered with className 1`] = `
-<div>
-  <descope-text-area
-    classname="className"
-    size="md"
-  />
-</div>
-`;
-
-exports[`Textarea rendered with custom error attributes 1`] = `
-<div>
-  <descope-text-area
-    data-errormessage-pattern-mismatch="pattern"
-    data-errormessage-value-missing="missing"
-    size="md"
-  />
-</div>
-`;
-
-exports[`Textarea rendered with custom scripts 1`] = `
-<div>
-  <descope-text-area
-    size="md"
-  />
-</div>
-`;
-
-exports[`Textarea rendered with default props 1`] = `
-<div>
-  <descope-text-area
-    size="md"
-  />
-</div>
-`;
-
-exports[`Textarea rendered with fullWidth 1`] = `
-<div>
-  <descope-text-area
-    full-width="true"
-    size="md"
-  />
-</div>
-`;
-
-exports[`Textarea rendered with label 1`] = `
-<div>
-  <descope-text-area
-    label="label"
-    size="md"
-  />
-</div>
-`;
-
-exports[`Textarea rendered with label and required 1`] = `
-<div>
-  <descope-text-area
-    label="label"
-    required="true"
-    size="md"
-  />
-</div>
-`;
-
-exports[`Textarea rendered with name 1`] = `
-<div>
-  <descope-text-area
-    name="name"
-    size="md"
-  />
-</div>
-`;

package/test/__snapshots__/themeToCssVars.test.ts.snap

@@ -1,45 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`themeToCssVars should generate the correct css vars from a given theme 1`] = `
-{
-  "--body1-font-family": "var(--font-family-1)",
-  "--body1-font-size": "18px",
-  "--body1-font-weight": "600",
-  "--body2-font-family": "var(--font-family-0)",
-  "--body2-font-size": "20px",
-  "--body2-font-weight": "700",
-  "--button-font-family": "var(--font-family-0)",
-  "--button-radius": "20px",
-  "--er": "0 0% 100%",
-  "--erc": "0 0% 9.803921568627452%",
-  "--font-family-0": "Arial,sans-serif",
-  "--font-family-1": "\\"Times New Roman\\",serif",
-  "--h1-font-family": "var(--font-family-0)",
-  "--h1-font-size": "8px",
-  "--h1-font-weight": "100",
-  "--h2-font-family": "var(--font-family-1)",
-  "--h2-font-size": "10px",
-  "--h2-font-weight": "200",
-  "--h3-font-family": "var(--font-family-0)",
-  "--h3-font-size": "12px",
-  "--h3-font-weight": "300",
-  "--input-border-opacity": "0",
-  "--input-font-family": "var(--font-family-1)",
-  "--input-radius": "10px",
-  "--logo-url": "url(http://any.url)",
-  "--p": "0 0% 6.666666666666667%",
-  "--pc": "0 0% 90.58823529411765%",
-  "--pf": "0 0% 5.490196078431373%",
-  "--s": "0 0% 13.333333333333334%",
-  "--sc": "0 0% 91.37254901960785%",
-  "--sf": "0 0% 10.588235294117647%",
-  "--subtitle1-font-family": "var(--font-family-1)",
-  "--subtitle1-font-size": "14px",
-  "--subtitle1-font-weight": "400",
-  "--subtitle2-font-family": "var(--font-family-0)",
-  "--subtitle2-font-size": "16px",
-  "--subtitle2-font-weight": "500",
-  "--wa": "0 0% 0%",
-  "--wac": "0 0% 90.19607843137256%",
-}
-`;

package/test/__snapshots__/totpImage.test.tsx.snap

@@ -1,10 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TOTP Image rendered with default props 1`] = `
-<div>
-  <div
-    class="shrink-0 pointer-events-none object-contain max-w-full"
-    style="content: var(--totp-image, );"
-  />
-</div>
-`;

package/test/__snapshots__/totpLink.test.tsx.snap

@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`TOTP Link rendered with default props 1`] = `
-<div>
-  <a
-    class="link whitespace-pre antialiased descope-link inline-block link-hover"
-    data-type="totp-link"
-    rel="noopener noreferrer"
-  >
-    TOTP Link
-  </a>
-</div>
-`;

package/test/boolean.test.tsx

@@ -1,28 +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 { Boolean } from '../src';
-
-describe('Boolean', () => {
-	it('should render checkbox', () => {
-		const { container } = render(
-			<Boolean label="some label" name="bool1" type="checkbox" />
-		);
-		expect(container).toMatchSnapshot();
-
-		const checkbox = container.querySelector('input') as HTMLInputElement;
-		expect(checkbox).toHaveAttribute('name', 'bool1');
-	});
-
-	it('should render switch', () => {
-		const { container } = render(
-			<Boolean label="some label" name="bool2" type="switch" />
-		);
-
-		expect(container).toMatchSnapshot();
-
-		const checkbox = container.querySelector('input') as HTMLInputElement;
-		expect(checkbox).toHaveAttribute('name', 'bool2');
-	});
-});

package/test/buttons.test.tsx

@@ -1,66 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import React from 'react';
-import { Button } from '../src';
-// eslint-disable-next-line import/no-namespace
-import * as icons from '../src/icons';
-
-describe('Buttons', () => {
-	describe('Button', () => {
-		it('rendered with default props', () => {
-			render(<Button>Click</Button>);
-			expect(screen.getByText('Click')).toMatchSnapshot();
-		});
-
-		it('rendered with glass', () => {
-			render(<Button glass>Click</Button>);
-			expect(screen.getByText('Click')).toMatchSnapshot();
-		});
-
-		it('rendered with font size', () => {
-			render(<Button fontSize="9xl">Click</Button>);
-			expect(screen.getByText('Click')).toMatchSnapshot();
-		});
-
-		it('rendered with responsive', () => {
-			render(<Button responsive>Click</Button>);
-			expect(screen.getByText('Click')).toMatchSnapshot();
-		});
-
-		it('rendered with responsive and size', () => {
-			render(
-				<Button responsive size="md">
-					Click
-				</Button>
-			);
-			expect(screen.getByText('Click')).toMatchSnapshot();
-		});
-
-		it('rendered with custom props', () => {
-			render(
-				<Button data-test-1="1" data-test-2="2" size="md">
-					Click
-				</Button>
-			);
-
-			expect(screen.getByText('Click')).toMatchSnapshot();
-		});
-
-		describe.each(Object.keys(icons))('icons', (iconName) => {
-			it(`rendered with ${iconName} text color icon`, () => {
-				render(
-					<Button startIcon={iconName} startIconColorText>
-						Click
-					</Button>
-				);
-				// eslint-disable-next-line testing-library/no-node-access
-				expect(screen.getByText('Click').parentElement).toMatchSnapshot();
-			});
-
-			it(`rendered with ${iconName} color icon`, () => {
-				render(<Button startIcon={iconName}>Click</Button>);
-				// eslint-disable-next-line testing-library/no-node-access
-				expect(screen.getByText('Click').parentElement).toMatchSnapshot();
-			});
-		});
-	});
-});

package/test/checkbox.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 { Checkbox } from '../src';
-
-describe('Checkbox', () => {
-	it('should render with label', () => {
-		const { container } = render(<Checkbox label="some label" name="check" />);
-		const label = container.querySelector('label');
-		expect(label).toHaveTextContent('some label');
-	});
-
-	it('should render with checkbox component', () => {
-		const { container } = render(<Checkbox name="check" />);
-		container.querySelector('input');
-		expect(container).toMatchSnapshot();
-	});
-
-	it('should render with value', () => {
-		const { container } = render(<Checkbox name="check" />);
-		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(<Checkbox name="check" />);
-		const checkbox = container.querySelector('input') as HTMLInputElement;
-		expect(checkbox).toHaveAttribute('name', 'check');
-	});
-
-	it('should render with required attribute', () => {
-		const onSubmit = jest.fn((e) => e.preventDefault());
-
-		const { container } = render(
-			<form onSubmit={onSubmit}>
-				<Checkbox label="some label" name="check" 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 and radius', () => {
-		const { container } = render(
-			<Checkbox label="some label" name="check" required size="sm" />
-		);
-		expect(container).toMatchSnapshot();
-	});
-});

package/test/code.test.tsx

@@ -1,182 +0,0 @@
-/* eslint-disable testing-library/no-node-access */
-/* eslint-disable testing-library/no-container */
-import { render, waitFor } from '@testing-library/react';
-import React from 'react';
-import userEvent from '@testing-library/user-event';
-import { Code } from '../src';
-
-describe.skip('Code', () => {
-	it('rendered with default props', () => {
-		const { container } = render(<Code />);
-		expect(container).toMatchSnapshot();
-	});
-
-	it('rendered with label', () => {
-		const { container } = render(<Code label="label" />);
-		expect(container).toMatchSnapshot();
-	});
-
-	it('rendered with label and required', () => {
-		const { container } = render(<Code label="label" required />);
-		expect(container).toMatchSnapshot();
-	});
-
-	it('rendered with fullWidth', () => {
-		const { container } = render(<Code fullWidth />);
-		expect(container).toMatchSnapshot();
-	});
-
-	it('rendered with name', () => {
-		const { container } = render(<Code name="name" />);
-		expect(container).toMatchSnapshot();
-	});
-
-	it('rendered with className', () => {
-		const { container } = render(<Code className="className" />);
-		expect(container).toMatchSnapshot();
-	});
-
-	it('rendered with custom error attributes', () => {
-		const { container } = render(
-			<Code
-				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(<Code />);
-		expect(container).toMatchSnapshot();
-
-		spyToString.mockRestore();
-	});
-
-	describe('helpers', () => {
-		it('cannot type non digit characters', async () => {
-			const { container } = render(<Code />);
-
-			const digits = Array.from(
-				container.querySelectorAll('input[data-id]')
-			) as HTMLInputElement[];
-
-			await userEvent.type(digits[0], 'a');
-
-			expect(digits[0].value).toBe('');
-		});
-
-		it('can type digit characters', async () => {
-			const { container } = render(<Code />);
-
-			const digits = Array.from(
-				container.querySelectorAll('input[data-id]')
-			) as HTMLInputElement[];
-
-			await userEvent.type(digits[0], '1');
-
-			expect(digits[0].value).toBe('1');
-		});
-
-		it('cannot paste non digit characters', async () => {
-			const { container } = render(<Code />);
-
-			const digits = Array.from(
-				container.querySelectorAll('input[data-id]')
-			) as HTMLInputElement[];
-
-			await waitFor(() => digits[0].oninput);
-
-			digits[0].value = 'a12345';
-
-			digits[0].oninput({
-				currentTarget: digits[0]
-			} as unknown as InputEvent);
-
-			for (let i = 0; i < 6; i += 1) {
-				expect(digits[i].value).toBe('');
-			}
-		});
-
-		it('can paste a number and it should fill all digits', async () => {
-			const { container } = render(<Code />);
-
-			const digits = Array.from(
-				container.querySelectorAll('input[data-id]')
-			) as HTMLInputElement[];
-
-			await waitFor(() => digits[0].oninput);
-
-			digits[0].value = '123456';
-
-			digits[0].oninput({
-				currentTarget: digits[0]
-			} as unknown as InputEvent);
-
-			for (let i = 0; i < 6; i += 1) {
-				expect(digits[i].value).toBe(`${i + 1}`);
-			}
-		});
-
-		it('should sync input value with digits', async () => {
-			const { container } = render(<Code />);
-
-			const digits = Array.from(
-				container.querySelectorAll('input[data-id]')
-			) as HTMLInputElement[];
-
-			for (let i = 0; i < 6; i += 1) {
-				// eslint-disable-next-line no-await-in-loop
-				await userEvent.type(digits[i], `${i}`);
-			}
-
-			const input = container.querySelector(
-				'input[data-input]'
-			) as HTMLInputElement;
-
-			expect(input.value).toBe('012345');
-		});
-
-		it('backspace should focus previous digit', async () => {
-			const { container } = render(<Code />);
-
-			const digits = Array.from(
-				container.querySelectorAll('input[data-id]')
-			) as HTMLInputElement[];
-
-			await userEvent.click(digits[2]);
-			await userEvent.keyboard('{Backspace}');
-
-			expect(digits[1]).toHaveFocus();
-		});
-
-		it('should sync validity', async () => {
-			const { container } = render(<Code required />);
-
-			const digits = Array.from(
-				container.querySelectorAll('input[data-id]')
-			) as HTMLInputElement[];
-
-			const input = container.querySelector(
-				'input[data-input]'
-			) as HTMLInputElement;
-
-			input.setCustomValidity('error');
-			input.checkValidity();
-
-			await waitFor(() => expect(digits[0].validity.valid).toBe(false));
-		});
-	});
-});

package/test/container.test.tsx

@@ -1,91 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import React from 'react';
-import { Container } from '../src';
-
-describe('Container', () => {
-	it('rendered with default props', () => {
-		render(<Container>Container</Container>);
-		expect(screen.getByText('Container')).toMatchSnapshot();
-	});
-
-	it('rendered with width', () => {
-		render(<Container width="10">Container</Container>);
-		expect(screen.getByText('Container')).toMatchSnapshot();
-	});
-
-	it('rendered with justify', () => {
-		render(<Container justify="between">Container</Container>);
-		expect(screen.getByText('Container')).toMatchSnapshot();
-	});
-
-	it('rendered with paddingX', () => {
-		render(<Container paddingX="10">Container</Container>);
-		expect(screen.getByText('Container')).toMatchSnapshot();
-	});
-
-	it('rendered with paddingY', () => {
-		render(<Container paddingY="10">Container</Container>);
-		expect(screen.getByText('Container')).toMatchSnapshot();
-	});
-
-	it('rendered with direction', () => {
-		render(<Container direction="col">Container</Container>);
-		expect(screen.getByText('Container')).toMatchSnapshot();
-	});
-	it('rendered with align', () => {
-		render(<Container align="end">Container</Container>);
-		expect(screen.getByText('Container')).toMatchSnapshot();
-	});
-
-	it('rendered with spaceBetween when direction is "row"', () => {
-		render(
-			<Container spaceBetween="7" direction="row">
-				Container
-			</Container>
-		);
-		expect(screen.getByText('Container')).toMatchSnapshot();
-	});
-
-	it('rendered with spaceBetween when direction is "col"', () => {
-		render(
-			<Container spaceBetween="7" direction="col">
-				Container
-			</Container>
-		);
-		expect(screen.getByText('Container')).toMatchSnapshot();
-	});
-
-	it('rendered with borderRadius', () => {
-		render(<Container borderRadius="md">Container</Container>);
-		expect(screen.getByText('Container')).toMatchSnapshot();
-	});
-	it('rendered with shadow', () => {
-		render(<Container shadow="md">Container</Container>);
-		expect(screen.getByText('Container')).toMatchSnapshot();
-	});
-
-	it('rendered with background value from theme', () => {
-		render(<Container background="300">Container</Container>);
-		expect(screen.getByText('Container')).toMatchSnapshot();
-	});
-
-	it('rendered with custom background value', () => {
-		render(<Container background="#808080">Container</Container>);
-		expect(screen.getByText('Container')).toMatchSnapshot();
-	});
-
-	it('rendered with a style object', () => {
-		render(
-			<Container background="#000000" style={{ color: '#000000' }}>
-				Container
-			</Container>
-		);
-
-		expect(screen.getByText('Container')).toMatchSnapshot();
-	});
-
-	it('rendered with custom classnames', () => {
-		render(<Container className="kuku">Container</Container>);
-		expect(screen.getByText('Container')).toMatchSnapshot();
-	});
-});

package/test/divider.test.tsx

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

package/test/image.test.tsx

@@ -1,40 +0,0 @@
-import { render } from '@testing-library/react';
-import React from 'react';
-import { Image } from '../src';
-
-describe('Image', () => {
-	it('rendered with default props', () => {
-		const { container } = render(<Image />);
-		expect(container).toMatchSnapshot();
-	});
-
-	it('rendered with custom classnames', () => {
-		const { container } = render(<Image className="kuku" />);
-		expect(container).toMatchSnapshot();
-	});
-
-	it('rendered with height', () => {
-		const { container } = render(<Image height={20} />);
-		expect(container).toMatchSnapshot();
-	});
-
-	it('render with width', () => {
-		const { container } = render(<Image width={20} />);
-		expect(container).toMatchSnapshot();
-	});
-
-	it('render with src', () => {
-		const { container } = render(<Image src="123" />);
-		expect(container).toMatchSnapshot();
-	});
-
-	it('rendered with alt', () => {
-		const { container } = render(<Image alt="123" />);
-		expect(container).toMatchSnapshot();
-	});
-
-	it('rendered with style', () => {
-		const { container } = render(<Image style={{ color: 'red' }} />);
-		expect(container).toMatchSnapshot();
-	});
-});