gitlab-org--gitlab-foss/spec/frontend/pages/projects/pages_domains/form_spec.js

88 lines
2.8 KiB
JavaScript

import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
import initForm from '~/pages/projects/pages_domains/form';
const ENABLED_UNLESS_AUTO_SSL_CLASS = 'js-enabled-unless-auto-ssl';
const SSL_TOGGLE_CLASS = 'js-enable-ssl-gl-toggle';
const SSL_TOGGLE_INPUT_CLASS = 'js-project-feature-toggle-input';
const SHOW_IF_AUTO_SSL_CLASS = 'js-shown-if-auto-ssl';
const SHOW_UNLESS_AUTO_SSL_CLASS = 'js-shown-unless-auto-ssl';
const D_NONE_CLASS = 'd-none';
describe('Page domains form', () => {
let toggle;
const findEnabledUnless = () => document.querySelector(`.${ENABLED_UNLESS_AUTO_SSL_CLASS}`);
const findSslToggle = () => document.querySelector(`.${SSL_TOGGLE_CLASS} button`);
const findSslToggleInput = () => document.querySelector(`.${SSL_TOGGLE_INPUT_CLASS}`);
const findIfAutoSsl = () => document.querySelector(`.${SHOW_IF_AUTO_SSL_CLASS}`);
const findUnlessAutoSsl = () => document.querySelector(`.${SHOW_UNLESS_AUTO_SSL_CLASS}`);
const create = () => {
setHTMLFixture(`
<form>
<span
class="${SSL_TOGGLE_CLASS}"
data-label="SSL toggle"
></span>
<input class="${SSL_TOGGLE_INPUT_CLASS}" type="hidden" />
<span class="${SHOW_UNLESS_AUTO_SSL_CLASS}"></span>
<span class="${SHOW_IF_AUTO_SSL_CLASS}"></span>
<button class="${ENABLED_UNLESS_AUTO_SSL_CLASS}"></button>
</form>
`);
};
afterEach(() => {
resetHTMLFixture();
});
it('instantiates the toggle', () => {
create();
initForm();
expect(findSslToggle()).not.toBe(null);
});
describe('when auto SSL is enabled', () => {
beforeEach(() => {
create();
toggle = initForm();
toggle.$emit('change', true);
});
it('sets the correct classes', () => {
expect(Array.from(findIfAutoSsl().classList)).not.toContain(D_NONE_CLASS);
expect(Array.from(findUnlessAutoSsl().classList)).toContain(D_NONE_CLASS);
});
it('sets the correct disabled value', () => {
expect(findEnabledUnless().getAttribute('disabled')).toBe('disabled');
});
it('sets the correct value for the input', () => {
expect(findSslToggleInput().getAttribute('value')).toBe('true');
});
});
describe('when auto SSL is not enabled', () => {
beforeEach(() => {
create();
toggle = initForm();
toggle.$emit('change', false);
});
it('sets the correct classes', () => {
expect(Array.from(findIfAutoSsl().classList)).toContain(D_NONE_CLASS);
expect(Array.from(findUnlessAutoSsl().classList)).not.toContain(D_NONE_CLASS);
});
it('sets the correct disabled value', () => {
expect(findUnlessAutoSsl().getAttribute('disabled')).toBe(null);
});
it('sets the correct value for the input', () => {
expect(findSslToggleInput().getAttribute('value')).toBe('false');
});
});
});