tqt/Ghost
2
1
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2023-12-13 21:00:40 +01:00
Code Issues 1 Releases Wiki Activity

Added E2E tests for comments-ui accent color option

Browse source 
refs https://github.com/TryGhost/Team/issues/3504

This also fixes an issue where the signup button would become transparent when the accent color option was not set
This commit is contained in:
Simon Backx 2023-06-27 15:41:28 +02:00 committed by Simon Backx
parent 81970fbe01
commit 23fc00ae60
3 changed files with 64 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/comments-ui/src/components/content/CTABox.tsx
View file

@ -33,12 +33,12 @@ const CTABox: React.FC<Props> = ({isFirst, isPaid}) => {
<p className="mb-[28px] w-full px-0 text-center font-sans text-[16px] leading-normal text-neutral-600 dark:text-[rgba(255,255,255,0.85)] sm:max-w-screen-sm sm:px-8">
Become a {isPaid && 'paid'} member of <span className="font-semibold">{publication}</span> to start commenting.
</p>
<button className="font-san mb-[12px] inline-block rounded px-5 py-[14px] font-medium leading-none text-white transition-all hover:opacity-90" style={buttonStyle} type="button" onClick={handleSignUpClick}>
<button className="font-san mb-[12px] inline-block rounded px-5 py-[14px] font-medium leading-none text-white transition-all hover:opacity-90" data-testid="signup-button" style={buttonStyle} type="button" onClick={handleSignUpClick}>
{(isPaid && member) ? 'Upgrade now' : 'Sign up now'}
</button>
{!member && (<p className="text-center font-sans text-sm text-[rgba(0,0,0,0.4)] dark:text-[rgba(255,255,255,0.5)]">
<span className='mr-1 inline-block text-[15px]'>Already a member?</span>
<button className="rounded-md text-sm font-semibold transition-all hover:opacity-90" style={linkStyle} type="button" onClick={handleSignInClick}>Sign in</button>
<button className="rounded-md text-sm font-semibold transition-all hover:opacity-90" data-testid="signin-button" style={linkStyle} type="button" onClick={handleSignInClick}>Sign in</button>
</p>)}
</section>
);

2
apps/comments-ui/src/index.tsx
View file

@ -56,7 +56,7 @@ function getSiteData(scriptTag: HTMLElement) {
const postId = dataset.postId;
const colorScheme = dataset.colorScheme;
const avatarSaturation = dataset.avatarSaturation ? parseInt(dataset.avatarSaturation) : undefined;
const accentColor = dataset.accentColor;
const accentColor = dataset.accentColor ?? '#000000';
const commentsEnabled = dataset.commentsEnabled;
const title = dataset.title === 'null' ? null : dataset.title;
const showCount = dataset.count === 'true';

61
apps/comments-ui/test/e2e/options.test.ts
View file

@ -215,5 +215,66 @@ test.describe('Options', async () => {
expect(saturation).toBe(1);
});
});
test.describe('Accent color', () => {
test('Uses default accent color', async ({page}) => {
const mockedApi = new MockedApi({});
mockedApi.addComment();
const {frame} = await initialize({
mockedApi,
page,
publication: 'Publisher Weekly'
});
const signupButton = await frame.getByTestId('signup-button');
// Get computed background color
const color = await signupButton.evaluate((node) => {
const style = window.getComputedStyle(node);
return style.getPropertyValue('background-color');
});
expect(color).toBe('rgb(0, 0, 0)');
const signinButton = await frame.getByTestId('signin-button');
// Get computed text color
const textColor = await signinButton.evaluate((node) => {
const style = window.getComputedStyle(node);
return style.getPropertyValue('color');
});
expect(textColor).toBe('rgb(0, 0, 0)');
});
test('Uses accentColor option', async ({page}) => {
const mockedApi = new MockedApi({});
mockedApi.addComment();
const {frame} = await initialize({
mockedApi,
page,
publication: 'Publisher Weekly',
accentColor: 'rgb(255, 211, 100)'
});
const signupButton = await frame.getByTestId('signup-button');
// Get computed background color
const color = await signupButton.evaluate((node) => {
const style = window.getComputedStyle(node);
return style.getPropertyValue('background-color');
});
expect(color).toBe('rgb(255, 211, 100)');
const signinButton = await frame.getByTestId('signin-button');
// Get computed text color
const textColor = await signinButton.evaluate((node) => {
const style = window.getComputedStyle(node);
return style.getPropertyValue('color');
});
expect(textColor).toBe('rgb(255, 211, 100)');
});
});
});