@use "@styles/abstracts/functions" as fun; @use "@styles/abstracts/mixins" as mix; .wrapper { padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-md); border: fun.convert-px(1) solid var(--color-border); border-radius: fun.convert-px(3); box-shadow: fun.convert-px(1) fun.convert-px(1) 0 0 var(--color-shadow), fun.convert-px(1) fun.convert-px(1) fun.convert-px(3) 0 var(--color-shadow); transition: all 0.2s ease-in-out 0s, border 0s; &:hover, &:focus-within { box-shadow: fun.convert-px(2) fun.convert-px(2) 0 0 var(--color-shadow-light), fun.convert-px(3) fun.convert-px(3) fun.convert-px(3) 0 var(--color-shadow-light), fun.convert-px(3) fun.convert-px(3) fun.convert-px(5) fun.convert-px(1) var(--color-shadow-lighter); transform: scale(1.01); } } .cover { width: auto; height: fun.convert-px(100); margin: 0 auto var(--spacing-sm); position: relative; border: fun.convert-px(1) solid var(--color-border); } .read-more { display: block; width: max-content; margin: var(--spacing-md) auto var(--spacing-lg); padding: var(--spacing-2xs) var(--spacing-sm); background: var(--color-bg); border: fun.convert-px(3) solid var(--color-primary); border-radius: fun.convert-px(3); box-shadow: fun.convert-px(1) fun.convert-px(1) fun.convert-px(1) var(--color-shadow-light), fun.convert-px(1) fun.convert-px(2) fun.convert-px(2) fun.convert-px(-2) var(--color-shadow-light), fun.convert-px(3) fun.convert-px(4) fun.convert-px(5) fun.convert-px(-4) var(--color-shadow-light); color: var(--color-primary); font-weight: 600; text-decoration: none; transition: all 0.3s ease-in-out 0s; .icon { width: fun.convert-px(20); margin-left: var(--spacing-2xs); fill: var(--color-primary); transition: all 0.25s ease-in-out 0s; } &:hover, &:focus { text-decoration: underline var(--color-primary) fun.convert-px(2); .icon { margin-left: var(--spacing-xs); transform: scaleX(1.3); } } &:active { color: var(--color-primary-dark); text-decoration: none; .icon { margin-left: 0; transform: scaleX(0); width: 0; } } } @include mix.media("screen") { @include mix.dimensions("xs") { .read-more { font-size: var(--font-size-sm); } } @include mix.dimensions("sm") { .wrapper { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); grid-template-rows: repeat(3, max-content); column-gap: var(--spacing-md); } .cover { grid-column: 2; grid-row: 1; margin: 0 0 var(--spacing-sm); } .header { grid-column: 1; grid-row: 1; align-self: center; } .meta { grid-column: 2; grid-row: 2 / 4; } .body { grid-column: 1; grid-row: 2; } .footer { grid-column: 1; grid-row: 3; } .read-more { margin: 0; } } } ippot.com/tree/src?id=c6f6f8f895e68f2d85ca681997ef613d982bac14'>src/components/organisms/forms/comment-form/comment-form.test.tsx
blob: 88a7de9fdff50713d83886c9ba3cff7cdb4154ef (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { describe, expect, it } from '@jest/globals';
import { render, screen as rtlScreen } from '../../../../../tests/utils';
import { CommentForm } from './comment-form';

const saveComment = async () => {
  /** Do nothing. */
};
const title = 'Cum voluptas voluptatibus';

describe('CommentForm', () => {
  it('renders a form', () => {
    render(<CommentForm saveComment={saveComment} />);
    expect(rtlScreen.getByRole('form')).toBeInTheDocument();
  });

  it('renders an optional title', () => {
    render(
      <CommentForm saveComment={saveComment} title={title} titleLevel={2} />
    );
    expect(
      rtlScreen.getByRole('heading', { level: 2, name: title })
    ).toBeInTheDocument();
  });
});