import { RippleURL, flushSync } from 'ripple';

describe('RippleURL > serialization', () => {
	it('handles toString method', () => {
		component URLTest() {
			const url = RippleURL('https://example.com/path?foo=bar#section');

			<button onClick={() => (url.pathname = '/newpath')}>{'Change Pathname'}</button>
			<pre>{url.toString()}</pre>
		}

		render(URLTest);

		const button = container.querySelector('button');

		// Initial state
		expect(container.querySelector('pre').textContent).toBe(
			'https://example.com/path?foo=bar#section',
		);

		// Change pathname
		button.click();
		flushSync();

		expect(container.querySelector('pre').textContent).toBe(
			'https://example.com/newpath?foo=bar#section',
		);
	});

	it('handles toJSON method', () => {
		component URLTest() {
			const url = RippleURL('https://example.com/path?foo=bar');

			<button onClick={() => (url.pathname = '/api')}>{'Change Pathname'}</button>
			<pre>{url.toJSON()}</pre>
			<pre>{JSON.stringify({ url: url.toJSON() })}</pre>
		}

		render(URLTest);

		const button = container.querySelector('button');

		// Initial state
		expect(container.querySelectorAll('pre')[0].textContent).toBe(
			'https://example.com/path?foo=bar',
		);
		expect(container.querySelectorAll('pre')[1].textContent).toBe(
			'{"url":"https://example.com/path?foo=bar"}',
		);

		// Change pathname
		button.click();
		flushSync();

		expect(container.querySelectorAll('pre')[0].textContent).toBe(
			'https://example.com/api?foo=bar',
		);
		expect(container.querySelectorAll('pre')[1].textContent).toBe(
			'{"url":"https://example.com/api?foo=bar"}',
		);
	});
});