test: replacing shallow snapshots with RTL part 2 (#2267)
This commit is contained in:
jacobo-dominguez-wgu
committed by
GitHub
GitHub
parent
eaba380417
commit
efd967a42b
@@ -15,7 +15,6 @@
|
||||
"stylelint": "stylelint \"plugins/**/*.scss\" \"src/**/*.scss\" \"scss/**/*.scss\" --config .stylelintrc.json",
|
||||
"lint": "npm run stylelint && fedx-scripts eslint --ext .js --ext .jsx --ext .ts --ext .tsx .",
|
||||
"lint:fix": "npm run stylelint -- --fix && fedx-scripts eslint --fix --ext .js --ext .jsx --ext .ts --ext .tsx .",
|
||||
"snapshot": "TZ=UTC fedx-scripts jest --updateSnapshot",
|
||||
"start": "fedx-scripts webpack-dev-server --progress",
|
||||
"start:with-theme": "paragon install-theme && npm start && npm install",
|
||||
"dev": "PUBLIC_PATH=/authoring/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
|
||||
|
||||
@@ -41,8 +41,9 @@ const SelectableRadioSet = (props) => (
|
||||
describe('<SelectableBox.Set />', () => {
|
||||
describe('correct rendering', () => {
|
||||
it('renders without props', () => {
|
||||
const { container } = render(<SelectableRadioSet name="testName" />);
|
||||
expect(container).toMatchSnapshot();
|
||||
render(<SelectableRadioSet name="testName" />);
|
||||
expect(screen.getAllByRole('button')).toHaveLength(3);
|
||||
[1, 2, 3].forEach((item) => expect(screen.getByText(`SelectableRadio${item}`)).toBeInTheDocument());
|
||||
});
|
||||
it('forwards props', () => {
|
||||
render((<SelectableRadioSet name="testName" data-testid="test-radio-set-name" />));
|
||||
|
||||
@@ -1,57 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<SelectableBox.Set /> correct rendering renders without props 1`] = `
|
||||
<div>
|
||||
<div
|
||||
aria-label="test-default-label"
|
||||
class="pgn__selectable_box-set pgn__selectable_box-set--2 pgn__form-control-set"
|
||||
role="radiogroup"
|
||||
>
|
||||
<div
|
||||
class="pgn__selectable_box"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<input
|
||||
class="pgn__form-radio-input"
|
||||
hidden=""
|
||||
name="testName"
|
||||
tabindex="-1"
|
||||
type="radio"
|
||||
value="1"
|
||||
/>
|
||||
SelectableRadio1
|
||||
</div>
|
||||
<div
|
||||
class="pgn__selectable_box"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<input
|
||||
class="pgn__form-radio-input"
|
||||
hidden=""
|
||||
name="testName"
|
||||
tabindex="-1"
|
||||
type="radio"
|
||||
value="2"
|
||||
/>
|
||||
SelectableRadio2
|
||||
</div>
|
||||
<div
|
||||
class="pgn__selectable_box"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<input
|
||||
class="pgn__form-radio-input"
|
||||
hidden=""
|
||||
name="testName"
|
||||
tabindex="-1"
|
||||
type="radio"
|
||||
value="3"
|
||||
/>
|
||||
SelectableRadio3
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -1,110 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`CoursesFilters snapshot 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="d-flex"
|
||||
>
|
||||
<div
|
||||
class="d-flex flex-row"
|
||||
>
|
||||
<div
|
||||
class="pgn__searchfield d-flex mr-4"
|
||||
data-testid="input-filter-courses-search"
|
||||
>
|
||||
<form
|
||||
class="pgn__searchfield-form"
|
||||
role="search"
|
||||
>
|
||||
<label
|
||||
class="m-0"
|
||||
for="pgn-searchfield-input-1"
|
||||
>
|
||||
<span
|
||||
class="sr-only"
|
||||
>
|
||||
search
|
||||
</span>
|
||||
</label>
|
||||
<div
|
||||
class="pgn__form-control-decorator-group"
|
||||
>
|
||||
<input
|
||||
class="form-control"
|
||||
id="pgn-searchfield-input-1"
|
||||
name="searchfield-input"
|
||||
placeholder="Search"
|
||||
role="searchbox"
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
aria-label="submit search"
|
||||
class="btn-icon btn-icon-primary btn-icon-sm pgn__searchfield__iconbutton-submit"
|
||||
type="submit"
|
||||
>
|
||||
<span
|
||||
class="btn-icon__icon-container"
|
||||
>
|
||||
<span
|
||||
class="pgn__icon btn-icon__icon"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="none"
|
||||
focusable="false"
|
||||
height="24"
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5Zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="pgn__dropdown pgn__dropdown-light dropdown"
|
||||
data-testid="dropdown"
|
||||
id="dropdown-toggle-dropdown-toggle-course-type-menu"
|
||||
>
|
||||
<button
|
||||
alt="dropdown-toggle-menu-items"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="dropdown-toggle-menu-items dropdown-toggle btn btn-none"
|
||||
data-testid="dropdown-toggle-course-type-menu"
|
||||
id="dropdown-toggle-course-type-menu"
|
||||
type="button"
|
||||
>
|
||||
All courses
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="pgn__dropdown pgn__dropdown-light dropdown"
|
||||
data-testid="dropdown"
|
||||
id="dropdown-toggle-dropdown-toggle-courses-order-menu"
|
||||
>
|
||||
<button
|
||||
alt="dropdown-toggle-menu-items"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="dropdown-toggle-menu-items dropdown-toggle btn btn-none"
|
||||
data-testid="dropdown-toggle-courses-order-menu"
|
||||
id="dropdown-toggle-courses-order-menu"
|
||||
type="button"
|
||||
>
|
||||
Name A-Z
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -1,21 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`CoursesFilterMenu snapshot 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="pgn__dropdown pgn__dropdown-light dropdown"
|
||||
data-testid="dropdown"
|
||||
id="dropdown-toggle-course-filter-menu-toggle"
|
||||
>
|
||||
<button
|
||||
alt="dropdown-toggle-menu-items"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="dropdown-toggle-menu-items dropdown-toggle btn btn-none"
|
||||
data-testid="course-filter-menu-toggle"
|
||||
id="course-filter-menu-toggle"
|
||||
type="button"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -51,9 +51,9 @@ describe('CoursesFilterMenu', () => {
|
||||
});
|
||||
});
|
||||
|
||||
it('snapshot', () => {
|
||||
it('renders component', () => {
|
||||
const { container } = renderComponent();
|
||||
expect(container).toMatchSnapshot();
|
||||
expect(container.querySelector('.dropdown')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render without crashing', () => {
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`CoursesTypesFilterMenu snapshot 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="pgn__dropdown pgn__dropdown-light dropdown"
|
||||
data-testid="dropdown"
|
||||
id="dropdown-toggle-dropdown-toggle-courses-order-menu"
|
||||
>
|
||||
<button
|
||||
alt="dropdown-toggle-menu-items"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="dropdown-toggle-menu-items dropdown-toggle btn btn-none"
|
||||
data-testid="dropdown-toggle-courses-order-menu"
|
||||
id="dropdown-toggle-courses-order-menu"
|
||||
type="button"
|
||||
>
|
||||
Name A-Z
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -41,9 +41,9 @@ describe('CoursesTypesFilterMenu', () => {
|
||||
});
|
||||
});
|
||||
|
||||
it('snapshot', () => {
|
||||
const { container } = renderComponent();
|
||||
expect(container).toMatchSnapshot();
|
||||
it('renders component', () => {
|
||||
renderComponent();
|
||||
expect(screen.getByText('Name A-Z')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render without crashing', () => {
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`CoursesTypesFilterMenu snapshot 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="pgn__dropdown pgn__dropdown-light dropdown"
|
||||
data-testid="dropdown"
|
||||
id="dropdown-toggle-dropdown-toggle-course-type-menu"
|
||||
>
|
||||
<button
|
||||
alt="dropdown-toggle-menu-items"
|
||||
aria-expanded="false"
|
||||
aria-haspopup="true"
|
||||
class="dropdown-toggle-menu-items dropdown-toggle btn btn-none"
|
||||
data-testid="dropdown-toggle-course-type-menu"
|
||||
id="dropdown-toggle-course-type-menu"
|
||||
type="button"
|
||||
>
|
||||
All courses
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
@@ -42,9 +42,9 @@ describe('CoursesTypesFilterMenu', () => {
|
||||
});
|
||||
});
|
||||
|
||||
it('snapshot', () => {
|
||||
const { container } = renderComponent();
|
||||
expect(container).toMatchSnapshot();
|
||||
it('renders component', () => {
|
||||
renderComponent();
|
||||
expect(screen.getByText('All courses')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render without crashing', () => {
|
||||
|
||||
@@ -45,9 +45,9 @@ describe('CoursesFilters', () => {
|
||||
});
|
||||
});
|
||||
|
||||
it('snapshot', () => {
|
||||
const { container } = renderComponent();
|
||||
expect(container).toMatchSnapshot();
|
||||
it('renders component', () => {
|
||||
renderComponent();
|
||||
expect(screen.getByText('search')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should render without crashing', () => {
|
||||
|
||||
Reference in New Issue
Block a user