1
0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-28 00:06:53 +01:00
unleash.unleash/frontend/cypress/integration/feature/feature.spec.ts
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

84 lines
2.8 KiB
TypeScript

///<reference path="../../global.d.ts" />
describe('feature', () => {
const baseUrl = Cypress.config().baseUrl;
const randomId = String(Math.random()).split('.')[1];
const featureToggleName = `unleash-e2e-${randomId}`;
const projectName = `unleash-e2e-project-${randomId}`;
before(() => {
cy.runBefore();
cy.login_UI();
cy.createProject_API(projectName);
});
after(() => {
cy.on('uncaught:exception', (err) => {
if (
err.message.includes(
'ResizeObserver loop completed with undelivered notifications',
)
) {
console.log(
'Ignored an uncaught resize observer error:',
err.message,
);
// ignore resize observer errors
// https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver#observation_errors
// returning false here prevents Cypress from failing the test
return false;
}
});
cy.deleteFeature_API(featureToggleName, projectName);
cy.deleteProject_API(projectName);
});
beforeEach(() => {
cy.login_UI();
cy.visit('/features');
cy.intercept('GET', `${baseUrl}/api/admin/ui-config`, (req) => {
req.headers['cache-control'] =
'no-cache, no-store, must-revalidate';
req.on('response', (res) => {
if (res.body) {
res.body.flags = {
...res.body.flags,
flagOverviewRedesign: true,
};
}
});
});
});
it('can create a feature flag', () => {
cy.createFeature_UI(featureToggleName, true, projectName);
cy.url().should('include', featureToggleName);
});
it('gives an error if a toggle exists with the same name', () => {
cy.createFeature_UI(featureToggleName, false, projectName);
cy.get("[data-testid='INPUT_ERROR_TEXT']").contains(
'A flag with that name already exists',
);
});
it('gives an error if a toggle name is url unsafe', () => {
cy.createFeature_UI('featureToggleUnsafe####$#//', false, projectName);
cy.get("[data-testid='INPUT_ERROR_TEXT']").contains(
`"name" must be URL friendly`,
);
});
it('can add, update and delete a gradual rollout strategy to the development environment', () => {
cy.addFlexibleRolloutStrategyToFeature_UI({
featureToggleName,
project: projectName,
});
cy.updateFlexibleRolloutStrategy_UI(featureToggleName, projectName);
cy.deleteFeatureStrategy_UI(featureToggleName, false, projectName);
});
});