feat: setup formbricks/js e2e tests

[ShubhamPalriwala]

What does this PR do?

E2E tests for

• Survey Creation
• Display Creation through JS Package
• Response Submission through JS Package
• Verification of the above 2 from the Admin Portal

Also adds a step in CI to build the local JS package

Also uses the native HTML file to keep things light in the CI!

Fixes # (issue)

Type of change

• Bug fix (non-breaking change which fixes an issue)
• Chore (refactoring code, technical debt, workflow improvements)
• Enhancement (small improvements)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change adds a new database migration
• This change requires a documentation update

How should this be tested?

• Test A
• Test B

Checklist

Required

• Filled out the "How to test" section in this PR
• Read How we Code at Formbricks
• Self-reviewed my own code
• Commented on my code in hard-to-understand bits
• Ran pnpm build
• Checked for warnings, there are none
• Removed all console.logs
• Merged the latest changes from main onto my branch with git pull origin main
• My changes don't cause any responsiveness issues
• First PR at Formbricks? Please sign the CLA! Without it we wont be able to merge it 🙏

Appreciated

• If a UI change was made: Added a screen recording or screenshots to this PR
• Updated the Formbricks Docs if changes were necessary

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Ignored Deployments

Name	Status	Preview	Updated (UTC)
formbricks-cloud	⬜️ Ignored (Inspect)		Dec 18, 2023 6:19pm
formbricks-com	⬜️ Ignored (Inspect)		Dec 18, 2023 6:19pm

[github-actions]

Thank you for following the naming conventions for pull request titles! 🙏

[review-agent-prime]

apps/web/playwright/utils/helper.ts

The current method of replacing the environment ID in the HTML file involves reading the entire file into memory, performing the replacement, and then writing the entire file back to disk. This can be inefficient for large files. A more efficient method would be to use a stream-based approach to read, modify, and write the file in chunks.
Create Issue
See the diff
Checkout the fix

    // In helper.ts
    import { createReadStream, createWriteStream } from 'fs';
    import { Transform } from 'stream';

    export const replaceEnvironmentIdInHtml = (filePath: string, environmentId: string): string => {
      const readStream = createReadStream(filePath, 'utf-8');
      const writeStream = createWriteStream(filePath);
      const transformStream = new Transform({
        transform(chunk, encoding, callback) {
          const replacedChunk = chunk.toString().replace(/environmentId: ".*?"/, `environmentId: "${environmentId}"`);
          callback(null, replacedChunk);
        }
      });

      readStream.pipe(transformStream).pipe(writeStream);
      return "file:///" + filePath;
    };

git fetch origin && git checkout -b ReviewBot/Impro-lenewie origin/ReviewBot/Impro-lenewie

[review-agent-prime]

The current method of replacing the environment ID in the HTML file involves reading the entire file into memory, performing the replacement, and then writing the entire file back to disk. This can be inefficient for large files. A more efficient method would be to use a stream-based approach to read, modify, and write the file in chunks.

Suggested change

	export const replaceEnvironmentIdInHtml = (filePath: string, environmentId: string): string => {
	let htmlContent = readFileSync(filePath, "utf-8");
	htmlContent = htmlContent.replace(/environmentId: ".*?"/, `environmentId: "${environmentId}"`);
	writeFileSync(filePath, htmlContent);
	return "file:///" + filePath;
	};
	import { createReadStream, createWriteStream } from 'fs';
	import { Transform } from 'stream';
	export const replaceEnvironmentIdInHtml = (filePath: string, environmentId: string): string => {
	const readStream = createReadStream(filePath, 'utf-8');
	const writeStream = createWriteStream(filePath);
	const transformStream = new Transform({
	transform(chunk, encoding, callback) {
	const replacedChunk = chunk.toString().replace(/environmentId: ".*?"/, `environmentId: "${environmentId}"`);
	callback(null, replacedChunk);
	}
	});
	readStream.pipe(transformStream).pipe(writeStream);
	return "file:///" + filePath;
	};

[mattinannt]

@ShubhamPalriwala thank you for the new test; looks great! 😊💪