Skip to content
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.

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

Cache test case #79

Open
wants to merge 15 commits into
base: develop
Choose a base branch
from
Open
124 changes: 124 additions & 0 deletions tests/integration/components/self-clear-cache-test.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
import { module, skip } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { click, render, find } from '@ember/test-helpers';
import { hbs } from 'ember-cli-htmlbars';

const EPOCH_TIMESTAMP = 1626242030;
const HUMAN_TIME = 'July 13, 2021 10:53:50 PM IST';
const CACHE_CLEAR_CLICKED = 'CACHE_CLEAR_CLICKED';

module('Integration | Component | self-clear-cache', (hooks) => {
setupRenderingTest(hooks);

skip('it shows last time user cleared the cache', async function (assert) {
assert.expect(1);

// Assemble
this.set('lastTime', EPOCH_TIMESTAMP);

await render(hbs`<SelfClearCache @lastClearedOn={{this.lastTime}} />`);

// Assert
assert.dom('[data-test-last-time]').hasText(HUMAN_TIME);
});

skip('it triggers cache clear on button click', async function (assert) {
assert.expect(1);

// Assemble
this.set('lastTime', EPOCH_TIMESTAMP);

this.set('onCacheClear', function () {
assert.step(CACHE_CLEAR_CLICKED);
});

await render(hbs`
<SelfClearCache
@lastClearedOn={{this.lastTime}}
@onCacheClear={{this.onCacheClear}}
/>
`);

// Act
const btn = find('[data-test-btn-clear-cache]');
await click(btn);

// Assert
assert.verifySteps([CACHE_CLEAR_CLICKED]);
});

skip('it disables button after a click', async function (assert) {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

On what condition it gets enabled again?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had the same doubt, need to ask @ankushdharkar, but probably there will be a fixed time after which the button gets enabled again and it will be handled on the frontend, we need not to test that I guess

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How I think it should be -
Button clicked > Handle Click function calls which disables button & an API request to clear cache > Wait for server to respond > Server responds > Enable button again

Copy link
Contributor

@ankushdharkar ankushdharkar Jun 25, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good questions and suggestions.

We should be testing this on Frontend AND Backend. Backend should always validate and verify the behaviour (otherwise a bad user can just use curl/postman/etc to trigger the API anyway)

The button to be disabled here is to prevent multiple calls from firing (because clearing cache costs us as well as, it will cost crypto to clear your cache in future). We want to ideally make idempotent calls to clear the cache, and we should discuss this. We would have to implement some sort of UUID for this.

You can read more about the solution here: https://stripe.com/docs/api/idempotent_requests, but until then, we should just do a simpler implementation of maybe disabling the button for 5 seconds and move on.

  • Start an RFC for the the idempotent requests setup

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

assert.expect(1);

// Assemble
this.set('lastTime', EPOCH_TIMESTAMP);

this.set('onCacheClear', function () {
assert.step(CACHE_CLEAR_CLICKED);
});

await render(hbs`
<SelfClearCache
@lastClearedOn={{this.lastTime}}
@onCacheClear={{this.onCacheClear}}
/>
`);

// Act
const btn = find('[data-test-btn-clear-cache]');
await click(btn);
rohan09-raj marked this conversation as resolved.
Show resolved Hide resolved
await click(btn); // Another click -- This should not fire
rohan09-raj marked this conversation as resolved.
Show resolved Hide resolved

// Assert
assert.verifySteps([CACHE_CLEAR_CLICKED]);
});

skip('it shows the number of times cache has already been cleared', async function (assert) {
assert.expect(1);

// Assemble
this.set('lastTime', EPOCH_TIMESTAMP);
this.set('totalTimes', 2);
this.set('allowedLimit', 3);

await render(hbs`
<SelfClearCache
@time={{this.lastTime}}
@countCleared={{this.totalTimes}}
@allowedLimit={{this.allowedLimit}}
/>
`);

// Assert
assert.dom('[data-test-pending-requests]').hasText('2 / 3');
});

skip('it disables the button if already reached allowed limit', async function (assert) {
assert.expect(2);

// Assemble
this.set('lastTime', EPOCH_TIMESTAMP);
this.set('totalTimes', 3);
this.set('allowedLimit', 3);

this.set('onCacheClear', function () {
assert.step(CACHE_CLEAR_CLICKED);
});

await render(hbs`
<SelfClearCache
@time={{this.lastTime}}
@countCleared={{this.totalTimes}}
@allowedLimit={{this.allowedLimit}}
@onCacheClear={{this.onCacheClear}}
/>
`);

// Act
const btn = find('[data-test-btn-clear-cache]');
await click(btn);

// Assert
rohan09-raj marked this conversation as resolved.
Show resolved Hide resolved
assert.verifySteps([]);
rohan09-raj marked this conversation as resolved.
Show resolved Hide resolved
});
});