Skip to content
This repository was archived by the owner on Jul 28, 2023. It is now read-only.

Add wp-text directive #173

Merged
SantosGuillamot merged 3 commits into from
Mar 9, 2023
Merged

Add wp-text directive #173

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
084429c
Add `wp-text` directive
SantosGuillamot Mar 8, 2023
2b4244c
Add `wp-text` tests
SantosGuillamot Mar 8, 2023
fc5c9b4
Update title of `wp-text` test
SantosGuillamot Mar 9, 2023
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
32 changes: 32 additions & 0 deletions e2e/html/directives-text.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<title>Directives -- wp-text</title>
<meta itemprop="wp-client-side-navigation" content="active" />
</head>
<body>
<div>
<span wp-text="state.text" data-testid="show state text"></span>
<button
wp-on:click="actions.toggleStateText"
data-testid="toggle state text"
>
Toggle State Text
</button>
</div>

<div wp-context='{ "text": "Text 1" }'>
<span wp-text="context.text" data-testid="show context text"></span>
<button
wp-on:click="actions.toggleContextText"
data-testid="toggle context text"
>
Toggle Context Text
</button>
</div>

<script src="../build/e2e/store.js"></script>
<script src="../build/runtime.js"></script>
<script src="../build/vendors.js"></script>
</body>
</html>
1 change: 0 additions & 1 deletion e2e/specs/directives-show.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ test.describe('wp-show', () => {
});

test('show if callback returns truthy value', async ({ page }) => {
await page.pause();
const el = page.getByTestId('show if callback returns truthy value');
await expect(el).toBeVisible();
});
Expand Down
27 changes: 27 additions & 0 deletions e2e/specs/directives-text.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { test, expect } from '../tests';

test.describe('wp-text', () => {
test.beforeEach(async ({ goToFile }) => {
await goToFile('directives-text.html');
});

test('show proper text reading from state', async ({ page }) => {
await page.pause();
const el = page.getByTestId('show state text');
await expect(el).toHaveText("Text 1");
page.getByTestId('toggle state text').click();
await expect(el).toHaveText("Text 2");
page.getByTestId('toggle state text').click();
await expect(el).toHaveText("Text 1");
});

test('show proper text reading from context', async ({ page }) => {
await page.pause();
const el = page.getByTestId('show context text');
await expect(el).toHaveText("Text 1");
page.getByTestId('toggle context text').click();
await expect(el).toHaveText("Text 2");
page.getByTestId('toggle context text').click();
await expect(el).toHaveText("Text 1");
});
});
11 changes: 11 additions & 0 deletions e2e/store.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ store({
state: {
trueValue: true,
falseValue: false,
text: 'Text 1',
},
derived: {
renderContext: ({ context }) => {
Expand All @@ -26,6 +27,16 @@ store({
const obj = path.reduceRight((o, k) => o[k], context);
obj[key] = value;
},
toggleStateText: ({ state }) => {
state.text === 'Text 1'
? (state.text = 'Text 2')
: (state.text = 'Text 1');
},
toggleContextText: ({ context }) => {
context.text === 'Text 1'
? (context.text = 'Text 2')
: (context.text = 'Text 1');
},
},
});

Expand Down
16 changes: 16 additions & 0 deletions src/runtime/directives.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -198,4 +198,20 @@ export default () => {
);
}
);

// wp-text
directive(
'text',
({
directives: {
text: { default: text },
},
element,
evaluate,
context,
}) => {
const contextValue = useContext(context);
element.props.children = evaluate(text, { context: contextValue });
}
);
};