Pro settings e2e (993eff00) · Commits · Minds / Minds Frontend

cypress/integration/pro/settings.spec.js

+239 −118

Original line number	Diff line number	Diff line
		@@ -5,64 +5,95 @@
		context('Pro Settings', () => {
		if (Cypress.env().pro_password) {
		// required to run tests against pro user only.
		const title = '#title';
		const headline = '#headline';
		function data(str) {
		return `[data-minds=${str}]`;
		}

		const activityContainer = 'minds-activity';
		const footerText = '#footer_text';
		const sidebarMenu = data('sidebarMenuLinks');

		const general = {
		title: data('title'),
		headline: data('headline'),
		publish: data('publish'),
		strings: {
		title: 'Minds Pro E2E',
		headline: 'This headline is a test',
		},
		};

		const theme = {
		textColor: '#textColor',
		primaryColor: '#primaryColor',
		plainBackgroundColor: '#plainBgColor',
		schemeLight: '#scheme_light',
		schemeDark: '#scheme_dark',
		textColor: data('textColor'),
		primaryColor: data('primaryColor'),
		plainBgColor: data('plainBgColor'),
		schemeLight: data('schemeLight'),
		schemeDark: data('schemeDark'),
		aspectRatio: {
		169: '#tile_ratio_16:9', // 16:9
		1610: '#tile_ratio_16:10', // 16:10
		43: '#tile_ratio_4:3', // 4:3
		11: '#tile_ratio_1:1', // 1:1
		169: data('tileRatio_16:9'), // 16:9
		1610: data('tileRatio_16:10'), // 16:10
		43: data('tileRatio_4:3'), // 4:3
		11: data('tileRatio_1:1'), // 1:1
		},
		strings: {
		textColor: '#4690df',
		primaryColor: '#cb7848',
		plainBgColor: '#b4bbf0',
		textColorRgb: 'rgb(70, 144, 223)',
		primaryColorRgb: 'rgb(203, 120, 72)',
		plainBgColorRgba: 'rgba(180, 187, 240, 0.627)',
		resetColor: '#ffffff',
		},
		};

		const hashtags = {
		labelInput0: '#tag-label-0',
		hashtagInput0: '#tag-tag-0',
		labelInput1: '#tag-label-1',
		hashtagInput1: '#tag-tag-1',
		label1: 'label1',
		label2: 'label2',
		label3: 'label3',
		hashtag1: '#hashtag1',
		hashtag2: '#hashtag2',
		hashtag3: '#hashtag3',
		const assets = {
		logo: data('logo'),
		background: data('background'),
		strings: {
		logoFixture: '../../fixtures/avatar.jpeg',
		backgroundFixture:
		'../../fixtures/international-space-station-1776401_1920.jpg',
		},
		};

		const footer = {
		hrefInput: `#footer_link-href-0`,
		titleInput: `#footer_link-title-0`,
		const hashtags = {
		add: data('addHashtag'),
		label0: data('tag__label--0'),
		tag0: data('tag__tag--0'),
		label1: data('tag__label--1'),
		tag1: data('tag__tag--1'),
		strings: {
		label0: 'Label0',
		label1: 'Label1',
		tag0: '#hashtag0',
		tag1: '#hashtag1',
		},
		};

		const strings = {
		title: 'Minds Pro E2E',
		headline: 'This headline is a test',
		footer: 'This is a footer',
		footerTitle: 'Minds',
		footerHref: 'https://www.minds.com/',
		const footer = {
		text: data('footerText'),
		add: data('addFooterLink'),
		linkTitle: data('footerLink__title--0'),
		linkHref: data('footerLink__href--0'),
		strings: {
		text: 'This is a footer',
		linkTitle: 'Minds',
		linkHref: 'https://www.minds.com/',
		},
		};

		before(() => {
		cy.login(true, Cypress.env().pro_username, Cypress.env().pro_password);
		});

		after(() => {
		// cy.visit(`/${Cypress.env().username}`);
		cy.visit('/pro/' + Cypress.env().pro_username + '/settings/hashtags')
		.location('pathname')
		.should(
		'eq',
		'/pro/' + Cypress.env().pro_username + '/settings/hashtags'
		);
		clearHashtags();
		// Make a post
		cy.route('POST', '**/api/v1/newsfeed').as('newsfeed');
		cy.visit('/newsfeed/subscriptions');
		cy.get('minds-newsfeed-poster textarea')
		.click()
		.type('Testing 1-2-3');
		cy.get('minds-newsfeed-poster .m-posterActionBar__PostButton').click();
		cy.wait('@newsfeed').then(xhr => {
		expect(xhr.status).to.equal(200);
		});
		});

		beforeEach(() => {
		@@ -76,157 +107,247 @@ context('Pro Settings', () => {
		'eq',
		'/pro/' + Cypress.env().pro_username + '/settings/general'
		);

		// ensure window is wide enough to find pro topbar links
		cy.viewport(1300, 768);
		});

		it('should update the title and headline', () => {
		it.skip('should update the title and headline', () => {
		//enter data
		cy.get(title)
		cy.get(general.title)
		.focus()
		.clear()
		.type(strings.title);
		.type(general.strings.title);

		cy.get(headline)
		cy.get(general.headline)
		.focus()
		.clear()
		.type(strings.headline);
		.type(general.strings.headline);

		saveAndPreview();
		//check tab title.
		//check tab title
		cy.title().should(
		'eq',
		strings.title + ' - ' + strings.headline + ' \| Minds'
		general.strings.title + ' - ' + general.strings.headline + ' \| Minds'
		);
		});

		// Need to find a way around the color input in Cypress.
		it('should allow the user to set theme colors', () => {
		cy.get(sidebarMenu)
		.contains('Theme')
		.click();

		it('should allow the user to set a dark theme for posts', () => {
		cy.contains('Theme').click();
		// reset colors so changes will be submitted
		cy.get(theme.textColor)
		.click()
		.clear()
		.type(theme.strings.resetColor);

		cy.get(theme.schemeDark).click();
		cy.get(theme.primaryColor)
		.click()
		.clear()
		.type(theme.strings.resetColor);

		cy.get(theme.plainBgColor)
		.click()
		.clear()
		.type(theme.strings.resetColor);

		save();

		// set theme colors to be tested
		cy.get(theme.textColor)
		.click()
		.clear()
		.type(theme.strings.textColor);

		cy.get(theme.primaryColor)
		.click()
		.clear()
		.type(theme.strings.primaryColor);

		cy.get(theme.plainBgColor)
		.click()
		.clear()
		.type(theme.strings.plainBgColor);

		saveAndPreview();

		cy.contains('Feed').click();
		cy.get('.m-pro__searchBox input').should(
		'have.css',
		'background-color',
		theme.strings.plainBgColorRgba
		);

		cy.get('.m-proChannelTopbar__navItem')
		.contains('Videos')
		.should('have.css', 'color', theme.strings.textColorRgb);

		cy.get('.m-proChannelTopbar__navItem')
		.contains('Feed')
		.click();

		// make window narrow enough to show hamburger icon/menu
		cy.viewport('ipad-mini');
		cy.get('.m-proHamburgerMenu__trigger')
		.click()
		.get('.m-proHamburgerMenu__item--active')
		.should('have.css', 'color')
		.and('eq', theme.strings.primaryColorRgb);
		});

		// Skipping until Emi changes feeds from 'top' to 'latest'
		it.skip('should allow the user to set a dark theme for posts', () => {
		cy.get(sidebarMenu)
		.contains('Theme')
		.click();

		// Toggle radio to enable submit button
		cy.get(theme.schemeLight).click({ force: true });
		cy.get(theme.schemeDark).click({ force: true });

		saveAndPreview();

		cy.get('.m-proChannelTopbar__navItem')
		.contains('Feed')
		.click();

		cy.get(activityContainer)
		.should('have.css', 'background-color')
		.and('eq', 'rgb(35, 35, 35)');
		});

		it('should allow the user to set a light theme for posts', () => {
		cy.contains('Theme').click();
		// Skipping until Emi changes feeds from 'top' to 'latest'
		it.skip('should allow the user to set a light theme for posts', () => {
		cy.get(sidebarMenu)
		.contains('Theme')
		.click();

		cy.get(theme.schemeLight).click();
		// Toggle radio to enable submit button
		cy.get(theme.schemeDark).click({ force: true });
		cy.get(theme.schemeLight).click({ force: true });

		saveAndPreview();

		cy.contains('Feed').click();
		cy.get('.m-proChannelTopbar__navItem')
		.contains('Feed')
		.click();

		cy.get(activityContainer)
		.should('have.css', 'background-color')
		.and('eq', 'rgb(255, 255, 255)');
		});

		it.skip('should allow the user to upload logo and background images', () => {
		cy.get(sidebarMenu)
		.contains('Assets')
		.click();

		cy.uploadFile(assets.logo, assets.strings.logoFixture, 'image/jpeg');

		cy.uploadFile(
		assets.background,
		assets.strings.backgroundFixture,
		'image/jpg'
		);

		saveAndPreview();

		// cy.get('.m-proChannelTopbar__logo').should('have.attr', 'src', Cypress.env().url + '/fs/v1/pro/930229554033729554/logo/1574379135');

		// cy.get(m-proChannel).should('have.attr', 'background-image', 'url(' + Cypress.env().url + '/fs/v1/banners/998753812159717376/fat/1563497464)');
		});

		it('should allow the user to set category hashtags', () => {
		cy.contains('Hashtags').click();
		cy.get(sidebarMenu)
		.contains('Hashtags')
		.click();

		cy.contains('Add').click();
		cy.get(hashtags.add).click();
		cy.get('m-draggableList')
		.contains('clear')
		.click({ multiple: true });

		cy.get(hashtags.labelInput0)
		cy.get(hashtags.add).click();

		cy.get(hashtags.label0)
		.clear()
		.type(hashtags.label1);
		.type(hashtags.strings.label0);

		cy.get(hashtags.hashtagInput0)
		cy.get(hashtags.tag0)
		.clear()
		.type(hashtags.hashtag1);
		.type(hashtags.strings.tag0);

		cy.contains('Add').click();
		cy.get(hashtags.add).click();

		cy.get(hashtags.labelInput1)
		.first()
		cy.get(hashtags.label1)
		.clear()
		.type(hashtags.label2);
		.type(hashtags.strings.label1);

		cy.get(hashtags.hashtagInput1)
		.first()
		cy.get(hashtags.tag1)
		.clear()
		.type(hashtags.hashtag2);
		.type(hashtags.strings.tag1);

		saveAndPreview();

		//check the labels are present and clickable.
		cy.contains('label1');
		cy.contains('label2');
		cy.contains(hashtags.strings.label0);
		cy.contains(hashtags.strings.label1);
		});

		it('should allow the user to set footer', () => {
		cy.contains('Footer').click();
		cy.get(sidebarMenu)
		.contains('Footer')
		.click();

		cy.get(footerText)
		.clear()
		.type(strings.footer);
		// clear any existing footer links
		cy.get(footer.add).click();
		cy.get('m-draggableList')
		.contains('clear')
		.click({ multiple: true });

		cy.contains('Add Link').click();
		// add a new footer link
		cy.get(footer.add).click();

		cy.get(footer.hrefInput)
		cy.get(footer.linkHref)
		.clear()
		.type(strings.footerHref);
		.type(footer.strings.linkHref);

		cy.get(footer.titleInput)
		cy.get(footer.linkTitle)
		.clear()
		.type(strings.footerTitle);
		.type(footer.strings.linkTitle);

		// add footer text
		cy.get(footer.text)
		.clear()
		.type(footer.strings.text);

		saveAndPreview();

		cy.contains(strings.footerTitle)
		cy.contains(footer.strings.linkTitle)
		.should('have.attr', 'href')
		.should('contain', strings.footerHref);
		.should('contain', footer.strings.linkHref);

		cy.get(footer.text).should('contain', footer.strings.text);
		});

		//save, await response, preview.
		function saveAndPreview() {
		function save() {
		//save and await response
		cy.contains('Save')
		.click()
		cy.get('.m-shadowboxSubmitButton')
		.contains('Save')
		.click({ force: true })
		.wait('@settings')
		.then(xhr => {
		expect(xhr.status).to.equal(200);
		expect(xhr.response.body).to.deep.equal({ status: 'success' });
		});

		//go to pro page
		cy.contains('View Pro Channel').click();
		}

		function clearHashtags() {
		cy.contains('Hashtags').click();

		cy.contains('Add').click();
		function saveAndPreview() {
		save();

		cy.contains('clear').click({ multiple: true });
		saveAndPreview();
		//go to pro page
		cy.visit('/pro/' + Cypress.env().pro_username);
		}

		//
		// it.only('should update the theme', () => {
		// // nav to theme tab
		// cy.contains('Theme')
		// .click();

		// cy.get(theme.plainBackgroundColor).then(elem => {
		// elem.val('#00dd00');
		// //save and await response
		// cy.contains('Save')
		// .click()
		// .wait('@settings').then((xhr) => {
		// expect(xhr.status).to.equal(200);
		// expect(xhr.response.body).to.deep.equal({ status: 'success' });
		// });

		// //go to pro page
		// cy.contains('View Pro Channel').click();

		// })
		}
		});

src/app/common/components/sidebar-menu/sidebar-menu.component.html

+5 −1

Original line number	Diff line number	Diff line
		@@ -37,7 +37,11 @@
		<h3>{{ menu.header.label }}</h3>
		</div>

		<nav class="m-sidebarMenu__linksContainer" *ngIf="menu.links">
		<nav
		class="m-sidebarMenu__linksContainer"
		*ngIf="menu.links"
		data-minds="sidebarMenuLinks"
		>
		<div class="m-sidebarMenu__link" *ngFor="let link of menu.links">
		<ng-container *ngIf="link.permissionGranted">
		<ng-container *ngIf="!link.newWindow">

src/app/modules/pro/channel/footer/footer.component.html

+3 −1

Original line number	Diff line number	Diff line
		@@ -50,6 +50,8 @@
		</div>

		<div class="m-proChannelFooter__static">
		<span class="m-proChannelFooter__text">{{ footerText }}</span>
		<span class="m-proChannelFooter__text" data-minds="footerText">{{
		footerText
		}}</span>
		</div>
		</div>

src/app/modules/pro/settings/settings.component.html

+25 −3

Original line number	Diff line number	Diff line
		@@ -72,6 +72,7 @@
		name="title"
		formControlName="title"
		class="form-control"
		data-minds="title"
		/><m-formDescriptor
		>This will be used in browser tab titles and your SEO
		tags</m-formDescriptor
		@@ -94,6 +95,7 @@
		name="headline"
		formControlName="headline"
		class="form-control"
		data-minds="headline"
		></textarea>
		<m-formDescriptor
		>This will be used in your SEO tags as
		@@ -115,6 +117,7 @@
		name="publish"
		formControlName="published"
		class="form-control"
		data-minds="publish"
		/>
		<span
		class="m-proSettings__customInput--checkbox"
		@@ -153,6 +156,7 @@
		name="text_color"
		formControlName="text_color"
		#textColor
		data-minds="textColor"
		[pattern]="hexPattern"
		class="form-control"
		required
		@@ -170,6 +174,7 @@
		class="form-control"
		type="color"
		id="text_color_picker"
		data-minds="textColorPicker"
		formControlName="text_color_picker"
		#textColorPicker
		(ngModelChange)="
		@@ -220,6 +225,7 @@
		id="primary_color"
		name="primary_color"
		#primaryColor
		data-minds="primaryColor"
		formControlName="primary_color"
		[pattern]="hexPattern"
		class="form-control"
		@@ -244,6 +250,7 @@
		name="primary_color_picker"
		formControlName="primary_color_picker"
		#primaryColorPicker
		data-minds="primaryColorPicker"
		(ngModelChange)="
		updateColorText(
		'primary_color',
		@@ -293,6 +300,7 @@
		id="plain_background_color"
		name="plain_background_color"
		#plainBgColor
		data-minds="plainBgColor"
		formControlName="plain_background_color"
		[pattern]="hexPattern"
		class="form-control"
		@@ -318,6 +326,7 @@
		name="plain_background_color_picker"
		formControlName="plain_background_color_picker"
		#plainBgColorPicker
		data-minds="plainBgColorPicker"
		(ngModelChange)="
		updateColorText(
		'plain_background_color',
		@@ -365,6 +374,7 @@
		for="scheme_light"
		class="m-proSettings__customInputContainer--radio"
		i18n
		data-minds="schemeLight"
		>Light
		<input
		type="radio"
		@@ -373,7 +383,6 @@
		value="light"
		formControlName="scheme"
		class="form-control"
		#scheme_light
		/>
		<span
		class="m-proSettings__customInput--radio"
		@@ -383,6 +392,7 @@
		for="scheme_dark"
		class="m-proSettings__customInputContainer--radio"
		i18n
		data-minds="schemeDark"
		>Dark
		<input
		type="radio"
		@@ -391,7 +401,6 @@
		value="dark"
		formControlName="scheme"
		class="form-control"
		#scheme_dark
		/>
		<span
		class="m-proSettings__customInput--radio"
		@@ -423,6 +432,7 @@
		[value]="ratio"
		formControlName="tile_ratio"
		class="form-control"
		data-minds="'tileRatio_' + ratio"
		/>
		<span
		class="m-proSettings__customInput--radio"
		@@ -471,6 +481,7 @@
		onAssetFileSelect('logo', logoField.files)
		"
		#logoField
		data-minds="logo"
		/>

		<img
		@@ -514,6 +525,7 @@
		)
		"
		#backgroundField
		data-minds="background"
		/>
		<img
		*ngIf="getPreviewAssetSrc('background')"
		@@ -545,7 +557,12 @@
		>Create a topbar of links to provide easy access to
		site contents that share a hashtag</ng-container
		></m-tooltip
		><button type="button" (click)="addBlankTag()" i18n>
		><button
		type="button"
		(click)="addBlankTag()"
		data-minds="addHashtag"
		i18n
		>
		Add
		</button>
		</div>
		@@ -570,6 +587,7 @@
		[name]="'tag[' + i + '][label]'"
		formControlName="label"
		autofocus
		[attr.data-minds]="'tag__label--' + i"
		(focusin)="hashtagDraggable.onFocusIn($event)"
		(focusout)="hashtagDraggable.onFocusOut($event)"
		(mouseover)="hashtagDraggable.onFocusIn($event)"
		@@ -581,6 +599,7 @@
		[id]="'tag-tag-' + i"
		[name]="'tag[' + i + '][tag]'"
		formControlName="tag"
		[attr.data-minds]="'tag__tag--' + i"
		(focusin)="hashtagDraggable.onFocusIn($event)"
		(focusout)="hashtagDraggable.onFocusOut($event)"
		(mouseover)="hashtagDraggable.onFocusIn($event)"
		@@ -616,6 +635,7 @@
		><button
		type="button"
		(click)="addBlankFooterLink()"
		data-minds="addFooterLink"
		i18n
		>
		Add
		@@ -642,6 +662,7 @@
		[name]="'footer_link[' + i + '][title]'"
		formControlName="title"
		autofocus
		[attr.data-minds]="'footerLink__title--' + i"
		(focusin)="footerDraggable.onFocusIn($event)"
		(focusout)="footerDraggable.onFocusOut($event)"
		(mouseover)="footerDraggable.onFocusIn($event)"
		@@ -654,6 +675,7 @@
		[id]="'footer_link-href-' + i"
		[name]="'footer_link[' + i + '][href]'"
		formControlName="href"
		[attr.data-minds]="'footerLink__href--' + i"
		(focusin)="footerDraggable.onFocusIn($event)"
		(focusout)="footerDraggable.onFocusOut($event)"
		(mouseover)="footerDraggable.onFocusIn($event)"