paulocoghi · October 7, 2024 09:04
diff --git a/Front-end QA Interview b/Front-end QA Interview
 Task Description: Frontend Integration with Nuxt.js, Storybook, cypress for e2e and cypress studio for record interaction test flux without need to code them , and at last  CI/CD Setup
 Objective:
 In this one-week trial, developers will take an existing frontend repository built with Nuxt.js and Pinia, featuring custom components alongside others from external libraries such as Element Plus. The goal is to integrate Storybook, set up CI/CD pipelines, and perform visual regression tests using Cypress, while organizing the project following atomic design principles.

 Requirements:

 ##Storybook Integration:

 Developers must integrate Storybook into the Nuxt.js project using the custom module created by Chakir Qatab.
 They should document and visualize as many components as possible using Storybook, ensuring a seamless interaction between custom and library-based components (Element Plus).

 ##CI/CD Simulation:

 Developers will simulate their own CI/CD pipeline. The CI/CD should:
 Automatically build the project.
 Run component checks (including Storybook components).
 Trigger visual regression tests.

 ##Cypress Setup:
 Integrate Cypress into the project for end-to-end (E2E) testing.
 Use Cypress Studio to record and save E2E test sessions for key flows within the application.
 Utilize Cypress snapshots to create visual regression tests. Developers should ensure that CI/CD validates both component-level regressions (via Storybook) and full-page visual regressions.

 ##Visual Regression Testing:
 Set up visual regression testing within the CI/CD pipeline.
 The tests should compare the current state of the components/pages with Cypress snapshots, identifying any visual discrepancies.

 ##Atomic Design Implementation:
 Developers are expected to structure components according to atomic design principles:
 Create atomic components (basic UI elements) and molecular components (grouped UI elements).
 The goal is not to refactor the entire project but to demonstrate an understanding of atomic design by organizing a selection of existing components into atomic and molecular categories.

 ##Delivery:
 By the end of the week, developers should:
 Have Storybook fully integrated with documented components.
 Set up Cypress and Cypress Studio for automated E2E testing.
 Have a functional CI/CD pipeline performing component reviews and visual regression tests.
 Present a clear organization of atomic and molecular components.

 ## Evaluation Criteria:
 Proper integration and configuration of Storybook.
 A functional and automated CI/CD pipeline that includes visual regression testing.
 Correct use of Cypress and Cypress Studio for E2E test recording.
 Adherence to atomic design principles in organizing components.
 Code quality, efficiency, and attention to detail in the implementation.
 This description outlines the expected work and deliverables, emphasizing the use of key tools (Storybook, Cypress, CI/CD) and best practices (visual regression testing, atomic design).
	Task Description: Frontend Integration with Nuxt.js, Storybook, cypress for e2e and cypress studio for record interaction test flux without need to code them , and at last CI/CD Setup
	Objective:
	In this one-week trial, developers will take an existing frontend repository built with Nuxt.js and Pinia, featuring custom components alongside others from external libraries such as Element Plus. The goal is to integrate Storybook, set up CI/CD pipelines, and perform visual regression tests using Cypress, while organizing the project following atomic design principles.

	Requirements:

	##Storybook Integration:

	Developers must integrate Storybook into the Nuxt.js project using the custom module created by Chakir Qatab.
	They should document and visualize as many components as possible using Storybook, ensuring a seamless interaction between custom and library-based components (Element Plus).

	##CI/CD Simulation:

	Developers will simulate their own CI/CD pipeline. The CI/CD should:
	Automatically build the project.
	Run component checks (including Storybook components).
	Trigger visual regression tests.

	##Cypress Setup:
	Integrate Cypress into the project for end-to-end (E2E) testing.
	Use Cypress Studio to record and save E2E test sessions for key flows within the application.
	Utilize Cypress snapshots to create visual regression tests. Developers should ensure that CI/CD validates both component-level regressions (via Storybook) and full-page visual regressions.

	##Visual Regression Testing:
	Set up visual regression testing within the CI/CD pipeline.
	The tests should compare the current state of the components/pages with Cypress snapshots, identifying any visual discrepancies.

	##Atomic Design Implementation:
	Developers are expected to structure components according to atomic design principles:
	Create atomic components (basic UI elements) and molecular components (grouped UI elements).
	The goal is not to refactor the entire project but to demonstrate an understanding of atomic design by organizing a selection of existing components into atomic and molecular categories.

	##Delivery:
	By the end of the week, developers should:
	Have Storybook fully integrated with documented components.
	Set up Cypress and Cypress Studio for automated E2E testing.
	Have a functional CI/CD pipeline performing component reviews and visual regression tests.
	Present a clear organization of atomic and molecular components.

	## Evaluation Criteria:
	Proper integration and configuration of Storybook.
	A functional and automated CI/CD pipeline that includes visual regression testing.
	Correct use of Cypress and Cypress Studio for E2E test recording.
	Adherence to atomic design principles in organizing components.
	Code quality, efficiency, and attention to detail in the implementation.
	This description outlines the expected work and deliverables, emphasizing the use of key tools (Storybook, Cypress, CI/CD) and best practices (visual regression testing, atomic design).