1
0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00
unleash.unleash/frontend/cypress
Nuno Góis b4fde58fa0
chore: flag overview page redesign - environments (#8683)
https://linear.app/unleash/issue/2-2826/enabling-environment-via-feature-flag-environment-section-header

https://linear.app/unleash/issue/2-2825/feature-flag-list-bottom-left-to-be-a-nav-section

Follow-up to: https://github.com/Unleash/unleash/pull/8663

Implements most of the remaining work for our flag overview page
redesign.

Most of the code you see is a straight copy/paste from our older
existing components, with the slight improvement here and there.

Includes some improvements to our vertical tabs component to suit our
use case.
Also updates the Demo flow accordingly. I did some manual tests and it
seems to work decently in both scenarios, whether `flagOverviewRedesign`
is enabled or not. The demo needs some love but that's a story for a
different PR and a different time.

Once again, due to the duplicate file pattern, we should remember to
clean this up if we decide to remove the flag.

<img width="1086" alt="image"
src="https://github.com/user-attachments/assets/0c375e34-cbb5-4ac4-a764-39a36b6c6781">
2024-11-08 09:56:46 +00:00
..
fixtures
integration chore: flag overview page redesign - environments (#8683) 2024-11-08 09:56:46 +00:00
oss/feature
support chore: flag overview page redesign - environments (#8683) 2024-11-08 09:56:46 +00:00
global.d.ts
README.md
tsconfig.json

Unleash Behavioural tests

Add common commands to Cypress

  • global.d.ts is where we extend Cypress types
  • API.ts contains api requests for common actions (great place for cleanup actions)
  • UI.ts contains common functions for UI operations
  • commands.ts is the place to map the functions to a cypress command

Test Format

Ideally each test should manage its own data.

Avoid using after and afterEach hooks for cleaning up. According to Cypress docs, there is no guarantee that the functions will run

Suggested Format:

  • prepare
  • when
  • then
  • clean

Passing (returned) parameters around

it('can add, update and delete a gradual rollout strategy to the development environment', async () => {
    cy.addFlexibleRolloutStrategyToFeature_UI({
        featureToggleName,
    }).then(value => {
        strategyId = value;
        cy.updateFlexibleRolloutStrategy_UI(featureToggleName, strategyId).then(
            () => cy.deleteFeatureStrategy_UI(featureToggleName, strategyId)
        );
    });
});