Skip to content

Add some basic test cases #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: feat/collection
Choose a base branch
from
Open

Add some basic test cases #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8cb5239
Add some basic test cases
alexander-schranz Jul 20, 2022
d6979dc
Update basic test cases
alexander-schranz Jul 20, 2022
71963eb
Update nested collection code snippet
alexander-schranz Jul 20, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion src/Collection/Resources/assets/src/controller.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,6 @@ export default class extends Controller {
createButton(collectionEl: HTMLElement, buttonType: ButtonType): HTMLElement | null {
const attributeName = `${ButtonType[buttonType].toLowerCase()}Button`;
const button = collectionEl.dataset[attributeName] ?? (this.element as HTMLElement).dataset[attributeName];
console.log(button);

// Button explicitly disabled through data attribute
if ('' === button) return null;
Expand Down
127 changes: 120 additions & 7 deletions src/Collection/Resources/assets/test/controller.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
'use strict';

import { Application } from '@hotwired/stimulus';
import { getByTestId } from '@testing-library/dom';
import {fireEvent, getByTestId, getByText, waitFor} from '@testing-library/dom';
import { clearDOM, mountDOM } from '@symfony/stimulus-testing';
import CollectionController from '../src/controller';

Expand All @@ -19,22 +19,135 @@ const startStimulus = () => {
application.register('symfony--ux-collection--collection', CollectionController);
};

const emptyCollection = '<div data-testid="collection" data-controller="symfony--ux-collection--collection"></div>';

const simpleCollectionWithoutButtons = '' +
'<form name="game" method="post" data-controller="symfony--ux-collection--collection">' +
' <div id="game">' +
' <div>' +
' <label class="required">Teams</label>' +
' <div id="game_teams" data-prototype="&lt;div class=&quot;team-entry&quot;&gt;&lt;label class=&quot;required&quot;&gt;__name__label__&lt;/label&gt;&lt;div id=&quot;game_teams___name__&quot;&gt;&lt;div&gt;&lt;label for=&quot;game_teams___name___name&quot; class=&quot;required&quot;&gt;Name&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;game_teams___name___name&quot; name=&quot;game[teams][__name__][name]&quot; required=&quot;required&quot; data-controller=&quot;test&quot; /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;">' +
' </div>' +
' </div>' +
' <div>' +
' <button type="submit" id="game_submit" name="game[submit]">Submit</button>' +
' </div>' +
'</form>'

const simpleCollection = '' +
' <template id="addButton">' +
' <button type="button" class="add-button">Add button</button>' +
' </template>' +
'' +
' <template id="deleteButton">' +
' <button type="button" class="delete-button">Delete button</button>' +
' </template>' +
'' +
'<form name="game" method="post" data-controller="symfony--ux-collection--collection" data-add-button="addButton" data-delete-button="deleteButton">' +
' <div id="game">' +
' <div>' +
' <label class="required">Teams</label>' +
' <div id="game_teams" data-prototype="&lt;div class=&quot;team-entry&quot;&gt;&lt;label class=&quot;required&quot;&gt;__name__label__&lt;/label&gt;&lt;div id=&quot;game_teams___name__&quot;&gt;&lt;div&gt;&lt;label for=&quot;game_teams___name___name&quot; class=&quot;required&quot;&gt;Name&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;game_teams___name___name&quot; name=&quot;game[teams][__name__][name]&quot; required=&quot;required&quot; data-controller=&quot;test&quot; /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;">' +
' </div>' +
' </div>' +
' <div>' +
' <button type="submit" id="game_submit" name="game[submit]">Submit</button>' +
' </div>' +
'</form>'

const nestedCollection = '' +
' <template id="addButton">' +
' <button type="button" class="add-button">Add button</button>' +
' </template>' +
'' +
' <template id="deleteButton">' +
' <button type="button" class="delete-button">Delete button</button>' +
' </template>' +
'' +
'<form name="game" method="post" data-controller="symfony--ux-collection--collection" data-add-button="addButton" data-delete-button="deleteButton">' +
' <div id="game">' +
' <div>' +
' <label class="required">Teams</label>' +
' <div id="game_teams" data-prototype="&lt;div class=&quot;team-entry&quot;&gt;&lt;label class=&quot;required&quot;&gt;__name__label__&lt;/label&gt;&lt;div id=&quot;game_teams___name__&quot;&gt;&lt;div&gt;&lt;label for=&quot;game_teams___name___name&quot; class=&quot;required&quot;&gt;Name&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;game_teams___name___name&quot; name=&quot;game[teams][__name__][name]&quot; required=&quot;required&quot; data-controller=&quot;test&quot; /&gt;&lt;/div&gt;&lt;div&gt;&lt;label class=&quot;required&quot;&gt;Players&lt;/label&gt;&lt;div id=&quot;game_teams___name___players&quot; data-prototype=&quot;&amp;lt;div class=&amp;&quot;player-entry&amp;&quot;&amp;gt;&amp;lt;label class=&amp;quot;required&amp;quot;&amp;gt;__name__label__&amp;lt;/label&amp;gt;&amp;lt;div id=&amp;quot;game_teams___name___players___name__&amp;quot;&amp;gt;&amp;lt;div&amp;gt;&amp;lt;label for=&amp;quot;game_teams___name___players___name___firstName&amp;quot; class=&amp;quot;required&amp;quot;&amp;gt;First name&amp;lt;/label&amp;gt;&amp;lt;input type=&amp;quot;text&amp;quot; id=&amp;quot;game_teams___name___players___name___firstName&amp;quot; name=&amp;quot;game[teams][__name__][players][__name__][firstName]&amp;quot; required=&amp;quot;required&amp;quot; /&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;div&amp;gt;&amp;lt;label for=&amp;quot;game_teams___name___players___name___lastName&amp;quot; class=&amp;quot;required&amp;quot;&amp;gt;Last name&amp;lt;/label&amp;gt;&amp;lt;input type=&amp;quot;text&amp;quot; id=&amp;quot;game_teams___name___players___name___lastName&amp;quot; name=&amp;quot;game[teams][__name__][players][__name__][lastName]&amp;quot; required=&amp;quot;required&amp;quot; /&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;/div&amp;gt;&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;">' +
' </div>' +
' </div>' +
' <div>' +
' <button type="submit" id="game_submit" name="game[submit]">Submit</button>' +
' </div>' +
'</form>'

/* eslint-disable no-undef */
describe('CollectionController', () => {
let container: any;

beforeEach(() => {
container = mountDOM('<div data-testid="collection" data-controller="symfony--ux-collection--collection"></div>');
});
startStimulus();

afterEach(() => {
clearDOM();
});

it('connects', async () => {
startStimulus();
const container = mountDOM(emptyCollection);

// smoke test
expect(getByTestId(container, 'collection')).toHaveAttribute('data-controller', 'symfony--ux-collection--collection');
});

it('should create a add button when no button given', async () => {
const container = mountDOM(simpleCollectionWithoutButtons);

const element = await waitFor(() => getByText(container, 'Add'));

expect(element).toBeInTheDocument();
});

it('should create a add button when button is given', async () => {
const container = mountDOM(simpleCollection);

const element = await waitFor(() => getByText(container, 'Add button'));

expect(element).toBeInTheDocument();
});

it('should create new collection on click on add button', async () => {
const container = mountDOM(simpleCollection);

await waitFor(() => getByText(container, 'Add button'));

fireEvent(
getByText(container, 'Add button'),
new MouseEvent('click', {
bubbles: true,
cancelable: true,
}),
)

expect(container.querySelectorAll('.team-entry').length).toBe(1);
});

it('should remove collection on click on delete button', async () => {
const container = mountDOM(simpleCollection);

await waitFor(() => getByText(container, 'Add button'));

fireEvent(
getByText(container, 'Add button'),
new MouseEvent('click', {
bubbles: true,
cancelable: true,
}),
)

expect(container.querySelectorAll('.team-entry').length).toBe(1);

await waitFor(() => getByText(container, 'Delete button'));

fireEvent(
getByText(container, 'Delete button'),
new MouseEvent('click', {
bubbles: true,
cancelable: true,
}),
)

expect(container.querySelectorAll('.team-entry').length).toBe(0);
});
});